components.d.ts

/* 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/core/internal";
import { AccordionGroupChangeEventDetail } from "./components/accordion-group/accordion-group-interface";
import { AnimationBuilder, AutocompleteTypes, Color, ComponentProps, ComponentRef, FrameworkDelegate, StyleEventDetail, TextFieldTypes } from "./interface";
import { ActionSheetButton } from "./components/action-sheet/action-sheet-interface";
import { OverlayEventDetail } from "./utils/overlays-interface";
import { IonicSafeString } from "./utils/sanitization";
import { AlertButton, AlertInput } from "./components/alert/alert-interface";
import { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./components/router/utils/interface";
import { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
import { SpinnerTypes } from "./components/spinner/spinner-configs";
import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
import { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from "./components/input-otp/input-otp-interface";
import { MenuChangeEventDetail, MenuCloseEventDetail, MenuType, Side } from "./components/menu/menu-interface";
import { ModalBreakpointChangeEventDetail, ModalDragEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
import { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
import { ViewController } from "./components/nav/view-controller";
import { PickerChangeEventDetail } from "./components/picker/picker-interfaces";
import { PickerColumnChangeEventDetail, PickerColumnValue } from "./components/picker-column/picker-column-interfaces";
import { PickerButton, PickerColumn } from "./components/picker-legacy/picker-interface";
import { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface";
import { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface";
import { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
import { RefresherEventDetail, RefresherPullEndEventDetail } from "./components/refresher/refresher-interface";
import { ItemReorderEventDetail, ReorderEndEventDetail, ReorderMoveEventDetail } from "./components/reorder-group/reorder-group-interface";
import { NavigationHookCallback } from "./components/route/route-interface";
import { SearchbarChangeEventDetail, SearchbarInputEventDetail } from "./components/searchbar/searchbar-interface";
import { SegmentChangeEventDetail, SegmentValue } from "./components/segment/segment-interface";
import { SegmentButtonLayout } from "./components/segment-button/segment-button-interface";
import { SegmentViewScrollEvent } from "./components/segment-view/segment-view-interface";
import { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
import { SelectModalOption } from "./components/select-modal/select-modal-interface";
import { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
import { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
import { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
import { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions, ToastSwipeGestureDirection } from "./components/toast/toast-interface";
import { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
export { AccordionGroupChangeEventDetail } from "./components/accordion-group/accordion-group-interface";
export { AnimationBuilder, AutocompleteTypes, Color, ComponentProps, ComponentRef, FrameworkDelegate, StyleEventDetail, TextFieldTypes } from "./interface";
export { ActionSheetButton } from "./components/action-sheet/action-sheet-interface";
export { OverlayEventDetail } from "./utils/overlays-interface";
export { IonicSafeString } from "./utils/sanitization";
export { AlertButton, AlertInput } from "./components/alert/alert-interface";
export { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./components/router/utils/interface";
export { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
export { SpinnerTypes } from "./components/spinner/spinner-configs";
export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
export { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from "./components/input-otp/input-otp-interface";
export { MenuChangeEventDetail, MenuCloseEventDetail, MenuType, Side } from "./components/menu/menu-interface";
export { ModalBreakpointChangeEventDetail, ModalDragEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
export { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
export { ViewController } from "./components/nav/view-controller";
export { PickerChangeEventDetail } from "./components/picker/picker-interfaces";
export { PickerColumnChangeEventDetail, PickerColumnValue } from "./components/picker-column/picker-column-interfaces";
export { PickerButton, PickerColumn } from "./components/picker-legacy/picker-interface";
export { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface";
export { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface";
export { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
export { RefresherEventDetail, RefresherPullEndEventDetail } from "./components/refresher/refresher-interface";
export { ItemReorderEventDetail, ReorderEndEventDetail, ReorderMoveEventDetail } from "./components/reorder-group/reorder-group-interface";
export { NavigationHookCallback } from "./components/route/route-interface";
export { SearchbarChangeEventDetail, SearchbarInputEventDetail } from "./components/searchbar/searchbar-interface";
export { SegmentChangeEventDetail, SegmentValue } from "./components/segment/segment-interface";
export { SegmentButtonLayout } from "./components/segment-button/segment-button-interface";
export { SegmentViewScrollEvent } from "./components/segment-view/segment-view-interface";
export { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
export { SelectModalOption } from "./components/select-modal/select-modal-interface";
export { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
export { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
export { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
export { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions, ToastSwipeGestureDirection } from "./components/toast/toast-interface";
export { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
export namespace Components {
    interface IonAccordion {
        /**
          * If `true`, the accordion cannot be interacted with.
          * @default false
         */
        "disabled": boolean;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * If `true`, the accordion cannot be interacted with, but does not alter the opacity.
          * @default false
         */
        "readonly": boolean;
        /**
          * The toggle icon to use. This icon will be rotated when the accordion is expanded or collapsed.
          * @default chevronDown
         */
        "toggleIcon": string;
        /**
          * The slot inside of `ion-item` to place the toggle icon. Defaults to `"end"`.
          * @default 'end'
         */
        "toggleIconSlot": 'start' | 'end';
        /**
          * The value of the accordion. Defaults to an autogenerated value.
          * @default `ion-accordion-${accordionIds++}`
         */
        "value": string;
    }
    interface IonAccordionGroup {
        /**
          * If `true`, all accordions inside of the accordion group will animate when expanding or collapsing.
          * @default true
         */
        "animated": boolean;
        /**
          * If `true`, the accordion group cannot be interacted with.
          * @default false
         */
        "disabled": boolean;
        /**
          * Describes the expansion behavior for each accordion. Possible values are `"compact"` and `"inset"`. Defaults to `"compact"`.
          * @default 'compact'
         */
        "expand": 'compact' | 'inset';
        "getAccordions": () => Promise<HTMLIonAccordionElement[]>;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * If `true`, the accordion group can have multiple accordion components expanded at the same time.
         */
        "multiple"?: boolean;
        /**
          * If `true`, the accordion group cannot be interacted with, but does not alter the opacity.
          * @default false
         */
        "readonly": boolean;
        /**
          * This method is used to ensure that the value of ion-accordion-group is being set in a valid way. This method should only be called in response to a user generated action.
         */
        "requestAccordionToggle": (accordionValue: string | undefined, accordionExpand: boolean) => Promise<void>;
        /**
          * The value of the accordion group. This controls which accordions are expanded. This should be an array of strings only when `multiple="true"`
         */
        "value"?: string | string[] | null;
    }
    interface IonActionSheet {
        /**
          * If `true`, the action sheet will animate.
          * @default true
         */
        "animated": boolean;
        /**
          * If `true`, the action sheet will be dismissed when the backdrop is clicked.
          * @default true
         */
        "backdropDismiss": boolean;
        /**
          * An array of buttons for the action sheet.
          * @default []
         */
        "buttons": (ActionSheetButton | string)[];
        /**
          * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
         */
        "cssClass"?: string | string[];
        "delegate"?: FrameworkDelegate;
        /**
          * Dismiss the action sheet overlay after it has been presented. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
          * @param data Any data to emit in the dismiss events.
          * @param role The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
         */
        "dismiss": (data?: any, role?: string) => Promise<boolean>;
        /**
          * Animation to use when the action sheet is presented.
         */
        "enterAnimation"?: AnimationBuilder;
        /**
          * @default false
         */
        "hasController": boolean;
        /**
          * Title for the action sheet.
         */
        "header"?: string;
        /**
          * Additional attributes to pass to the action sheet.
         */
        "htmlAttributes"?: { [key: string]: any };
        /**
          * If `true`, the action sheet will open. If `false`, the action sheet will close. Use this if you need finer grained control over presentation, otherwise just use the actionSheetController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the action sheet dismisses. You will need to do that in your code.
          * @default false
         */
        "isOpen": boolean;
        /**
          * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          * @default true
         */
        "keyboardClose": boolean;
        /**
          * Animation to use when the action sheet is dismissed.
         */
        "leaveAnimation"?: AnimationBuilder;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Returns a promise that resolves when the action sheet did dismiss.
         */
        "onDidDismiss": <T = any>() => Promise<OverlayEventDetail<T>>;
        /**
          * Returns a promise that resolves when the action sheet will dismiss.
         */
        "onWillDismiss": <T = any>() => Promise<OverlayEventDetail<T>>;
        "overlayIndex": number;
        /**
          * Present the action sheet overlay after it has been created.
         */
        "present": () => Promise<void>;
        /**
          * Subtitle for the action sheet.
         */
        "subHeader"?: string;
        /**
          * If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          * @default false
         */
        "translucent": boolean;
        /**
          * An ID corresponding to the trigger element that causes the action sheet to open when clicked.
         */
        "trigger": string | undefined;
    }
    interface IonAlert {
        /**
          * If `true`, the alert will animate.
          * @default true
         */
        "animated": boolean;
        /**
          * If `true`, the alert will be dismissed when the backdrop is clicked.
          * @default true
         */
        "backdropDismiss": boolean;
        /**
          * Array of buttons to be added to the alert.
          * @default []
         */
        "buttons": (AlertButton | string)[];
        /**
          * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
         */
        "cssClass"?: string | string[];
        "delegate"?: FrameworkDelegate;
        /**
          * Dismiss the alert overlay after it has been presented. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
          * @param data Any data to emit in the dismiss events.
          * @param role The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
         */
        "dismiss": (data?: any, role?: string) => Promise<boolean>;
        /**
          * Animation to use when the alert is presented.
         */
        "enterAnimation"?: AnimationBuilder;
        /**
          * @default false
         */
        "hasController": boolean;
        /**
          * The main title in the heading of the alert.
         */
        "header"?: string;
        /**
          * Additional attributes to pass to the alert.
         */
        "htmlAttributes"?: { [key: string]: any };
        /**
          * Array of input to show in the alert.
          * @default []
         */
        "inputs": AlertInput[];
        /**
          * If `true`, the alert will open. If `false`, the alert will close. Use this if you need finer grained control over presentation, otherwise just use the alertController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the alert dismisses. You will need to do that in your code.
          * @default false
         */
        "isOpen": boolean;
        /**
          * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          * @default true
         */
        "keyboardClose": boolean;
        /**
          * Animation to use when the alert is dismissed.
         */
        "leaveAnimation"?: AnimationBuilder;
        /**
          * The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Content is parsed as plaintext by default. `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config before custom HTML can be used.
         */
        "message"?: string | IonicSafeString;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Returns a promise that resolves when the alert did dismiss.
         */
        "onDidDismiss": <T = any>() => Promise<OverlayEventDetail<T>>;
        /**
          * Returns a promise that resolves when the alert will dismiss.
         */
        "onWillDismiss": <T = any>() => Promise<OverlayEventDetail<T>>;
        "overlayIndex": number;
        /**
          * Present the alert overlay after it has been created.
         */
        "present": () => Promise<void>;
        /**
          * The subtitle in the heading of the alert. Displayed under the title.
         */
        "subHeader"?: string;
        /**
          * If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          * @default false
         */
        "translucent": boolean;
        /**
          * An ID corresponding to the trigger element that causes the alert to open when clicked.
         */
        "trigger": string | undefined;
    }
    interface IonApp {
        /**
          * Used to set focus on an element that uses `ion-focusable`. Do not use this if focusing the element as a result of a keyboard event as the focus utility should handle this for us. This method should be used when we want to programmatically focus an element as a result of another user action. (Ex: We focus the first element inside of a popover when the user presents it, but the popover is not always presented as a result of keyboard action.)
          * @param elements An array of HTML elements to set focus on.
         */
        "setFocus": (elements: HTMLElement[]) => Promise<void>;
    }
    interface IonAvatar {
    }
    interface IonBackButton {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The url to navigate back to by default when there is no history.
         */
        "defaultHref"?: string;
        /**
          * If `true`, the user cannot interact with the button.
          * @default false
         */
        "disabled": boolean;
        /**
          * The built-in named SVG icon name or the exact `src` of an SVG file to use for the back button.
         */
        "icon"?: string | null;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * When using a router, it specifies the transition animation when navigating to another page.
         */
        "routerAnimation": AnimationBuilder | undefined;
        /**
          * The text to display in the back button.
         */
        "text"?: string | null;
        /**
          * The type of the button.
          * @default 'button'
         */
        "type": 'submit' | 'reset' | 'button';
    }
    interface IonBackdrop {
        /**
          * If `true`, the backdrop will stop propagation on tap.
          * @default true
         */
        "stopPropagation": boolean;
        /**
          * If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.
          * @default true
         */
        "tappable": boolean;
        /**
          * If `true`, the backdrop will be visible.
          * @default true
         */
        "visible": boolean;
    }
    interface IonBadge {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
    }
    interface IonBreadcrumb {
        /**
          * If `true`, the breadcrumb will take on a different look to show that it is the currently active breadcrumb. Defaults to `true` for the last breadcrumb if it is not set on any.
          * @default false
         */
        "active": boolean;
        /**
          * @default false
         */
        "collapsed": boolean;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the breadcrumb.
          * @default false
         */
        "disabled": boolean;
        /**
          * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
         */
        "download": string | undefined;
        /**
          * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
         */
        "href": string | undefined;
        "last": boolean;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
         */
        "rel": string | undefined;
        /**
          * When using a router, it specifies the transition animation when navigating to another page using `href`.
         */
        "routerAnimation": AnimationBuilder | undefined;
        /**
          * When using a router, it specifies the transition direction when navigating to another page using `href`.
          * @default 'forward'
         */
        "routerDirection": RouterDirection;
        /**
          * If true, show a separator between this breadcrumb and the next. Defaults to `true` for all breadcrumbs except the last.
         */
        "separator"?: boolean | undefined;
        "showCollapsedIndicator": boolean;
        /**
          * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
         */
        "target": string | undefined;
    }
    interface IonBreadcrumbs {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The number of breadcrumbs to show after the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed.
          * @default 1
         */
        "itemsAfterCollapse": number;
        /**
          * The number of breadcrumbs to show before the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed.
          * @default 1
         */
        "itemsBeforeCollapse": number;
        /**
          * The maximum number of breadcrumbs to show before collapsing.
         */
        "maxItems"?: number;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
    }
    interface IonButton {
        /**
          * The type of button.
          * @default 'button'
         */
        "buttonType": string;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the button.
          * @default false
         */
        "disabled": boolean;
        /**
          * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
         */
        "download": string | undefined;
        /**
          * Set to `"block"` for a full-width button or to `"full"` for a full-width button with square corners and no left or right borders.
         */
        "expand"?: 'full' | 'block';
        /**
          * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"` for a transparent button with a border, or to `"solid"` for a button with a filled background. The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`.
         */
        "fill"?: 'clear' | 'outline' | 'solid' | 'default';
        /**
          * The HTML form element or form element id. Used to submit a form when the button is not a child of the form.
         */
        "form"?: string | HTMLFormElement;
        /**
          * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
         */
        "href": string | undefined;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
         */
        "rel": string | undefined;
        /**
          * When using a router, it specifies the transition animation when navigating to another page using `href`.
         */
        "routerAnimation": AnimationBuilder | undefined;
        /**
          * When using a router, it specifies the transition direction when navigating to another page using `href`.
          * @default 'forward'
         */
        "routerDirection": RouterDirection;
        /**
          * Set to `"round"` for a button with more rounded corners.
         */
        "shape"?: 'round';
        /**
          * Set to `"small"` for a button with less height and padding, to `"default"` for a button with the default height and padding, or to `"large"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `"small"` by default. Set the size to `"default"` inside of an item to make it a standard size button.
         */
        "size"?: 'small' | 'default' | 'large';
        /**
          * If `true`, activates a button with a heavier font weight.
          * @default false
         */
        "strong": boolean;
        /**
          * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
         */
        "target": string | undefined;
        /**
          * The type of the button.
          * @default 'button'
         */
        "type": 'submit' | 'reset' | 'button';
    }
    interface IonButtons {
        /**
          * If true, buttons will disappear when its parent toolbar has fully collapsed if the toolbar is not the first toolbar. If the toolbar is the first toolbar, the buttons will be hidden and will only be shown once all toolbars have fully collapsed.  Only applies in `ios` mode with `collapse` set to `true` on `ion-header`.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
          * @default false
         */
        "collapse": boolean;
    }
    interface IonCard {
        /**
          * If `true`, a button tag will be rendered and the card will be tappable.
          * @default false
         */
        "button": boolean;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the card.
          * @default false
         */
        "disabled": boolean;
        /**
          * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
         */
        "download": string | undefined;
        /**
          * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
         */
        "href": string | undefined;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
         */
        "rel": string | undefined;
        /**
          * When using a router, it specifies the transition animation when navigating to another page using `href`.
         */
        "routerAnimation": AnimationBuilder | undefined;
        /**
          * When using a router, it specifies the transition direction when navigating to another page using `href`.
          * @default 'forward'
         */
        "routerDirection": RouterDirection;
        /**
          * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
         */
        "target": string | undefined;
        /**
          * The type of the button. Only used when an `onclick` or `button` property is present.
          * @default 'button'
         */
        "type": 'submit' | 'reset' | 'button';
    }
    interface IonCardContent {
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
    }
    interface IonCardHeader {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * If `true`, the card header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          * @default false
         */
        "translucent": boolean;
    }
    interface IonCardSubtitle {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
    }
    interface IonCardTitle {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
    }
    interface IonCheckbox {
        /**
          * How to control the alignment of the checkbox and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the checkbox `display` to `block`.
         */
        "alignment"?: 'start' | 'center';
        /**
          * If `true`, the checkbox is selected.
          * @default false
         */
        "checked": boolean;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the checkbox.
          * @default false
         */
        "disabled": boolean;
        /**
          * Text that is placed under the checkbox label and displayed when an error is detected.
         */
        "errorText"?: string;
        /**
          * Text that is placed under the checkbox label and displayed when no error is detected.
         */
        "helperText"?: string;
        /**
          * If `true`, the checkbox will visually appear as indeterminate.
          * @default false
         */
        "indeterminate": boolean;
        /**
          * How to pack the label and checkbox within a line. `"start"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `"end"`: The label and checkbox will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and checkbox will appear on opposite ends of the line with space between the two elements. Setting this property will change the checkbox `display` to `block`.
         */
        "justify"?: 'start' | 'end' | 'space-between';
        /**
          * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          * @default 'start'
         */
        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * The name of the control, which is submitted with the form data.
          * @default this.inputId
         */
        "name": string;
        /**
          * If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid.
          * @default false
         */
        "required": boolean;
        "setFocus": () => Promise<void>;
        /**
          * The value of the checkbox does not mean if it's checked or not, use the `checked` property for that.  The value of a checkbox is analogous to the value of an `<input type="checkbox">`, it's only used when the checkbox participates in a native `<form>`.
          * @default 'on'
         */
        "value": any | null;
    }
    interface IonChip {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the chip.
          * @default false
         */
        "disabled": boolean;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Display an outline style button.
          * @default false
         */
        "outline": boolean;
    }
    interface IonCol {
        /**
          * The amount to offset the column, in terms of how many columns it should shift to the end of the total available.
         */
        "offset"?: string;
        /**
          * The amount to offset the column for lg screens, in terms of how many columns it should shift to the end of the total available.
         */
        "offsetLg"?: string;
        /**
          * The amount to offset the column for md screens, in terms of how many columns it should shift to the end of the total available.
         */
        "offsetMd"?: string;
        /**
          * The amount to offset the column for sm screens, in terms of how many columns it should shift to the end of the total available.
         */
        "offsetSm"?: string;
        /**
          * The amount to offset the column for xl screens, in terms of how many columns it should shift to the end of the total available.
         */
        "offsetXl"?: string;
        /**
          * The amount to offset the column for xs screens, in terms of how many columns it should shift to the end of the total available.
         */
        "offsetXs"?: string;
        /**
          * The amount to pull the column, in terms of how many columns it should shift to the start of the total available.
         */
        "pull"?: string;
        /**
          * The amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available.
         */
        "pullLg"?: string;
        /**
          * The amount to pull the column for md screens, in terms of how many columns it should shift to the start of the total available.
         */
        "pullMd"?: string;
        /**
          * The amount to pull the column for sm screens, in terms of how many columns it should shift to the start of the total available.
         */
        "pullSm"?: string;
        /**
          * The amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available.
         */
        "pullXl"?: string;
        /**
          * The amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available.
         */
        "pullXs"?: string;
        /**
          * The amount to push the column, in terms of how many columns it should shift to the end of the total available.
         */
        "push"?: string;
        /**
          * The amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available.
         */
        "pushLg"?: string;
        /**
          * The amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available.
         */
        "pushMd"?: string;
        /**
          * The amount to push the column for sm screens, in terms of how many columns it should shift to the end of the total available.
         */
        "pushSm"?: string;
        /**
          * The amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available.
         */
        "pushXl"?: string;
        /**
          * The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available.
         */
        "pushXs"?: string;
        /**
          * The size of the column, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
         */
        "size"?: string;
        /**
          * The size of the column for lg screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
         */
        "sizeLg"?: string;
        /**
          * The size of the column for md screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
         */
        "sizeMd"?: string;
        /**
          * The size of the column for sm screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
         */
        "sizeSm"?: string;
        /**
          * The size of the column for xl screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
         */
        "sizeXl"?: string;
        /**
          * The size of the column for xs screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
         */
        "sizeXs"?: string;
    }
    interface IonContent {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * Controls where the fixed content is placed relative to the main content in the DOM. This can be used to control the order in which fixed elements receive keyboard focus. For example, if a FAB in the fixed slot should receive keyboard focus before the main page content, set this property to `'before'`.
          * @default 'after'
         */
        "fixedSlotPlacement": 'after' | 'before';
        /**
          * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting.
         */
        "forceOverscroll"?: boolean;
        /**
          * If `true`, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent.
          * @default false
         */
        "fullscreen": boolean;
        /**
          * Returns the background content element.
         */
        "getBackgroundElement": () => Promise<HTMLElement>;
        /**
          * Get the element where the actual scrolling takes place. This element can be used to subscribe to `scroll` events or manually modify `scrollTop`. However, it's recommended to use the API provided by `ion-content`:  i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events and `scrollToPoint()` to scroll the content into a certain point.
         */
        "getScrollElement": () => Promise<HTMLElement>;
        /**
          * Recalculate content dimensions. Called by overlays (e.g., popover) when sibling elements like headers or footers have finished rendering and their heights are available, ensuring accurate offset-top calculations.
         */
        "recalculateDimensions": () => Promise<void>;
        /**
          * Scroll by a specified X/Y distance in the component.
          * @param x The amount to scroll by on the horizontal axis.
          * @param y The amount to scroll by on the vertical axis.
          * @param duration The amount of time to take scrolling by that amount.
         */
        "scrollByPoint": (x: number, y: number, duration: number) => Promise<void>;
        /**
          * Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to `true`.
          * @default false
         */
        "scrollEvents": boolean;
        /**
          * Scroll to the bottom of the component.
          * @param duration The amount of time to take scrolling to the bottom. Defaults to `0`.
         */
        "scrollToBottom": (duration?: number) => Promise<void>;
        /**
          * Scroll to a specified X/Y location in the component.
          * @param x The point to scroll to on the horizontal axis.
          * @param y The point to scroll to on the vertical axis.
          * @param duration The amount of time to take scrolling to that point. Defaults to `0`.
         */
        "scrollToPoint": (x: number | undefined | null, y: number | undefined | null, duration?: number) => Promise<void>;
        /**
          * Scroll to the top of the component.
          * @param duration The amount of time to take scrolling to the top. Defaults to `0`.
         */
        "scrollToTop": (duration?: number) => Promise<void>;
        /**
          * If you want to enable the content scrolling in the X axis, set this property to `true`.
          * @default false
         */
        "scrollX": boolean;
        /**
          * If you want to disable the content scrolling in the Y axis, set this property to `false`.
          * @default true
         */
        "scrollY": boolean;
    }
    interface IonDatetime {
        /**
          * Emits the ionCancel event and optionally closes the popover or modal that the datetime was presented in.
          * @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
         */
        "cancel": (closeOverlay?: boolean) => Promise<void>;
        /**
          * The text to display on the picker's cancel button.
          * @default 'Cancel'
         */
        "cancelText": string;
        /**
          * The text to display on the picker's "Clear" button.
          * @default 'Clear'
         */
        "clearText": string;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          * @default 'primary'
         */
        "color"?: Color;
        /**
          * Confirms the selected datetime value, updates the `value` property, and optionally closes the popover or modal that the datetime was presented in.
          * @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
         */
        "confirm": (closeOverlay?: boolean) => Promise<void>;
        /**
          * Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month.
         */
        "dayValues"?: number[] | number | string;
        /**
          * If `true`, the user cannot interact with the datetime.
          * @default false
         */
        "disabled": boolean;
        /**
          * The text to display on the picker's "Done" button.
          * @default 'Done'
         */
        "doneText": string;
        /**
          * The first day of the week to use for `ion-datetime`. The default value is `0` and represents Sunday.
          * @default 0
         */
        "firstDayOfWeek": number;
        /**
          * Formatting options for dates and times. Should include a 'date' and/or 'time' object, each of which is of type [Intl.DateTimeFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options).
         */
        "formatOptions"?: FormatOptions;
        /**
          * Used to apply custom text and background colors to specific dates.  Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors.  Only applies to the `date`, `date-time`, and `time-date` presentations, with `preferWheel="false"`.
         */
        "highlightedDates"?: DatetimeHighlight[] | DatetimeHighlightCallback;
        /**
          * The hour cycle of the `ion-datetime`. If no value is set, this is specified by the current locale.
         */
        "hourCycle"?: DatetimeHourCycle;
        /**
          * Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers.
         */
        "hourValues"?: number[] | number | string;
        /**
          * Returns if an individual date (calendar day) is enabled or disabled.  If `true`, the day will be enabled/interactive. If `false`, the day will be disabled/non-interactive.  The function accepts an ISO 8601 date string of a given day. By default, all days are enabled. Developers can use this function to write custom logic to disable certain days.  The function is called for each rendered calendar day, for the previous, current and next month. Custom implementations should be optimized for performance to avoid jank.
         */
        "isDateEnabled"?: (dateIsoString: string) => boolean;
        /**
          * The locale to use for `ion-datetime`. This impacts month and day name formatting. The `"default"` value refers to the default locale set by your device.
          * @default 'default'
         */
        "locale": string;
        /**
          * The maximum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as `1994`. Defaults to the end of this year.
         */
        "max"?: string;
        /**
          * The minimum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), such as `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as `1994`. Defaults to the beginning of the year, 100 years ago from today.
         */
        "min"?: string;
        /**
          * Values used to create the list of selectable minutes. By default the minutes range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be `minuteValues="0,15,30,45"`.
         */
        "minuteValues"?: number[] | number | string;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`.
         */
        "monthValues"?: number[] | number | string;
        /**
          * If `true`, multiple dates can be selected at once. Only applies to `presentation="date"` and `preferWheel="false"`.
          * @default false
         */
        "multiple": boolean;
        /**
          * The name of the control, which is submitted with the form data.
          * @default this.inputId
         */
        "name": string;
        /**
          * If `true`, a wheel picker will be rendered instead of a calendar grid where possible. If `false`, a calendar grid will be rendered instead of a wheel picker where possible.  A wheel picker can be rendered instead of a grid when `presentation` is one of the following values: `"date"`, `"date-time"`, or `"time-date"`.  A wheel picker will always be rendered regardless of the `preferWheel` value when `presentation` is one of the following values: `"time"`, `"month"`, `"month-year"`, or `"year"`.
          * @default false
         */
        "preferWheel": boolean;
        /**
          * Which values you want to select. `"date"` will show a calendar picker to select the month, day, and year. `"time"` will show a time picker to select the hour, minute, and (optionally) AM/PM. `"date-time"` will show the date picker first and time picker second. `"time-date"` will show the time picker first and date picker second.
          * @default 'date-time'
         */
        "presentation": DatetimePresentation;
        /**
          * If `true`, the datetime appears normal but the selected date cannot be changed.
          * @default false
         */
        "readonly": boolean;
        /**
          * Resets the internal state of the datetime but does not update the value. Passing a valid ISO-8601 string will reset the state of the component to the provided date. If no value is provided, the internal state will be reset to the clamped value of the min, max and today.
          * @param startDate A valid [ISO-8601 string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format) to reset the datetime state to.
         */
        "reset": (startDate?: string) => Promise<void>;
        /**
          * If `true`, the datetime calendar displays a six-week (42-day) layout, including days from the previous and next months to fill the grid. These adjacent days are selectable unless disabled.
          * @default false
         */
        "showAdjacentDays": boolean;
        /**
          * If `true`, a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.
          * @default false
         */
        "showClearButton": boolean;
        /**
          * If `true`, the default "Cancel" and "OK" buttons will be rendered at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.
          * @default false
         */
        "showDefaultButtons": boolean;
        /**
          * If `true`, the default "Time" label will be rendered for the time selector of the `ion-datetime` component. Developers can also use the `time-label` slot if they want to customize this label. If a custom label is set in the `time-label` slot then the default label will not be rendered.
          * @default true
         */
        "showDefaultTimeLabel": boolean;
        /**
          * If `true`, a header will be shown above the calendar picker. This will include both the slotted title, and the selected date.
          * @default false
         */
        "showDefaultTitle": boolean;
        /**
          * If `cover`, the `ion-datetime` will expand to cover the full width of its container. If `fixed`, the `ion-datetime` will have a fixed width.
          * @default 'fixed'
         */
        "size": 'cover' | 'fixed';
        /**
          * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
         */
        "titleSelectedDatesFormatter"?: TitleSelectedDatesFormatter;
        /**
          * The value of the datetime as a valid ISO 8601 datetime string. This should be an array of strings only when `multiple="true"`.
         */
        "value"?: string | string[] | null;
        /**
          * Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2008,2012,2016,2020,2024"`.
         */
        "yearValues"?: number[] | number | string;
    }
    interface IonDatetimeButton {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          * @default 'primary'
         */
        "color"?: Color;
        /**
          * The ID of the `ion-datetime` instance associated with the datetime button.
         */
        "datetime"?: string;
        /**
          * If `true`, the user cannot interact with the button.
          * @default false
         */
        "disabled": boolean;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
    }
    interface IonFab {
        /**
          * If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.
          * @default false
         */
        "activated": boolean;
        /**
          * Close an active FAB list container.
         */
        "close": () => Promise<void>;
        /**
          * If `true`, the fab will display on the edge of the header if `vertical` is `"top"`, and on the edge of the footer if it is `"bottom"`. Should be used with a `fixed` slot.
          * @default false
         */
        "edge": boolean;
        /**
          * Where to align the fab horizontally in the viewport.
         */
        "horizontal"?: 'start' | 'end' | 'center';
        /**
          * Opens/Closes the FAB list container.
         */
        "toggle": () => Promise<void>;
        /**
          * Where to align the fab vertically in the viewport.
         */
        "vertical"?: 'top' | 'bottom' | 'center';
    }
    interface IonFabButton {
        /**
          * If `true`, the fab button will be show a close icon.
          * @default false
         */
        "activated": boolean;
        /**
          * The icon name to use for the close icon. This will appear when the fab button is pressed. Only applies if it is the main button inside of a fab containing a fab list.
          * @default close
         */
        "closeIcon": string;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the fab button.
          * @default false
         */
        "disabled": boolean;
        /**
          * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
         */
        "download": string | undefined;
        /**
          * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
         */
        "href": string | undefined;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
         */
        "rel": string | undefined;
        /**
          * When using a router, it specifies the transition animation when navigating to another page using `href`.
         */
        "routerAnimation": AnimationBuilder | undefined;
        /**
          * When using a router, it specifies the transition direction when navigating to another page using `href`.
          * @default 'forward'
         */
        "routerDirection": RouterDirection;
        /**
          * If `true`, the fab button will show when in a fab-list.
          * @default false
         */
        "show": boolean;
        /**
          * The size of the button. Set this to `small` in order to have a mini fab button.
         */
        "size"?: 'small';
        /**
          * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
         */
        "target": string | undefined;
        /**
          * If `true`, the fab button will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          * @default false
         */
        "translucent": boolean;
        /**
          * The type of the button.
          * @default 'button'
         */
        "type": 'submit' | 'reset' | 'button';
    }
    interface IonFabList {
        /**
          * If `true`, the fab list will show all fab buttons in the list.
          * @default false
         */
        "activated": boolean;
        /**
          * The side the fab list will show on relative to the main fab button.
          * @default 'bottom'
         */
        "side": 'start' | 'end' | 'top' | 'bottom';
    }
    interface IonFooter {
        /**
          * Describes the scroll effect that will be applied to the footer. Only applies in iOS mode.
         */
        "collapse"?: 'fade';
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * If `true`, the footer will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content.
          * @default false
         */
        "translucent": boolean;
    }
    interface IonGrid {
        /**
          * If `true`, the grid will have a fixed width based on the screen size.
          * @default false
         */
        "fixed": boolean;
    }
    interface IonHeader {
        /**
          * Describes the scroll effect that will be applied to the header. Only applies in iOS mode.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
         */
        "collapse"?: 'condense' | 'fade';
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * If `true`, the header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.
          * @default false
         */
        "translucent": boolean;
    }
    interface IonImg {
        /**
          * This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.
         */
        "alt"?: string;
        /**
          * The image URL. This attribute is mandatory for the `<img>` element.
         */
        "src"?: string;
    }
    interface IonInfiniteScroll {
        /**
          * Call `complete()` within the `ionInfinite` output event handler when your async operation has completed. For example, the `loading` state is while the app is performing an asynchronous operation, such as receiving more data from an AJAX request to add more items to a data list. Once the data has been received and UI updated, you then call this method to signify that the loading has completed. This method will change the infinite scroll's state from `loading` to `enabled`.
         */
        "complete": () => Promise<void>;
        /**
          * If `true`, the infinite scroll will be hidden and scroll event listeners will be removed.  Set this to true to disable the infinite scroll from actively trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed.
          * @default false
         */
        "disabled": boolean;
        /**
          * The position of the infinite scroll element. The value can be either `top` or `bottom`.
          * @default 'bottom'
         */
        "position": 'top' | 'bottom';
        /**
          * The threshold distance from the bottom of the content to call the `infinite` output event when scrolled. The threshold value can be either a percent, or in pixels. For example, use the value of `10%` for the `infinite` output event to get called when the user has scrolled 10% from the bottom of the page. Use the value `100px` when the scroll is within 100 pixels from the bottom of the page.
          * @default '15%'
         */
        "threshold": string;
    }
    interface IonInfiniteScrollContent {
        /**
          * An animated SVG spinner that shows while loading.
         */
        "loadingSpinner"?: SpinnerTypes | null;
        /**
          * Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Content is parsed as plaintext by default. `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config before custom HTML can be used.
         */
        "loadingText"?: string | IonicSafeString;
    }
    interface IonInput {
        /**
          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
          * @default 'off'
         */
        "autocapitalize": string;
        /**
          * Indicates whether the value of the control can be automatically completed by the browser.
          * @default 'off'
         */
        "autocomplete": AutocompleteTypes;
        /**
          * Whether auto correction should be enabled when the user is entering/editing the text value.
          * @default 'off'
         */
        "autocorrect": 'on' | 'off';
        /**
          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
          * @default false
         */
        "autofocus": boolean;
        /**
          * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
          * @default false
         */
        "clearInput": boolean;
        /**
          * The icon to use for the clear button. Only applies when `clearInput` is set to `true`.
         */
        "clearInputIcon"?: string;
        /**
          * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
         */
        "clearOnEdit"?: boolean;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.
          * @default false
         */
        "counter": boolean;
        /**
          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
         */
        "counterFormatter"?: (inputLength: number, maxLength: number) => string;
        /**
          * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
         */
        "debounce"?: number;
        /**
          * If `true`, the user cannot interact with the input.
          * @default false
         */
        "disabled": boolean;
        /**
          * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
         */
        "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
        /**
          * Text that is placed under the input and displayed when an error is detected.
         */
        "errorText"?: string;
        /**
          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
         */
        "fill"?: 'outline' | 'solid';
        /**
          * Returns the native `<input>` element used under the hood.
         */
        "getInputElement": () => Promise<HTMLInputElement>;
        /**
          * Text that is placed under the input and displayed when no error is detected.
         */
        "helperText"?: string;
        /**
          * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
         */
        "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
        /**
          * The visible label associated with the input.  Use this if you need to render a plaintext label.  The `label` property will take priority over the `label` slot if both are used.
         */
        "label"?: string;
        /**
          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the input in LTR and to the right in RTL. `"end"`: The label will appear to the right of the input in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `"stacked"`: The label will appear smaller and above the input regardless even when the input is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
          * @default 'start'
         */
        "labelPlacement": 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
        /**
          * The maximum value, which must not be less than its minimum (min attribute) value.
         */
        "max"?: string | number;
        /**
          * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.
         */
        "maxlength"?: number;
        /**
          * The minimum value, which must not be greater than its maximum (max attribute) value.
         */
        "min"?: string | number;
        /**
          * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.
         */
        "minlength"?: number;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"`, otherwise it is ignored.
         */
        "multiple"?: boolean;
        /**
          * The name of the control, which is submitted with the form data.
          * @default this.inputId
         */
        "name": string;
        /**
          * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, `"date"`, or `"password"`, otherwise it is ignored. When the type attribute is `"date"`, `pattern` will only be used in browsers that do not support the `"date"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.
         */
        "pattern"?: string;
        /**
          * Instructional text that shows before the input has a value. This property applies only when the `type` property is set to `"email"`, `"number"`, `"password"`, `"search"`, `"tel"`, `"text"`, or `"url"`, otherwise it is ignored.
         */
        "placeholder"?: string;
        /**
          * If `true`, the user cannot modify the value.
          * @default false
         */
        "readonly": boolean;
        /**
          * If `true`, the user must fill in a value before submitting a form.
          * @default false
         */
        "required": boolean;
        /**
          * Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.  Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.  See [managing focus](/docs/developing/managing-focus) for more information.
         */
        "setFocus": () => Promise<void>;
        /**
          * The shape of the input. If "round" it will have an increased border radius.
         */
        "shape"?: 'round';
        /**
          * If `true`, the element will have its spelling and grammar checked.
          * @default false
         */
        "spellcheck": boolean;
        /**
          * Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number.
         */
        "step"?: string;
        /**
          * The type of control to display. The default type is text.
          * @default 'text'
         */
        "type": TextFieldTypes;
        /**
          * The value of the input.
          * @default ''
         */
        "value"?: string | number | null;
    }
    interface IonInputOtp {
        /**
          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
          * @default 'off'
         */
        "autocapitalize": string;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the input.
          * @default false
         */
        "disabled": boolean;
        /**
          * The fill for the input boxes. If `"solid"` the input boxes will have a background. If `"outline"` the input boxes will be transparent with a border.
          * @default 'outline'
         */
        "fill"?: 'outline' | 'solid';
        /**
          * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.  For numbers (type="number"): "numeric" For text (type="text"): "text"
         */
        "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
        /**
          * The number of input boxes to display.
          * @default 4
         */
        "length": number;
        /**
          * A regex pattern string for allowed characters. Defaults based on type.  For numbers (`type="number"`): `"[\p{N}]"` For text (`type="text"`): `"[\p{L}\p{N}]"`
         */
        "pattern"?: string;
        /**
          * If `true`, the user cannot modify the value.
          * @default false
         */
        "readonly": boolean;
        /**
          * Where separators should be shown between input boxes. Can be a comma-separated string or an array of numbers.  For example: `"3"` will show a separator after the 3rd input box. `[1,4]` will show a separator after the 1st and 4th input boxes. `"all"` will show a separator between every input box.
         */
        "separators"?: 'all' | string | number[];
        /**
          * Sets focus to an input box.
          * @param index - The index of the input box to focus (0-based). If provided and the input box has a value, the input box at that index will be focused. Otherwise, the first empty input box or the last input if all are filled will be focused.
         */
        "setFocus": (index?: number) => Promise<void>;
        /**
          * The shape of the input boxes. If "round" they will have an increased border radius. If "rectangular" they will have no border radius. If "soft" they will have a soft border radius.
          * @default 'round'
         */
        "shape": 'round' | 'rectangular' | 'soft';
        /**
          * The size of the input boxes.
          * @default 'medium'
         */
        "size": 'small' | 'medium' | 'large';
        /**
          * The type of input allowed in the input boxes.
          * @default 'number'
         */
        "type": 'text' | 'number';
        /**
          * The value of the input group.
          * @default ''
         */
        "value"?: string | number | null;
    }
    interface IonInputPasswordToggle {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The icon that can be used to represent hiding a password. If not set, the "eyeOff" Ionicon will be used.
         */
        "hideIcon"?: string;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * The icon that can be used to represent showing a password. If not set, the "eye" Ionicon will be used.
         */
        "showIcon"?: string;
        /**
          * @default 'password'
         */
        "type": TextFieldTypes;
    }
    interface IonItem {
        /**
          * If `true`, a button tag will be rendered and the item will be tappable.
          * @default false
         */
        "button": boolean;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present.
         */
        "detail"?: boolean;
        /**
          * The icon to use when `detail` is set to `true`.
          * @default chevronForward
         */
        "detailIcon": string;
        /**
          * If `true`, the user cannot interact with the item.
          * @default false
         */
        "disabled": boolean;
        /**
          * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
         */
        "download": string | undefined;
        /**
          * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
         */
        "href": string | undefined;
        /**
          * How the bottom border should be displayed on the item.
         */
        "lines"?: 'full' | 'inset' | 'none';
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
         */
        "rel": string | undefined;
        /**
          * When using a router, it specifies the transition animation when navigating to another page using `href`.
         */
        "routerAnimation": AnimationBuilder | undefined;
        /**
          * When using a router, it specifies the transition direction when navigating to another page using `href`.
          * @default 'forward'
         */
        "routerDirection": RouterDirection;
        /**
          * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
         */
        "target": string | undefined;
        /**
          * The type of the button. Only used when an `onclick` or `button` property is present.
          * @default 'button'
         */
        "type": 'submit' | 'reset' | 'button';
    }
    interface IonItemDivider {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * When it's set to `true`, the item-divider will stay visible when it reaches the top of the viewport until the next `ion-item-divider` replaces it.  This feature relies in `position:sticky`: https://caniuse.com/#feat=css-sticky
          * @default false
         */
        "sticky": boolean;
    }
    interface IonItemGroup {
    }
    interface IonItemOption {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the item option.
          * @default false
         */
        "disabled": boolean;
        /**
          * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
         */
        "download": string | undefined;
        /**
          * If `true`, the option will expand to take up the available width and cover any other options.
          * @default false
         */
        "expandable": boolean;
        /**
          * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
         */
        "href": string | undefined;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
         */
        "rel": string | undefined;
        /**
          * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
         */
        "target": string | undefined;
        /**
          * The type of the button.
          * @default 'button'
         */
        "type": 'submit' | 'reset' | 'button';
    }
    interface IonItemOptions {
        "fireSwipeEvent": () => Promise<void>;
        /**
          * The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each.
          * @default 'end'
         */
        "side": Side;
    }
    interface IonItemSliding {
        /**
          * Close the sliding item. Items can also be closed from the [List](./list).
         */
        "close": () => Promise<void>;
        /**
          * Close all of the sliding items in the list. Items can also be closed from the [List](./list).
         */
        "closeOpened": () => Promise<boolean>;
        /**
          * If `true`, the user cannot interact with the sliding item.
          * @default false
         */
        "disabled": boolean;
        /**
          * Get the amount the item is open in pixels.
         */
        "getOpenAmount": () => Promise<number>;
        /**
          * Get the ratio of the open amount of the item compared to the width of the options. If the number returned is positive, then the options on the right side are open. If the number returned is negative, then the options on the left side are open. If the absolute value of the number is greater than 1, the item is open more than the width of the options.
         */
        "getSlidingRatio": () => Promise<number>;
        /**
          * Open the sliding item.
          * @param side The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item.
         */
        "open": (side: Side | undefined) => Promise<void>;
    }
    interface IonLabel {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * The position determines where and how the label behaves inside an item.
         */
        "position"?: 'fixed' | 'stacked' | 'floating';
    }
    interface IonList {
        /**
          * If `ion-item-sliding` are used inside the list, this method closes any open sliding item.  Returns `true` if an actual `ion-item-sliding` is closed.
         */
        "closeSlidingItems": () => Promise<boolean>;
        /**
          * If `true`, the list will have margin around it and rounded corners.
          * @default false
         */
        "inset": boolean;
        /**
          * How the bottom border should be displayed on all items.
         */
        "lines"?: 'full' | 'inset' | 'none';
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
    }
    interface IonListHeader {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * How the bottom border should be displayed on the list header.
         */
        "lines"?: 'full' | 'inset' | 'none';
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
    }
    interface IonLoading {
        /**
          * If `true`, the loading indicator will animate.
          * @default true
         */
        "animated": boolean;
        /**
          * If `true`, the loading indicator will be dismissed when the backdrop is clicked.
          * @default false
         */
        "backdropDismiss": boolean;
        /**
          * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
         */
        "cssClass"?: string | string[];
        "delegate"?: FrameworkDelegate;
        /**
          * Dismiss the loading overlay after it has been presented. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
          * @param data Any data to emit in the dismiss events.
          * @param role The role of the element that is dismissing the loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
         */
        "dismiss": (data?: any, role?: string) => Promise<boolean>;
        /**
          * Number of milliseconds to wait before dismissing the loading indicator.
          * @default 0
         */
        "duration": number;
        /**
          * Animation to use when the loading indicator is presented.
         */
        "enterAnimation"?: AnimationBuilder;
        /**
          * @default false
         */
        "hasController": boolean;
        /**
          * Additional attributes to pass to the loader.
         */
        "htmlAttributes"?: { [key: string]: any };
        /**
          * If `true`, the loading indicator will open. If `false`, the loading indicator will close. Use this if you need finer grained control over presentation, otherwise just use the loadingController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the loading indicator dismisses. You will need to do that in your code.
          * @default false
         */
        "isOpen": boolean;
        /**
          * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          * @default true
         */
        "keyboardClose": boolean;
        /**
          * Animation to use when the loading indicator is dismissed.
         */
        "leaveAnimation"?: AnimationBuilder;
        /**
          * Optional text content to display in the loading indicator.  This property accepts custom HTML as a string. Content is parsed as plaintext by default. `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config before custom HTML can be used.
         */
        "message"?: string | IonicSafeString;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Returns a promise that resolves when the loading did dismiss.
         */
        "onDidDismiss": <T = any>() => Promise<OverlayEventDetail<T>>;
        /**
          * Returns a promise that resolves when the loading will dismiss.
         */
        "onWillDismiss": <T = any>() => Promise<OverlayEventDetail<T>>;
        "overlayIndex": number;
        /**
          * Present the loading overlay after it has been created.
         */
        "present": () => Promise<void>;
        /**
          * If `true`, a backdrop will be displayed behind the loading indicator.
          * @default true
         */
        "showBackdrop": boolean;
        /**
          * The name of the spinner to display.
         */
        "spinner"?: SpinnerTypes | null;
        /**
          * If `true`, the loading indicator will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          * @default false
         */
        "translucent": boolean;
        /**
          * An ID corresponding to the trigger element that causes the loading indicator to open when clicked.
         */
        "trigger": string | undefined;
    }
    interface IonMenu {
        /**
          * Closes the menu. If the menu is already closed or it can't be closed, it returns `false`.
          * @param animated If `true`, the menu will animate when closing. If `false`, the menu will close instantly without animation. Defaults to `true`.
          * @param role The role of the element that is closing the menu. This can be useful in a button handler for determining which button was clicked to close the menu. Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
         */
        "close": (animated?: boolean, role?: string) => Promise<boolean>;
        /**
          * The `id` of the main content. When using a router this is typically `ion-router-outlet`. When not using a router, this is typically your main view's `ion-content`. This is not the id of the `ion-content` inside of your `ion-menu`.
         */
        "contentId"?: string;
        /**
          * If `true`, the menu is disabled.
          * @default false
         */
        "disabled": boolean;
        /**
          * Returns `true` if the menu is active.  A menu is active when it can be opened or closed, meaning it's enabled and it's not part of a `ion-split-pane`.
         */
        "isActive": () => Promise<boolean>;
        /**
          * Returns `true` is the menu is open.
         */
        "isOpen": () => Promise<boolean>;
        /**
          * The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered.
          * @default 50
         */
        "maxEdgeStart": number;
        /**
          * An id for the menu.
         */
        "menuId"?: string;
        /**
          * Opens the menu. If the menu is already open or it can't be opened, it returns `false`.
          * @param animated If `true`, the menu will animate when opening. If `false`, the menu will open instantly without animation. Defaults to `true`.
         */
        "open": (animated?: boolean) => Promise<boolean>;
        /**
          * Opens or closes the menu. If the operation can't be completed successfully, it returns `false`.
          * @param shouldOpen If `true`, the menu will open. If `false`, the menu will close.
          * @param animated If `true`, the menu will animate when opening/closing. If `false`, the menu will open/close instantly without animation.
          * @param role The role of the element that is closing the menu.
         */
        "setOpen": (shouldOpen: boolean, animated?: boolean, role?: string) => Promise<boolean>;
        /**
          * Which side of the view the menu should be placed.
          * @default 'start'
         */
        "side": Side;
        /**
          * If `true`, swiping the menu is enabled.
          * @default true
         */
        "swipeGesture": boolean;
        /**
          * Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it. If the operation can't be completed successfully, it returns `false`.
          * @param animated If `true`, the menu will animate when opening/closing. If `false`, the menu will open/close instantly without animation. Defaults to `true`.
         */
        "toggle": (animated?: boolean) => Promise<boolean>;
        /**
          * The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`.
         */
        "type"?: MenuType;
    }
    interface IonMenuButton {
        /**
          * Automatically hides the menu button when the corresponding menu is not active
          * @default true
         */
        "autoHide": boolean;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the menu button.
          * @default false
         */
        "disabled": boolean;
        /**
          * Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle
         */
        "menu"?: string;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * The type of the button.
          * @default 'button'
         */
        "type": 'submit' | 'reset' | 'button';
    }
    interface IonMenuToggle {
        /**
          * Automatically hides the content when the corresponding menu is not active.  By default, it's `true`. Change it to `false` in order to keep `ion-menu-toggle` always visible regardless the state of the menu.
          * @default true
         */
        "autoHide": boolean;
        /**
          * Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle.  If this property is not used, `ion-menu-toggle` will toggle the first menu that is active.
         */
        "menu"?: string;
    }
    interface IonModal {
        /**
          * If `true`, the modal will animate.
          * @default true
         */
        "animated": boolean;
        /**
          * A decimal value between 0 and 1 that indicates the point after which the backdrop will begin to fade in when using a sheet modal. Prior to this point, the backdrop will be hidden and the content underneath the sheet can be interacted with. This value is exclusive meaning the backdrop will become active after the value specified.
          * @default 0
         */
        "backdropBreakpoint": number;
        /**
          * If `true`, the modal will be dismissed when the backdrop is clicked.
          * @default true
         */
        "backdropDismiss": boolean;
        /**
          * The breakpoints to use when creating a sheet modal. Each value in the array must be a decimal between 0 and 1 where 0 indicates the modal is fully closed and 1 indicates the modal is fully open. Values are relative to the height of the modal, not the height of the screen. One of the values in this array must be the value of the `initialBreakpoint` property. For example: [0, .25, .5, 1]
         */
        "breakpoints"?: number[];
        /**
          * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          * @default true
         */
        "canDismiss": boolean | ((data?: any, role?: string) => Promise<boolean>);
        /**
          * The component to display inside of the modal.
         */
        "component"?: ComponentRef;
        /**
          * The data to pass to the modal component.
         */
        "componentProps"?: ComponentProps;
        /**
          * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
         */
        "cssClass"?: string | string[];
        "delegate"?: FrameworkDelegate;
        /**
          * Dismiss the modal overlay after it has been presented. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
          * @param data Any data to emit in the dismiss events.
          * @param role The role of the element that is dismissing the modal. For example, `cancel` or `backdrop`.
         */
        "dismiss": (data?: any, role?: string) => Promise<boolean>;
        /**
          * Animation to use when the modal is presented.
         */
        "enterAnimation"?: AnimationBuilder;
        /**
          * Controls whether scrolling or dragging within the sheet modal expands it to a larger breakpoint. This only takes effect when `breakpoints` and `initialBreakpoint` are set.  If `true`, scrolling or dragging anywhere in the modal will first expand it to the next breakpoint. Once fully expanded, scrolling will affect the content. If `false`, scrolling will always affect the content. The modal will only expand when dragging the header or handle. The modal will close when dragging the header or handle. It can also be closed when dragging the content, but only if the content is scrolled to the top.
          * @default true
         */
        "expandToScroll": boolean;
        /**
          * If `true`, focus will not be allowed to move outside of this overlay. If `false`, focus will be allowed to move outside of the overlay.  In most scenarios this property should remain set to `true`. Setting this property to `false` can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this to `false` when absolutely necessary.  Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. Developers would disable focus trapping on the Ionic overlay when presenting the 3rd party overlay and then re-enable focus trapping when dismissing the 3rd party overlay and moving focus back to the Ionic overlay.
          * @default true
         */
        "focusTrap": boolean;
        /**
          * Returns the current breakpoint of a sheet style modal
         */
        "getCurrentBreakpoint": () => Promise<number | undefined>;
        /**
          * The horizontal line that displays at the top of a sheet modal. It is `true` by default when setting the `breakpoints` and `initialBreakpoint` properties.
         */
        "handle"?: boolean;
        /**
          * The interaction behavior for the sheet modal when the handle is pressed.  Defaults to `"none"`, which  means the modal will not change size or position when the handle is pressed. Set to `"cycle"` to let the modal cycle between available breakpoints when pressed.  Handle behavior is unavailable when the `handle` property is set to `false` or when the `breakpoints` property is not set (using a fullscreen or card modal).
          * @default 'none'
         */
        "handleBehavior"?: ModalHandleBehavior;
        /**
          * @default false
         */
        "hasController": boolean;
        /**
          * Additional attributes to pass to the modal.
         */
        "htmlAttributes"?: { [key: string]: any };
        /**
          * A decimal value between 0 and 1 that indicates the initial point the modal will open at when creating a sheet modal. This value must also be listed in the `breakpoints` array.
         */
        "initialBreakpoint"?: number;
        /**
          * If `true`, the modal will open. If `false`, the modal will close. Use this if you need finer grained control over presentation, otherwise just use the modalController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the modal dismisses. You will need to do that in your code.
          * @default false
         */
        "isOpen": boolean;
        /**
          * If `true`, the component passed into `ion-modal` will automatically be mounted when the modal is created. The component will remain mounted even when the modal is dismissed. However, the component will be destroyed when the modal is destroyed. This property is not reactive and should only be used when initially creating a modal.  Note: This feature only applies to inline modals in JavaScript frameworks such as Angular, React, and Vue.
          * @default false
         */
        "keepContentsMounted": boolean;
        /**
          * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          * @default true
         */
        "keyboardClose": boolean;
        /**
          * Animation to use when the modal is dismissed.
         */
        "leaveAnimation"?: AnimationBuilder;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Returns a promise that resolves when the modal did dismiss.
         */
        "onDidDismiss": <T = any>() => Promise<OverlayEventDetail<T>>;
        /**
          * Returns a promise that resolves when the modal will dismiss.
         */
        "onWillDismiss": <T = any>() => Promise<OverlayEventDetail<T>>;
        "overlayIndex": number;
        /**
          * Present the modal overlay after it has been created.
         */
        "present": () => Promise<void>;
        /**
          * The element that presented the modal. This is used for card presentation effects and for stacking multiple modals on top of each other. Only applies in iOS mode.
         */
        "presentingElement"?: HTMLElement;
        /**
          * Move a sheet style modal to a specific breakpoint.
          * @param breakpoint The breakpoint value to move the sheet modal to. Must be a value defined in your `breakpoints` array.
         */
        "setCurrentBreakpoint": (breakpoint: number) => Promise<void>;
        /**
          * If `true`, a backdrop will be displayed behind the modal. This property controls whether or not the backdrop darkens the screen when the modal is presented. It does not control whether or not the backdrop is active or present in the DOM.
          * @default true
         */
        "showBackdrop": boolean;
        /**
          * An ID corresponding to the trigger element that causes the modal to open when clicked.
         */
        "trigger": string | undefined;
    }
    interface IonNav {
        /**
          * If `true`, the nav should animate the transition of components.
          * @default true
         */
        "animated": boolean;
        /**
          * By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimationBuilder` functions.
         */
        "animation"?: AnimationBuilder;
        /**
          * Returns `true` if the current view can go back.
          * @param view The view to check.
         */
        "canGoBack": (view?: ViewController) => Promise<boolean>;
        "delegate"?: FrameworkDelegate;
        /**
          * Get the active view.
         */
        "getActive": () => Promise<ViewController | undefined>;
        /**
          * Get the view at the specified index.
          * @param index The index of the view.
         */
        "getByIndex": (index: number) => Promise<ViewController | undefined>;
        /**
          * Returns the number of views in the stack.
         */
        "getLength": () => Promise<number>;
        /**
          * Get the previous view.
          * @param view The view to get.
         */
        "getPrevious": (view?: ViewController) => Promise<ViewController | undefined>;
        /**
          * Called by <ion-router> to retrieve the current component.
         */
        "getRouteId": () => Promise<RouteID | undefined>;
        /**
          * Inserts a component into the navigation stack at the specified index. This is useful to add a component at any point in the navigation stack.
          * @param insertIndex The index to insert the component at in the stack.
          * @param component The component to insert into the navigation stack.
          * @param componentProps Any properties of the component.
          * @param opts The navigation options.
          * @param done The transition complete function.
         */
        "insert": <T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
        /**
          * Inserts an array of components into the navigation stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view.
          * @param insertIndex The index to insert the components at in the stack.
          * @param insertComponents The components to insert into the navigation stack.
          * @param opts The navigation options.
          * @param done The transition complete function.
         */
        "insertPages": (insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
        /**
          * Pop a component off of the navigation stack. Navigates back from the current component.
          * @param opts The navigation options.
          * @param done The transition complete function.
         */
        "pop": (opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
        /**
          * Pop to a specific index in the navigation stack.
          * @param indexOrViewCtrl The index or view controller to pop to.
          * @param opts The navigation options.
          * @param done The transition complete function.
         */
        "popTo": (indexOrViewCtrl: number | ViewController, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
        /**
          * Navigate back to the root of the stack, no matter how far back that is.
          * @param opts The navigation options.
          * @param done The transition complete function.
         */
        "popToRoot": (opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
        /**
          * Push a new component onto the current navigation stack. Pass any additional information along as an object. This additional information is accessible through NavParams.
          * @param component The component to push onto the navigation stack.
          * @param componentProps Any properties of the component.
          * @param opts The navigation options.
          * @param done The transition complete function.
         */
        "push": <T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
        /**
          * Removes a component from the navigation stack at the specified index.
          * @param startIndex The number to begin removal at.
          * @param removeCount The number of components to remove.
          * @param opts The navigation options.
          * @param done The transition complete function.
         */
        "removeIndex": (startIndex: number, removeCount?: number, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
        /**
          * Root NavComponent to load
         */
        "root"?: NavComponent;
        /**
          * Any parameters for the root component
         */
        "rootParams"?: ComponentProps;
        /**
          * Set the views of the current navigation stack and navigate to the last view. By default animations are disabled, but they can be enabled by passing options to the navigation controller. Navigation parameters can also be passed to the individual pages in the array.
          * @param views The list of views to set as the navigation stack.
          * @param opts The navigation options.
          * @param done The transition complete function.
         */
        "setPages": (views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
        /**
          * Set the root for the current navigation stack to a component.
          * @param component The component to set as the root of the navigation stack.
          * @param componentProps Any properties of the component.
          * @param opts The navigation options.
          * @param done The transition complete function.
         */
        "setRoot": <T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
        /**
          * Called by the router to update the view.
          * @param id The component tag.
          * @param params The component params.
          * @param direction A direction hint.
          * @param animation an AnimationBuilder.
          * @return the status.
         */
        "setRouteId": (id: string, params: ComponentProps | undefined, direction: RouterDirection, animation?: AnimationBuilder) => Promise<RouteWrite>;
        /**
          * If the nav component should allow for swipe-to-go-back.
         */
        "swipeGesture"?: boolean;
    }
    interface IonNavLink {
        /**
          * Component to navigate to. Only used if the `routerDirection` is `"forward"` or `"root"`.
         */
        "component"?: NavComponent;
        /**
          * Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`.
         */
        "componentProps"?: ComponentProps;
        /**
          * The transition animation when navigating to another page.
         */
        "routerAnimation"?: AnimationBuilder;
        /**
          * The transition direction when navigating to another page.
          * @default 'forward'
         */
        "routerDirection": RouterDirection;
    }
    interface IonNote {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
    }
    interface IonPicker {
        "exitInputMode": () => Promise<void>;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
    }
    interface IonPickerColumn {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          * @default 'primary'
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the picker.
          * @default false
         */
        "disabled": boolean;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * If `true`, tapping the picker will reveal a number input keyboard that lets the user type in values for each picker column. This is useful when working with time pickers.
          * @default false
         */
        "numericInput": boolean;
        "scrollActiveItemIntoView": (smooth?: boolean) => Promise<void>;
        /**
          * Sets focus on the scrollable container within the picker column. Use this method instead of the global `pickerColumn.focus()`.
         */
        "setFocus": () => Promise<void>;
        /**
          * Sets the value prop and fires the ionChange event. This is used when we need to fire ionChange from user-generated events that cannot be caught with normal input/change event listeners.
         */
        "setValue": (value: PickerColumnValue) => Promise<void>;
        /**
          * The selected option in the picker.
         */
        "value"?: string | number;
    }
    interface IonPickerColumnOption {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          * @default 'primary'
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the picker column option.
          * @default false
         */
        "disabled": boolean;
        /**
          * The text value of the option.
         */
        "value"?: any | null;
    }
    interface IonPickerLegacy {
        /**
          * If `true`, the picker will animate.
          * @default true
         */
        "animated": boolean;
        /**
          * If `true`, the picker will be dismissed when the backdrop is clicked.
          * @default true
         */
        "backdropDismiss": boolean;
        /**
          * Array of buttons to be displayed at the top of the picker.
          * @default []
         */
        "buttons": PickerButton[];
        /**
          * Array of columns to be displayed in the picker.
          * @default []
         */
        "columns": PickerColumn[];
        /**
          * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
         */
        "cssClass"?: string | string[];
        "delegate"?: FrameworkDelegate;
        /**
          * Dismiss the picker overlay after it has been presented.
          * @param data Any data to emit in the dismiss events.
          * @param role The role of the element that is dismissing the picker. This can be useful in a button handler for determining which button was clicked to dismiss the picker. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
         */
        "dismiss": (data?: any, role?: string) => Promise<boolean>;
        /**
          * Number of milliseconds to wait before dismissing the picker.
          * @default 0
         */
        "duration": number;
        /**
          * Animation to use when the picker is presented.
         */
        "enterAnimation"?: AnimationBuilder;
        /**
          * Get the column that matches the specified name.
          * @param name The name of the column.
         */
        "getColumn": (name: string) => Promise<PickerColumn | undefined>;
        /**
          * @default false
         */
        "hasController": boolean;
        /**
          * Additional attributes to pass to the picker.
         */
        "htmlAttributes"?: { [key: string]: any };
        /**
          * If `true`, the picker will open. If `false`, the picker will close. Use this if you need finer grained control over presentation, otherwise just use the pickerController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the picker dismisses. You will need to do that in your code.
          * @default false
         */
        "isOpen": boolean;
        /**
          * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          * @default true
         */
        "keyboardClose": boolean;
        /**
          * Animation to use when the picker is dismissed.
         */
        "leaveAnimation"?: AnimationBuilder;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Returns a promise that resolves when the picker did dismiss.
         */
        "onDidDismiss": <T = any>() => Promise<OverlayEventDetail<T>>;
        /**
          * Returns a promise that resolves when the picker will dismiss.
         */
        "onWillDismiss": <T = any>() => Promise<OverlayEventDetail<T>>;
        "overlayIndex": number;
        /**
          * Present the picker overlay after it has been created.
         */
        "present": () => Promise<void>;
        /**
          * If `true`, a backdrop will be displayed behind the picker.
          * @default true
         */
        "showBackdrop": boolean;
        /**
          * An ID corresponding to the trigger element that causes the picker to open when clicked.
         */
        "trigger": string | undefined;
    }
    interface IonPickerLegacyColumn {
        /**
          * Picker column data
         */
        "col": PickerColumn;
    }
    interface IonPopover {
        /**
          * Describes how to align the popover content with the `reference` point. Defaults to `"center"` for `ios` mode, and `"start"` for `md` mode.
         */
        "alignment"?: PositionAlign;
        /**
          * If `true`, the popover will animate.
          * @default true
         */
        "animated": boolean;
        /**
          * If `true`, the popover will display an arrow that points at the `reference` when running in `ios` mode. Does not apply in `md` mode.
          * @default true
         */
        "arrow": boolean;
        /**
          * If `true`, the popover will be dismissed when the backdrop is clicked.
          * @default true
         */
        "backdropDismiss": boolean;
        /**
          * The component to display inside of the popover. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just slot your component inside of `ion-popover`.
         */
        "component"?: ComponentRef;
        /**
          * The data to pass to the popover component. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just set the props directly on your component.
         */
        "componentProps"?: ComponentProps;
        /**
          * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
         */
        "cssClass"?: string | string[];
        "delegate"?: FrameworkDelegate;
        /**
          * Dismiss the popover overlay after it has been presented. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
          * @param data Any data to emit in the dismiss events.
          * @param role The role of the element that is dismissing the popover. For example, `cancel` or `backdrop`.
          * @param dismissParentPopover If `true`, dismissing this popover will also dismiss a parent popover if this popover is nested. Defaults to `true`.
         */
        "dismiss": (data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>;
        /**
          * If `true`, the popover will be automatically dismissed when the content has been clicked.
          * @default false
         */
        "dismissOnSelect": boolean;
        /**
          * Animation to use when the popover is presented.
         */
        "enterAnimation"?: AnimationBuilder;
        /**
          * The event to pass to the popover animation.
         */
        "event": any;
        /**
          * If `true`, focus will not be allowed to move outside of this overlay. If `false`, focus will be allowed to move outside of the overlay.  In most scenarios this property should remain set to `true`. Setting this property to `false` can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this to `false` when absolutely necessary.  Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. Developers would disable focus trapping on the Ionic overlay when presenting the 3rd party overlay and then re-enable focus trapping when dismissing the 3rd party overlay and moving focus back to the Ionic overlay.
          * @default true
         */
        "focusTrap": boolean;
        "getParentPopover": () => Promise<HTMLIonPopoverElement | null>;
        /**
          * @default false
         */
        "hasController": boolean;
        /**
          * Additional attributes to pass to the popover.
         */
        "htmlAttributes"?: { [key: string]: any };
        /**
          * If `true`, the popover will open. If `false`, the popover will close. Use this if you need finer grained control over presentation, otherwise just use the popoverController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the popover dismisses. You will need to do that in your code.
          * @default false
         */
        "isOpen": boolean;
        /**
          * If `true`, the component passed into `ion-popover` will automatically be mounted when the popover is created. The component will remain mounted even when the popover is dismissed. However, the component will be destroyed when the popover is destroyed. This property is not reactive and should only be used when initially creating a popover.  Note: This feature only applies to inline popovers in JavaScript frameworks such as Angular, React, and Vue.
          * @default false
         */
        "keepContentsMounted": boolean;
        /**
          * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          * @default true
         */
        "keyboardClose": boolean;
        /**
          * @default false
         */
        "keyboardEvents": boolean;
        /**
          * Animation to use when the popover is dismissed.
         */
        "leaveAnimation"?: AnimationBuilder;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Returns a promise that resolves when the popover did dismiss.
         */
        "onDidDismiss": <T = any>() => Promise<OverlayEventDetail<T>>;
        /**
          * Returns a promise that resolves when the popover will dismiss.
         */
        "onWillDismiss": <T = any>() => Promise<OverlayEventDetail<T>>;
        "overlayIndex": number;
        /**
          * Present the popover overlay after it has been created. Developers can pass a mouse, touch, or pointer event to position the popover relative to where that event was dispatched.
          * @param event The event to position the popover relative to.
         */
        "present": (event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent) => Promise<void>;
        /**
          * When opening a popover from a trigger, we should not be modifying the `event` prop from inside the component. Additionally, when pressing the "Right" arrow key, we need to shift focus to the first descendant in the newly presented popover.
         */
        "presentFromTrigger": (event?: any, focusDescendant?: boolean) => Promise<void>;
        /**
          * Describes what to position the popover relative to. If `"trigger"`, the popover will be positioned relative to the trigger button. If passing in an event, this is determined via event.target. If `"event"`, the popover will be positioned relative to the x/y coordinates of the trigger action. If passing in an event, this is determined via event.clientX and event.clientY.
          * @default 'trigger'
         */
        "reference": PositionReference;
        /**
          * If `true`, a backdrop will be displayed behind the popover. This property controls whether or not the backdrop darkens the screen when the popover is presented. It does not control whether or not the backdrop is active or present in the DOM.
          * @default true
         */
        "showBackdrop": boolean;
        /**
          * Describes which side of the `reference` point to position the popover on. The `"start"` and `"end"` values are RTL-aware, and the `"left"` and `"right"` values are not.
          * @default 'bottom'
         */
        "side": PositionSide;
        /**
          * Describes how to calculate the popover width. If `"cover"`, the popover width will match the width of the trigger. If `"auto"`, the popover width will be set to a static default value.
          * @default 'auto'
         */
        "size": PopoverSize;
        /**
          * If `true`, the popover will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          * @default false
         */
        "translucent": boolean;
        /**
          * An ID corresponding to the trigger element that causes the popover to open. Use the `trigger-action` property to customize the interaction that results in the popover opening.
         */
        "trigger": string | undefined;
        /**
          * Describes what kind of interaction with the trigger that should cause the popover to open. Does not apply when the `trigger` property is `undefined`. If `"click"`, the popover will be presented when the trigger is left clicked. If `"hover"`, the popover will be presented when a pointer hovers over the trigger. If `"context-menu"`, the popover will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing.
          * @default 'click'
         */
        "triggerAction": TriggerAction;
    }
    interface IonProgressBar {
        /**
          * If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1].
          * @default 1
         */
        "buffer": number;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * If true, reverse the progress bar direction.
          * @default false
         */
        "reversed": boolean;
        /**
          * The state of the progress bar, based on if the time the process takes is known or not. Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
          * @default 'determinate'
         */
        "type": 'determinate' | 'indeterminate';
        /**
          * The value determines how much of the active bar should display when the `type` is `"determinate"`. The value should be between [0, 1].
          * @default 0
         */
        "value": number;
    }
    interface IonRadio {
        /**
          * How to control the alignment of the radio and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the radio `display` to `block`.
         */
        "alignment"?: 'start' | 'center';
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the radio.
          * @default false
         */
        "disabled": boolean;
        /**
          * How to pack the label and radio within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements. Setting this property will change the radio `display` to `block`.
         */
        "justify"?: 'start' | 'end' | 'space-between';
        /**
          * Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          * @default 'start'
         */
        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * The name of the control, which is submitted with the form data.
          * @default this.inputId
         */
        "name": string;
        "setButtonTabindex": (value: number) => Promise<void>;
        "setFocus": (ev?: globalThis.Event) => Promise<void>;
        /**
          * the value of the radio.
         */
        "value"?: any | null;
    }
    interface IonRadioGroup {
        /**
          * If `true`, the radios can be deselected.
          * @default false
         */
        "allowEmptySelection": boolean;
        /**
          * This property allows developers to specify a custom function or property name for comparing objects when determining the selected option in the ion-radio-group. When not specified, the default behavior will use strict equality (===) for comparison.
         */
        "compareWith"?: string | RadioGroupCompareFn | null;
        /**
          * The error text to display at the top of the radio group.
         */
        "errorText"?: string;
        /**
          * The helper text to display at the top of the radio group.
         */
        "helperText"?: string;
        /**
          * The name of the control, which is submitted with the form data.
          * @default this.inputId
         */
        "name": string;
        "setFocus": () => Promise<void>;
        /**
          * the value of the radio group.
         */
        "value"?: any | null;
    }
    interface IonRange {
        /**
          * The start position of the range active bar. This feature is only available with a single knob (dualKnobs="false"). Valid values are greater than or equal to the min value and less than or equal to the max value.
         */
        "activeBarStart"?: number;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * How long, in milliseconds, to wait to trigger the `ionInput` event after each change in the range value.
         */
        "debounce"?: number;
        /**
          * If `true`, the user cannot interact with the range.
          * @default false
         */
        "disabled": boolean;
        /**
          * Show two knobs.
          * @default false
         */
        "dualKnobs": boolean;
        /**
          * The text to display as the control's label. Use this over the `label` slot if you only need plain text. The `label` property will take priority over the `label` slot if both are used.
         */
        "label"?: string;
        /**
          * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the range regardless of the direction.
          * @default 'start'
         */
        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
        /**
          * Maximum integer value of the range.
          * @default 100
         */
        "max": number;
        /**
          * Minimum integer value of the range.
          * @default 0
         */
        "min": number;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * The name of the control, which is submitted with the form data.
          * @default this.rangeId
         */
        "name": string;
        /**
          * If `true`, a pin with integer value is shown when the knob is pressed.
          * @default false
         */
        "pin": boolean;
        /**
          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          * @default (value: number): number => Math.round(value)
         */
        "pinFormatter": PinFormatter;
        /**
          * If `true`, the knob snaps to tick marks evenly spaced based on the step property value.
          * @default false
         */
        "snaps": boolean;
        /**
          * Specifies the value granularity.
          * @default 1
         */
        "step": number;
        /**
          * If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`.
          * @default true
         */
        "ticks": boolean;
        /**
          * the value of the range.
          * @default 0
         */
        "value": RangeValue;
    }
    interface IonRefresher {
        /**
          * Changes the refresher's state from `refreshing` to `cancelling`.
         */
        "cancel": () => Promise<void>;
        /**
          * Time it takes to close the refresher. Does not apply when the refresher content uses a spinner, enabling the native refresher.
          * @default '280ms'
         */
        "closeDuration": string;
        /**
          * Call `complete()` when your async operation has completed. For example, the `refreshing` state is while the app is performing an asynchronous operation, such as receiving more data from an AJAX request. Once the data has been received, you then call this method to signify that the refreshing has completed and to close the refresher. This method also changes the refresher's state from `refreshing` to `completing`.
         */
        "complete": () => Promise<void>;
        /**
          * If `true`, the refresher will be hidden.
          * @default false
         */
        "disabled": boolean;
        /**
          * A number representing how far down the user has pulled. The number `0` represents the user hasn't pulled down at all. The number `1`, and anything greater than `1`, represents that the user has pulled far enough down that when they let go then the refresh will happen. If they let go and the number is less than `1`, then the refresh will not happen, and the content will return to it's original position.
         */
        "getProgress": () => Promise<number>;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead.  For example, If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels, the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.  Does not apply when the refresher content uses a spinner, enabling the native refresher.
          * @default 1
         */
        "pullFactor": number;
        /**
          * The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. Does not apply when  the refresher content uses a spinner, enabling the native refresher.
          * @default this.pullMin + 60
         */
        "pullMax": number;
        /**
          * The minimum distance the user must pull down until the refresher will go into the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.
          * @default 60
         */
        "pullMin": number;
        /**
          * Time it takes the refresher to snap back to the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.
          * @default '280ms'
         */
        "snapbackDuration": string;
    }
    interface IonRefresherContent {
        /**
          * A static icon or a spinner to display when you begin to pull down. A spinner name can be provided to gradually show tick marks when pulling down on iOS devices.
         */
        "pullingIcon"?: SpinnerTypes | string | null;
        /**
          * The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  Content is parsed as plaintext by default. `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config before custom HTML can be used.
         */
        "pullingText"?: string | IonicSafeString;
        /**
          * An animated SVG spinner that shows when refreshing begins
         */
        "refreshingSpinner"?: SpinnerTypes | null;
        /**
          * The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  Content is parsed as plaintext by default. `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config before custom HTML can be used.
         */
        "refreshingText"?: string | IonicSafeString;
    }
    interface IonReorder {
    }
    interface IonReorderGroup {
        /**
          * Completes the reorder operation. Must be called by the `ionReorderEnd` event.  If a list of items is passed, the list will be reordered and returned in the proper order.  If no parameters are passed or if `true` is passed in, the reorder will complete and the item will remain in the position it was dragged to. If `false` is passed, the reorder will complete and the item will bounce back to its original position.
          * @param listOrReorder A list of items to be sorted and returned in the new order or a boolean of whether or not the reorder should reposition the item.
         */
        "complete": (listOrReorder?: boolean | any[]) => Promise<any>;
        /**
          * If `true`, the reorder will be hidden.
          * @default true
         */
        "disabled": boolean;
    }
    interface IonRippleEffect {
        /**
          * Adds the ripple effect to the parent element.
          * @param x The horizontal coordinate of where the ripple should start.
          * @param y The vertical coordinate of where the ripple should start.
         */
        "addRipple": (x: number, y: number) => Promise<() => void>;
        /**
          * Sets the type of ripple-effect:  - `bounded`: the ripple effect expands from the user's click position - `unbounded`: the ripple effect expands from the center of the button and overflows the container.  NOTE: Surfaces for bounded ripples should have the overflow property set to hidden, while surfaces for unbounded ripples should have it set to visible.
          * @default 'bounded'
         */
        "type": 'bounded' | 'unbounded';
    }
    interface IonRoute {
        /**
          * A navigation hook that is fired when the route tries to enter. Returning `true` allows the navigation to proceed, while returning `false` causes it to be cancelled. Returning a `NavigationHookOptions` object causes the router to redirect to the path specified.
         */
        "beforeEnter"?: NavigationHookCallback;
        /**
          * A navigation hook that is fired when the route tries to leave. Returning `true` allows the navigation to proceed, while returning `false` causes it to be cancelled. Returning a `NavigationHookOptions` object causes the router to redirect to the path specified.
         */
        "beforeLeave"?: NavigationHookCallback;
        /**
          * Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`) when the route matches.  The value of this property is not always the tagname of the component to load, in `ion-tabs` it actually refers to the name of the `ion-tab` to select.
         */
        "component": string;
        /**
          * A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed to the defined component when rendered.
         */
        "componentProps"?: { [key: string]: any };
        /**
          * Relative path that needs to match in order for this route to apply.  Accepts paths similar to expressjs so that you can define parameters in the url /foo/:bar where bar would be available in incoming props.
          * @default ''
         */
        "url": string;
    }
    interface IonRouteRedirect {
        /**
          * A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL. It needs to be an exact match of the navigated URL in order to apply.  The path specified in this value is always an absolute path, even if the initial `/` slash is not specified.
         */
        "from": string;
        /**
          * A redirect route, redirects "from" a URL "to" another URL. This property is that "to" URL. When the defined `ion-route-redirect` rule matches, the router will redirect to the path specified in this property.  The value of this property is always an absolute path inside the scope of routes defined in `ion-router` it can't be used with another router or to perform a redirection to a different domain.  Note that this is a virtual redirect, it will not cause a real browser refresh, again, it's a redirect inside the context of ion-router.  When this property is not specified or his value is `undefined` the whole redirect route is noop, even if the "from" value matches.
         */
        "to": string | undefined | null;
    }
    interface IonRouter {
        /**
          * Go back to previous page in the window.history.
         */
        "back": () => Promise<void>;
        "canTransition": () => Promise<string | boolean>;
        "navChanged": (direction: RouterDirection) => Promise<boolean>;
        "printDebug": () => Promise<void>;
        /**
          * Navigate to the specified path.
          * @param path The path to navigate to.
          * @param direction The direction of the animation. Defaults to `"forward"`.
          * @param animation A custom animation to use for the transition.
         */
        "push": (path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>;
        /**
          * The root path to use when matching URLs. By default, this is set to "/", but you can specify an alternate prefix for all URL paths.
          * @default '/'
         */
        "root": string;
        /**
          * The router can work in two "modes": - With hash: `/index.html#/path/to/page` - Without hash: `/path/to/page`  Using one or another might depend in the requirements of your app and/or where it's deployed.  Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might requires additional server-side configuration in order to properly work.  On the other side hash-navigation is much easier to deploy, it even works over the file protocol.  By default, this property is `true`, change to `false` to allow hash-less URLs.
          * @default true
         */
        "useHash": boolean;
    }
    interface IonRouterLink {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
         */
        "href": string | undefined;
        /**
          * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
         */
        "rel": string | undefined;
        /**
          * When using a router, it specifies the transition animation when navigating to another page using `href`.
         */
        "routerAnimation": AnimationBuilder | undefined;
        /**
          * When using a router, it specifies the transition direction when navigating to another page using `href`.
          * @default 'forward'
         */
        "routerDirection": RouterDirection;
        /**
          * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
         */
        "target": string | undefined;
    }
    interface IonRouterOutlet {
        /**
          * If `true`, the router-outlet should animate the transition of components.
          * @default true
         */
        "animated": boolean;
        /**
          * This property allows to create custom transition using AnimationBuilder functions.
         */
        "animation"?: AnimationBuilder;
        "commit": (enteringEl: HTMLElement, leavingEl: HTMLElement | undefined, opts?: RouterOutletOptions) => Promise<boolean>;
        "delegate"?: FrameworkDelegate;
        "getRouteId": () => Promise<RouteID | undefined>;
        /**
          * The mode determines which platform styles to use.
          * @default getIonMode(this)
         */
        "mode": "ios" | "md";
        "setRouteId": (id: string, params: ComponentProps | undefined, direction: RouterDirection, animation?: AnimationBuilder) => Promise<RouteWrite>;
        "swipeHandler"?: SwipeGestureHandler;
    }
    interface IonRow {
    }
    interface IonSearchbar {
        /**
          * If `true`, enable searchbar animation.
          * @default false
         */
        "animated": boolean;
        /**
          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
          * @default 'off'
         */
        "autocapitalize": string;
        /**
          * Set the input's autocomplete property.
          * @default 'off'
         */
        "autocomplete": AutocompleteTypes;
        /**
          * Set the input's autocorrect property.
          * @default 'off'
         */
        "autocorrect": 'on' | 'off';
        /**
          * Set the cancel button icon. Only applies to `md` mode. Defaults to `arrow-back-sharp`.
          * @default config.get('backButtonIcon', arrowBackSharp) as string
         */
        "cancelButtonIcon": string;
        /**
          * Set the cancel button text. Only applies to `ios` mode.
          * @default 'Cancel'
         */
        "cancelButtonText": string;
        /**
          * Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`.
         */
        "clearIcon"?: string;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
         */
        "debounce"?: number;
        /**
          * If `true`, the user cannot interact with the input.
          * @default false
         */
        "disabled": boolean;
        /**
          * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
         */
        "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
        /**
          * Returns the native `<input>` element used under the hood.
         */
        "getInputElement": () => Promise<HTMLInputElement>;
        /**
          * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
         */
        "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
        /**
          * This attribute specifies the maximum number of characters that the user can enter.
         */
        "maxlength"?: number;
        /**
          * This attribute specifies the minimum number of characters that the user can enter.
         */
        "minlength"?: number;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * If used in a form, set the name of the control, which is submitted with the form data.
          * @default this.inputId
         */
        "name": string;
        /**
          * Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
          * @default 'Search'
         */
        "placeholder": string;
        /**
          * The icon to use as the search icon. Defaults to `search-outline` in `ios` mode and `search-sharp` in `md` mode.
         */
        "searchIcon"?: string;
        /**
          * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global `input.focus()`. Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method. Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.  See [managing focus](/docs/developing/managing-focus) for more information.
         */
        "setFocus": () => Promise<void>;
        /**
          * Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state.
          * @default 'never'
         */
        "showCancelButton": 'never' | 'focus' | 'always';
        /**
          * Sets the behavior for the clear button. Defaults to `"focus"`. Setting to `"focus"` shows the clear button on focus if the input is not empty. Setting to `"never"` hides the clear button. Setting to `"always"` shows the clear button regardless of focus state, but only if the input is not empty.
          * @default 'always'
         */
        "showClearButton": 'never' | 'focus' | 'always';
        /**
          * If `true`, enable spellcheck on the input.
          * @default false
         */
        "spellcheck": boolean;
        /**
          * Set the type of the input.
          * @default 'search'
         */
        "type": 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
        /**
          * the value of the searchbar.
          * @default ''
         */
        "value"?: string | null;
    }
    interface IonSegment {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the segment.
          * @default false
         */
        "disabled": boolean;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.
          * @default false
         */
        "scrollable": boolean;
        /**
          * If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element. If `false`, keyboard navigation will only focus the `ion-segment-button` element.
          * @default false
         */
        "selectOnFocus": boolean;
        /**
          * If `true`, users will be able to swipe between segment buttons to activate them.
          * @default true
         */
        "swipeGesture": boolean;
        /**
          * the value of the segment.
         */
        "value"?: SegmentValue;
    }
    interface IonSegmentButton {
        /**
          * The `id` of the segment content.
         */
        "contentId"?: string;
        /**
          * If `true`, the user cannot interact with the segment button.
          * @default false
         */
        "disabled": boolean;
        /**
          * Set the layout of the text and icon in the segment.
          * @default 'icon-top'
         */
        "layout"?: SegmentButtonLayout;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        "setFocus": () => Promise<void>;
        /**
          * The type of the button.
          * @default 'button'
         */
        "type": 'submit' | 'reset' | 'button';
        /**
          * The value of the segment button.
          * @default 'ion-sb-' + ids++
         */
        "value": SegmentValue;
    }
    interface IonSegmentContent {
    }
    interface IonSegmentView {
        /**
          * If `true`, the segment view cannot be interacted with.
          * @default false
         */
        "disabled": boolean;
        /**
          * @param id : The id of the segment content to display.
          * @param smoothScroll : Whether to animate the scroll transition.
         */
        "setContent": (id: string, smoothScroll?: boolean) => Promise<void>;
        /**
          * If `true`, users will be able to swipe the segment view to navigate between segment contents.
          * @default true
         */
        "swipeGesture": boolean;
    }
    interface IonSelect {
        /**
          * The text to display on the cancel button.
          * @default 'Cancel'
         */
        "cancelText": string;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).  This property is only available when using the modern select syntax.
         */
        "color"?: Color;
        /**
          * This property allows developers to specify a custom function or property name for comparing objects when determining the selected option in the ion-select. When not specified, the default behavior will use strict equality (===) for comparison.
         */
        "compareWith"?: string | SelectCompareFn | null;
        /**
          * If `true`, the user cannot interact with the select.
          * @default false
         */
        "disabled": boolean;
        /**
          * Text that is placed under the select and displayed when an error is detected.
         */
        "errorText"?: string;
        /**
          * The toggle icon to show when the select is open. If defined, the icon rotation behavior in `md` mode will be disabled. If undefined, `toggleIcon` will be used for when the select is both open and closed.
         */
        "expandedIcon"?: string;
        /**
          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
         */
        "fill"?: 'outline' | 'solid';
        /**
          * Text that is placed under the select and displayed when no error is detected.
         */
        "helperText"?: string;
        /**
          * The interface the select should use: `action-sheet`, `popover`, `alert`, or `modal`.
          * @default 'alert'
         */
        "interface": SelectInterface;
        /**
          * Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [ion-alert docs](./alert), the [ion-action-sheet docs](./action-sheet), the [ion-popover docs](./popover), and the [ion-modal docs](./modal) for the create options for each interface.  Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
          * @default {}
         */
        "interfaceOptions": any;
        /**
          * How to pack the label and select within a line. `justify` does not apply when the label and select are on different lines when `labelPlacement` is set to `"floating"` or `"stacked"`. `"start"`: The label and select will appear on the left in LTR and on the right in RTL. `"end"`: The label and select will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and select will appear on opposite ends of the line with space between the two elements.
         */
        "justify"?: 'start' | 'end' | 'space-between';
        /**
          * The visible label associated with the select.  Use this if you need to render a plaintext label.  The `label` property will take priority over the `label` slot if both are used.
         */
        "label"?: string;
        /**
          * Where to place the label relative to the select. `"start"`: The label will appear to the left of the select in LTR and to the right in RTL. `"end"`: The label will appear to the right of the select in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select. `"stacked"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). When using `"floating"` or `"stacked"` we recommend initializing the select with either a `value` or a `placeholder`.
          * @default 'start'
         */
        "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * If `true`, the select can accept multiple values.
          * @default false
         */
        "multiple": boolean;
        /**
          * The name of the control, which is submitted with the form data.
          * @default this.inputId
         */
        "name": string;
        /**
          * The text to display on the ok button.
          * @default 'OK'
         */
        "okText": string;
        /**
          * Open the select overlay. The overlay is either an alert, action sheet, or popover, depending on the `interface` property on the `ion-select`.
          * @param event The user interface event that called the open.
         */
        "open": (event?: UIEvent) => Promise<any>;
        /**
          * The text to display when the select is empty.
         */
        "placeholder"?: string;
        /**
          * If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid.
          * @default false
         */
        "required": boolean;
        /**
          * The text to display instead of the selected option's value.
         */
        "selectedText"?: string | null;
        /**
          * The shape of the select. If "round" it will have an increased border radius.
         */
        "shape"?: 'round';
        /**
          * The toggle icon to use. Defaults to `chevronExpand` for `ios` mode, or `caretDownSharp` for `md` mode.
         */
        "toggleIcon"?: string;
        /**
          * The value of the select.
         */
        "value"?: any | null;
    }
    interface IonSelectModal {
        /**
          * The text to display on the cancel button.
          * @default 'Close'
         */
        "cancelText": string;
        "header"?: string;
        "multiple"?: boolean;
        /**
          * @default []
         */
        "options": SelectModalOption[];
    }
    interface IonSelectOption {
        /**
          * If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
          * @default false
         */
        "disabled": boolean;
        /**
          * The text value of the option.
         */
        "value"?: any | null;
    }
    interface IonSelectPopover {
        /**
          * The header text of the popover
         */
        "header"?: string;
        /**
          * The text content of the popover body
         */
        "message"?: string;
        /**
          * If true, the select accepts multiple values
         */
        "multiple"?: boolean;
        /**
          * An array of options for the popover
          * @default []
         */
        "options": SelectPopoverOption[];
        /**
          * The subheader text of the popover
         */
        "subHeader"?: string;
    }
    interface IonSkeletonText {
        /**
          * If `true`, the skeleton text will animate.
          * @default false
         */
        "animated": boolean;
    }
    interface IonSpinner {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * Duration of the spinner animation in milliseconds. The default varies based on the spinner.
         */
        "duration"?: number;
        /**
          * The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used.
         */
        "name"?: SpinnerTypes;
        /**
          * If `true`, the spinner's animation will be paused.
          * @default false
         */
        "paused": boolean;
    }
    interface IonSplitPane {
        /**
          * The `id` of the main content. When using a router this is typically `ion-router-outlet`. When not using a router, this is typically your main view's `ion-content`. This is not the id of the `ion-content` inside of your `ion-menu`.
         */
        "contentId"?: string;
        /**
          * If `true`, the split pane will be hidden.
          * @default false
         */
        "disabled": boolean;
        "isVisible": () => Promise<boolean>;
        /**
          * When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression.
          * @default QUERY['lg']
         */
        "when": string | boolean;
    }
    interface IonTab {
        /**
          * @default false
         */
        "active": boolean;
        /**
          * The component to display inside of the tab.
         */
        "component"?: ComponentRef;
        "delegate"?: FrameworkDelegate;
        /**
          * Set the active component for the tab
         */
        "setActive": () => Promise<void>;
        /**
          * A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.
         */
        "tab": string;
    }
    interface IonTabBar {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * The selected tab component
         */
        "selectedTab"?: string;
        /**
          * If `true`, the tab bar will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          * @default false
         */
        "translucent": boolean;
    }
    interface IonTabButton {
        /**
          * If `true`, the user cannot interact with the tab button.
          * @default false
         */
        "disabled": boolean;
        /**
          * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
         */
        "download": string | undefined;
        /**
          * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
         */
        "href": string | undefined;
        /**
          * Set the layout of the text and icon in the tab bar. It defaults to `"icon-top"`.
         */
        "layout"?: TabButtonLayout;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
         */
        "rel": string | undefined;
        /**
          * The selected tab component
          * @default false
         */
        "selected": boolean;
        /**
          * A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.
         */
        "tab"?: string;
        /**
          * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
         */
        "target": string | undefined;
    }
    interface IonTabs {
        "getRouteId": () => Promise<RouteID | undefined>;
        /**
          * Get the currently selected tab. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
         */
        "getSelected": () => Promise<string | undefined>;
        /**
          * Get a specific tab by the value of its `tab` property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
          * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.
         */
        "getTab": (tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>;
        /**
          * Select a tab by the value of its `tab` property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
          * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.
         */
        "select": (tab: string | HTMLIonTabElement) => Promise<boolean>;
        "setRouteId": (id: string) => Promise<RouteWrite>;
        /**
          * @default false
         */
        "useRouter": boolean;
    }
    interface IonText {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
    }
    interface IonTextarea {
        /**
          * If `true`, the textarea container will grow and shrink based on the contents of the textarea.
          * @default false
         */
        "autoGrow": boolean;
        /**
          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
          * @default 'none'
         */
        "autocapitalize": string;
        /**
          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
          * @default false
         */
        "autofocus": boolean;
        /**
          * If `true`, the value will be cleared after focus upon edit.
          * @default false
         */
        "clearOnEdit": boolean;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.
         */
        "cols"?: number;
        /**
          * If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.
          * @default false
         */
        "counter": boolean;
        /**
          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
         */
        "counterFormatter"?: (inputLength: number, maxLength: number) => string;
        /**
          * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
         */
        "debounce"?: number;
        /**
          * If `true`, the user cannot interact with the textarea.
          * @default false
         */
        "disabled": boolean;
        /**
          * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
         */
        "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
        /**
          * Text that is placed under the textarea and displayed when an error is detected.
         */
        "errorText"?: string;
        /**
          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
         */
        "fill"?: 'outline' | 'solid';
        /**
          * Returns the native `<textarea>` element used under the hood.
         */
        "getInputElement": () => Promise<HTMLTextAreaElement>;
        /**
          * Text that is placed under the textarea and displayed when no error is detected.
         */
        "helperText"?: string;
        /**
          * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
         */
        "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
        /**
          * The visible label associated with the textarea.  Use this if you need to render a plaintext label.  The `label` property will take priority over the `label` slot if both are used.
         */
        "label"?: string;
        /**
          * Where to place the label relative to the textarea. `"start"`: The label will appear to the left of the textarea in LTR and to the right in RTL. `"end"`: The label will appear to the right of the textarea in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea. `"stacked"`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
          * @default 'start'
         */
        "labelPlacement": 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
        /**
          * This attribute specifies the maximum number of characters that the user can enter.
         */
        "maxlength"?: number;
        /**
          * This attribute specifies the minimum number of characters that the user can enter.
         */
        "minlength"?: number;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * The name of the control, which is submitted with the form data.
          * @default this.inputId
         */
        "name": string;
        /**
          * Instructional text that shows before the input has a value.
         */
        "placeholder"?: string;
        /**
          * If `true`, the user cannot modify the value.
          * @default false
         */
        "readonly": boolean;
        /**
          * If `true`, the user must fill in a value before submitting a form.
          * @default false
         */
        "required": boolean;
        /**
          * The number of visible text lines for the control.
         */
        "rows"?: number;
        /**
          * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global `textarea.focus()`.  See [managing focus](/docs/developing/managing-focus) for more information.
         */
        "setFocus": () => Promise<void>;
        /**
          * The shape of the textarea. If "round" it will have an increased border radius.
         */
        "shape"?: 'round';
        /**
          * If `true`, the element will have its spelling and grammar checked.
          * @default false
         */
        "spellcheck": boolean;
        /**
          * The value of the textarea.
          * @default ''
         */
        "value"?: string | null;
        /**
          * Indicates how the control wraps text.
         */
        "wrap"?: 'hard' | 'soft' | 'off';
    }
    interface IonThumbnail {
    }
    interface IonTitle {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The size of the toolbar title.
         */
        "size"?: 'large' | 'small';
    }
    interface IonToast {
        /**
          * If `true`, the toast will animate.
          * @default true
         */
        "animated": boolean;
        /**
          * An array of buttons for the toast.
         */
        "buttons"?: (ToastButton | string)[];
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
         */
        "cssClass"?: string | string[];
        "delegate"?: FrameworkDelegate;
        /**
          * Dismiss the toast overlay after it has been presented. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
          * @param data Any data to emit in the dismiss events.
          * @param role The role of the element that is dismissing the toast. This can be useful in a button handler for determining which button was clicked to dismiss the toast. Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
         */
        "dismiss": (data?: any, role?: string) => Promise<boolean>;
        /**
          * How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called.
          * @default config.getNumber('toastDuration', 0)
         */
        "duration": number;
        /**
          * Animation to use when the toast is presented.
         */
        "enterAnimation"?: AnimationBuilder;
        /**
          * @default false
         */
        "hasController": boolean;
        /**
          * Header to be shown in the toast.
         */
        "header"?: string;
        /**
          * Additional attributes to pass to the toast.
         */
        "htmlAttributes"?: { [key: string]: any };
        /**
          * The name of the icon to display, or the path to a valid SVG file. See `ion-icon`. https://ionic.io/ionicons
         */
        "icon"?: string;
        /**
          * If `true`, the toast will open. If `false`, the toast will close. Use this if you need finer grained control over presentation, otherwise just use the toastController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the toast dismisses. You will need to do that in your code.
          * @default false
         */
        "isOpen": boolean;
        /**
          * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          * @default false
         */
        "keyboardClose": boolean;
        /**
          * Defines how the message and buttons are laid out in the toast. 'baseline': The message and the buttons will appear on the same line. Message text may wrap within the message container. 'stacked': The buttons containers and message will stack on top of each other. Use this if you have long text in your buttons.
          * @default 'baseline'
         */
        "layout": ToastLayout;
        /**
          * Animation to use when the toast is dismissed.
         */
        "leaveAnimation"?: AnimationBuilder;
        /**
          * Message to be shown in the toast. This property accepts custom HTML as a string. Content is parsed as plaintext by default. `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config before custom HTML can be used.
         */
        "message"?: string | IonicSafeString;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Returns a promise that resolves when the toast did dismiss.
         */
        "onDidDismiss": <T = any>() => Promise<OverlayEventDetail<T>>;
        /**
          * Returns a promise that resolves when the toast will dismiss.
         */
        "onWillDismiss": <T = any>() => Promise<OverlayEventDetail<T>>;
        "overlayIndex": number;
        /**
          * The starting position of the toast on the screen. Can be tweaked further using the `positionAnchor` property.
          * @default 'bottom'
         */
        "position": ToastPosition;
        /**
          * The element to anchor the toast's position to. Can be set as a direct reference or the ID of the element. With `position="bottom"`, the toast will sit above the chosen element. With `position="top"`, the toast will sit below the chosen element. With `position="middle"`, the value of `positionAnchor` is ignored.
         */
        "positionAnchor"?: HTMLElement | string;
        /**
          * Present the toast overlay after it has been created.
         */
        "present": () => Promise<void>;
        /**
          * If set to 'vertical', the Toast can be dismissed with a swipe gesture. The swipe direction is determined by the value of the `position` property: `top`: The Toast can be swiped up to dismiss. `bottom`: The Toast can be swiped down to dismiss. `middle`: The Toast can be swiped up or down to dismiss.
         */
        "swipeGesture"?: ToastSwipeGestureDirection;
        /**
          * If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          * @default false
         */
        "translucent": boolean;
        /**
          * An ID corresponding to the trigger element that causes the toast to open when clicked.
         */
        "trigger": string | undefined;
    }
    interface IonToggle {
        /**
          * How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the toggle `display` to `block`.
         */
        "alignment"?: 'start' | 'center';
        /**
          * If `true`, the toggle is selected.
          * @default false
         */
        "checked": boolean;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the toggle.
          * @default false
         */
        "disabled": boolean;
        /**
          * Enables the on/off accessibility switch labels within the toggle.
          * @default config.get('toggleOnOffLabels')
         */
        "enableOnOffLabels": boolean | undefined;
        /**
          * Text that is placed under the toggle label and displayed when an error is detected.
         */
        "errorText"?: string;
        /**
          * Text that is placed under the toggle label and displayed when no error is detected.
         */
        "helperText"?: string;
        /**
          * How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements. Setting this property will change the toggle `display` to `block`.
         */
        "justify"?: 'start' | 'end' | 'space-between';
        /**
          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          * @default 'start'
         */
        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * The name of the control, which is submitted with the form data.
          * @default this.inputId
         */
        "name": string;
        /**
          * If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid.
          * @default false
         */
        "required": boolean;
        /**
          * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
          * @default 'on'
         */
        "value"?: string | null;
    }
    interface IonToolbar {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
    }
}
export interface IonAccordionGroupCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonAccordionGroupElement;
}
export interface IonActionSheetCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonActionSheetElement;
}
export interface IonAlertCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonAlertElement;
}
export interface IonBackdropCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonBackdropElement;
}
export interface IonBreadcrumbCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonBreadcrumbElement;
}
export interface IonBreadcrumbsCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonBreadcrumbsElement;
}
export interface IonButtonCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonButtonElement;
}
export interface IonCheckboxCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonCheckboxElement;
}
export interface IonContentCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonContentElement;
}
export interface IonDatetimeCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonDatetimeElement;
}
export interface IonFabButtonCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonFabButtonElement;
}
export interface IonImgCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonImgElement;
}
export interface IonInfiniteScrollCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonInfiniteScrollElement;
}
export interface IonInputCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonInputElement;
}
export interface IonInputOtpCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonInputOtpElement;
}
export interface IonItemOptionsCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonItemOptionsElement;
}
export interface IonItemSlidingCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonItemSlidingElement;
}
export interface IonLabelCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonLabelElement;
}
export interface IonLoadingCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonLoadingElement;
}
export interface IonMenuCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonMenuElement;
}
export interface IonModalCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonModalElement;
}
export interface IonNavCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonNavElement;
}
export interface IonPickerCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonPickerElement;
}
export interface IonPickerColumnCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonPickerColumnElement;
}
export interface IonPickerLegacyCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonPickerLegacyElement;
}
export interface IonPickerLegacyColumnCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonPickerLegacyColumnElement;
}
export interface IonPopoverCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonPopoverElement;
}
export interface IonRadioCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonRadioElement;
}
export interface IonRadioGroupCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonRadioGroupElement;
}
export interface IonRangeCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonRangeElement;
}
export interface IonRefresherCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonRefresherElement;
}
export interface IonReorderGroupCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonReorderGroupElement;
}
export interface IonRouteCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonRouteElement;
}
export interface IonRouteRedirectCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonRouteRedirectElement;
}
export interface IonRouterCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonRouterElement;
}
export interface IonRouterOutletCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonRouterOutletElement;
}
export interface IonSearchbarCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonSearchbarElement;
}
export interface IonSegmentCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonSegmentElement;
}
export interface IonSegmentViewCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonSegmentViewElement;
}
export interface IonSelectCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonSelectElement;
}
export interface IonSkeletonTextCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonSkeletonTextElement;
}
export interface IonSplitPaneCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonSplitPaneElement;
}
export interface IonTabBarCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonTabBarElement;
}
export interface IonTabButtonCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonTabButtonElement;
}
export interface IonTabsCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonTabsElement;
}
export interface IonTextareaCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonTextareaElement;
}
export interface IonTitleCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonTitleElement;
}
export interface IonToastCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonToastElement;
}
export interface IonToggleCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLIonToggleElement;
}
declare global {
    interface HTMLIonAccordionElement extends Components.IonAccordion, HTMLStencilElement {
    }
    var HTMLIonAccordionElement: {
        prototype: HTMLIonAccordionElement;
        new (): HTMLIonAccordionElement;
    };
    interface HTMLIonAccordionGroupElementEventMap {
        "ionChange": AccordionGroupChangeEventDetail;
        "ionValueChange": AccordionGroupChangeEventDetail;
    }
    interface HTMLIonAccordionGroupElement extends Components.IonAccordionGroup, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonAccordionGroupElementEventMap>(type: K, listener: (this: HTMLIonAccordionGroupElement, ev: IonAccordionGroupCustomEvent<HTMLIonAccordionGroupElementEventMap[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 HTMLIonAccordionGroupElementEventMap>(type: K, listener: (this: HTMLIonAccordionGroupElement, ev: IonAccordionGroupCustomEvent<HTMLIonAccordionGroupElementEventMap[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 HTMLIonAccordionGroupElement: {
        prototype: HTMLIonAccordionGroupElement;
        new (): HTMLIonAccordionGroupElement;
    };
    interface HTMLIonActionSheetElementEventMap {
        "ionActionSheetDidPresent": void;
        "ionActionSheetWillPresent": void;
        "ionActionSheetWillDismiss": OverlayEventDetail;
        "ionActionSheetDidDismiss": OverlayEventDetail;
        "didPresent": void;
        "willPresent": void;
        "willDismiss": OverlayEventDetail;
        "didDismiss": OverlayEventDetail;
    }
    interface HTMLIonActionSheetElement extends Components.IonActionSheet, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonActionSheetElementEventMap>(type: K, listener: (this: HTMLIonActionSheetElement, ev: IonActionSheetCustomEvent<HTMLIonActionSheetElementEventMap[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 HTMLIonActionSheetElementEventMap>(type: K, listener: (this: HTMLIonActionSheetElement, ev: IonActionSheetCustomEvent<HTMLIonActionSheetElementEventMap[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 HTMLIonActionSheetElement: {
        prototype: HTMLIonActionSheetElement;
        new (): HTMLIonActionSheetElement;
    };
    interface HTMLIonAlertElementEventMap {
        "ionAlertDidPresent": void;
        "ionAlertWillPresent": void;
        "ionAlertWillDismiss": OverlayEventDetail;
        "ionAlertDidDismiss": OverlayEventDetail;
        "didPresent": void;
        "willPresent": void;
        "willDismiss": OverlayEventDetail;
        "didDismiss": OverlayEventDetail;
    }
    interface HTMLIonAlertElement extends Components.IonAlert, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonAlertElementEventMap>(type: K, listener: (this: HTMLIonAlertElement, ev: IonAlertCustomEvent<HTMLIonAlertElementEventMap[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 HTMLIonAlertElementEventMap>(type: K, listener: (this: HTMLIonAlertElement, ev: IonAlertCustomEvent<HTMLIonAlertElementEventMap[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 HTMLIonAlertElement: {
        prototype: HTMLIonAlertElement;
        new (): HTMLIonAlertElement;
    };
    interface HTMLIonAppElement extends Components.IonApp, HTMLStencilElement {
    }
    var HTMLIonAppElement: {
        prototype: HTMLIonAppElement;
        new (): HTMLIonAppElement;
    };
    interface HTMLIonAvatarElement extends Components.IonAvatar, HTMLStencilElement {
    }
    var HTMLIonAvatarElement: {
        prototype: HTMLIonAvatarElement;
        new (): HTMLIonAvatarElement;
    };
    interface HTMLIonBackButtonElement extends Components.IonBackButton, HTMLStencilElement {
    }
    var HTMLIonBackButtonElement: {
        prototype: HTMLIonBackButtonElement;
        new (): HTMLIonBackButtonElement;
    };
    interface HTMLIonBackdropElementEventMap {
        "ionBackdropTap": void;
    }
    interface HTMLIonBackdropElement extends Components.IonBackdrop, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonBackdropElementEventMap>(type: K, listener: (this: HTMLIonBackdropElement, ev: IonBackdropCustomEvent<HTMLIonBackdropElementEventMap[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 HTMLIonBackdropElementEventMap>(type: K, listener: (this: HTMLIonBackdropElement, ev: IonBackdropCustomEvent<HTMLIonBackdropElementEventMap[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 HTMLIonBackdropElement: {
        prototype: HTMLIonBackdropElement;
        new (): HTMLIonBackdropElement;
    };
    interface HTMLIonBadgeElement extends Components.IonBadge, HTMLStencilElement {
    }
    var HTMLIonBadgeElement: {
        prototype: HTMLIonBadgeElement;
        new (): HTMLIonBadgeElement;
    };
    interface HTMLIonBreadcrumbElementEventMap {
        "ionFocus": void;
        "ionBlur": void;
        "collapsedClick": BreadcrumbCollapsedClickEventDetail;
    }
    interface HTMLIonBreadcrumbElement extends Components.IonBreadcrumb, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonBreadcrumbElementEventMap>(type: K, listener: (this: HTMLIonBreadcrumbElement, ev: IonBreadcrumbCustomEvent<HTMLIonBreadcrumbElementEventMap[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 HTMLIonBreadcrumbElementEventMap>(type: K, listener: (this: HTMLIonBreadcrumbElement, ev: IonBreadcrumbCustomEvent<HTMLIonBreadcrumbElementEventMap[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 HTMLIonBreadcrumbElement: {
        prototype: HTMLIonBreadcrumbElement;
        new (): HTMLIonBreadcrumbElement;
    };
    interface HTMLIonBreadcrumbsElementEventMap {
        "ionCollapsedClick": BreadcrumbCollapsedClickEventDetail;
    }
    interface HTMLIonBreadcrumbsElement extends Components.IonBreadcrumbs, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonBreadcrumbsElementEventMap>(type: K, listener: (this: HTMLIonBreadcrumbsElement, ev: IonBreadcrumbsCustomEvent<HTMLIonBreadcrumbsElementEventMap[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 HTMLIonBreadcrumbsElementEventMap>(type: K, listener: (this: HTMLIonBreadcrumbsElement, ev: IonBreadcrumbsCustomEvent<HTMLIonBreadcrumbsElementEventMap[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 HTMLIonBreadcrumbsElement: {
        prototype: HTMLIonBreadcrumbsElement;
        new (): HTMLIonBreadcrumbsElement;
    };
    interface HTMLIonButtonElementEventMap {
        "ionFocus": void;
        "ionBlur": void;
    }
    interface HTMLIonButtonElement extends Components.IonButton, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonButtonElementEventMap>(type: K, listener: (this: HTMLIonButtonElement, ev: IonButtonCustomEvent<HTMLIonButtonElementEventMap[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 HTMLIonButtonElementEventMap>(type: K, listener: (this: HTMLIonButtonElement, ev: IonButtonCustomEvent<HTMLIonButtonElementEventMap[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 HTMLIonButtonElement: {
        prototype: HTMLIonButtonElement;
        new (): HTMLIonButtonElement;
    };
    interface HTMLIonButtonsElement extends Components.IonButtons, HTMLStencilElement {
    }
    var HTMLIonButtonsElement: {
        prototype: HTMLIonButtonsElement;
        new (): HTMLIonButtonsElement;
    };
    interface HTMLIonCardElement extends Components.IonCard, HTMLStencilElement {
    }
    var HTMLIonCardElement: {
        prototype: HTMLIonCardElement;
        new (): HTMLIonCardElement;
    };
    interface HTMLIonCardContentElement extends Components.IonCardContent, HTMLStencilElement {
    }
    var HTMLIonCardContentElement: {
        prototype: HTMLIonCardContentElement;
        new (): HTMLIonCardContentElement;
    };
    interface HTMLIonCardHeaderElement extends Components.IonCardHeader, HTMLStencilElement {
    }
    var HTMLIonCardHeaderElement: {
        prototype: HTMLIonCardHeaderElement;
        new (): HTMLIonCardHeaderElement;
    };
    interface HTMLIonCardSubtitleElement extends Components.IonCardSubtitle, HTMLStencilElement {
    }
    var HTMLIonCardSubtitleElement: {
        prototype: HTMLIonCardSubtitleElement;
        new (): HTMLIonCardSubtitleElement;
    };
    interface HTMLIonCardTitleElement extends Components.IonCardTitle, HTMLStencilElement {
    }
    var HTMLIonCardTitleElement: {
        prototype: HTMLIonCardTitleElement;
        new (): HTMLIonCardTitleElement;
    };
    interface HTMLIonCheckboxElementEventMap {
        "ionChange": CheckboxChangeEventDetail;
        "ionFocus": void;
        "ionBlur": void;
    }
    interface HTMLIonCheckboxElement extends Components.IonCheckbox, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonCheckboxElementEventMap>(type: K, listener: (this: HTMLIonCheckboxElement, ev: IonCheckboxCustomEvent<HTMLIonCheckboxElementEventMap[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 HTMLIonCheckboxElementEventMap>(type: K, listener: (this: HTMLIonCheckboxElement, ev: IonCheckboxCustomEvent<HTMLIonCheckboxElementEventMap[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 HTMLIonCheckboxElement: {
        prototype: HTMLIonCheckboxElement;
        new (): HTMLIonCheckboxElement;
    };
    interface HTMLIonChipElement extends Components.IonChip, HTMLStencilElement {
    }
    var HTMLIonChipElement: {
        prototype: HTMLIonChipElement;
        new (): HTMLIonChipElement;
    };
    interface HTMLIonColElement extends Components.IonCol, HTMLStencilElement {
    }
    var HTMLIonColElement: {
        prototype: HTMLIonColElement;
        new (): HTMLIonColElement;
    };
    interface HTMLIonContentElementEventMap {
        "ionScrollStart": ScrollBaseDetail;
        "ionScroll": ScrollDetail;
        "ionScrollEnd": ScrollBaseDetail;
    }
    interface HTMLIonContentElement extends Components.IonContent, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonContentElementEventMap>(type: K, listener: (this: HTMLIonContentElement, ev: IonContentCustomEvent<HTMLIonContentElementEventMap[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 HTMLIonContentElementEventMap>(type: K, listener: (this: HTMLIonContentElement, ev: IonContentCustomEvent<HTMLIonContentElementEventMap[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 HTMLIonContentElement: {
        prototype: HTMLIonContentElement;
        new (): HTMLIonContentElement;
    };
    interface HTMLIonDatetimeElementEventMap {
        "ionCancel": void;
        "ionChange": DatetimeChangeEventDetail;
        "ionValueChange": DatetimeChangeEventDetail;
        "ionFocus": void;
        "ionBlur": void;
        "ionStyle": StyleEventDetail;
        "ionRender": void;
    }
    interface HTMLIonDatetimeElement extends Components.IonDatetime, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonDatetimeElementEventMap>(type: K, listener: (this: HTMLIonDatetimeElement, ev: IonDatetimeCustomEvent<HTMLIonDatetimeElementEventMap[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 HTMLIonDatetimeElementEventMap>(type: K, listener: (this: HTMLIonDatetimeElement, ev: IonDatetimeCustomEvent<HTMLIonDatetimeElementEventMap[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 HTMLIonDatetimeElement: {
        prototype: HTMLIonDatetimeElement;
        new (): HTMLIonDatetimeElement;
    };
    interface HTMLIonDatetimeButtonElement extends Components.IonDatetimeButton, HTMLStencilElement {
    }
    var HTMLIonDatetimeButtonElement: {
        prototype: HTMLIonDatetimeButtonElement;
        new (): HTMLIonDatetimeButtonElement;
    };
    interface HTMLIonFabElement extends Components.IonFab, HTMLStencilElement {
    }
    var HTMLIonFabElement: {
        prototype: HTMLIonFabElement;
        new (): HTMLIonFabElement;
    };
    interface HTMLIonFabButtonElementEventMap {
        "ionFocus": void;
        "ionBlur": void;
    }
    interface HTMLIonFabButtonElement extends Components.IonFabButton, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonFabButtonElementEventMap>(type: K, listener: (this: HTMLIonFabButtonElement, ev: IonFabButtonCustomEvent<HTMLIonFabButtonElementEventMap[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 HTMLIonFabButtonElementEventMap>(type: K, listener: (this: HTMLIonFabButtonElement, ev: IonFabButtonCustomEvent<HTMLIonFabButtonElementEventMap[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 HTMLIonFabButtonElement: {
        prototype: HTMLIonFabButtonElement;
        new (): HTMLIonFabButtonElement;
    };
    interface HTMLIonFabListElement extends Components.IonFabList, HTMLStencilElement {
    }
    var HTMLIonFabListElement: {
        prototype: HTMLIonFabListElement;
        new (): HTMLIonFabListElement;
    };
    interface HTMLIonFooterElement extends Components.IonFooter, HTMLStencilElement {
    }
    var HTMLIonFooterElement: {
        prototype: HTMLIonFooterElement;
        new (): HTMLIonFooterElement;
    };
    interface HTMLIonGridElement extends Components.IonGrid, HTMLStencilElement {
    }
    var HTMLIonGridElement: {
        prototype: HTMLIonGridElement;
        new (): HTMLIonGridElement;
    };
    interface HTMLIonHeaderElement extends Components.IonHeader, HTMLStencilElement {
    }
    var HTMLIonHeaderElement: {
        prototype: HTMLIonHeaderElement;
        new (): HTMLIonHeaderElement;
    };
    interface HTMLIonImgElementEventMap {
        "ionImgWillLoad": void;
        "ionImgDidLoad": void;
        "ionError": void;
    }
    interface HTMLIonImgElement extends Components.IonImg, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonImgElementEventMap>(type: K, listener: (this: HTMLIonImgElement, ev: IonImgCustomEvent<HTMLIonImgElementEventMap[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 HTMLIonImgElementEventMap>(type: K, listener: (this: HTMLIonImgElement, ev: IonImgCustomEvent<HTMLIonImgElementEventMap[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 HTMLIonImgElement: {
        prototype: HTMLIonImgElement;
        new (): HTMLIonImgElement;
    };
    interface HTMLIonInfiniteScrollElementEventMap {
        "ionInfinite": void;
    }
    interface HTMLIonInfiniteScrollElement extends Components.IonInfiniteScroll, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonInfiniteScrollElementEventMap>(type: K, listener: (this: HTMLIonInfiniteScrollElement, ev: IonInfiniteScrollCustomEvent<HTMLIonInfiniteScrollElementEventMap[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 HTMLIonInfiniteScrollElementEventMap>(type: K, listener: (this: HTMLIonInfiniteScrollElement, ev: IonInfiniteScrollCustomEvent<HTMLIonInfiniteScrollElementEventMap[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 HTMLIonInfiniteScrollElement: {
        prototype: HTMLIonInfiniteScrollElement;
        new (): HTMLIonInfiniteScrollElement;
    };
    interface HTMLIonInfiniteScrollContentElement extends Components.IonInfiniteScrollContent, HTMLStencilElement {
    }
    var HTMLIonInfiniteScrollContentElement: {
        prototype: HTMLIonInfiniteScrollContentElement;
        new (): HTMLIonInfiniteScrollContentElement;
    };
    interface HTMLIonInputElementEventMap {
        "ionInput": InputInputEventDetail;
        "ionChange": InputChangeEventDetail;
        "ionBlur": FocusEvent;
        "ionFocus": FocusEvent;
    }
    interface HTMLIonInputElement extends Components.IonInput, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonInputElementEventMap>(type: K, listener: (this: HTMLIonInputElement, ev: IonInputCustomEvent<HTMLIonInputElementEventMap[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 HTMLIonInputElementEventMap>(type: K, listener: (this: HTMLIonInputElement, ev: IonInputCustomEvent<HTMLIonInputElementEventMap[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 HTMLIonInputElement: {
        prototype: HTMLIonInputElement;
        new (): HTMLIonInputElement;
    };
    interface HTMLIonInputOtpElementEventMap {
        "ionInput": InputOtpInputEventDetail;
        "ionChange": InputOtpChangeEventDetail;
        "ionComplete": InputOtpCompleteEventDetail;
        "ionBlur": FocusEvent;
        "ionFocus": FocusEvent;
    }
    interface HTMLIonInputOtpElement extends Components.IonInputOtp, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonInputOtpElementEventMap>(type: K, listener: (this: HTMLIonInputOtpElement, ev: IonInputOtpCustomEvent<HTMLIonInputOtpElementEventMap[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 HTMLIonInputOtpElementEventMap>(type: K, listener: (this: HTMLIonInputOtpElement, ev: IonInputOtpCustomEvent<HTMLIonInputOtpElementEventMap[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 HTMLIonInputOtpElement: {
        prototype: HTMLIonInputOtpElement;
        new (): HTMLIonInputOtpElement;
    };
    interface HTMLIonInputPasswordToggleElement extends Components.IonInputPasswordToggle, HTMLStencilElement {
    }
    var HTMLIonInputPasswordToggleElement: {
        prototype: HTMLIonInputPasswordToggleElement;
        new (): HTMLIonInputPasswordToggleElement;
    };
    interface HTMLIonItemElement extends Components.IonItem, HTMLStencilElement {
    }
    var HTMLIonItemElement: {
        prototype: HTMLIonItemElement;
        new (): HTMLIonItemElement;
    };
    interface HTMLIonItemDividerElement extends Components.IonItemDivider, HTMLStencilElement {
    }
    var HTMLIonItemDividerElement: {
        prototype: HTMLIonItemDividerElement;
        new (): HTMLIonItemDividerElement;
    };
    interface HTMLIonItemGroupElement extends Components.IonItemGroup, HTMLStencilElement {
    }
    var HTMLIonItemGroupElement: {
        prototype: HTMLIonItemGroupElement;
        new (): HTMLIonItemGroupElement;
    };
    interface HTMLIonItemOptionElement extends Components.IonItemOption, HTMLStencilElement {
    }
    var HTMLIonItemOptionElement: {
        prototype: HTMLIonItemOptionElement;
        new (): HTMLIonItemOptionElement;
    };
    interface HTMLIonItemOptionsElementEventMap {
        "ionSwipe": any;
    }
    interface HTMLIonItemOptionsElement extends Components.IonItemOptions, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonItemOptionsElementEventMap>(type: K, listener: (this: HTMLIonItemOptionsElement, ev: IonItemOptionsCustomEvent<HTMLIonItemOptionsElementEventMap[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 HTMLIonItemOptionsElementEventMap>(type: K, listener: (this: HTMLIonItemOptionsElement, ev: IonItemOptionsCustomEvent<HTMLIonItemOptionsElementEventMap[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 HTMLIonItemOptionsElement: {
        prototype: HTMLIonItemOptionsElement;
        new (): HTMLIonItemOptionsElement;
    };
    interface HTMLIonItemSlidingElementEventMap {
        "ionDrag": any;
    }
    interface HTMLIonItemSlidingElement extends Components.IonItemSliding, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonItemSlidingElementEventMap>(type: K, listener: (this: HTMLIonItemSlidingElement, ev: IonItemSlidingCustomEvent<HTMLIonItemSlidingElementEventMap[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 HTMLIonItemSlidingElementEventMap>(type: K, listener: (this: HTMLIonItemSlidingElement, ev: IonItemSlidingCustomEvent<HTMLIonItemSlidingElementEventMap[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 HTMLIonItemSlidingElement: {
        prototype: HTMLIonItemSlidingElement;
        new (): HTMLIonItemSlidingElement;
    };
    interface HTMLIonLabelElementEventMap {
        "ionColor": StyleEventDetail;
        "ionStyle": StyleEventDetail;
    }
    interface HTMLIonLabelElement extends Components.IonLabel, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonLabelElementEventMap>(type: K, listener: (this: HTMLIonLabelElement, ev: IonLabelCustomEvent<HTMLIonLabelElementEventMap[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 HTMLIonLabelElementEventMap>(type: K, listener: (this: HTMLIonLabelElement, ev: IonLabelCustomEvent<HTMLIonLabelElementEventMap[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 HTMLIonLabelElement: {
        prototype: HTMLIonLabelElement;
        new (): HTMLIonLabelElement;
    };
    interface HTMLIonListElement extends Components.IonList, HTMLStencilElement {
    }
    var HTMLIonListElement: {
        prototype: HTMLIonListElement;
        new (): HTMLIonListElement;
    };
    interface HTMLIonListHeaderElement extends Components.IonListHeader, HTMLStencilElement {
    }
    var HTMLIonListHeaderElement: {
        prototype: HTMLIonListHeaderElement;
        new (): HTMLIonListHeaderElement;
    };
    interface HTMLIonLoadingElementEventMap {
        "ionLoadingDidPresent": void;
        "ionLoadingWillPresent": void;
        "ionLoadingWillDismiss": OverlayEventDetail;
        "ionLoadingDidDismiss": OverlayEventDetail;
        "didPresent": void;
        "willPresent": void;
        "willDismiss": OverlayEventDetail;
        "didDismiss": OverlayEventDetail;
    }
    interface HTMLIonLoadingElement extends Components.IonLoading, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonLoadingElementEventMap>(type: K, listener: (this: HTMLIonLoadingElement, ev: IonLoadingCustomEvent<HTMLIonLoadingElementEventMap[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 HTMLIonLoadingElementEventMap>(type: K, listener: (this: HTMLIonLoadingElement, ev: IonLoadingCustomEvent<HTMLIonLoadingElementEventMap[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 HTMLIonLoadingElement: {
        prototype: HTMLIonLoadingElement;
        new (): HTMLIonLoadingElement;
    };
    interface HTMLIonMenuElementEventMap {
        "ionWillOpen": void;
        "ionWillClose": MenuCloseEventDetail;
        "ionDidOpen": void;
        "ionDidClose": MenuCloseEventDetail;
        "ionMenuChange": MenuChangeEventDetail;
    }
    interface HTMLIonMenuElement extends Components.IonMenu, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonMenuElementEventMap>(type: K, listener: (this: HTMLIonMenuElement, ev: IonMenuCustomEvent<HTMLIonMenuElementEventMap[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 HTMLIonMenuElementEventMap>(type: K, listener: (this: HTMLIonMenuElement, ev: IonMenuCustomEvent<HTMLIonMenuElementEventMap[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 HTMLIonMenuElement: {
        prototype: HTMLIonMenuElement;
        new (): HTMLIonMenuElement;
    };
    interface HTMLIonMenuButtonElement extends Components.IonMenuButton, HTMLStencilElement {
    }
    var HTMLIonMenuButtonElement: {
        prototype: HTMLIonMenuButtonElement;
        new (): HTMLIonMenuButtonElement;
    };
    interface HTMLIonMenuToggleElement extends Components.IonMenuToggle, HTMLStencilElement {
    }
    var HTMLIonMenuToggleElement: {
        prototype: HTMLIonMenuToggleElement;
        new (): HTMLIonMenuToggleElement;
    };
    interface HTMLIonModalElementEventMap {
        "ionModalDidPresent": void;
        "ionModalWillPresent": void;
        "ionModalWillDismiss": OverlayEventDetail;
        "ionModalDidDismiss": OverlayEventDetail;
        "ionBreakpointDidChange": ModalBreakpointChangeEventDetail;
        "didPresent": void;
        "willPresent": void;
        "willDismiss": OverlayEventDetail;
        "didDismiss": OverlayEventDetail;
        "ionMount": void;
        "ionDragStart": void;
        "ionDragMove": ModalDragEventDetail;
        "ionDragEnd": ModalDragEventDetail;
    }
    interface HTMLIonModalElement extends Components.IonModal, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonModalElementEventMap>(type: K, listener: (this: HTMLIonModalElement, ev: IonModalCustomEvent<HTMLIonModalElementEventMap[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 HTMLIonModalElementEventMap>(type: K, listener: (this: HTMLIonModalElement, ev: IonModalCustomEvent<HTMLIonModalElementEventMap[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 HTMLIonModalElement: {
        prototype: HTMLIonModalElement;
        new (): HTMLIonModalElement;
    };
    interface HTMLIonNavElementEventMap {
        "ionNavWillLoad": void;
        "ionNavWillChange": void;
        "ionNavDidChange": void;
    }
    interface HTMLIonNavElement extends Components.IonNav, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonNavElementEventMap>(type: K, listener: (this: HTMLIonNavElement, ev: IonNavCustomEvent<HTMLIonNavElementEventMap[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 HTMLIonNavElementEventMap>(type: K, listener: (this: HTMLIonNavElement, ev: IonNavCustomEvent<HTMLIonNavElementEventMap[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 HTMLIonNavElement: {
        prototype: HTMLIonNavElement;
        new (): HTMLIonNavElement;
    };
    interface HTMLIonNavLinkElement extends Components.IonNavLink, HTMLStencilElement {
    }
    var HTMLIonNavLinkElement: {
        prototype: HTMLIonNavLinkElement;
        new (): HTMLIonNavLinkElement;
    };
    interface HTMLIonNoteElement extends Components.IonNote, HTMLStencilElement {
    }
    var HTMLIonNoteElement: {
        prototype: HTMLIonNoteElement;
        new (): HTMLIonNoteElement;
    };
    interface HTMLIonPickerElementEventMap {
        "ionInputModeChange": PickerChangeEventDetail;
    }
    interface HTMLIonPickerElement extends Components.IonPicker, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonPickerElementEventMap>(type: K, listener: (this: HTMLIonPickerElement, ev: IonPickerCustomEvent<HTMLIonPickerElementEventMap[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 HTMLIonPickerElementEventMap>(type: K, listener: (this: HTMLIonPickerElement, ev: IonPickerCustomEvent<HTMLIonPickerElementEventMap[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 HTMLIonPickerElement: {
        prototype: HTMLIonPickerElement;
        new (): HTMLIonPickerElement;
    };
    interface HTMLIonPickerColumnElementEventMap {
        "ionChange": PickerColumnChangeEventDetail;
    }
    interface HTMLIonPickerColumnElement extends Components.IonPickerColumn, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonPickerColumnElementEventMap>(type: K, listener: (this: HTMLIonPickerColumnElement, ev: IonPickerColumnCustomEvent<HTMLIonPickerColumnElementEventMap[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 HTMLIonPickerColumnElementEventMap>(type: K, listener: (this: HTMLIonPickerColumnElement, ev: IonPickerColumnCustomEvent<HTMLIonPickerColumnElementEventMap[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 HTMLIonPickerColumnElement: {
        prototype: HTMLIonPickerColumnElement;
        new (): HTMLIonPickerColumnElement;
    };
    interface HTMLIonPickerColumnOptionElement extends Components.IonPickerColumnOption, HTMLStencilElement {
    }
    var HTMLIonPickerColumnOptionElement: {
        prototype: HTMLIonPickerColumnOptionElement;
        new (): HTMLIonPickerColumnOptionElement;
    };
    interface HTMLIonPickerLegacyElementEventMap {
        "ionPickerDidPresent": void;
        "ionPickerWillPresent": void;
        "ionPickerWillDismiss": OverlayEventDetail;
        "ionPickerDidDismiss": OverlayEventDetail;
        "didPresent": void;
        "willPresent": void;
        "willDismiss": OverlayEventDetail;
        "didDismiss": OverlayEventDetail;
    }
    interface HTMLIonPickerLegacyElement extends Components.IonPickerLegacy, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonPickerLegacyElementEventMap>(type: K, listener: (this: HTMLIonPickerLegacyElement, ev: IonPickerLegacyCustomEvent<HTMLIonPickerLegacyElementEventMap[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 HTMLIonPickerLegacyElementEventMap>(type: K, listener: (this: HTMLIonPickerLegacyElement, ev: IonPickerLegacyCustomEvent<HTMLIonPickerLegacyElementEventMap[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 HTMLIonPickerLegacyElement: {
        prototype: HTMLIonPickerLegacyElement;
        new (): HTMLIonPickerLegacyElement;
    };
    interface HTMLIonPickerLegacyColumnElementEventMap {
        "ionPickerColChange": PickerColumn;
    }
    interface HTMLIonPickerLegacyColumnElement extends Components.IonPickerLegacyColumn, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonPickerLegacyColumnElementEventMap>(type: K, listener: (this: HTMLIonPickerLegacyColumnElement, ev: IonPickerLegacyColumnCustomEvent<HTMLIonPickerLegacyColumnElementEventMap[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 HTMLIonPickerLegacyColumnElementEventMap>(type: K, listener: (this: HTMLIonPickerLegacyColumnElement, ev: IonPickerLegacyColumnCustomEvent<HTMLIonPickerLegacyColumnElementEventMap[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 HTMLIonPickerLegacyColumnElement: {
        prototype: HTMLIonPickerLegacyColumnElement;
        new (): HTMLIonPickerLegacyColumnElement;
    };
    interface HTMLIonPopoverElementEventMap {
        "ionPopoverDidPresent": void;
        "ionPopoverWillPresent": void;
        "ionPopoverWillDismiss": OverlayEventDetail;
        "ionPopoverDidDismiss": OverlayEventDetail;
        "didPresent": void;
        "willPresent": void;
        "willDismiss": OverlayEventDetail;
        "didDismiss": OverlayEventDetail;
        "ionMount": void;
    }
    interface HTMLIonPopoverElement extends Components.IonPopover, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonPopoverElementEventMap>(type: K, listener: (this: HTMLIonPopoverElement, ev: IonPopoverCustomEvent<HTMLIonPopoverElementEventMap[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 HTMLIonPopoverElementEventMap>(type: K, listener: (this: HTMLIonPopoverElement, ev: IonPopoverCustomEvent<HTMLIonPopoverElementEventMap[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 HTMLIonPopoverElement: {
        prototype: HTMLIonPopoverElement;
        new (): HTMLIonPopoverElement;
    };
    interface HTMLIonProgressBarElement extends Components.IonProgressBar, HTMLStencilElement {
    }
    var HTMLIonProgressBarElement: {
        prototype: HTMLIonProgressBarElement;
        new (): HTMLIonProgressBarElement;
    };
    interface HTMLIonRadioElementEventMap {
        "ionFocus": void;
        "ionBlur": void;
    }
    interface HTMLIonRadioElement extends Components.IonRadio, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonRadioElementEventMap>(type: K, listener: (this: HTMLIonRadioElement, ev: IonRadioCustomEvent<HTMLIonRadioElementEventMap[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 HTMLIonRadioElementEventMap>(type: K, listener: (this: HTMLIonRadioElement, ev: IonRadioCustomEvent<HTMLIonRadioElementEventMap[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 HTMLIonRadioElement: {
        prototype: HTMLIonRadioElement;
        new (): HTMLIonRadioElement;
    };
    interface HTMLIonRadioGroupElementEventMap {
        "ionChange": RadioGroupChangeEventDetail;
        "ionValueChange": RadioGroupChangeEventDetail;
    }
    interface HTMLIonRadioGroupElement extends Components.IonRadioGroup, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonRadioGroupElementEventMap>(type: K, listener: (this: HTMLIonRadioGroupElement, ev: IonRadioGroupCustomEvent<HTMLIonRadioGroupElementEventMap[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 HTMLIonRadioGroupElementEventMap>(type: K, listener: (this: HTMLIonRadioGroupElement, ev: IonRadioGroupCustomEvent<HTMLIonRadioGroupElementEventMap[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 HTMLIonRadioGroupElement: {
        prototype: HTMLIonRadioGroupElement;
        new (): HTMLIonRadioGroupElement;
    };
    interface HTMLIonRangeElementEventMap {
        "ionChange": RangeChangeEventDetail;
        "ionInput": RangeChangeEventDetail;
        "ionFocus": void;
        "ionBlur": void;
        "ionKnobMoveStart": RangeKnobMoveStartEventDetail;
        "ionKnobMoveEnd": RangeKnobMoveEndEventDetail;
    }
    interface HTMLIonRangeElement extends Components.IonRange, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonRangeElementEventMap>(type: K, listener: (this: HTMLIonRangeElement, ev: IonRangeCustomEvent<HTMLIonRangeElementEventMap[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 HTMLIonRangeElementEventMap>(type: K, listener: (this: HTMLIonRangeElement, ev: IonRangeCustomEvent<HTMLIonRangeElementEventMap[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 HTMLIonRangeElement: {
        prototype: HTMLIonRangeElement;
        new (): HTMLIonRangeElement;
    };
    interface HTMLIonRefresherElementEventMap {
        "ionRefresh": RefresherEventDetail;
        "ionPull": void;
        "ionStart": void;
        "ionPullStart": void;
        "ionPullEnd": RefresherPullEndEventDetail;
    }
    interface HTMLIonRefresherElement extends Components.IonRefresher, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonRefresherElementEventMap>(type: K, listener: (this: HTMLIonRefresherElement, ev: IonRefresherCustomEvent<HTMLIonRefresherElementEventMap[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 HTMLIonRefresherElementEventMap>(type: K, listener: (this: HTMLIonRefresherElement, ev: IonRefresherCustomEvent<HTMLIonRefresherElementEventMap[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 HTMLIonRefresherElement: {
        prototype: HTMLIonRefresherElement;
        new (): HTMLIonRefresherElement;
    };
    interface HTMLIonRefresherContentElement extends Components.IonRefresherContent, HTMLStencilElement {
    }
    var HTMLIonRefresherContentElement: {
        prototype: HTMLIonRefresherContentElement;
        new (): HTMLIonRefresherContentElement;
    };
    interface HTMLIonReorderElement extends Components.IonReorder, HTMLStencilElement {
    }
    var HTMLIonReorderElement: {
        prototype: HTMLIonReorderElement;
        new (): HTMLIonReorderElement;
    };
    interface HTMLIonReorderGroupElementEventMap {
        "ionItemReorder": ItemReorderEventDetail;
        "ionReorderStart": void;
        "ionReorderMove": ReorderMoveEventDetail;
        "ionReorderEnd": ReorderEndEventDetail;
    }
    interface HTMLIonReorderGroupElement extends Components.IonReorderGroup, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonReorderGroupElementEventMap>(type: K, listener: (this: HTMLIonReorderGroupElement, ev: IonReorderGroupCustomEvent<HTMLIonReorderGroupElementEventMap[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 HTMLIonReorderGroupElementEventMap>(type: K, listener: (this: HTMLIonReorderGroupElement, ev: IonReorderGroupCustomEvent<HTMLIonReorderGroupElementEventMap[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 HTMLIonReorderGroupElement: {
        prototype: HTMLIonReorderGroupElement;
        new (): HTMLIonReorderGroupElement;
    };
    interface HTMLIonRippleEffectElement extends Components.IonRippleEffect, HTMLStencilElement {
    }
    var HTMLIonRippleEffectElement: {
        prototype: HTMLIonRippleEffectElement;
        new (): HTMLIonRippleEffectElement;
    };
    interface HTMLIonRouteElementEventMap {
        "ionRouteDataChanged": any;
    }
    interface HTMLIonRouteElement extends Components.IonRoute, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonRouteElementEventMap>(type: K, listener: (this: HTMLIonRouteElement, ev: IonRouteCustomEvent<HTMLIonRouteElementEventMap[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 HTMLIonRouteElementEventMap>(type: K, listener: (this: HTMLIonRouteElement, ev: IonRouteCustomEvent<HTMLIonRouteElementEventMap[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 HTMLIonRouteElement: {
        prototype: HTMLIonRouteElement;
        new (): HTMLIonRouteElement;
    };
    interface HTMLIonRouteRedirectElementEventMap {
        "ionRouteRedirectChanged": any;
    }
    interface HTMLIonRouteRedirectElement extends Components.IonRouteRedirect, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonRouteRedirectElementEventMap>(type: K, listener: (this: HTMLIonRouteRedirectElement, ev: IonRouteRedirectCustomEvent<HTMLIonRouteRedirectElementEventMap[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 HTMLIonRouteRedirectElementEventMap>(type: K, listener: (this: HTMLIonRouteRedirectElement, ev: IonRouteRedirectCustomEvent<HTMLIonRouteRedirectElementEventMap[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 HTMLIonRouteRedirectElement: {
        prototype: HTMLIonRouteRedirectElement;
        new (): HTMLIonRouteRedirectElement;
    };
    interface HTMLIonRouterElementEventMap {
        "ionRouteWillChange": RouterEventDetail;
        "ionRouteDidChange": RouterEventDetail;
    }
    interface HTMLIonRouterElement extends Components.IonRouter, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonRouterElementEventMap>(type: K, listener: (this: HTMLIonRouterElement, ev: IonRouterCustomEvent<HTMLIonRouterElementEventMap[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 HTMLIonRouterElementEventMap>(type: K, listener: (this: HTMLIonRouterElement, ev: IonRouterCustomEvent<HTMLIonRouterElementEventMap[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 HTMLIonRouterElement: {
        prototype: HTMLIonRouterElement;
        new (): HTMLIonRouterElement;
    };
    interface HTMLIonRouterLinkElement extends Components.IonRouterLink, HTMLStencilElement {
    }
    var HTMLIonRouterLinkElement: {
        prototype: HTMLIonRouterLinkElement;
        new (): HTMLIonRouterLinkElement;
    };
    interface HTMLIonRouterOutletElementEventMap {
        "ionNavWillLoad": void;
        "ionNavWillChange": void;
        "ionNavDidChange": void;
    }
    interface HTMLIonRouterOutletElement extends Components.IonRouterOutlet, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonRouterOutletElementEventMap>(type: K, listener: (this: HTMLIonRouterOutletElement, ev: IonRouterOutletCustomEvent<HTMLIonRouterOutletElementEventMap[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 HTMLIonRouterOutletElementEventMap>(type: K, listener: (this: HTMLIonRouterOutletElement, ev: IonRouterOutletCustomEvent<HTMLIonRouterOutletElementEventMap[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 HTMLIonRouterOutletElement: {
        prototype: HTMLIonRouterOutletElement;
        new (): HTMLIonRouterOutletElement;
    };
    interface HTMLIonRowElement extends Components.IonRow, HTMLStencilElement {
    }
    var HTMLIonRowElement: {
        prototype: HTMLIonRowElement;
        new (): HTMLIonRowElement;
    };
    interface HTMLIonSearchbarElementEventMap {
        "ionInput": SearchbarInputEventDetail;
        "ionChange": SearchbarChangeEventDetail;
        "ionCancel": void;
        "ionClear": void;
        "ionBlur": void;
        "ionFocus": void;
        "ionStyle": StyleEventDetail;
    }
    interface HTMLIonSearchbarElement extends Components.IonSearchbar, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonSearchbarElementEventMap>(type: K, listener: (this: HTMLIonSearchbarElement, ev: IonSearchbarCustomEvent<HTMLIonSearchbarElementEventMap[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 HTMLIonSearchbarElementEventMap>(type: K, listener: (this: HTMLIonSearchbarElement, ev: IonSearchbarCustomEvent<HTMLIonSearchbarElementEventMap[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 HTMLIonSearchbarElement: {
        prototype: HTMLIonSearchbarElement;
        new (): HTMLIonSearchbarElement;
    };
    interface HTMLIonSegmentElementEventMap {
        "ionChange": SegmentChangeEventDetail;
        "ionSelect": SegmentChangeEventDetail;
        "ionStyle": StyleEventDetail;
    }
    interface HTMLIonSegmentElement extends Components.IonSegment, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonSegmentElementEventMap>(type: K, listener: (this: HTMLIonSegmentElement, ev: IonSegmentCustomEvent<HTMLIonSegmentElementEventMap[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 HTMLIonSegmentElementEventMap>(type: K, listener: (this: HTMLIonSegmentElement, ev: IonSegmentCustomEvent<HTMLIonSegmentElementEventMap[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 HTMLIonSegmentElement: {
        prototype: HTMLIonSegmentElement;
        new (): HTMLIonSegmentElement;
    };
    interface HTMLIonSegmentButtonElement extends Components.IonSegmentButton, HTMLStencilElement {
    }
    var HTMLIonSegmentButtonElement: {
        prototype: HTMLIonSegmentButtonElement;
        new (): HTMLIonSegmentButtonElement;
    };
    interface HTMLIonSegmentContentElement extends Components.IonSegmentContent, HTMLStencilElement {
    }
    var HTMLIonSegmentContentElement: {
        prototype: HTMLIonSegmentContentElement;
        new (): HTMLIonSegmentContentElement;
    };
    interface HTMLIonSegmentViewElementEventMap {
        "ionSegmentViewScroll": SegmentViewScrollEvent;
    }
    interface HTMLIonSegmentViewElement extends Components.IonSegmentView, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonSegmentViewElementEventMap>(type: K, listener: (this: HTMLIonSegmentViewElement, ev: IonSegmentViewCustomEvent<HTMLIonSegmentViewElementEventMap[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 HTMLIonSegmentViewElementEventMap>(type: K, listener: (this: HTMLIonSegmentViewElement, ev: IonSegmentViewCustomEvent<HTMLIonSegmentViewElementEventMap[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 HTMLIonSegmentViewElement: {
        prototype: HTMLIonSegmentViewElement;
        new (): HTMLIonSegmentViewElement;
    };
    interface HTMLIonSelectElementEventMap {
        "ionChange": SelectChangeEventDetail;
        "ionCancel": void;
        "ionDismiss": void;
        "ionFocus": void;
        "ionBlur": void;
        "ionStyle": StyleEventDetail;
    }
    interface HTMLIonSelectElement extends Components.IonSelect, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonSelectElementEventMap>(type: K, listener: (this: HTMLIonSelectElement, ev: IonSelectCustomEvent<HTMLIonSelectElementEventMap[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 HTMLIonSelectElementEventMap>(type: K, listener: (this: HTMLIonSelectElement, ev: IonSelectCustomEvent<HTMLIonSelectElementEventMap[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 HTMLIonSelectElement: {
        prototype: HTMLIonSelectElement;
        new (): HTMLIonSelectElement;
    };
    interface HTMLIonSelectModalElement extends Components.IonSelectModal, HTMLStencilElement {
    }
    var HTMLIonSelectModalElement: {
        prototype: HTMLIonSelectModalElement;
        new (): HTMLIonSelectModalElement;
    };
    interface HTMLIonSelectOptionElement extends Components.IonSelectOption, HTMLStencilElement {
    }
    var HTMLIonSelectOptionElement: {
        prototype: HTMLIonSelectOptionElement;
        new (): HTMLIonSelectOptionElement;
    };
    interface HTMLIonSelectPopoverElement extends Components.IonSelectPopover, HTMLStencilElement {
    }
    var HTMLIonSelectPopoverElement: {
        prototype: HTMLIonSelectPopoverElement;
        new (): HTMLIonSelectPopoverElement;
    };
    interface HTMLIonSkeletonTextElementEventMap {
        "ionStyle": StyleEventDetail;
    }
    interface HTMLIonSkeletonTextElement extends Components.IonSkeletonText, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonSkeletonTextElementEventMap>(type: K, listener: (this: HTMLIonSkeletonTextElement, ev: IonSkeletonTextCustomEvent<HTMLIonSkeletonTextElementEventMap[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 HTMLIonSkeletonTextElementEventMap>(type: K, listener: (this: HTMLIonSkeletonTextElement, ev: IonSkeletonTextCustomEvent<HTMLIonSkeletonTextElementEventMap[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 HTMLIonSkeletonTextElement: {
        prototype: HTMLIonSkeletonTextElement;
        new (): HTMLIonSkeletonTextElement;
    };
    interface HTMLIonSpinnerElement extends Components.IonSpinner, HTMLStencilElement {
    }
    var HTMLIonSpinnerElement: {
        prototype: HTMLIonSpinnerElement;
        new (): HTMLIonSpinnerElement;
    };
    interface HTMLIonSplitPaneElementEventMap {
        "ionSplitPaneVisible": { visible: boolean };
    }
    interface HTMLIonSplitPaneElement extends Components.IonSplitPane, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonSplitPaneElementEventMap>(type: K, listener: (this: HTMLIonSplitPaneElement, ev: IonSplitPaneCustomEvent<HTMLIonSplitPaneElementEventMap[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 HTMLIonSplitPaneElementEventMap>(type: K, listener: (this: HTMLIonSplitPaneElement, ev: IonSplitPaneCustomEvent<HTMLIonSplitPaneElementEventMap[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 HTMLIonSplitPaneElement: {
        prototype: HTMLIonSplitPaneElement;
        new (): HTMLIonSplitPaneElement;
    };
    interface HTMLIonTabElement extends Components.IonTab, HTMLStencilElement {
    }
    var HTMLIonTabElement: {
        prototype: HTMLIonTabElement;
        new (): HTMLIonTabElement;
    };
    interface HTMLIonTabBarElementEventMap {
        "ionTabBarChanged": TabBarChangedEventDetail;
        "ionTabBarLoaded": void;
    }
    interface HTMLIonTabBarElement extends Components.IonTabBar, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonTabBarElementEventMap>(type: K, listener: (this: HTMLIonTabBarElement, ev: IonTabBarCustomEvent<HTMLIonTabBarElementEventMap[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 HTMLIonTabBarElementEventMap>(type: K, listener: (this: HTMLIonTabBarElement, ev: IonTabBarCustomEvent<HTMLIonTabBarElementEventMap[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 HTMLIonTabBarElement: {
        prototype: HTMLIonTabBarElement;
        new (): HTMLIonTabBarElement;
    };
    interface HTMLIonTabButtonElementEventMap {
        "ionTabButtonClick": TabButtonClickEventDetail;
    }
    interface HTMLIonTabButtonElement extends Components.IonTabButton, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonTabButtonElementEventMap>(type: K, listener: (this: HTMLIonTabButtonElement, ev: IonTabButtonCustomEvent<HTMLIonTabButtonElementEventMap[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 HTMLIonTabButtonElementEventMap>(type: K, listener: (this: HTMLIonTabButtonElement, ev: IonTabButtonCustomEvent<HTMLIonTabButtonElementEventMap[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 HTMLIonTabButtonElement: {
        prototype: HTMLIonTabButtonElement;
        new (): HTMLIonTabButtonElement;
    };
    interface HTMLIonTabsElementEventMap {
        "ionNavWillLoad": void;
        "ionTabsWillChange": { tab: string };
        "ionTabsDidChange": { tab: string };
    }
    interface HTMLIonTabsElement extends Components.IonTabs, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonTabsElementEventMap>(type: K, listener: (this: HTMLIonTabsElement, ev: IonTabsCustomEvent<HTMLIonTabsElementEventMap[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 HTMLIonTabsElementEventMap>(type: K, listener: (this: HTMLIonTabsElement, ev: IonTabsCustomEvent<HTMLIonTabsElementEventMap[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 HTMLIonTabsElement: {
        prototype: HTMLIonTabsElement;
        new (): HTMLIonTabsElement;
    };
    interface HTMLIonTextElement extends Components.IonText, HTMLStencilElement {
    }
    var HTMLIonTextElement: {
        prototype: HTMLIonTextElement;
        new (): HTMLIonTextElement;
    };
    interface HTMLIonTextareaElementEventMap {
        "ionChange": TextareaChangeEventDetail;
        "ionInput": TextareaInputEventDetail;
        "ionBlur": FocusEvent;
        "ionFocus": FocusEvent;
    }
    interface HTMLIonTextareaElement extends Components.IonTextarea, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonTextareaElementEventMap>(type: K, listener: (this: HTMLIonTextareaElement, ev: IonTextareaCustomEvent<HTMLIonTextareaElementEventMap[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 HTMLIonTextareaElementEventMap>(type: K, listener: (this: HTMLIonTextareaElement, ev: IonTextareaCustomEvent<HTMLIonTextareaElementEventMap[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 HTMLIonTextareaElement: {
        prototype: HTMLIonTextareaElement;
        new (): HTMLIonTextareaElement;
    };
    interface HTMLIonThumbnailElement extends Components.IonThumbnail, HTMLStencilElement {
    }
    var HTMLIonThumbnailElement: {
        prototype: HTMLIonThumbnailElement;
        new (): HTMLIonThumbnailElement;
    };
    interface HTMLIonTitleElementEventMap {
        "ionStyle": StyleEventDetail;
    }
    interface HTMLIonTitleElement extends Components.IonTitle, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonTitleElementEventMap>(type: K, listener: (this: HTMLIonTitleElement, ev: IonTitleCustomEvent<HTMLIonTitleElementEventMap[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 HTMLIonTitleElementEventMap>(type: K, listener: (this: HTMLIonTitleElement, ev: IonTitleCustomEvent<HTMLIonTitleElementEventMap[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 HTMLIonTitleElement: {
        prototype: HTMLIonTitleElement;
        new (): HTMLIonTitleElement;
    };
    interface HTMLIonToastElementEventMap {
        "ionToastDidPresent": void;
        "ionToastWillPresent": void;
        "ionToastWillDismiss": OverlayEventDetail;
        "ionToastDidDismiss": OverlayEventDetail;
        "didPresent": void;
        "willPresent": void;
        "willDismiss": OverlayEventDetail;
        "didDismiss": OverlayEventDetail;
    }
    interface HTMLIonToastElement extends Components.IonToast, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonToastElementEventMap>(type: K, listener: (this: HTMLIonToastElement, ev: IonToastCustomEvent<HTMLIonToastElementEventMap[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 HTMLIonToastElementEventMap>(type: K, listener: (this: HTMLIonToastElement, ev: IonToastCustomEvent<HTMLIonToastElementEventMap[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 HTMLIonToastElement: {
        prototype: HTMLIonToastElement;
        new (): HTMLIonToastElement;
    };
    interface HTMLIonToggleElementEventMap {
        "ionChange": ToggleChangeEventDetail;
        "ionFocus": void;
        "ionBlur": void;
    }
    interface HTMLIonToggleElement extends Components.IonToggle, HTMLStencilElement {
        addEventListener<K extends keyof HTMLIonToggleElementEventMap>(type: K, listener: (this: HTMLIonToggleElement, ev: IonToggleCustomEvent<HTMLIonToggleElementEventMap[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 HTMLIonToggleElementEventMap>(type: K, listener: (this: HTMLIonToggleElement, ev: IonToggleCustomEvent<HTMLIonToggleElementEventMap[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 HTMLIonToggleElement: {
        prototype: HTMLIonToggleElement;
        new (): HTMLIonToggleElement;
    };
    interface HTMLIonToolbarElement extends Components.IonToolbar, HTMLStencilElement {
    }
    var HTMLIonToolbarElement: {
        prototype: HTMLIonToolbarElement;
        new (): HTMLIonToolbarElement;
    };
    interface HTMLElementTagNameMap {
        "ion-accordion": HTMLIonAccordionElement;
        "ion-accordion-group": HTMLIonAccordionGroupElement;
        "ion-action-sheet": HTMLIonActionSheetElement;
        "ion-alert": HTMLIonAlertElement;
        "ion-app": HTMLIonAppElement;
        "ion-avatar": HTMLIonAvatarElement;
        "ion-back-button": HTMLIonBackButtonElement;
        "ion-backdrop": HTMLIonBackdropElement;
        "ion-badge": HTMLIonBadgeElement;
        "ion-breadcrumb": HTMLIonBreadcrumbElement;
        "ion-breadcrumbs": HTMLIonBreadcrumbsElement;
        "ion-button": HTMLIonButtonElement;
        "ion-buttons": HTMLIonButtonsElement;
        "ion-card": HTMLIonCardElement;
        "ion-card-content": HTMLIonCardContentElement;
        "ion-card-header": HTMLIonCardHeaderElement;
        "ion-card-subtitle": HTMLIonCardSubtitleElement;
        "ion-card-title": HTMLIonCardTitleElement;
        "ion-checkbox": HTMLIonCheckboxElement;
        "ion-chip": HTMLIonChipElement;
        "ion-col": HTMLIonColElement;
        "ion-content": HTMLIonContentElement;
        "ion-datetime": HTMLIonDatetimeElement;
        "ion-datetime-button": HTMLIonDatetimeButtonElement;
        "ion-fab": HTMLIonFabElement;
        "ion-fab-button": HTMLIonFabButtonElement;
        "ion-fab-list": HTMLIonFabListElement;
        "ion-footer": HTMLIonFooterElement;
        "ion-grid": HTMLIonGridElement;
        "ion-header": HTMLIonHeaderElement;
        "ion-img": HTMLIonImgElement;
        "ion-infinite-scroll": HTMLIonInfiniteScrollElement;
        "ion-infinite-scroll-content": HTMLIonInfiniteScrollContentElement;
        "ion-input": HTMLIonInputElement;
        "ion-input-otp": HTMLIonInputOtpElement;
        "ion-input-password-toggle": HTMLIonInputPasswordToggleElement;
        "ion-item": HTMLIonItemElement;
        "ion-item-divider": HTMLIonItemDividerElement;
        "ion-item-group": HTMLIonItemGroupElement;
        "ion-item-option": HTMLIonItemOptionElement;
        "ion-item-options": HTMLIonItemOptionsElement;
        "ion-item-sliding": HTMLIonItemSlidingElement;
        "ion-label": HTMLIonLabelElement;
        "ion-list": HTMLIonListElement;
        "ion-list-header": HTMLIonListHeaderElement;
        "ion-loading": HTMLIonLoadingElement;
        "ion-menu": HTMLIonMenuElement;
        "ion-menu-button": HTMLIonMenuButtonElement;
        "ion-menu-toggle": HTMLIonMenuToggleElement;
        "ion-modal": HTMLIonModalElement;
        "ion-nav": HTMLIonNavElement;
        "ion-nav-link": HTMLIonNavLinkElement;
        "ion-note": HTMLIonNoteElement;
        "ion-picker": HTMLIonPickerElement;
        "ion-picker-column": HTMLIonPickerColumnElement;
        "ion-picker-column-option": HTMLIonPickerColumnOptionElement;
        "ion-picker-legacy": HTMLIonPickerLegacyElement;
        "ion-picker-legacy-column": HTMLIonPickerLegacyColumnElement;
        "ion-popover": HTMLIonPopoverElement;
        "ion-progress-bar": HTMLIonProgressBarElement;
        "ion-radio": HTMLIonRadioElement;
        "ion-radio-group": HTMLIonRadioGroupElement;
        "ion-range": HTMLIonRangeElement;
        "ion-refresher": HTMLIonRefresherElement;
        "ion-refresher-content": HTMLIonRefresherContentElement;
        "ion-reorder": HTMLIonReorderElement;
        "ion-reorder-group": HTMLIonReorderGroupElement;
        "ion-ripple-effect": HTMLIonRippleEffectElement;
        "ion-route": HTMLIonRouteElement;
        "ion-route-redirect": HTMLIonRouteRedirectElement;
        "ion-router": HTMLIonRouterElement;
        "ion-router-link": HTMLIonRouterLinkElement;
        "ion-router-outlet": HTMLIonRouterOutletElement;
        "ion-row": HTMLIonRowElement;
        "ion-searchbar": HTMLIonSearchbarElement;
        "ion-segment": HTMLIonSegmentElement;
        "ion-segment-button": HTMLIonSegmentButtonElement;
        "ion-segment-content": HTMLIonSegmentContentElement;
        "ion-segment-view": HTMLIonSegmentViewElement;
        "ion-select": HTMLIonSelectElement;
        "ion-select-modal": HTMLIonSelectModalElement;
        "ion-select-option": HTMLIonSelectOptionElement;
        "ion-select-popover": HTMLIonSelectPopoverElement;
        "ion-skeleton-text": HTMLIonSkeletonTextElement;
        "ion-spinner": HTMLIonSpinnerElement;
        "ion-split-pane": HTMLIonSplitPaneElement;
        "ion-tab": HTMLIonTabElement;
        "ion-tab-bar": HTMLIonTabBarElement;
        "ion-tab-button": HTMLIonTabButtonElement;
        "ion-tabs": HTMLIonTabsElement;
        "ion-text": HTMLIonTextElement;
        "ion-textarea": HTMLIonTextareaElement;
        "ion-thumbnail": HTMLIonThumbnailElement;
        "ion-title": HTMLIonTitleElement;
        "ion-toast": HTMLIonToastElement;
        "ion-toggle": HTMLIonToggleElement;
        "ion-toolbar": HTMLIonToolbarElement;
    }
}
declare namespace LocalJSX {
    type OneOf<K extends string, PropT, AttrT = PropT> = { [P in K]: PropT } & { [P in `attr:${K}` | `prop:${K}`]?: never } | { [P in `attr:${K}`]: AttrT } & { [P in K | `prop:${K}`]?: never } | { [P in `prop:${K}`]: PropT } & { [P in K | `attr:${K}`]?: never };

    interface IonAccordion {
        /**
          * If `true`, the accordion cannot be interacted with.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * If `true`, the accordion cannot be interacted with, but does not alter the opacity.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * The toggle icon to use. This icon will be rotated when the accordion is expanded or collapsed.
          * @default chevronDown
         */
        "toggleIcon"?: string;
        /**
          * The slot inside of `ion-item` to place the toggle icon. Defaults to `"end"`.
          * @default 'end'
         */
        "toggleIconSlot"?: 'start' | 'end';
        /**
          * The value of the accordion. Defaults to an autogenerated value.
          * @default `ion-accordion-${accordionIds++}`
         */
        "value"?: string;
    }
    interface IonAccordionGroup {
        /**
          * If `true`, all accordions inside of the accordion group will animate when expanding or collapsing.
          * @default true
         */
        "animated"?: boolean;
        /**
          * If `true`, the accordion group cannot be interacted with.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Describes the expansion behavior for each accordion. Possible values are `"compact"` and `"inset"`. Defaults to `"compact"`.
          * @default 'compact'
         */
        "expand"?: 'compact' | 'inset';
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * If `true`, the accordion group can have multiple accordion components expanded at the same time.
         */
        "multiple"?: boolean;
        /**
          * Emitted when the value property has changed as a result of a user action such as a click.  This event will not emit when programmatically setting the `value` property.
         */
        "onIonChange"?: (event: IonAccordionGroupCustomEvent<AccordionGroupChangeEventDetail>) => void;
        /**
          * Emitted when the value property has changed. This is used to ensure that ion-accordion can respond to any value property changes.
         */
        "onIonValueChange"?: (event: IonAccordionGroupCustomEvent<AccordionGroupChangeEventDetail>) => void;
        /**
          * If `true`, the accordion group cannot be interacted with, but does not alter the opacity.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * The value of the accordion group. This controls which accordions are expanded. This should be an array of strings only when `multiple="true"`
         */
        "value"?: string | string[] | null;
    }
    interface IonActionSheet {
        /**
          * If `true`, the action sheet will animate.
          * @default true
         */
        "animated"?: boolean;
        /**
          * If `true`, the action sheet will be dismissed when the backdrop is clicked.
          * @default true
         */
        "backdropDismiss"?: boolean;
        /**
          * An array of buttons for the action sheet.
          * @default []
         */
        "buttons"?: (ActionSheetButton | string)[];
        /**
          * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
         */
        "cssClass"?: string | string[];
        "delegate"?: FrameworkDelegate;
        /**
          * Animation to use when the action sheet is presented.
         */
        "enterAnimation"?: AnimationBuilder;
        /**
          * @default false
         */
        "hasController"?: boolean;
        /**
          * Title for the action sheet.
         */
        "header"?: string;
        /**
          * Additional attributes to pass to the action sheet.
         */
        "htmlAttributes"?: { [key: string]: any };
        /**
          * If `true`, the action sheet will open. If `false`, the action sheet will close. Use this if you need finer grained control over presentation, otherwise just use the actionSheetController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the action sheet dismisses. You will need to do that in your code.
          * @default false
         */
        "isOpen"?: boolean;
        /**
          * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          * @default true
         */
        "keyboardClose"?: boolean;
        /**
          * Animation to use when the action sheet is dismissed.
         */
        "leaveAnimation"?: AnimationBuilder;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Emitted after the action sheet has dismissed. Shorthand for ionActionSheetDidDismiss.
         */
        "onDidDismiss"?: (event: IonActionSheetCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted after the action sheet has presented. Shorthand for ionActionSheetWillDismiss.
         */
        "onDidPresent"?: (event: IonActionSheetCustomEvent<void>) => void;
        /**
          * Emitted after the action sheet has dismissed.
         */
        "onIonActionSheetDidDismiss"?: (event: IonActionSheetCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted after the action sheet has presented.
         */
        "onIonActionSheetDidPresent"?: (event: IonActionSheetCustomEvent<void>) => void;
        /**
          * Emitted before the action sheet has dismissed.
         */
        "onIonActionSheetWillDismiss"?: (event: IonActionSheetCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted before the action sheet has presented.
         */
        "onIonActionSheetWillPresent"?: (event: IonActionSheetCustomEvent<void>) => void;
        /**
          * Emitted before the action sheet has dismissed. Shorthand for ionActionSheetWillDismiss.
         */
        "onWillDismiss"?: (event: IonActionSheetCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted before the action sheet has presented. Shorthand for ionActionSheetWillPresent.
         */
        "onWillPresent"?: (event: IonActionSheetCustomEvent<void>) => void;
        "overlayIndex": number;
        /**
          * Subtitle for the action sheet.
         */
        "subHeader"?: string;
        /**
          * If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          * @default false
         */
        "translucent"?: boolean;
        /**
          * An ID corresponding to the trigger element that causes the action sheet to open when clicked.
         */
        "trigger"?: string | undefined;
    }
    interface IonAlert {
        /**
          * If `true`, the alert will animate.
          * @default true
         */
        "animated"?: boolean;
        /**
          * If `true`, the alert will be dismissed when the backdrop is clicked.
          * @default true
         */
        "backdropDismiss"?: boolean;
        /**
          * Array of buttons to be added to the alert.
          * @default []
         */
        "buttons"?: (AlertButton | string)[];
        /**
          * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
         */
        "cssClass"?: string | string[];
        "delegate"?: FrameworkDelegate;
        /**
          * Animation to use when the alert is presented.
         */
        "enterAnimation"?: AnimationBuilder;
        /**
          * @default false
         */
        "hasController"?: boolean;
        /**
          * The main title in the heading of the alert.
         */
        "header"?: string;
        /**
          * Additional attributes to pass to the alert.
         */
        "htmlAttributes"?: { [key: string]: any };
        /**
          * Array of input to show in the alert.
          * @default []
         */
        "inputs"?: AlertInput[];
        /**
          * If `true`, the alert will open. If `false`, the alert will close. Use this if you need finer grained control over presentation, otherwise just use the alertController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the alert dismisses. You will need to do that in your code.
          * @default false
         */
        "isOpen"?: boolean;
        /**
          * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          * @default true
         */
        "keyboardClose"?: boolean;
        /**
          * Animation to use when the alert is dismissed.
         */
        "leaveAnimation"?: AnimationBuilder;
        /**
          * The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Content is parsed as plaintext by default. `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config before custom HTML can be used.
         */
        "message"?: string | IonicSafeString;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Emitted after the alert has dismissed. Shorthand for ionAlertDidDismiss.
         */
        "onDidDismiss"?: (event: IonAlertCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted after the alert has presented. Shorthand for ionAlertWillDismiss.
         */
        "onDidPresent"?: (event: IonAlertCustomEvent<void>) => void;
        /**
          * Emitted after the alert has dismissed.
         */
        "onIonAlertDidDismiss"?: (event: IonAlertCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted after the alert has presented.
         */
        "onIonAlertDidPresent"?: (event: IonAlertCustomEvent<void>) => void;
        /**
          * Emitted before the alert has dismissed.
         */
        "onIonAlertWillDismiss"?: (event: IonAlertCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted before the alert has presented.
         */
        "onIonAlertWillPresent"?: (event: IonAlertCustomEvent<void>) => void;
        /**
          * Emitted before the alert has dismissed. Shorthand for ionAlertWillDismiss.
         */
        "onWillDismiss"?: (event: IonAlertCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted before the alert has presented. Shorthand for ionAlertWillPresent.
         */
        "onWillPresent"?: (event: IonAlertCustomEvent<void>) => void;
        "overlayIndex": number;
        /**
          * The subtitle in the heading of the alert. Displayed under the title.
         */
        "subHeader"?: string;
        /**
          * If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          * @default false
         */
        "translucent"?: boolean;
        /**
          * An ID corresponding to the trigger element that causes the alert to open when clicked.
         */
        "trigger"?: string | undefined;
    }
    interface IonApp {
    }
    interface IonAvatar {
    }
    interface IonBackButton {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The url to navigate back to by default when there is no history.
         */
        "defaultHref"?: string;
        /**
          * If `true`, the user cannot interact with the button.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * The built-in named SVG icon name or the exact `src` of an SVG file to use for the back button.
         */
        "icon"?: string | null;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * When using a router, it specifies the transition animation when navigating to another page.
         */
        "routerAnimation"?: AnimationBuilder | undefined;
        /**
          * The text to display in the back button.
         */
        "text"?: string | null;
        /**
          * The type of the button.
          * @default 'button'
         */
        "type"?: 'submit' | 'reset' | 'button';
    }
    interface IonBackdrop {
        /**
          * Emitted when the backdrop is tapped.
         */
        "onIonBackdropTap"?: (event: IonBackdropCustomEvent<void>) => void;
        /**
          * If `true`, the backdrop will stop propagation on tap.
          * @default true
         */
        "stopPropagation"?: boolean;
        /**
          * If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.
          * @default true
         */
        "tappable"?: boolean;
        /**
          * If `true`, the backdrop will be visible.
          * @default true
         */
        "visible"?: boolean;
    }
    interface IonBadge {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
    }
    interface IonBreadcrumb {
        /**
          * If `true`, the breadcrumb will take on a different look to show that it is the currently active breadcrumb. Defaults to `true` for the last breadcrumb if it is not set on any.
          * @default false
         */
        "active"?: boolean;
        /**
          * @default false
         */
        "collapsed"?: boolean;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the breadcrumb.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
         */
        "download"?: string | undefined;
        /**
          * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
         */
        "href"?: string | undefined;
        "last": boolean;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Emitted when the collapsed indicator is clicked on. `ion-breadcrumbs` will listen for this and emit ionCollapsedClick. Normally we could just emit this as `ionCollapsedClick` and let the event bubble to `ion-breadcrumbs`, but if the event custom event is not set on `ion-breadcrumbs`, TypeScript will throw an error in user applications.
         */
        "onCollapsedClick"?: (event: IonBreadcrumbCustomEvent<BreadcrumbCollapsedClickEventDetail>) => void;
        /**
          * Emitted when the breadcrumb loses focus.
         */
        "onIonBlur"?: (event: IonBreadcrumbCustomEvent<void>) => void;
        /**
          * Emitted when the breadcrumb has focus.
         */
        "onIonFocus"?: (event: IonBreadcrumbCustomEvent<void>) => void;
        /**
          * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
         */
        "rel"?: string | undefined;
        /**
          * When using a router, it specifies the transition animation when navigating to another page using `href`.
         */
        "routerAnimation"?: AnimationBuilder | undefined;
        /**
          * When using a router, it specifies the transition direction when navigating to another page using `href`.
          * @default 'forward'
         */
        "routerDirection"?: RouterDirection;
        /**
          * If true, show a separator between this breadcrumb and the next. Defaults to `true` for all breadcrumbs except the last.
         */
        "separator"?: boolean | undefined;
        "showCollapsedIndicator": boolean;
        /**
          * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
         */
        "target"?: string | undefined;
    }
    interface IonBreadcrumbs {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The number of breadcrumbs to show after the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed.
          * @default 1
         */
        "itemsAfterCollapse"?: number;
        /**
          * The number of breadcrumbs to show before the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed.
          * @default 1
         */
        "itemsBeforeCollapse"?: number;
        /**
          * The maximum number of breadcrumbs to show before collapsing.
         */
        "maxItems"?: number;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Emitted when the collapsed indicator is clicked on.
         */
        "onIonCollapsedClick"?: (event: IonBreadcrumbsCustomEvent<BreadcrumbCollapsedClickEventDetail>) => void;
    }
    interface IonButton {
        /**
          * The type of button.
          * @default 'button'
         */
        "buttonType"?: string;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the button.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
         */
        "download"?: string | undefined;
        /**
          * Set to `"block"` for a full-width button or to `"full"` for a full-width button with square corners and no left or right borders.
         */
        "expand"?: 'full' | 'block';
        /**
          * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"` for a transparent button with a border, or to `"solid"` for a button with a filled background. The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`.
         */
        "fill"?: 'clear' | 'outline' | 'solid' | 'default';
        /**
          * The HTML form element or form element id. Used to submit a form when the button is not a child of the form.
         */
        "form"?: string | HTMLFormElement;
        /**
          * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
         */
        "href"?: string | undefined;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Emitted when the button loses focus.
         */
        "onIonBlur"?: (event: IonButtonCustomEvent<void>) => void;
        /**
          * Emitted when the button has focus.
         */
        "onIonFocus"?: (event: IonButtonCustomEvent<void>) => void;
        /**
          * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
         */
        "rel"?: string | undefined;
        /**
          * When using a router, it specifies the transition animation when navigating to another page using `href`.
         */
        "routerAnimation"?: AnimationBuilder | undefined;
        /**
          * When using a router, it specifies the transition direction when navigating to another page using `href`.
          * @default 'forward'
         */
        "routerDirection"?: RouterDirection;
        /**
          * Set to `"round"` for a button with more rounded corners.
         */
        "shape"?: 'round';
        /**
          * Set to `"small"` for a button with less height and padding, to `"default"` for a button with the default height and padding, or to `"large"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `"small"` by default. Set the size to `"default"` inside of an item to make it a standard size button.
         */
        "size"?: 'small' | 'default' | 'large';
        /**
          * If `true`, activates a button with a heavier font weight.
          * @default false
         */
        "strong"?: boolean;
        /**
          * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
         */
        "target"?: string | undefined;
        /**
          * The type of the button.
          * @default 'button'
         */
        "type"?: 'submit' | 'reset' | 'button';
    }
    interface IonButtons {
        /**
          * If true, buttons will disappear when its parent toolbar has fully collapsed if the toolbar is not the first toolbar. If the toolbar is the first toolbar, the buttons will be hidden and will only be shown once all toolbars have fully collapsed.  Only applies in `ios` mode with `collapse` set to `true` on `ion-header`.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
          * @default false
         */
        "collapse"?: boolean;
    }
    interface IonCard {
        /**
          * If `true`, a button tag will be rendered and the card will be tappable.
          * @default false
         */
        "button"?: boolean;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the card.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
         */
        "download"?: string | undefined;
        /**
          * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
         */
        "href"?: string | undefined;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
         */
        "rel"?: string | undefined;
        /**
          * When using a router, it specifies the transition animation when navigating to another page using `href`.
         */
        "routerAnimation"?: AnimationBuilder | undefined;
        /**
          * When using a router, it specifies the transition direction when navigating to another page using `href`.
          * @default 'forward'
         */
        "routerDirection"?: RouterDirection;
        /**
          * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
         */
        "target"?: string | undefined;
        /**
          * The type of the button. Only used when an `onclick` or `button` property is present.
          * @default 'button'
         */
        "type"?: 'submit' | 'reset' | 'button';
    }
    interface IonCardContent {
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
    }
    interface IonCardHeader {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * If `true`, the card header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          * @default false
         */
        "translucent"?: boolean;
    }
    interface IonCardSubtitle {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
    }
    interface IonCardTitle {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
    }
    interface IonCheckbox {
        /**
          * How to control the alignment of the checkbox and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the checkbox `display` to `block`.
         */
        "alignment"?: 'start' | 'center';
        /**
          * If `true`, the checkbox is selected.
          * @default false
         */
        "checked"?: boolean;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the checkbox.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Text that is placed under the checkbox label and displayed when an error is detected.
         */
        "errorText"?: string;
        /**
          * Text that is placed under the checkbox label and displayed when no error is detected.
         */
        "helperText"?: string;
        /**
          * If `true`, the checkbox will visually appear as indeterminate.
          * @default false
         */
        "indeterminate"?: boolean;
        /**
          * How to pack the label and checkbox within a line. `"start"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `"end"`: The label and checkbox will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and checkbox will appear on opposite ends of the line with space between the two elements. Setting this property will change the checkbox `display` to `block`.
         */
        "justify"?: 'start' | 'end' | 'space-between';
        /**
          * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          * @default 'start'
         */
        "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * The name of the control, which is submitted with the form data.
          * @default this.inputId
         */
        "name"?: string;
        /**
          * Emitted when the checkbox loses focus.
         */
        "onIonBlur"?: (event: IonCheckboxCustomEvent<void>) => void;
        /**
          * Emitted when the checked property has changed as a result of a user action such as a click.  This event will not emit when programmatically setting the `checked` property.
         */
        "onIonChange"?: (event: IonCheckboxCustomEvent<CheckboxChangeEventDetail>) => void;
        /**
          * Emitted when the checkbox has focus.
         */
        "onIonFocus"?: (event: IonCheckboxCustomEvent<void>) => void;
        /**
          * If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid.
          * @default false
         */
        "required"?: boolean;
        /**
          * The value of the checkbox does not mean if it's checked or not, use the `checked` property for that.  The value of a checkbox is analogous to the value of an `<input type="checkbox">`, it's only used when the checkbox participates in a native `<form>`.
          * @default 'on'
         */
        "value"?: any | null;
    }
    interface IonChip {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the chip.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Display an outline style button.
          * @default false
         */
        "outline"?: boolean;
    }
    interface IonCol {
        /**
          * The amount to offset the column, in terms of how many columns it should shift to the end of the total available.
         */
        "offset"?: string;
        /**
          * The amount to offset the column for lg screens, in terms of how many columns it should shift to the end of the total available.
         */
        "offsetLg"?: string;
        /**
          * The amount to offset the column for md screens, in terms of how many columns it should shift to the end of the total available.
         */
        "offsetMd"?: string;
        /**
          * The amount to offset the column for sm screens, in terms of how many columns it should shift to the end of the total available.
         */
        "offsetSm"?: string;
        /**
          * The amount to offset the column for xl screens, in terms of how many columns it should shift to the end of the total available.
         */
        "offsetXl"?: string;
        /**
          * The amount to offset the column for xs screens, in terms of how many columns it should shift to the end of the total available.
         */
        "offsetXs"?: string;
        /**
          * The amount to pull the column, in terms of how many columns it should shift to the start of the total available.
         */
        "pull"?: string;
        /**
          * The amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available.
         */
        "pullLg"?: string;
        /**
          * The amount to pull the column for md screens, in terms of how many columns it should shift to the start of the total available.
         */
        "pullMd"?: string;
        /**
          * The amount to pull the column for sm screens, in terms of how many columns it should shift to the start of the total available.
         */
        "pullSm"?: string;
        /**
          * The amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available.
         */
        "pullXl"?: string;
        /**
          * The amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available.
         */
        "pullXs"?: string;
        /**
          * The amount to push the column, in terms of how many columns it should shift to the end of the total available.
         */
        "push"?: string;
        /**
          * The amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available.
         */
        "pushLg"?: string;
        /**
          * The amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available.
         */
        "pushMd"?: string;
        /**
          * The amount to push the column for sm screens, in terms of how many columns it should shift to the end of the total available.
         */
        "pushSm"?: string;
        /**
          * The amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available.
         */
        "pushXl"?: string;
        /**
          * The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available.
         */
        "pushXs"?: string;
        /**
          * The size of the column, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
         */
        "size"?: string;
        /**
          * The size of the column for lg screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
         */
        "sizeLg"?: string;
        /**
          * The size of the column for md screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
         */
        "sizeMd"?: string;
        /**
          * The size of the column for sm screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
         */
        "sizeSm"?: string;
        /**
          * The size of the column for xl screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
         */
        "sizeXl"?: string;
        /**
          * The size of the column for xs screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
         */
        "sizeXs"?: string;
    }
    interface IonContent {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * Controls where the fixed content is placed relative to the main content in the DOM. This can be used to control the order in which fixed elements receive keyboard focus. For example, if a FAB in the fixed slot should receive keyboard focus before the main page content, set this property to `'before'`.
          * @default 'after'
         */
        "fixedSlotPlacement"?: 'after' | 'before';
        /**
          * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting.
         */
        "forceOverscroll"?: boolean;
        /**
          * If `true`, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent.
          * @default false
         */
        "fullscreen"?: boolean;
        /**
          * Emitted while scrolling. This event is disabled by default. Set `scrollEvents` to `true` to enable.
         */
        "onIonScroll"?: (event: IonContentCustomEvent<ScrollDetail>) => void;
        /**
          * Emitted when the scroll has ended. This event is disabled by default. Set `scrollEvents` to `true` to enable.
         */
        "onIonScrollEnd"?: (event: IonContentCustomEvent<ScrollBaseDetail>) => void;
        /**
          * Emitted when the scroll has started. This event is disabled by default. Set `scrollEvents` to `true` to enable.
         */
        "onIonScrollStart"?: (event: IonContentCustomEvent<ScrollBaseDetail>) => void;
        /**
          * Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to `true`.
          * @default false
         */
        "scrollEvents"?: boolean;
        /**
          * If you want to enable the content scrolling in the X axis, set this property to `true`.
          * @default false
         */
        "scrollX"?: boolean;
        /**
          * If you want to disable the content scrolling in the Y axis, set this property to `false`.
          * @default true
         */
        "scrollY"?: boolean;
    }
    interface IonDatetime {
        /**
          * The text to display on the picker's cancel button.
          * @default 'Cancel'
         */
        "cancelText"?: string;
        /**
          * The text to display on the picker's "Clear" button.
          * @default 'Clear'
         */
        "clearText"?: string;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          * @default 'primary'
         */
        "color"?: Color;
        /**
          * Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month.
         */
        "dayValues"?: number[] | number | string;
        /**
          * If `true`, the user cannot interact with the datetime.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * The text to display on the picker's "Done" button.
          * @default 'Done'
         */
        "doneText"?: string;
        /**
          * The first day of the week to use for `ion-datetime`. The default value is `0` and represents Sunday.
          * @default 0
         */
        "firstDayOfWeek"?: number;
        /**
          * Formatting options for dates and times. Should include a 'date' and/or 'time' object, each of which is of type [Intl.DateTimeFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options).
         */
        "formatOptions"?: FormatOptions;
        /**
          * Used to apply custom text and background colors to specific dates.  Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors.  Only applies to the `date`, `date-time`, and `time-date` presentations, with `preferWheel="false"`.
         */
        "highlightedDates"?: DatetimeHighlight[] | DatetimeHighlightCallback;
        /**
          * The hour cycle of the `ion-datetime`. If no value is set, this is specified by the current locale.
         */
        "hourCycle"?: DatetimeHourCycle;
        /**
          * Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers.
         */
        "hourValues"?: number[] | number | string;
        /**
          * Returns if an individual date (calendar day) is enabled or disabled.  If `true`, the day will be enabled/interactive. If `false`, the day will be disabled/non-interactive.  The function accepts an ISO 8601 date string of a given day. By default, all days are enabled. Developers can use this function to write custom logic to disable certain days.  The function is called for each rendered calendar day, for the previous, current and next month. Custom implementations should be optimized for performance to avoid jank.
         */
        "isDateEnabled"?: (dateIsoString: string) => boolean;
        /**
          * The locale to use for `ion-datetime`. This impacts month and day name formatting. The `"default"` value refers to the default locale set by your device.
          * @default 'default'
         */
        "locale"?: string;
        /**
          * The maximum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as `1994`. Defaults to the end of this year.
         */
        "max"?: string;
        /**
          * The minimum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), such as `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as `1994`. Defaults to the beginning of the year, 100 years ago from today.
         */
        "min"?: string;
        /**
          * Values used to create the list of selectable minutes. By default the minutes range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be `minuteValues="0,15,30,45"`.
         */
        "minuteValues"?: number[] | number | string;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`.
         */
        "monthValues"?: number[] | number | string;
        /**
          * If `true`, multiple dates can be selected at once. Only applies to `presentation="date"` and `preferWheel="false"`.
          * @default false
         */
        "multiple"?: boolean;
        /**
          * The name of the control, which is submitted with the form data.
          * @default this.inputId
         */
        "name"?: string;
        /**
          * Emitted when the datetime loses focus.
         */
        "onIonBlur"?: (event: IonDatetimeCustomEvent<void>) => void;
        /**
          * Emitted when the datetime selection was cancelled.
         */
        "onIonCancel"?: (event: IonDatetimeCustomEvent<void>) => void;
        /**
          * Emitted when the value (selected date) has changed.  This event will not emit when programmatically setting the `value` property.
         */
        "onIonChange"?: (event: IonDatetimeCustomEvent<DatetimeChangeEventDetail>) => void;
        /**
          * Emitted when the datetime has focus.
         */
        "onIonFocus"?: (event: IonDatetimeCustomEvent<void>) => void;
        /**
          * Emitted when componentDidRender is fired.
         */
        "onIonRender"?: (event: IonDatetimeCustomEvent<void>) => void;
        /**
          * Emitted when the styles change.
         */
        "onIonStyle"?: (event: IonDatetimeCustomEvent<StyleEventDetail>) => void;
        /**
          * Emitted when the value property has changed. This is used to ensure that ion-datetime-button can respond to any value property changes.
         */
        "onIonValueChange"?: (event: IonDatetimeCustomEvent<DatetimeChangeEventDetail>) => void;
        /**
          * If `true`, a wheel picker will be rendered instead of a calendar grid where possible. If `false`, a calendar grid will be rendered instead of a wheel picker where possible.  A wheel picker can be rendered instead of a grid when `presentation` is one of the following values: `"date"`, `"date-time"`, or `"time-date"`.  A wheel picker will always be rendered regardless of the `preferWheel` value when `presentation` is one of the following values: `"time"`, `"month"`, `"month-year"`, or `"year"`.
          * @default false
         */
        "preferWheel"?: boolean;
        /**
          * Which values you want to select. `"date"` will show a calendar picker to select the month, day, and year. `"time"` will show a time picker to select the hour, minute, and (optionally) AM/PM. `"date-time"` will show the date picker first and time picker second. `"time-date"` will show the time picker first and date picker second.
          * @default 'date-time'
         */
        "presentation"?: DatetimePresentation;
        /**
          * If `true`, the datetime appears normal but the selected date cannot be changed.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * If `true`, the datetime calendar displays a six-week (42-day) layout, including days from the previous and next months to fill the grid. These adjacent days are selectable unless disabled.
          * @default false
         */
        "showAdjacentDays"?: boolean;
        /**
          * If `true`, a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.
          * @default false
         */
        "showClearButton"?: boolean;
        /**
          * If `true`, the default "Cancel" and "OK" buttons will be rendered at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.
          * @default false
         */
        "showDefaultButtons"?: boolean;
        /**
          * If `true`, the default "Time" label will be rendered for the time selector of the `ion-datetime` component. Developers can also use the `time-label` slot if they want to customize this label. If a custom label is set in the `time-label` slot then the default label will not be rendered.
          * @default true
         */
        "showDefaultTimeLabel"?: boolean;
        /**
          * If `true`, a header will be shown above the calendar picker. This will include both the slotted title, and the selected date.
          * @default false
         */
        "showDefaultTitle"?: boolean;
        /**
          * If `cover`, the `ion-datetime` will expand to cover the full width of its container. If `fixed`, the `ion-datetime` will have a fixed width.
          * @default 'fixed'
         */
        "size"?: 'cover' | 'fixed';
        /**
          * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
         */
        "titleSelectedDatesFormatter"?: TitleSelectedDatesFormatter;
        /**
          * The value of the datetime as a valid ISO 8601 datetime string. This should be an array of strings only when `multiple="true"`.
         */
        "value"?: string | string[] | null;
        /**
          * Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2008,2012,2016,2020,2024"`.
         */
        "yearValues"?: number[] | number | string;
    }
    interface IonDatetimeButton {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          * @default 'primary'
         */
        "color"?: Color;
        /**
          * The ID of the `ion-datetime` instance associated with the datetime button.
         */
        "datetime"?: string;
        /**
          * If `true`, the user cannot interact with the button.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
    }
    interface IonFab {
        /**
          * If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.
          * @default false
         */
        "activated"?: boolean;
        /**
          * If `true`, the fab will display on the edge of the header if `vertical` is `"top"`, and on the edge of the footer if it is `"bottom"`. Should be used with a `fixed` slot.
          * @default false
         */
        "edge"?: boolean;
        /**
          * Where to align the fab horizontally in the viewport.
         */
        "horizontal"?: 'start' | 'end' | 'center';
        /**
          * Where to align the fab vertically in the viewport.
         */
        "vertical"?: 'top' | 'bottom' | 'center';
    }
    interface IonFabButton {
        /**
          * If `true`, the fab button will be show a close icon.
          * @default false
         */
        "activated"?: boolean;
        /**
          * The icon name to use for the close icon. This will appear when the fab button is pressed. Only applies if it is the main button inside of a fab containing a fab list.
          * @default close
         */
        "closeIcon"?: string;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the fab button.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
         */
        "download"?: string | undefined;
        /**
          * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
         */
        "href"?: string | undefined;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Emitted when the button loses focus.
         */
        "onIonBlur"?: (event: IonFabButtonCustomEvent<void>) => void;
        /**
          * Emitted when the button has focus.
         */
        "onIonFocus"?: (event: IonFabButtonCustomEvent<void>) => void;
        /**
          * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
         */
        "rel"?: string | undefined;
        /**
          * When using a router, it specifies the transition animation when navigating to another page using `href`.
         */
        "routerAnimation"?: AnimationBuilder | undefined;
        /**
          * When using a router, it specifies the transition direction when navigating to another page using `href`.
          * @default 'forward'
         */
        "routerDirection"?: RouterDirection;
        /**
          * If `true`, the fab button will show when in a fab-list.
          * @default false
         */
        "show"?: boolean;
        /**
          * The size of the button. Set this to `small` in order to have a mini fab button.
         */
        "size"?: 'small';
        /**
          * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
         */
        "target"?: string | undefined;
        /**
          * If `true`, the fab button will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          * @default false
         */
        "translucent"?: boolean;
        /**
          * The type of the button.
          * @default 'button'
         */
        "type"?: 'submit' | 'reset' | 'button';
    }
    interface IonFabList {
        /**
          * If `true`, the fab list will show all fab buttons in the list.
          * @default false
         */
        "activated"?: boolean;
        /**
          * The side the fab list will show on relative to the main fab button.
          * @default 'bottom'
         */
        "side"?: 'start' | 'end' | 'top' | 'bottom';
    }
    interface IonFooter {
        /**
          * Describes the scroll effect that will be applied to the footer. Only applies in iOS mode.
         */
        "collapse"?: 'fade';
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * If `true`, the footer will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content.
          * @default false
         */
        "translucent"?: boolean;
    }
    interface IonGrid {
        /**
          * If `true`, the grid will have a fixed width based on the screen size.
          * @default false
         */
        "fixed"?: boolean;
    }
    interface IonHeader {
        /**
          * Describes the scroll effect that will be applied to the header. Only applies in iOS mode.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
         */
        "collapse"?: 'condense' | 'fade';
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * If `true`, the header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.
          * @default false
         */
        "translucent"?: boolean;
    }
    interface IonImg {
        /**
          * This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.
         */
        "alt"?: string;
        /**
          * Emitted when the img fails to load
         */
        "onIonError"?: (event: IonImgCustomEvent<void>) => void;
        /**
          * Emitted when the image has finished loading
         */
        "onIonImgDidLoad"?: (event: IonImgCustomEvent<void>) => void;
        /**
          * Emitted when the img src has been set
         */
        "onIonImgWillLoad"?: (event: IonImgCustomEvent<void>) => void;
        /**
          * The image URL. This attribute is mandatory for the `<img>` element.
         */
        "src"?: string;
    }
    interface IonInfiniteScroll {
        /**
          * If `true`, the infinite scroll will be hidden and scroll event listeners will be removed.  Set this to true to disable the infinite scroll from actively trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Emitted when the scroll reaches the threshold distance. From within your infinite handler, you must call the infinite scroll's `complete()` method when your async operation has completed.
         */
        "onIonInfinite"?: (event: IonInfiniteScrollCustomEvent<void>) => void;
        /**
          * The position of the infinite scroll element. The value can be either `top` or `bottom`.
          * @default 'bottom'
         */
        "position"?: 'top' | 'bottom';
        /**
          * The threshold distance from the bottom of the content to call the `infinite` output event when scrolled. The threshold value can be either a percent, or in pixels. For example, use the value of `10%` for the `infinite` output event to get called when the user has scrolled 10% from the bottom of the page. Use the value `100px` when the scroll is within 100 pixels from the bottom of the page.
          * @default '15%'
         */
        "threshold"?: string;
    }
    interface IonInfiniteScrollContent {
        /**
          * An animated SVG spinner that shows while loading.
         */
        "loadingSpinner"?: SpinnerTypes | null;
        /**
          * Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Content is parsed as plaintext by default. `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config before custom HTML can be used.
         */
        "loadingText"?: string | IonicSafeString;
    }
    interface IonInput {
        /**
          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
          * @default 'off'
         */
        "autocapitalize"?: string;
        /**
          * Indicates whether the value of the control can be automatically completed by the browser.
          * @default 'off'
         */
        "autocomplete"?: AutocompleteTypes;
        /**
          * Whether auto correction should be enabled when the user is entering/editing the text value.
          * @default 'off'
         */
        "autocorrect"?: 'on' | 'off';
        /**
          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
          * @default false
         */
        "autofocus"?: boolean;
        /**
          * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
          * @default false
         */
        "clearInput"?: boolean;
        /**
          * The icon to use for the clear button. Only applies when `clearInput` is set to `true`.
         */
        "clearInputIcon"?: string;
        /**
          * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
         */
        "clearOnEdit"?: boolean;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.
          * @default false
         */
        "counter"?: boolean;
        /**
          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
         */
        "counterFormatter"?: (inputLength: number, maxLength: number) => string;
        /**
          * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
         */
        "debounce"?: number;
        /**
          * If `true`, the user cannot interact with the input.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
         */
        "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
        /**
          * Text that is placed under the input and displayed when an error is detected.
         */
        "errorText"?: string;
        /**
          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
         */
        "fill"?: 'outline' | 'solid';
        /**
          * Text that is placed under the input and displayed when no error is detected.
         */
        "helperText"?: string;
        /**
          * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
         */
        "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
        /**
          * The visible label associated with the input.  Use this if you need to render a plaintext label.  The `label` property will take priority over the `label` slot if both are used.
         */
        "label"?: string;
        /**
          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the input in LTR and to the right in RTL. `"end"`: The label will appear to the right of the input in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `"stacked"`: The label will appear smaller and above the input regardless even when the input is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
          * @default 'start'
         */
        "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
        /**
          * The maximum value, which must not be less than its minimum (min attribute) value.
         */
        "max"?: string | number;
        /**
          * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.
         */
        "maxlength"?: number;
        /**
          * The minimum value, which must not be greater than its maximum (max attribute) value.
         */
        "min"?: string | number;
        /**
          * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.
         */
        "minlength"?: number;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"`, otherwise it is ignored.
         */
        "multiple"?: boolean;
        /**
          * The name of the control, which is submitted with the form data.
          * @default this.inputId
         */
        "name"?: string;
        /**
          * Emitted when the input loses focus.
         */
        "onIonBlur"?: (event: IonInputCustomEvent<FocusEvent>) => void;
        /**
          * The `ionChange` event is fired when the user modifies the input's value. Unlike the `ionInput` event, the `ionChange` event is only fired when changes are committed, not as the user types.  Depending on the way the users interacts with the element, the `ionChange` event fires at a different moment: - When the user commits the change explicitly (e.g. by selecting a date from a date picker for `<ion-input type="date">`, pressing the "Enter" key, etc.). - When the element loses focus after its value has changed: for elements where the user's interaction is typing.  This event will not emit when programmatically setting the `value` property.
         */
        "onIonChange"?: (event: IonInputCustomEvent<InputChangeEventDetail>) => void;
        /**
          * Emitted when the input has focus.
         */
        "onIonFocus"?: (event: IonInputCustomEvent<FocusEvent>) => void;
        /**
          * The `ionInput` event is fired each time the user modifies the input's value. Unlike the `ionChange` event, the `ionInput` event is fired for each alteration to the input's value. This typically happens for each keystroke as the user types.  For elements that accept text input (`type=text`, `type=tel`, etc.), the interface is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others, the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If the input is cleared on edit, the type is `null`.
         */
        "onIonInput"?: (event: IonInputCustomEvent<InputInputEventDetail>) => void;
        /**
          * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, `"date"`, or `"password"`, otherwise it is ignored. When the type attribute is `"date"`, `pattern` will only be used in browsers that do not support the `"date"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.
         */
        "pattern"?: string;
        /**
          * Instructional text that shows before the input has a value. This property applies only when the `type` property is set to `"email"`, `"number"`, `"password"`, `"search"`, `"tel"`, `"text"`, or `"url"`, otherwise it is ignored.
         */
        "placeholder"?: string;
        /**
          * If `true`, the user cannot modify the value.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * If `true`, the user must fill in a value before submitting a form.
          * @default false
         */
        "required"?: boolean;
        /**
          * The shape of the input. If "round" it will have an increased border radius.
         */
        "shape"?: 'round';
        /**
          * If `true`, the element will have its spelling and grammar checked.
          * @default false
         */
        "spellcheck"?: boolean;
        /**
          * Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number.
         */
        "step"?: string;
        /**
          * The type of control to display. The default type is text.
          * @default 'text'
         */
        "type"?: TextFieldTypes;
        /**
          * The value of the input.
          * @default ''
         */
        "value"?: string | number | null;
    }
    interface IonInputOtp {
        /**
          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
          * @default 'off'
         */
        "autocapitalize"?: string;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the input.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * The fill for the input boxes. If `"solid"` the input boxes will have a background. If `"outline"` the input boxes will be transparent with a border.
          * @default 'outline'
         */
        "fill"?: 'outline' | 'solid';
        /**
          * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.  For numbers (type="number"): "numeric" For text (type="text"): "text"
         */
        "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
        /**
          * The number of input boxes to display.
          * @default 4
         */
        "length"?: number;
        /**
          * Emitted when the input group loses focus.
         */
        "onIonBlur"?: (event: IonInputOtpCustomEvent<FocusEvent>) => void;
        /**
          * The `ionChange` event is fired when the user modifies the input's value. Unlike the `ionInput` event, the `ionChange` event is only fired when changes are committed, not as the user types.  The `ionChange` event fires when the `<ion-input-otp>` component loses focus after its value has changed.  This event will not emit when programmatically setting the `value` property.
         */
        "onIonChange"?: (event: IonInputOtpCustomEvent<InputOtpChangeEventDetail>) => void;
        /**
          * Emitted when all input boxes have been filled with valid values.
         */
        "onIonComplete"?: (event: IonInputOtpCustomEvent<InputOtpCompleteEventDetail>) => void;
        /**
          * Emitted when the input group has focus.
         */
        "onIonFocus"?: (event: IonInputOtpCustomEvent<FocusEvent>) => void;
        /**
          * The `ionInput` event is fired each time the user modifies the input's value. Unlike the `ionChange` event, the `ionInput` event is fired for each alteration to the input's value. This typically happens for each keystroke as the user types.  For elements that accept text input (`type=text`, `type=tel`, etc.), the interface is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others, the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If the input is cleared on edit, the type is `null`.
         */
        "onIonInput"?: (event: IonInputOtpCustomEvent<InputOtpInputEventDetail>) => void;
        /**
          * A regex pattern string for allowed characters. Defaults based on type.  For numbers (`type="number"`): `"[\p{N}]"` For text (`type="text"`): `"[\p{L}\p{N}]"`
         */
        "pattern"?: string;
        /**
          * If `true`, the user cannot modify the value.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * Where separators should be shown between input boxes. Can be a comma-separated string or an array of numbers.  For example: `"3"` will show a separator after the 3rd input box. `[1,4]` will show a separator after the 1st and 4th input boxes. `"all"` will show a separator between every input box.
         */
        "separators"?: 'all' | string | number[];
        /**
          * The shape of the input boxes. If "round" they will have an increased border radius. If "rectangular" they will have no border radius. If "soft" they will have a soft border radius.
          * @default 'round'
         */
        "shape"?: 'round' | 'rectangular' | 'soft';
        /**
          * The size of the input boxes.
          * @default 'medium'
         */
        "size"?: 'small' | 'medium' | 'large';
        /**
          * The type of input allowed in the input boxes.
          * @default 'number'
         */
        "type"?: 'text' | 'number';
        /**
          * The value of the input group.
          * @default ''
         */
        "value"?: string | number | null;
    }
    interface IonInputPasswordToggle {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The icon that can be used to represent hiding a password. If not set, the "eyeOff" Ionicon will be used.
         */
        "hideIcon"?: string;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * The icon that can be used to represent showing a password. If not set, the "eye" Ionicon will be used.
         */
        "showIcon"?: string;
        /**
          * @default 'password'
         */
        "type"?: TextFieldTypes;
    }
    interface IonItem {
        /**
          * If `true`, a button tag will be rendered and the item will be tappable.
          * @default false
         */
        "button"?: boolean;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present.
         */
        "detail"?: boolean;
        /**
          * The icon to use when `detail` is set to `true`.
          * @default chevronForward
         */
        "detailIcon"?: string;
        /**
          * If `true`, the user cannot interact with the item.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
         */
        "download"?: string | undefined;
        /**
          * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
         */
        "href"?: string | undefined;
        /**
          * How the bottom border should be displayed on the item.
         */
        "lines"?: 'full' | 'inset' | 'none';
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
         */
        "rel"?: string | undefined;
        /**
          * When using a router, it specifies the transition animation when navigating to another page using `href`.
         */
        "routerAnimation"?: AnimationBuilder | undefined;
        /**
          * When using a router, it specifies the transition direction when navigating to another page using `href`.
          * @default 'forward'
         */
        "routerDirection"?: RouterDirection;
        /**
          * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
         */
        "target"?: string | undefined;
        /**
          * The type of the button. Only used when an `onclick` or `button` property is present.
          * @default 'button'
         */
        "type"?: 'submit' | 'reset' | 'button';
    }
    interface IonItemDivider {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * When it's set to `true`, the item-divider will stay visible when it reaches the top of the viewport until the next `ion-item-divider` replaces it.  This feature relies in `position:sticky`: https://caniuse.com/#feat=css-sticky
          * @default false
         */
        "sticky"?: boolean;
    }
    interface IonItemGroup {
    }
    interface IonItemOption {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the item option.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
         */
        "download"?: string | undefined;
        /**
          * If `true`, the option will expand to take up the available width and cover any other options.
          * @default false
         */
        "expandable"?: boolean;
        /**
          * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
         */
        "href"?: string | undefined;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
         */
        "rel"?: string | undefined;
        /**
          * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
         */
        "target"?: string | undefined;
        /**
          * The type of the button.
          * @default 'button'
         */
        "type"?: 'submit' | 'reset' | 'button';
    }
    interface IonItemOptions {
        /**
          * Emitted when the item has been fully swiped.
         */
        "onIonSwipe"?: (event: IonItemOptionsCustomEvent<any>) => void;
        /**
          * The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each.
          * @default 'end'
         */
        "side"?: Side;
    }
    interface IonItemSliding {
        /**
          * If `true`, the user cannot interact with the sliding item.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Emitted when the sliding position changes.
         */
        "onIonDrag"?: (event: IonItemSlidingCustomEvent<any>) => void;
    }
    interface IonLabel {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Emitted when the color changes.
         */
        "onIonColor"?: (event: IonLabelCustomEvent<StyleEventDetail>) => void;
        /**
          * Emitted when the styles change.
         */
        "onIonStyle"?: (event: IonLabelCustomEvent<StyleEventDetail>) => void;
        /**
          * The position determines where and how the label behaves inside an item.
         */
        "position"?: 'fixed' | 'stacked' | 'floating';
    }
    interface IonList {
        /**
          * If `true`, the list will have margin around it and rounded corners.
          * @default false
         */
        "inset"?: boolean;
        /**
          * How the bottom border should be displayed on all items.
         */
        "lines"?: 'full' | 'inset' | 'none';
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
    }
    interface IonListHeader {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * How the bottom border should be displayed on the list header.
         */
        "lines"?: 'full' | 'inset' | 'none';
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
    }
    interface IonLoading {
        /**
          * If `true`, the loading indicator will animate.
          * @default true
         */
        "animated"?: boolean;
        /**
          * If `true`, the loading indicator will be dismissed when the backdrop is clicked.
          * @default false
         */
        "backdropDismiss"?: boolean;
        /**
          * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
         */
        "cssClass"?: string | string[];
        "delegate"?: FrameworkDelegate;
        /**
          * Number of milliseconds to wait before dismissing the loading indicator.
          * @default 0
         */
        "duration"?: number;
        /**
          * Animation to use when the loading indicator is presented.
         */
        "enterAnimation"?: AnimationBuilder;
        /**
          * @default false
         */
        "hasController"?: boolean;
        /**
          * Additional attributes to pass to the loader.
         */
        "htmlAttributes"?: { [key: string]: any };
        /**
          * If `true`, the loading indicator will open. If `false`, the loading indicator will close. Use this if you need finer grained control over presentation, otherwise just use the loadingController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the loading indicator dismisses. You will need to do that in your code.
          * @default false
         */
        "isOpen"?: boolean;
        /**
          * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          * @default true
         */
        "keyboardClose"?: boolean;
        /**
          * Animation to use when the loading indicator is dismissed.
         */
        "leaveAnimation"?: AnimationBuilder;
        /**
          * Optional text content to display in the loading indicator.  This property accepts custom HTML as a string. Content is parsed as plaintext by default. `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config before custom HTML can be used.
         */
        "message"?: string | IonicSafeString;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Emitted after the loading indicator has dismissed. Shorthand for ionLoadingDidDismiss.
         */
        "onDidDismiss"?: (event: IonLoadingCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted after the loading indicator has presented. Shorthand for ionLoadingWillDismiss.
         */
        "onDidPresent"?: (event: IonLoadingCustomEvent<void>) => void;
        /**
          * Emitted after the loading has dismissed.
         */
        "onIonLoadingDidDismiss"?: (event: IonLoadingCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted after the loading has presented.
         */
        "onIonLoadingDidPresent"?: (event: IonLoadingCustomEvent<void>) => void;
        /**
          * Emitted before the loading has dismissed.
         */
        "onIonLoadingWillDismiss"?: (event: IonLoadingCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted before the loading has presented.
         */
        "onIonLoadingWillPresent"?: (event: IonLoadingCustomEvent<void>) => void;
        /**
          * Emitted before the loading indicator has dismissed. Shorthand for ionLoadingWillDismiss.
         */
        "onWillDismiss"?: (event: IonLoadingCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted before the loading indicator has presented. Shorthand for ionLoadingWillPresent.
         */
        "onWillPresent"?: (event: IonLoadingCustomEvent<void>) => void;
        "overlayIndex": number;
        /**
          * If `true`, a backdrop will be displayed behind the loading indicator.
          * @default true
         */
        "showBackdrop"?: boolean;
        /**
          * The name of the spinner to display.
         */
        "spinner"?: SpinnerTypes | null;
        /**
          * If `true`, the loading indicator will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          * @default false
         */
        "translucent"?: boolean;
        /**
          * An ID corresponding to the trigger element that causes the loading indicator to open when clicked.
         */
        "trigger"?: string | undefined;
    }
    interface IonMenu {
        /**
          * The `id` of the main content. When using a router this is typically `ion-router-outlet`. When not using a router, this is typically your main view's `ion-content`. This is not the id of the `ion-content` inside of your `ion-menu`.
         */
        "contentId"?: string;
        /**
          * If `true`, the menu is disabled.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered.
          * @default 50
         */
        "maxEdgeStart"?: number;
        /**
          * An id for the menu.
         */
        "menuId"?: string;
        /**
          * Emitted when the menu is closed.
         */
        "onIonDidClose"?: (event: IonMenuCustomEvent<MenuCloseEventDetail>) => void;
        /**
          * Emitted when the menu is open.
         */
        "onIonDidOpen"?: (event: IonMenuCustomEvent<void>) => void;
        /**
          * Emitted when the menu state is changed.
         */
        "onIonMenuChange"?: (event: IonMenuCustomEvent<MenuChangeEventDetail>) => void;
        /**
          * Emitted when the menu is about to be closed.
         */
        "onIonWillClose"?: (event: IonMenuCustomEvent<MenuCloseEventDetail>) => void;
        /**
          * Emitted when the menu is about to be opened.
         */
        "onIonWillOpen"?: (event: IonMenuCustomEvent<void>) => void;
        /**
          * Which side of the view the menu should be placed.
          * @default 'start'
         */
        "side"?: Side;
        /**
          * If `true`, swiping the menu is enabled.
          * @default true
         */
        "swipeGesture"?: boolean;
        /**
          * The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`.
         */
        "type"?: MenuType;
    }
    interface IonMenuButton {
        /**
          * Automatically hides the menu button when the corresponding menu is not active
          * @default true
         */
        "autoHide"?: boolean;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the menu button.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle
         */
        "menu"?: string;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * The type of the button.
          * @default 'button'
         */
        "type"?: 'submit' | 'reset' | 'button';
    }
    interface IonMenuToggle {
        /**
          * Automatically hides the content when the corresponding menu is not active.  By default, it's `true`. Change it to `false` in order to keep `ion-menu-toggle` always visible regardless the state of the menu.
          * @default true
         */
        "autoHide"?: boolean;
        /**
          * Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle.  If this property is not used, `ion-menu-toggle` will toggle the first menu that is active.
         */
        "menu"?: string;
    }
    interface IonModal {
        /**
          * If `true`, the modal will animate.
          * @default true
         */
        "animated"?: boolean;
        /**
          * A decimal value between 0 and 1 that indicates the point after which the backdrop will begin to fade in when using a sheet modal. Prior to this point, the backdrop will be hidden and the content underneath the sheet can be interacted with. This value is exclusive meaning the backdrop will become active after the value specified.
          * @default 0
         */
        "backdropBreakpoint"?: number;
        /**
          * If `true`, the modal will be dismissed when the backdrop is clicked.
          * @default true
         */
        "backdropDismiss"?: boolean;
        /**
          * The breakpoints to use when creating a sheet modal. Each value in the array must be a decimal between 0 and 1 where 0 indicates the modal is fully closed and 1 indicates the modal is fully open. Values are relative to the height of the modal, not the height of the screen. One of the values in this array must be the value of the `initialBreakpoint` property. For example: [0, .25, .5, 1]
         */
        "breakpoints"?: number[];
        /**
          * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          * @default true
         */
        "canDismiss"?: boolean | ((data?: any, role?: string) => Promise<boolean>);
        /**
          * The component to display inside of the modal.
         */
        "component"?: ComponentRef;
        /**
          * The data to pass to the modal component.
         */
        "componentProps"?: ComponentProps;
        /**
          * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
         */
        "cssClass"?: string | string[];
        "delegate"?: FrameworkDelegate;
        /**
          * Animation to use when the modal is presented.
         */
        "enterAnimation"?: AnimationBuilder;
        /**
          * Controls whether scrolling or dragging within the sheet modal expands it to a larger breakpoint. This only takes effect when `breakpoints` and `initialBreakpoint` are set.  If `true`, scrolling or dragging anywhere in the modal will first expand it to the next breakpoint. Once fully expanded, scrolling will affect the content. If `false`, scrolling will always affect the content. The modal will only expand when dragging the header or handle. The modal will close when dragging the header or handle. It can also be closed when dragging the content, but only if the content is scrolled to the top.
          * @default true
         */
        "expandToScroll"?: boolean;
        /**
          * If `true`, focus will not be allowed to move outside of this overlay. If `false`, focus will be allowed to move outside of the overlay.  In most scenarios this property should remain set to `true`. Setting this property to `false` can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this to `false` when absolutely necessary.  Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. Developers would disable focus trapping on the Ionic overlay when presenting the 3rd party overlay and then re-enable focus trapping when dismissing the 3rd party overlay and moving focus back to the Ionic overlay.
          * @default true
         */
        "focusTrap"?: boolean;
        /**
          * The horizontal line that displays at the top of a sheet modal. It is `true` by default when setting the `breakpoints` and `initialBreakpoint` properties.
         */
        "handle"?: boolean;
        /**
          * The interaction behavior for the sheet modal when the handle is pressed.  Defaults to `"none"`, which  means the modal will not change size or position when the handle is pressed. Set to `"cycle"` to let the modal cycle between available breakpoints when pressed.  Handle behavior is unavailable when the `handle` property is set to `false` or when the `breakpoints` property is not set (using a fullscreen or card modal).
          * @default 'none'
         */
        "handleBehavior"?: ModalHandleBehavior;
        /**
          * @default false
         */
        "hasController"?: boolean;
        /**
          * Additional attributes to pass to the modal.
         */
        "htmlAttributes"?: { [key: string]: any };
        /**
          * A decimal value between 0 and 1 that indicates the initial point the modal will open at when creating a sheet modal. This value must also be listed in the `breakpoints` array.
         */
        "initialBreakpoint"?: number;
        /**
          * If `true`, the modal will open. If `false`, the modal will close. Use this if you need finer grained control over presentation, otherwise just use the modalController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the modal dismisses. You will need to do that in your code.
          * @default false
         */
        "isOpen"?: boolean;
        /**
          * If `true`, the component passed into `ion-modal` will automatically be mounted when the modal is created. The component will remain mounted even when the modal is dismissed. However, the component will be destroyed when the modal is destroyed. This property is not reactive and should only be used when initially creating a modal.  Note: This feature only applies to inline modals in JavaScript frameworks such as Angular, React, and Vue.
          * @default false
         */
        "keepContentsMounted"?: boolean;
        /**
          * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          * @default true
         */
        "keyboardClose"?: boolean;
        /**
          * Animation to use when the modal is dismissed.
         */
        "leaveAnimation"?: AnimationBuilder;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Emitted after the modal has dismissed. Shorthand for ionModalDidDismiss.
         */
        "onDidDismiss"?: (event: IonModalCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted after the modal has presented. Shorthand for ionModalDidPresent.
         */
        "onDidPresent"?: (event: IonModalCustomEvent<void>) => void;
        /**
          * Emitted after the modal breakpoint has changed.
         */
        "onIonBreakpointDidChange"?: (event: IonModalCustomEvent<ModalBreakpointChangeEventDetail>) => void;
        /**
          * Event that is emitted when the sheet modal or card modal gesture ends.
         */
        "onIonDragEnd"?: (event: IonModalCustomEvent<ModalDragEventDetail>) => void;
        /**
          * Event that is emitted when the sheet modal or card modal gesture moves.
         */
        "onIonDragMove"?: (event: IonModalCustomEvent<ModalDragEventDetail>) => void;
        /**
          * Event that is emitted when the sheet modal or card modal gesture starts.
         */
        "onIonDragStart"?: (event: IonModalCustomEvent<void>) => void;
        /**
          * Emitted after the modal has dismissed.
         */
        "onIonModalDidDismiss"?: (event: IonModalCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted after the modal has presented.
         */
        "onIonModalDidPresent"?: (event: IonModalCustomEvent<void>) => void;
        /**
          * Emitted before the modal has dismissed.
         */
        "onIonModalWillDismiss"?: (event: IonModalCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted before the modal has presented.
         */
        "onIonModalWillPresent"?: (event: IonModalCustomEvent<void>) => void;
        /**
          * Emitted before the modal has presented, but after the component has been mounted in the DOM. This event exists so iOS can run the entering transition properly
         */
        "onIonMount"?: (event: IonModalCustomEvent<void>) => void;
        /**
          * Emitted before the modal has dismissed. Shorthand for ionModalWillDismiss.
         */
        "onWillDismiss"?: (event: IonModalCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted before the modal has presented. Shorthand for ionModalWillPresent.
         */
        "onWillPresent"?: (event: IonModalCustomEvent<void>) => void;
        "overlayIndex": number;
        /**
          * The element that presented the modal. This is used for card presentation effects and for stacking multiple modals on top of each other. Only applies in iOS mode.
         */
        "presentingElement"?: HTMLElement;
        /**
          * If `true`, a backdrop will be displayed behind the modal. This property controls whether or not the backdrop darkens the screen when the modal is presented. It does not control whether or not the backdrop is active or present in the DOM.
          * @default true
         */
        "showBackdrop"?: boolean;
        /**
          * An ID corresponding to the trigger element that causes the modal to open when clicked.
         */
        "trigger"?: string | undefined;
    }
    interface IonNav {
        /**
          * If `true`, the nav should animate the transition of components.
          * @default true
         */
        "animated"?: boolean;
        /**
          * By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimationBuilder` functions.
         */
        "animation"?: AnimationBuilder;
        "delegate"?: FrameworkDelegate;
        /**
          * Event fired when the nav has changed components
         */
        "onIonNavDidChange"?: (event: IonNavCustomEvent<void>) => void;
        /**
          * Event fired when the nav will change components
         */
        "onIonNavWillChange"?: (event: IonNavCustomEvent<void>) => void;
        /**
          * Event fired when Nav will load a component
         */
        "onIonNavWillLoad"?: (event: IonNavCustomEvent<void>) => void;
        /**
          * Root NavComponent to load
         */
        "root"?: NavComponent;
        /**
          * Any parameters for the root component
         */
        "rootParams"?: ComponentProps;
        /**
          * If the nav component should allow for swipe-to-go-back.
         */
        "swipeGesture"?: boolean;
    }
    interface IonNavLink {
        /**
          * Component to navigate to. Only used if the `routerDirection` is `"forward"` or `"root"`.
         */
        "component"?: NavComponent;
        /**
          * Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`.
         */
        "componentProps"?: ComponentProps;
        /**
          * The transition animation when navigating to another page.
         */
        "routerAnimation"?: AnimationBuilder;
        /**
          * The transition direction when navigating to another page.
          * @default 'forward'
         */
        "routerDirection"?: RouterDirection;
    }
    interface IonNote {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
    }
    interface IonPicker {
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        "onIonInputModeChange"?: (event: IonPickerCustomEvent<PickerChangeEventDetail>) => void;
    }
    interface IonPickerColumn {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          * @default 'primary'
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the picker.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * If `true`, tapping the picker will reveal a number input keyboard that lets the user type in values for each picker column. This is useful when working with time pickers.
          * @default false
         */
        "numericInput"?: boolean;
        /**
          * Emitted when the value has changed.  This event will not emit when programmatically setting the `value` property.
         */
        "onIonChange"?: (event: IonPickerColumnCustomEvent<PickerColumnChangeEventDetail>) => void;
        /**
          * The selected option in the picker.
         */
        "value"?: string | number;
    }
    interface IonPickerColumnOption {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          * @default 'primary'
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the picker column option.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * The text value of the option.
         */
        "value"?: any | null;
    }
    interface IonPickerLegacy {
        /**
          * If `true`, the picker will animate.
          * @default true
         */
        "animated"?: boolean;
        /**
          * If `true`, the picker will be dismissed when the backdrop is clicked.
          * @default true
         */
        "backdropDismiss"?: boolean;
        /**
          * Array of buttons to be displayed at the top of the picker.
          * @default []
         */
        "buttons"?: PickerButton[];
        /**
          * Array of columns to be displayed in the picker.
          * @default []
         */
        "columns"?: PickerColumn[];
        /**
          * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
         */
        "cssClass"?: string | string[];
        "delegate"?: FrameworkDelegate;
        /**
          * Number of milliseconds to wait before dismissing the picker.
          * @default 0
         */
        "duration"?: number;
        /**
          * Animation to use when the picker is presented.
         */
        "enterAnimation"?: AnimationBuilder;
        /**
          * @default false
         */
        "hasController"?: boolean;
        /**
          * Additional attributes to pass to the picker.
         */
        "htmlAttributes"?: { [key: string]: any };
        /**
          * If `true`, the picker will open. If `false`, the picker will close. Use this if you need finer grained control over presentation, otherwise just use the pickerController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the picker dismisses. You will need to do that in your code.
          * @default false
         */
        "isOpen"?: boolean;
        /**
          * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          * @default true
         */
        "keyboardClose"?: boolean;
        /**
          * Animation to use when the picker is dismissed.
         */
        "leaveAnimation"?: AnimationBuilder;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Emitted after the picker has dismissed. Shorthand for ionPickerDidDismiss.
         */
        "onDidDismiss"?: (event: IonPickerLegacyCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted after the picker has presented. Shorthand for ionPickerWillDismiss.
         */
        "onDidPresent"?: (event: IonPickerLegacyCustomEvent<void>) => void;
        /**
          * Emitted after the picker has dismissed.
         */
        "onIonPickerDidDismiss"?: (event: IonPickerLegacyCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted after the picker has presented.
         */
        "onIonPickerDidPresent"?: (event: IonPickerLegacyCustomEvent<void>) => void;
        /**
          * Emitted before the picker has dismissed.
         */
        "onIonPickerWillDismiss"?: (event: IonPickerLegacyCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted before the picker has presented.
         */
        "onIonPickerWillPresent"?: (event: IonPickerLegacyCustomEvent<void>) => void;
        /**
          * Emitted before the picker has dismissed. Shorthand for ionPickerWillDismiss.
         */
        "onWillDismiss"?: (event: IonPickerLegacyCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted before the picker has presented. Shorthand for ionPickerWillPresent.
         */
        "onWillPresent"?: (event: IonPickerLegacyCustomEvent<void>) => void;
        "overlayIndex": number;
        /**
          * If `true`, a backdrop will be displayed behind the picker.
          * @default true
         */
        "showBackdrop"?: boolean;
        /**
          * An ID corresponding to the trigger element that causes the picker to open when clicked.
         */
        "trigger"?: string | undefined;
    }
    interface IonPickerLegacyColumn {
        /**
          * Picker column data
         */
        "col": PickerColumn;
        /**
          * Emitted when the selected value has changed
         */
        "onIonPickerColChange"?: (event: IonPickerLegacyColumnCustomEvent<PickerColumn>) => void;
    }
    interface IonPopover {
        /**
          * Describes how to align the popover content with the `reference` point. Defaults to `"center"` for `ios` mode, and `"start"` for `md` mode.
         */
        "alignment"?: PositionAlign;
        /**
          * If `true`, the popover will animate.
          * @default true
         */
        "animated"?: boolean;
        /**
          * If `true`, the popover will display an arrow that points at the `reference` when running in `ios` mode. Does not apply in `md` mode.
          * @default true
         */
        "arrow"?: boolean;
        /**
          * If `true`, the popover will be dismissed when the backdrop is clicked.
          * @default true
         */
        "backdropDismiss"?: boolean;
        /**
          * The component to display inside of the popover. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just slot your component inside of `ion-popover`.
         */
        "component"?: ComponentRef;
        /**
          * The data to pass to the popover component. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just set the props directly on your component.
         */
        "componentProps"?: ComponentProps;
        /**
          * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
         */
        "cssClass"?: string | string[];
        "delegate"?: FrameworkDelegate;
        /**
          * If `true`, the popover will be automatically dismissed when the content has been clicked.
          * @default false
         */
        "dismissOnSelect"?: boolean;
        /**
          * Animation to use when the popover is presented.
         */
        "enterAnimation"?: AnimationBuilder;
        /**
          * The event to pass to the popover animation.
         */
        "event"?: any;
        /**
          * If `true`, focus will not be allowed to move outside of this overlay. If `false`, focus will be allowed to move outside of the overlay.  In most scenarios this property should remain set to `true`. Setting this property to `false` can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this to `false` when absolutely necessary.  Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. Developers would disable focus trapping on the Ionic overlay when presenting the 3rd party overlay and then re-enable focus trapping when dismissing the 3rd party overlay and moving focus back to the Ionic overlay.
          * @default true
         */
        "focusTrap"?: boolean;
        /**
          * @default false
         */
        "hasController"?: boolean;
        /**
          * Additional attributes to pass to the popover.
         */
        "htmlAttributes"?: { [key: string]: any };
        /**
          * If `true`, the popover will open. If `false`, the popover will close. Use this if you need finer grained control over presentation, otherwise just use the popoverController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the popover dismisses. You will need to do that in your code.
          * @default false
         */
        "isOpen"?: boolean;
        /**
          * If `true`, the component passed into `ion-popover` will automatically be mounted when the popover is created. The component will remain mounted even when the popover is dismissed. However, the component will be destroyed when the popover is destroyed. This property is not reactive and should only be used when initially creating a popover.  Note: This feature only applies to inline popovers in JavaScript frameworks such as Angular, React, and Vue.
          * @default false
         */
        "keepContentsMounted"?: boolean;
        /**
          * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          * @default true
         */
        "keyboardClose"?: boolean;
        /**
          * @default false
         */
        "keyboardEvents"?: boolean;
        /**
          * Animation to use when the popover is dismissed.
         */
        "leaveAnimation"?: AnimationBuilder;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Emitted after the popover has dismissed. Shorthand for ionPopoverDidDismiss.
         */
        "onDidDismiss"?: (event: IonPopoverCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted after the popover has presented. Shorthand for ionPopoverWillDismiss.
         */
        "onDidPresent"?: (event: IonPopoverCustomEvent<void>) => void;
        /**
          * Emitted before the popover has presented, but after the component has been mounted in the DOM. This event exists for ion-popover to resolve an issue with the popover and the lazy build, that the transition is unable to get the correct dimensions of the popover with auto sizing. This is not required for other overlays, since the existing overlay transitions are not effected by auto sizing content.
         */
        "onIonMount"?: (event: IonPopoverCustomEvent<void>) => void;
        /**
          * Emitted after the popover has dismissed.
         */
        "onIonPopoverDidDismiss"?: (event: IonPopoverCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted after the popover has presented.
         */
        "onIonPopoverDidPresent"?: (event: IonPopoverCustomEvent<void>) => void;
        /**
          * Emitted before the popover has dismissed.
         */
        "onIonPopoverWillDismiss"?: (event: IonPopoverCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted before the popover has presented.
         */
        "onIonPopoverWillPresent"?: (event: IonPopoverCustomEvent<void>) => void;
        /**
          * Emitted before the popover has dismissed. Shorthand for ionPopoverWillDismiss.
         */
        "onWillDismiss"?: (event: IonPopoverCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted before the popover has presented. Shorthand for ionPopoverWillPresent.
         */
        "onWillPresent"?: (event: IonPopoverCustomEvent<void>) => void;
        "overlayIndex": number;
        /**
          * Describes what to position the popover relative to. If `"trigger"`, the popover will be positioned relative to the trigger button. If passing in an event, this is determined via event.target. If `"event"`, the popover will be positioned relative to the x/y coordinates of the trigger action. If passing in an event, this is determined via event.clientX and event.clientY.
          * @default 'trigger'
         */
        "reference"?: PositionReference;
        /**
          * If `true`, a backdrop will be displayed behind the popover. This property controls whether or not the backdrop darkens the screen when the popover is presented. It does not control whether or not the backdrop is active or present in the DOM.
          * @default true
         */
        "showBackdrop"?: boolean;
        /**
          * Describes which side of the `reference` point to position the popover on. The `"start"` and `"end"` values are RTL-aware, and the `"left"` and `"right"` values are not.
          * @default 'bottom'
         */
        "side"?: PositionSide;
        /**
          * Describes how to calculate the popover width. If `"cover"`, the popover width will match the width of the trigger. If `"auto"`, the popover width will be set to a static default value.
          * @default 'auto'
         */
        "size"?: PopoverSize;
        /**
          * If `true`, the popover will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          * @default false
         */
        "translucent"?: boolean;
        /**
          * An ID corresponding to the trigger element that causes the popover to open. Use the `trigger-action` property to customize the interaction that results in the popover opening.
         */
        "trigger"?: string | undefined;
        /**
          * Describes what kind of interaction with the trigger that should cause the popover to open. Does not apply when the `trigger` property is `undefined`. If `"click"`, the popover will be presented when the trigger is left clicked. If `"hover"`, the popover will be presented when a pointer hovers over the trigger. If `"context-menu"`, the popover will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing.
          * @default 'click'
         */
        "triggerAction"?: TriggerAction;
    }
    interface IonProgressBar {
        /**
          * If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1].
          * @default 1
         */
        "buffer"?: number;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * If true, reverse the progress bar direction.
          * @default false
         */
        "reversed"?: boolean;
        /**
          * The state of the progress bar, based on if the time the process takes is known or not. Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
          * @default 'determinate'
         */
        "type"?: 'determinate' | 'indeterminate';
        /**
          * The value determines how much of the active bar should display when the `type` is `"determinate"`. The value should be between [0, 1].
          * @default 0
         */
        "value"?: number;
    }
    interface IonRadio {
        /**
          * How to control the alignment of the radio and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the radio `display` to `block`.
         */
        "alignment"?: 'start' | 'center';
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the radio.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * How to pack the label and radio within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements. Setting this property will change the radio `display` to `block`.
         */
        "justify"?: 'start' | 'end' | 'space-between';
        /**
          * Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          * @default 'start'
         */
        "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * The name of the control, which is submitted with the form data.
          * @default this.inputId
         */
        "name"?: string;
        /**
          * Emitted when the radio button loses focus.
         */
        "onIonBlur"?: (event: IonRadioCustomEvent<void>) => void;
        /**
          * Emitted when the radio button has focus.
         */
        "onIonFocus"?: (event: IonRadioCustomEvent<void>) => void;
        /**
          * the value of the radio.
         */
        "value"?: any | null;
    }
    interface IonRadioGroup {
        /**
          * If `true`, the radios can be deselected.
          * @default false
         */
        "allowEmptySelection"?: boolean;
        /**
          * This property allows developers to specify a custom function or property name for comparing objects when determining the selected option in the ion-radio-group. When not specified, the default behavior will use strict equality (===) for comparison.
         */
        "compareWith"?: string | RadioGroupCompareFn | null;
        /**
          * The error text to display at the top of the radio group.
         */
        "errorText"?: string;
        /**
          * The helper text to display at the top of the radio group.
         */
        "helperText"?: string;
        /**
          * The name of the control, which is submitted with the form data.
          * @default this.inputId
         */
        "name"?: string;
        /**
          * Emitted when the value has changed.  This event will not emit when programmatically setting the `value` property.
         */
        "onIonChange"?: (event: IonRadioGroupCustomEvent<RadioGroupChangeEventDetail>) => void;
        /**
          * Emitted when the `value` property has changed. This is used to ensure that `ion-radio` can respond to any value property changes from the group.
         */
        "onIonValueChange"?: (event: IonRadioGroupCustomEvent<RadioGroupChangeEventDetail>) => void;
        /**
          * the value of the radio group.
         */
        "value"?: any | null;
    }
    interface IonRange {
        /**
          * The start position of the range active bar. This feature is only available with a single knob (dualKnobs="false"). Valid values are greater than or equal to the min value and less than or equal to the max value.
         */
        "activeBarStart"?: number;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * How long, in milliseconds, to wait to trigger the `ionInput` event after each change in the range value.
         */
        "debounce"?: number;
        /**
          * If `true`, the user cannot interact with the range.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Show two knobs.
          * @default false
         */
        "dualKnobs"?: boolean;
        /**
          * The text to display as the control's label. Use this over the `label` slot if you only need plain text. The `label` property will take priority over the `label` slot if both are used.
         */
        "label"?: string;
        /**
          * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the range regardless of the direction.
          * @default 'start'
         */
        "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
        /**
          * Maximum integer value of the range.
          * @default 100
         */
        "max"?: number;
        /**
          * Minimum integer value of the range.
          * @default 0
         */
        "min"?: number;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * The name of the control, which is submitted with the form data.
          * @default this.rangeId
         */
        "name"?: string;
        /**
          * Emitted when the range loses focus.
         */
        "onIonBlur"?: (event: IonRangeCustomEvent<void>) => void;
        /**
          * The `ionChange` event is fired for `<ion-range>` elements when the user modifies the element's value: - When the user releases the knob after dragging; - When the user moves the knob with keyboard arrows  This event will not emit when programmatically setting the `value` property.
         */
        "onIonChange"?: (event: IonRangeCustomEvent<RangeChangeEventDetail>) => void;
        /**
          * Emitted when the range has focus.
         */
        "onIonFocus"?: (event: IonRangeCustomEvent<void>) => void;
        /**
          * The `ionInput` event is fired for `<ion-range>` elements when the value is modified. Unlike `ionChange`, `ionInput` is fired continuously while the user is dragging the knob.
         */
        "onIonInput"?: (event: IonRangeCustomEvent<RangeChangeEventDetail>) => void;
        /**
          * Emitted when the user finishes moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.
         */
        "onIonKnobMoveEnd"?: (event: IonRangeCustomEvent<RangeKnobMoveEndEventDetail>) => void;
        /**
          * Emitted when the user starts moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.
         */
        "onIonKnobMoveStart"?: (event: IonRangeCustomEvent<RangeKnobMoveStartEventDetail>) => void;
        /**
          * If `true`, a pin with integer value is shown when the knob is pressed.
          * @default false
         */
        "pin"?: boolean;
        /**
          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          * @default (value: number): number => Math.round(value)
         */
        "pinFormatter"?: PinFormatter;
        /**
          * If `true`, the knob snaps to tick marks evenly spaced based on the step property value.
          * @default false
         */
        "snaps"?: boolean;
        /**
          * Specifies the value granularity.
          * @default 1
         */
        "step"?: number;
        /**
          * If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`.
          * @default true
         */
        "ticks"?: boolean;
        /**
          * the value of the range.
          * @default 0
         */
        "value"?: RangeValue;
    }
    interface IonRefresher {
        /**
          * Time it takes to close the refresher. Does not apply when the refresher content uses a spinner, enabling the native refresher.
          * @default '280ms'
         */
        "closeDuration"?: string;
        /**
          * If `true`, the refresher will be hidden.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Emitted while the user is pulling down the content and exposing the refresher.
         */
        "onIonPull"?: (event: IonRefresherCustomEvent<void>) => void;
        /**
          * Emitted when the refresher has returned to the inactive state after a pull gesture. This fires whether the refresh completed successfully or was canceled.
         */
        "onIonPullEnd"?: (event: IonRefresherCustomEvent<RefresherPullEndEventDetail>) => void;
        /**
          * Emitted when the user begins to start pulling down.
         */
        "onIonPullStart"?: (event: IonRefresherCustomEvent<void>) => void;
        /**
          * Emitted when the user lets go of the content and has pulled down further than the `pullMin` or pulls the content down and exceeds the pullMax. Updates the refresher state to `refreshing`. The `complete()` method should be called when the async operation has completed.
         */
        "onIonRefresh"?: (event: IonRefresherCustomEvent<RefresherEventDetail>) => void;
        /**
          * Emitted when the user begins to start pulling down. TODO(FW-7044): Remove this in a major release
          * @deprecated Use `ionPullStart` instead.
         */
        "onIonStart"?: (event: IonRefresherCustomEvent<void>) => void;
        /**
          * How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead.  For example, If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels, the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.  Does not apply when the refresher content uses a spinner, enabling the native refresher.
          * @default 1
         */
        "pullFactor"?: number;
        /**
          * The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. Does not apply when  the refresher content uses a spinner, enabling the native refresher.
          * @default this.pullMin + 60
         */
        "pullMax"?: number;
        /**
          * The minimum distance the user must pull down until the refresher will go into the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.
          * @default 60
         */
        "pullMin"?: number;
        /**
          * Time it takes the refresher to snap back to the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.
          * @default '280ms'
         */
        "snapbackDuration"?: string;
    }
    interface IonRefresherContent {
        /**
          * A static icon or a spinner to display when you begin to pull down. A spinner name can be provided to gradually show tick marks when pulling down on iOS devices.
         */
        "pullingIcon"?: SpinnerTypes | string | null;
        /**
          * The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  Content is parsed as plaintext by default. `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config before custom HTML can be used.
         */
        "pullingText"?: string | IonicSafeString;
        /**
          * An animated SVG spinner that shows when refreshing begins
         */
        "refreshingSpinner"?: SpinnerTypes | null;
        /**
          * The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  Content is parsed as plaintext by default. `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config before custom HTML can be used.
         */
        "refreshingText"?: string | IonicSafeString;
    }
    interface IonReorder {
    }
    interface IonReorderGroup {
        /**
          * If `true`, the reorder will be hidden.
          * @default true
         */
        "disabled"?: boolean;
        /**
          * Event that needs to be listened to in order to complete the reorder action.
          * @deprecated Use `ionReorderEnd` instead. If you are accessing `event.detail.from` or `event.detail.to` and relying on them being different you should now add checks as they are always emitted in `ionReorderEnd`, even when they are the same.
         */
        "onIonItemReorder"?: (event: IonReorderGroupCustomEvent<ItemReorderEventDetail>) => void;
        /**
          * Event that is emitted when the reorder gesture ends. The from and to properties are always available, regardless of if the reorder gesture moved the item. If the item did not change from its start position, the from and to properties will be the same. Once the event has been emitted, the `complete()` method then needs to be called in order to finalize the reorder action.
         */
        "onIonReorderEnd"?: (event: IonReorderGroupCustomEvent<ReorderEndEventDetail>) => void;
        /**
          * Event that is emitted as the reorder gesture moves.
         */
        "onIonReorderMove"?: (event: IonReorderGroupCustomEvent<ReorderMoveEventDetail>) => void;
        /**
          * Event that is emitted when the reorder gesture starts.
         */
        "onIonReorderStart"?: (event: IonReorderGroupCustomEvent<void>) => void;
    }
    interface IonRippleEffect {
        /**
          * Sets the type of ripple-effect:  - `bounded`: the ripple effect expands from the user's click position - `unbounded`: the ripple effect expands from the center of the button and overflows the container.  NOTE: Surfaces for bounded ripples should have the overflow property set to hidden, while surfaces for unbounded ripples should have it set to visible.
          * @default 'bounded'
         */
        "type"?: 'bounded' | 'unbounded';
    }
    interface IonRoute {
        /**
          * A navigation hook that is fired when the route tries to enter. Returning `true` allows the navigation to proceed, while returning `false` causes it to be cancelled. Returning a `NavigationHookOptions` object causes the router to redirect to the path specified.
         */
        "beforeEnter"?: NavigationHookCallback;
        /**
          * A navigation hook that is fired when the route tries to leave. Returning `true` allows the navigation to proceed, while returning `false` causes it to be cancelled. Returning a `NavigationHookOptions` object causes the router to redirect to the path specified.
         */
        "beforeLeave"?: NavigationHookCallback;
        /**
          * Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`) when the route matches.  The value of this property is not always the tagname of the component to load, in `ion-tabs` it actually refers to the name of the `ion-tab` to select.
         */
        "component": string;
        /**
          * A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed to the defined component when rendered.
         */
        "componentProps"?: { [key: string]: any };
        /**
          * Used internally by `ion-router` to know when this route did change.
         */
        "onIonRouteDataChanged"?: (event: IonRouteCustomEvent<any>) => void;
        /**
          * Relative path that needs to match in order for this route to apply.  Accepts paths similar to expressjs so that you can define parameters in the url /foo/:bar where bar would be available in incoming props.
          * @default ''
         */
        "url"?: string;
    }
    interface IonRouteRedirect {
        /**
          * A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL. It needs to be an exact match of the navigated URL in order to apply.  The path specified in this value is always an absolute path, even if the initial `/` slash is not specified.
         */
        "from": string;
        /**
          * Internal event that fires when any value of this rule is added/removed from the DOM, or any of his public properties changes.  `ion-router` captures this event in order to update his internal registry of router rules.
         */
        "onIonRouteRedirectChanged"?: (event: IonRouteRedirectCustomEvent<any>) => void;
        /**
          * A redirect route, redirects "from" a URL "to" another URL. This property is that "to" URL. When the defined `ion-route-redirect` rule matches, the router will redirect to the path specified in this property.  The value of this property is always an absolute path inside the scope of routes defined in `ion-router` it can't be used with another router or to perform a redirection to a different domain.  Note that this is a virtual redirect, it will not cause a real browser refresh, again, it's a redirect inside the context of ion-router.  When this property is not specified or his value is `undefined` the whole redirect route is noop, even if the "from" value matches.
         */
        "to": string | undefined | null;
    }
    interface IonRouter {
        /**
          * Emitted when the route had changed
         */
        "onIonRouteDidChange"?: (event: IonRouterCustomEvent<RouterEventDetail>) => void;
        /**
          * Event emitted when the route is about to change
         */
        "onIonRouteWillChange"?: (event: IonRouterCustomEvent<RouterEventDetail>) => void;
        /**
          * The root path to use when matching URLs. By default, this is set to "/", but you can specify an alternate prefix for all URL paths.
          * @default '/'
         */
        "root"?: string;
        /**
          * The router can work in two "modes": - With hash: `/index.html#/path/to/page` - Without hash: `/path/to/page`  Using one or another might depend in the requirements of your app and/or where it's deployed.  Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might requires additional server-side configuration in order to properly work.  On the other side hash-navigation is much easier to deploy, it even works over the file protocol.  By default, this property is `true`, change to `false` to allow hash-less URLs.
          * @default true
         */
        "useHash"?: boolean;
    }
    interface IonRouterLink {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
         */
        "href"?: string | undefined;
        /**
          * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
         */
        "rel"?: string | undefined;
        /**
          * When using a router, it specifies the transition animation when navigating to another page using `href`.
         */
        "routerAnimation"?: AnimationBuilder | undefined;
        /**
          * When using a router, it specifies the transition direction when navigating to another page using `href`.
          * @default 'forward'
         */
        "routerDirection"?: RouterDirection;
        /**
          * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
         */
        "target"?: string | undefined;
    }
    interface IonRouterOutlet {
        /**
          * If `true`, the router-outlet should animate the transition of components.
          * @default true
         */
        "animated"?: boolean;
        /**
          * This property allows to create custom transition using AnimationBuilder functions.
         */
        "animation"?: AnimationBuilder;
        "delegate"?: FrameworkDelegate;
        /**
          * The mode determines which platform styles to use.
          * @default getIonMode(this)
         */
        "mode"?: "ios" | "md";
        "onIonNavDidChange"?: (event: IonRouterOutletCustomEvent<void>) => void;
        "onIonNavWillChange"?: (event: IonRouterOutletCustomEvent<void>) => void;
        "onIonNavWillLoad"?: (event: IonRouterOutletCustomEvent<void>) => void;
        "swipeHandler"?: SwipeGestureHandler;
    }
    interface IonRow {
    }
    interface IonSearchbar {
        /**
          * If `true`, enable searchbar animation.
          * @default false
         */
        "animated"?: boolean;
        /**
          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
          * @default 'off'
         */
        "autocapitalize"?: string;
        /**
          * Set the input's autocomplete property.
          * @default 'off'
         */
        "autocomplete"?: AutocompleteTypes;
        /**
          * Set the input's autocorrect property.
          * @default 'off'
         */
        "autocorrect"?: 'on' | 'off';
        /**
          * Set the cancel button icon. Only applies to `md` mode. Defaults to `arrow-back-sharp`.
          * @default config.get('backButtonIcon', arrowBackSharp) as string
         */
        "cancelButtonIcon"?: string;
        /**
          * Set the cancel button text. Only applies to `ios` mode.
          * @default 'Cancel'
         */
        "cancelButtonText"?: string;
        /**
          * Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`.
         */
        "clearIcon"?: string;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
         */
        "debounce"?: number;
        /**
          * If `true`, the user cannot interact with the input.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
         */
        "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
        /**
          * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
         */
        "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
        /**
          * This attribute specifies the maximum number of characters that the user can enter.
         */
        "maxlength"?: number;
        /**
          * This attribute specifies the minimum number of characters that the user can enter.
         */
        "minlength"?: number;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * If used in a form, set the name of the control, which is submitted with the form data.
          * @default this.inputId
         */
        "name"?: string;
        /**
          * Emitted when the input loses focus.
         */
        "onIonBlur"?: (event: IonSearchbarCustomEvent<void>) => void;
        /**
          * Emitted when the cancel button is clicked.
         */
        "onIonCancel"?: (event: IonSearchbarCustomEvent<void>) => void;
        /**
          * The `ionChange` event is fired for `<ion-searchbar>` elements when the user modifies the element's value. Unlike the `ionInput` event, the `ionChange` event is not necessarily fired for each alteration to an element's value.  The `ionChange` event is fired when the value has been committed by the user. This can happen when the element loses focus or when the "Enter" key is pressed. `ionChange` can also fire when clicking the clear or cancel buttons.  This event will not emit when programmatically setting the `value` property.
         */
        "onIonChange"?: (event: IonSearchbarCustomEvent<SearchbarChangeEventDetail>) => void;
        /**
          * Emitted when the clear input button is clicked.
         */
        "onIonClear"?: (event: IonSearchbarCustomEvent<void>) => void;
        /**
          * Emitted when the input has focus.
         */
        "onIonFocus"?: (event: IonSearchbarCustomEvent<void>) => void;
        /**
          * Emitted when the `value` of the `ion-searchbar` element has changed.
         */
        "onIonInput"?: (event: IonSearchbarCustomEvent<SearchbarInputEventDetail>) => void;
        /**
          * Emitted when the styles change.
         */
        "onIonStyle"?: (event: IonSearchbarCustomEvent<StyleEventDetail>) => void;
        /**
          * Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
          * @default 'Search'
         */
        "placeholder"?: string;
        /**
          * The icon to use as the search icon. Defaults to `search-outline` in `ios` mode and `search-sharp` in `md` mode.
         */
        "searchIcon"?: string;
        /**
          * Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state.
          * @default 'never'
         */
        "showCancelButton"?: 'never' | 'focus' | 'always';
        /**
          * Sets the behavior for the clear button. Defaults to `"focus"`. Setting to `"focus"` shows the clear button on focus if the input is not empty. Setting to `"never"` hides the clear button. Setting to `"always"` shows the clear button regardless of focus state, but only if the input is not empty.
          * @default 'always'
         */
        "showClearButton"?: 'never' | 'focus' | 'always';
        /**
          * If `true`, enable spellcheck on the input.
          * @default false
         */
        "spellcheck"?: boolean;
        /**
          * Set the type of the input.
          * @default 'search'
         */
        "type"?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
        /**
          * the value of the searchbar.
          * @default ''
         */
        "value"?: string | null;
    }
    interface IonSegment {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the segment.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Emitted when the value property has changed and any dragging pointer has been released from `ion-segment`.  This event will not emit when programmatically setting the `value` property.
         */
        "onIonChange"?: (event: IonSegmentCustomEvent<SegmentChangeEventDetail>) => void;
        /**
          * Emitted when the value of the segment changes from user committed actions or from externally assigning a value.
         */
        "onIonSelect"?: (event: IonSegmentCustomEvent<SegmentChangeEventDetail>) => void;
        /**
          * Emitted when the styles change.
         */
        "onIonStyle"?: (event: IonSegmentCustomEvent<StyleEventDetail>) => void;
        /**
          * If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.
          * @default false
         */
        "scrollable"?: boolean;
        /**
          * If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element. If `false`, keyboard navigation will only focus the `ion-segment-button` element.
          * @default false
         */
        "selectOnFocus"?: boolean;
        /**
          * If `true`, users will be able to swipe between segment buttons to activate them.
          * @default true
         */
        "swipeGesture"?: boolean;
        /**
          * the value of the segment.
         */
        "value"?: SegmentValue;
    }
    interface IonSegmentButton {
        /**
          * The `id` of the segment content.
         */
        "contentId"?: string;
        /**
          * If `true`, the user cannot interact with the segment button.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Set the layout of the text and icon in the segment.
          * @default 'icon-top'
         */
        "layout"?: SegmentButtonLayout;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * The type of the button.
          * @default 'button'
         */
        "type"?: 'submit' | 'reset' | 'button';
        /**
          * The value of the segment button.
          * @default 'ion-sb-' + ids++
         */
        "value"?: SegmentValue;
    }
    interface IonSegmentContent {
    }
    interface IonSegmentView {
        /**
          * If `true`, the segment view cannot be interacted with.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Emitted when the segment view is scrolled.
         */
        "onIonSegmentViewScroll"?: (event: IonSegmentViewCustomEvent<SegmentViewScrollEvent>) => void;
        /**
          * If `true`, users will be able to swipe the segment view to navigate between segment contents.
          * @default true
         */
        "swipeGesture"?: boolean;
    }
    interface IonSelect {
        /**
          * The text to display on the cancel button.
          * @default 'Cancel'
         */
        "cancelText"?: string;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).  This property is only available when using the modern select syntax.
         */
        "color"?: Color;
        /**
          * This property allows developers to specify a custom function or property name for comparing objects when determining the selected option in the ion-select. When not specified, the default behavior will use strict equality (===) for comparison.
         */
        "compareWith"?: string | SelectCompareFn | null;
        /**
          * If `true`, the user cannot interact with the select.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Text that is placed under the select and displayed when an error is detected.
         */
        "errorText"?: string;
        /**
          * The toggle icon to show when the select is open. If defined, the icon rotation behavior in `md` mode will be disabled. If undefined, `toggleIcon` will be used for when the select is both open and closed.
         */
        "expandedIcon"?: string;
        /**
          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
         */
        "fill"?: 'outline' | 'solid';
        /**
          * Text that is placed under the select and displayed when no error is detected.
         */
        "helperText"?: string;
        /**
          * The interface the select should use: `action-sheet`, `popover`, `alert`, or `modal`.
          * @default 'alert'
         */
        "interface"?: SelectInterface;
        /**
          * Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [ion-alert docs](./alert), the [ion-action-sheet docs](./action-sheet), the [ion-popover docs](./popover), and the [ion-modal docs](./modal) for the create options for each interface.  Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
          * @default {}
         */
        "interfaceOptions"?: any;
        /**
          * How to pack the label and select within a line. `justify` does not apply when the label and select are on different lines when `labelPlacement` is set to `"floating"` or `"stacked"`. `"start"`: The label and select will appear on the left in LTR and on the right in RTL. `"end"`: The label and select will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and select will appear on opposite ends of the line with space between the two elements.
         */
        "justify"?: 'start' | 'end' | 'space-between';
        /**
          * The visible label associated with the select.  Use this if you need to render a plaintext label.  The `label` property will take priority over the `label` slot if both are used.
         */
        "label"?: string;
        /**
          * Where to place the label relative to the select. `"start"`: The label will appear to the left of the select in LTR and to the right in RTL. `"end"`: The label will appear to the right of the select in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select. `"stacked"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). When using `"floating"` or `"stacked"` we recommend initializing the select with either a `value` or a `placeholder`.
          * @default 'start'
         */
        "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * If `true`, the select can accept multiple values.
          * @default false
         */
        "multiple"?: boolean;
        /**
          * The name of the control, which is submitted with the form data.
          * @default this.inputId
         */
        "name"?: string;
        /**
          * The text to display on the ok button.
          * @default 'OK'
         */
        "okText"?: string;
        /**
          * Emitted when the select loses focus.
         */
        "onIonBlur"?: (event: IonSelectCustomEvent<void>) => void;
        /**
          * Emitted when the selection is cancelled.
         */
        "onIonCancel"?: (event: IonSelectCustomEvent<void>) => void;
        /**
          * Emitted when the value has changed.  This event will not emit when programmatically setting the `value` property.
         */
        "onIonChange"?: (event: IonSelectCustomEvent<SelectChangeEventDetail>) => void;
        /**
          * Emitted when the overlay is dismissed.
         */
        "onIonDismiss"?: (event: IonSelectCustomEvent<void>) => void;
        /**
          * Emitted when the select has focus.
         */
        "onIonFocus"?: (event: IonSelectCustomEvent<void>) => void;
        /**
          * Emitted when the styles change.
         */
        "onIonStyle"?: (event: IonSelectCustomEvent<StyleEventDetail>) => void;
        /**
          * The text to display when the select is empty.
         */
        "placeholder"?: string;
        /**
          * If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid.
          * @default false
         */
        "required"?: boolean;
        /**
          * The text to display instead of the selected option's value.
         */
        "selectedText"?: string | null;
        /**
          * The shape of the select. If "round" it will have an increased border radius.
         */
        "shape"?: 'round';
        /**
          * The toggle icon to use. Defaults to `chevronExpand` for `ios` mode, or `caretDownSharp` for `md` mode.
         */
        "toggleIcon"?: string;
        /**
          * The value of the select.
         */
        "value"?: any | null;
    }
    interface IonSelectModal {
        /**
          * The text to display on the cancel button.
          * @default 'Close'
         */
        "cancelText"?: string;
        "header"?: string;
        "multiple"?: boolean;
        /**
          * @default []
         */
        "options"?: SelectModalOption[];
    }
    interface IonSelectOption {
        /**
          * If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * The text value of the option.
         */
        "value"?: any | null;
    }
    interface IonSelectPopover {
        /**
          * The header text of the popover
         */
        "header"?: string;
        /**
          * The text content of the popover body
         */
        "message"?: string;
        /**
          * If true, the select accepts multiple values
         */
        "multiple"?: boolean;
        /**
          * An array of options for the popover
          * @default []
         */
        "options"?: SelectPopoverOption[];
        /**
          * The subheader text of the popover
         */
        "subHeader"?: string;
    }
    interface IonSkeletonText {
        /**
          * If `true`, the skeleton text will animate.
          * @default false
         */
        "animated"?: boolean;
        /**
          * Emitted when the styles change.
         */
        "onIonStyle"?: (event: IonSkeletonTextCustomEvent<StyleEventDetail>) => void;
    }
    interface IonSpinner {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * Duration of the spinner animation in milliseconds. The default varies based on the spinner.
         */
        "duration"?: number;
        /**
          * The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used.
         */
        "name"?: SpinnerTypes;
        /**
          * If `true`, the spinner's animation will be paused.
          * @default false
         */
        "paused"?: boolean;
    }
    interface IonSplitPane {
        /**
          * The `id` of the main content. When using a router this is typically `ion-router-outlet`. When not using a router, this is typically your main view's `ion-content`. This is not the id of the `ion-content` inside of your `ion-menu`.
         */
        "contentId"?: string;
        /**
          * If `true`, the split pane will be hidden.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Expression to be called when the split-pane visibility has changed
         */
        "onIonSplitPaneVisible"?: (event: IonSplitPaneCustomEvent<{ visible: boolean }>) => void;
        /**
          * When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression.
          * @default QUERY['lg']
         */
        "when"?: string | boolean;
    }
    interface IonTab {
        /**
          * @default false
         */
        "active"?: boolean;
        /**
          * The component to display inside of the tab.
         */
        "component"?: ComponentRef;
        "delegate"?: FrameworkDelegate;
        /**
          * A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.
         */
        "tab": string;
    }
    interface IonTabBar {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        "onIonTabBarChanged"?: (event: IonTabBarCustomEvent<TabBarChangedEventDetail>) => void;
        "onIonTabBarLoaded"?: (event: IonTabBarCustomEvent<void>) => void;
        /**
          * The selected tab component
         */
        "selectedTab"?: string;
        /**
          * If `true`, the tab bar will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          * @default false
         */
        "translucent"?: boolean;
    }
    interface IonTabButton {
        /**
          * If `true`, the user cannot interact with the tab button.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
         */
        "download"?: string | undefined;
        /**
          * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
         */
        "href"?: string | undefined;
        /**
          * Set the layout of the text and icon in the tab bar. It defaults to `"icon-top"`.
         */
        "layout"?: TabButtonLayout;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Emitted when the tab bar is clicked
         */
        "onIonTabButtonClick"?: (event: IonTabButtonCustomEvent<TabButtonClickEventDetail>) => void;
        /**
          * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
         */
        "rel"?: string | undefined;
        /**
          * The selected tab component
          * @default false
         */
        "selected"?: boolean;
        /**
          * A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.
         */
        "tab"?: string;
        /**
          * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
         */
        "target"?: string | undefined;
    }
    interface IonTabs {
        /**
          * Emitted when the navigation will load a component.
         */
        "onIonNavWillLoad"?: (event: IonTabsCustomEvent<void>) => void;
        /**
          * Emitted when the navigation has finished transitioning to a new component.
         */
        "onIonTabsDidChange"?: (event: IonTabsCustomEvent<{ tab: string }>) => void;
        /**
          * Emitted when the navigation is about to transition to a new component.
         */
        "onIonTabsWillChange"?: (event: IonTabsCustomEvent<{ tab: string }>) => void;
        /**
          * @default false
         */
        "useRouter"?: boolean;
    }
    interface IonText {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
    }
    interface IonTextarea {
        /**
          * If `true`, the textarea container will grow and shrink based on the contents of the textarea.
          * @default false
         */
        "autoGrow"?: boolean;
        /**
          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
          * @default 'none'
         */
        "autocapitalize"?: string;
        /**
          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
          * @default false
         */
        "autofocus"?: boolean;
        /**
          * If `true`, the value will be cleared after focus upon edit.
          * @default false
         */
        "clearOnEdit"?: boolean;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.
         */
        "cols"?: number;
        /**
          * If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.
          * @default false
         */
        "counter"?: boolean;
        /**
          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
         */
        "counterFormatter"?: (inputLength: number, maxLength: number) => string;
        /**
          * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
         */
        "debounce"?: number;
        /**
          * If `true`, the user cannot interact with the textarea.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
         */
        "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
        /**
          * Text that is placed under the textarea and displayed when an error is detected.
         */
        "errorText"?: string;
        /**
          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
         */
        "fill"?: 'outline' | 'solid';
        /**
          * Text that is placed under the textarea and displayed when no error is detected.
         */
        "helperText"?: string;
        /**
          * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
         */
        "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
        /**
          * The visible label associated with the textarea.  Use this if you need to render a plaintext label.  The `label` property will take priority over the `label` slot if both are used.
         */
        "label"?: string;
        /**
          * Where to place the label relative to the textarea. `"start"`: The label will appear to the left of the textarea in LTR and to the right in RTL. `"end"`: The label will appear to the right of the textarea in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea. `"stacked"`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
          * @default 'start'
         */
        "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
        /**
          * This attribute specifies the maximum number of characters that the user can enter.
         */
        "maxlength"?: number;
        /**
          * This attribute specifies the minimum number of characters that the user can enter.
         */
        "minlength"?: number;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * The name of the control, which is submitted with the form data.
          * @default this.inputId
         */
        "name"?: string;
        /**
          * Emitted when the input loses focus.
         */
        "onIonBlur"?: (event: IonTextareaCustomEvent<FocusEvent>) => void;
        /**
          * The `ionChange` event is fired when the user modifies the textarea's value. Unlike the `ionInput` event, the `ionChange` event is fired when the element loses focus after its value has been modified.  This event will not emit when programmatically setting the `value` property.
         */
        "onIonChange"?: (event: IonTextareaCustomEvent<TextareaChangeEventDetail>) => void;
        /**
          * Emitted when the input has focus.
         */
        "onIonFocus"?: (event: IonTextareaCustomEvent<FocusEvent>) => void;
        /**
          * The `ionInput` event is fired each time the user modifies the textarea's value. Unlike the `ionChange` event, the `ionInput` event is fired for each alteration to the textarea's value. This typically happens for each keystroke as the user types.  When `clearOnEdit` is enabled, the `ionInput` event will be fired when the user clears the textarea by performing a keydown event.
         */
        "onIonInput"?: (event: IonTextareaCustomEvent<TextareaInputEventDetail>) => void;
        /**
          * Instructional text that shows before the input has a value.
         */
        "placeholder"?: string;
        /**
          * If `true`, the user cannot modify the value.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * If `true`, the user must fill in a value before submitting a form.
          * @default false
         */
        "required"?: boolean;
        /**
          * The number of visible text lines for the control.
         */
        "rows"?: number;
        /**
          * The shape of the textarea. If "round" it will have an increased border radius.
         */
        "shape"?: 'round';
        /**
          * If `true`, the element will have its spelling and grammar checked.
          * @default false
         */
        "spellcheck"?: boolean;
        /**
          * The value of the textarea.
          * @default ''
         */
        "value"?: string | null;
        /**
          * Indicates how the control wraps text.
         */
        "wrap"?: 'hard' | 'soft' | 'off';
    }
    interface IonThumbnail {
    }
    interface IonTitle {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * Emitted when the styles change.
         */
        "onIonStyle"?: (event: IonTitleCustomEvent<StyleEventDetail>) => void;
        /**
          * The size of the toolbar title.
         */
        "size"?: 'large' | 'small';
    }
    interface IonToast {
        /**
          * If `true`, the toast will animate.
          * @default true
         */
        "animated"?: boolean;
        /**
          * An array of buttons for the toast.
         */
        "buttons"?: (ToastButton | string)[];
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
         */
        "cssClass"?: string | string[];
        "delegate"?: FrameworkDelegate;
        /**
          * How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called.
          * @default config.getNumber('toastDuration', 0)
         */
        "duration"?: number;
        /**
          * Animation to use when the toast is presented.
         */
        "enterAnimation"?: AnimationBuilder;
        /**
          * @default false
         */
        "hasController"?: boolean;
        /**
          * Header to be shown in the toast.
         */
        "header"?: string;
        /**
          * Additional attributes to pass to the toast.
         */
        "htmlAttributes"?: { [key: string]: any };
        /**
          * The name of the icon to display, or the path to a valid SVG file. See `ion-icon`. https://ionic.io/ionicons
         */
        "icon"?: string;
        /**
          * If `true`, the toast will open. If `false`, the toast will close. Use this if you need finer grained control over presentation, otherwise just use the toastController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the toast dismisses. You will need to do that in your code.
          * @default false
         */
        "isOpen"?: boolean;
        /**
          * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          * @default false
         */
        "keyboardClose"?: boolean;
        /**
          * Defines how the message and buttons are laid out in the toast. 'baseline': The message and the buttons will appear on the same line. Message text may wrap within the message container. 'stacked': The buttons containers and message will stack on top of each other. Use this if you have long text in your buttons.
          * @default 'baseline'
         */
        "layout"?: ToastLayout;
        /**
          * Animation to use when the toast is dismissed.
         */
        "leaveAnimation"?: AnimationBuilder;
        /**
          * Message to be shown in the toast. This property accepts custom HTML as a string. Content is parsed as plaintext by default. `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config before custom HTML can be used.
         */
        "message"?: string | IonicSafeString;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * Emitted after the toast has dismissed. Shorthand for ionToastDidDismiss.
         */
        "onDidDismiss"?: (event: IonToastCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted after the toast has presented. Shorthand for ionToastWillDismiss.
         */
        "onDidPresent"?: (event: IonToastCustomEvent<void>) => void;
        /**
          * Emitted after the toast has dismissed.
         */
        "onIonToastDidDismiss"?: (event: IonToastCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted after the toast has presented.
         */
        "onIonToastDidPresent"?: (event: IonToastCustomEvent<void>) => void;
        /**
          * Emitted before the toast has dismissed.
         */
        "onIonToastWillDismiss"?: (event: IonToastCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted before the toast has presented.
         */
        "onIonToastWillPresent"?: (event: IonToastCustomEvent<void>) => void;
        /**
          * Emitted before the toast has dismissed. Shorthand for ionToastWillDismiss.
         */
        "onWillDismiss"?: (event: IonToastCustomEvent<OverlayEventDetail>) => void;
        /**
          * Emitted before the toast has presented. Shorthand for ionToastWillPresent.
         */
        "onWillPresent"?: (event: IonToastCustomEvent<void>) => void;
        "overlayIndex": number;
        /**
          * The starting position of the toast on the screen. Can be tweaked further using the `positionAnchor` property.
          * @default 'bottom'
         */
        "position"?: ToastPosition;
        /**
          * The element to anchor the toast's position to. Can be set as a direct reference or the ID of the element. With `position="bottom"`, the toast will sit above the chosen element. With `position="top"`, the toast will sit below the chosen element. With `position="middle"`, the value of `positionAnchor` is ignored.
         */
        "positionAnchor"?: HTMLElement | string;
        /**
          * If set to 'vertical', the Toast can be dismissed with a swipe gesture. The swipe direction is determined by the value of the `position` property: `top`: The Toast can be swiped up to dismiss. `bottom`: The Toast can be swiped down to dismiss. `middle`: The Toast can be swiped up or down to dismiss.
         */
        "swipeGesture"?: ToastSwipeGestureDirection;
        /**
          * If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          * @default false
         */
        "translucent"?: boolean;
        /**
          * An ID corresponding to the trigger element that causes the toast to open when clicked.
         */
        "trigger"?: string | undefined;
    }
    interface IonToggle {
        /**
          * How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the toggle `display` to `block`.
         */
        "alignment"?: 'start' | 'center';
        /**
          * If `true`, the toggle is selected.
          * @default false
         */
        "checked"?: boolean;
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * If `true`, the user cannot interact with the toggle.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Enables the on/off accessibility switch labels within the toggle.
          * @default config.get('toggleOnOffLabels')
         */
        "enableOnOffLabels"?: boolean | undefined;
        /**
          * Text that is placed under the toggle label and displayed when an error is detected.
         */
        "errorText"?: string;
        /**
          * Text that is placed under the toggle label and displayed when no error is detected.
         */
        "helperText"?: string;
        /**
          * How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements. Setting this property will change the toggle `display` to `block`.
         */
        "justify"?: 'start' | 'end' | 'space-between';
        /**
          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          * @default 'start'
         */
        "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
        /**
          * The name of the control, which is submitted with the form data.
          * @default this.inputId
         */
        "name"?: string;
        /**
          * Emitted when the toggle loses focus.
         */
        "onIonBlur"?: (event: IonToggleCustomEvent<void>) => void;
        /**
          * Emitted when the user switches the toggle on or off.  This event will not emit when programmatically setting the `checked` property.
         */
        "onIonChange"?: (event: IonToggleCustomEvent<ToggleChangeEventDetail>) => void;
        /**
          * Emitted when the toggle has focus.
         */
        "onIonFocus"?: (event: IonToggleCustomEvent<void>) => void;
        /**
          * If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid.
          * @default false
         */
        "required"?: boolean;
        /**
          * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
          * @default 'on'
         */
        "value"?: string | null;
    }
    interface IonToolbar {
        /**
          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
         */
        "color"?: Color;
        /**
          * The mode determines which platform styles to use.
         */
        "mode"?: "ios" | "md";
    }

    interface IonAccordionAttributes {
        "value": string;
        "disabled": boolean;
        "readonly": boolean;
        "toggleIcon": string;
        "toggleIconSlot": 'start' | 'end';
    }
    interface IonAccordionGroupAttributes {
        "animated": boolean;
        "multiple": boolean;
        "value": string | string[] | null;
        "disabled": boolean;
        "readonly": boolean;
        "expand": 'compact' | 'inset';
    }
    interface IonActionSheetAttributes {
        "overlayIndex": number;
        "hasController": boolean;
        "keyboardClose": boolean;
        "cssClass": string | string[];
        "backdropDismiss": boolean;
        "header": string;
        "subHeader": string;
        "translucent": boolean;
        "animated": boolean;
        "isOpen": boolean;
        "trigger": string | undefined;
    }
    interface IonAlertAttributes {
        "overlayIndex": number;
        "hasController": boolean;
        "keyboardClose": boolean;
        "cssClass": string | string[];
        "header": string;
        "subHeader": string;
        "message": string | IonicSafeString;
        "backdropDismiss": boolean;
        "translucent": boolean;
        "animated": boolean;
        "isOpen": boolean;
        "trigger": string | undefined;
    }
    interface IonBackButtonAttributes {
        "color": Color;
        "defaultHref": string;
        "disabled": boolean;
        "icon": string | null;
        "text": string | null;
        "type": 'submit' | 'reset' | 'button';
    }
    interface IonBackdropAttributes {
        "visible": boolean;
        "tappable": boolean;
        "stopPropagation": boolean;
    }
    interface IonBadgeAttributes {
        "color": Color;
    }
    interface IonBreadcrumbAttributes {
        "collapsed": boolean;
        "last": boolean;
        "showCollapsedIndicator": boolean;
        "color": Color;
        "active": boolean;
        "disabled": boolean;
        "download": string | undefined;
        "href": string | undefined;
        "rel": string | undefined;
        "separator": boolean | undefined;
        "target": string | undefined;
        "routerDirection": RouterDirection;
    }
    interface IonBreadcrumbsAttributes {
        "color": Color;
        "maxItems": number;
        "itemsBeforeCollapse": number;
        "itemsAfterCollapse": number;
    }
    interface IonButtonAttributes {
        "color": Color;
        "buttonType": string;
        "disabled": boolean;
        "expand": 'full' | 'block';
        "fill": 'clear' | 'outline' | 'solid' | 'default';
        "routerDirection": RouterDirection;
        "download": string | undefined;
        "href": string | undefined;
        "rel": string | undefined;
        "shape": 'round';
        "size": 'small' | 'default' | 'large';
        "strong": boolean;
        "target": string | undefined;
        "type": 'submit' | 'reset' | 'button';
        "form": string | HTMLFormElement;
    }
    interface IonButtonsAttributes {
        "collapse": boolean;
    }
    interface IonCardAttributes {
        "color": Color;
        "button": boolean;
        "type": 'submit' | 'reset' | 'button';
        "disabled": boolean;
        "download": string | undefined;
        "href": string | undefined;
        "rel": string | undefined;
        "routerDirection": RouterDirection;
        "target": string | undefined;
    }
    interface IonCardHeaderAttributes {
        "color": Color;
        "translucent": boolean;
    }
    interface IonCardSubtitleAttributes {
        "color": Color;
    }
    interface IonCardTitleAttributes {
        "color": Color;
    }
    interface IonCheckboxAttributes {
        "color": Color;
        "name": string;
        "checked": boolean;
        "indeterminate": boolean;
        "disabled": boolean;
        "errorText": string;
        "helperText": string;
        "value": string;
        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
        "justify": 'start' | 'end' | 'space-between';
        "alignment": 'start' | 'center';
        "required": boolean;
    }
    interface IonChipAttributes {
        "color": Color;
        "outline": boolean;
        "disabled": boolean;
    }
    interface IonColAttributes {
        "offset": string;
        "offsetXs": string;
        "offsetSm": string;
        "offsetMd": string;
        "offsetLg": string;
        "offsetXl": string;
        "pull": string;
        "pullXs": string;
        "pullSm": string;
        "pullMd": string;
        "pullLg": string;
        "pullXl": string;
        "push": string;
        "pushXs": string;
        "pushSm": string;
        "pushMd": string;
        "pushLg": string;
        "pushXl": string;
        "size": string;
        "sizeXs": string;
        "sizeSm": string;
        "sizeMd": string;
        "sizeLg": string;
        "sizeXl": string;
    }
    interface IonContentAttributes {
        "color": Color;
        "fullscreen": boolean;
        "fixedSlotPlacement": 'after' | 'before';
        "forceOverscroll": boolean;
        "scrollX": boolean;
        "scrollY": boolean;
        "scrollEvents": boolean;
    }
    interface IonDatetimeAttributes {
        "color": Color;
        "name": string;
        "disabled": boolean;
        "readonly": boolean;
        "showAdjacentDays": boolean;
        "min": string;
        "max": string;
        "presentation": DatetimePresentation;
        "cancelText": string;
        "doneText": string;
        "clearText": string;
        "yearValues": string;
        "monthValues": string;
        "dayValues": string;
        "hourValues": string;
        "minuteValues": string;
        "locale": string;
        "firstDayOfWeek": number;
        "multiple": boolean;
        "value": string | string[] | null;
        "showDefaultTitle": boolean;
        "showDefaultButtons": boolean;
        "showClearButton": boolean;
        "showDefaultTimeLabel": boolean;
        "hourCycle": DatetimeHourCycle;
        "size": 'cover' | 'fixed';
        "preferWheel": boolean;
    }
    interface IonDatetimeButtonAttributes {
        "color": Color;
        "disabled": boolean;
        "datetime": string;
    }
    interface IonFabAttributes {
        "horizontal": 'start' | 'end' | 'center';
        "vertical": 'top' | 'bottom' | 'center';
        "edge": boolean;
        "activated": boolean;
    }
    interface IonFabButtonAttributes {
        "color": Color;
        "activated": boolean;
        "disabled": boolean;
        "download": string | undefined;
        "href": string | undefined;
        "rel": string | undefined;
        "routerDirection": RouterDirection;
        "target": string | undefined;
        "show": boolean;
        "translucent": boolean;
        "type": 'submit' | 'reset' | 'button';
        "size": 'small';
        "closeIcon": string;
    }
    interface IonFabListAttributes {
        "activated": boolean;
        "side": 'start' | 'end' | 'top' | 'bottom';
    }
    interface IonFooterAttributes {
        "collapse": 'fade';
        "translucent": boolean;
    }
    interface IonGridAttributes {
        "fixed": boolean;
    }
    interface IonHeaderAttributes {
        "collapse": 'condense' | 'fade';
        "translucent": boolean;
    }
    interface IonImgAttributes {
        "alt": string;
        "src": string;
    }
    interface IonInfiniteScrollAttributes {
        "threshold": string;
        "disabled": boolean;
        "position": 'top' | 'bottom';
    }
    interface IonInfiniteScrollContentAttributes {
        "loadingSpinner": SpinnerTypes | null;
        "loadingText": string | IonicSafeString;
    }
    interface IonInputAttributes {
        "color": Color;
        "autocapitalize": string;
        "autocomplete": AutocompleteTypes;
        "autocorrect": 'on' | 'off';
        "autofocus": boolean;
        "clearInput": boolean;
        "clearInputIcon": string;
        "clearOnEdit": boolean;
        "counter": boolean;
        "debounce": number;
        "disabled": boolean;
        "enterkeyhint": 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
        "errorText": string;
        "fill": 'outline' | 'solid';
        "inputmode": 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
        "helperText": string;
        "label": string;
        "labelPlacement": 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
        "max": string;
        "maxlength": number;
        "min": string;
        "minlength": number;
        "multiple": boolean;
        "name": string;
        "pattern": string;
        "placeholder": string;
        "readonly": boolean;
        "required": boolean;
        "shape": 'round';
        "spellcheck": boolean;
        "step": string;
        "type": TextFieldTypes;
        "value": string;
    }
    interface IonInputOtpAttributes {
        "autocapitalize": string;
        "color": Color;
        "disabled": boolean;
        "fill": 'outline' | 'solid';
        "inputmode": 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
        "length": number;
        "pattern": string;
        "readonly": boolean;
        "separators": 'all' | string | number[];
        "shape": 'round' | 'rectangular' | 'soft';
        "size": 'small' | 'medium' | 'large';
        "type": 'text' | 'number';
        "value": string;
    }
    interface IonInputPasswordToggleAttributes {
        "color": Color;
        "showIcon": string;
        "hideIcon": string;
        "type": TextFieldTypes;
    }
    interface IonItemAttributes {
        "color": Color;
        "button": boolean;
        "detail": boolean;
        "detailIcon": string;
        "disabled": boolean;
        "download": string | undefined;
        "href": string | undefined;
        "rel": string | undefined;
        "lines": 'full' | 'inset' | 'none';
        "routerDirection": RouterDirection;
        "target": string | undefined;
        "type": 'submit' | 'reset' | 'button';
    }
    interface IonItemDividerAttributes {
        "color": Color;
        "sticky": boolean;
    }
    interface IonItemOptionAttributes {
        "color": Color;
        "disabled": boolean;
        "download": string | undefined;
        "expandable": boolean;
        "href": string | undefined;
        "rel": string | undefined;
        "target": string | undefined;
        "type": 'submit' | 'reset' | 'button';
    }
    interface IonItemOptionsAttributes {
        "side": Side;
    }
    interface IonItemSlidingAttributes {
        "disabled": boolean;
    }
    interface IonLabelAttributes {
        "color": Color;
        "position": 'fixed' | 'stacked' | 'floating';
    }
    interface IonListAttributes {
        "lines": 'full' | 'inset' | 'none';
        "inset": boolean;
    }
    interface IonListHeaderAttributes {
        "color": Color;
        "lines": 'full' | 'inset' | 'none';
    }
    interface IonLoadingAttributes {
        "overlayIndex": number;
        "hasController": boolean;
        "keyboardClose": boolean;
        "message": string | IonicSafeString;
        "cssClass": string | string[];
        "duration": number;
        "backdropDismiss": boolean;
        "showBackdrop": boolean;
        "spinner": SpinnerTypes | null;
        "translucent": boolean;
        "animated": boolean;
        "isOpen": boolean;
        "trigger": string | undefined;
    }
    interface IonMenuAttributes {
        "contentId": string;
        "menuId": string;
        "type": MenuType;
        "disabled": boolean;
        "side": Side;
        "swipeGesture": boolean;
        "maxEdgeStart": number;
    }
    interface IonMenuButtonAttributes {
        "color": Color;
        "disabled": boolean;
        "menu": string;
        "autoHide": boolean;
        "type": 'submit' | 'reset' | 'button';
    }
    interface IonMenuToggleAttributes {
        "menu": string;
        "autoHide": boolean;
    }
    interface IonModalAttributes {
        "hasController": boolean;
        "overlayIndex": number;
        "keyboardClose": boolean;
        "expandToScroll": boolean;
        "initialBreakpoint": number;
        "backdropBreakpoint": number;
        "handle": boolean;
        "handleBehavior": ModalHandleBehavior;
        "component": ComponentRef;
        "cssClass": string | string[];
        "backdropDismiss": boolean;
        "showBackdrop": boolean;
        "animated": boolean;
        "isOpen": boolean;
        "trigger": string | undefined;
        "keepContentsMounted": boolean;
        "focusTrap": boolean;
        "canDismiss": boolean | ((data?: any, role?: string) => Promise<boolean>);
    }
    interface IonNavAttributes {
        "swipeGesture": boolean;
        "animated": boolean;
        "root": NavComponent;
    }
    interface IonNavLinkAttributes {
        "component": NavComponent;
        "routerDirection": RouterDirection;
    }
    interface IonNoteAttributes {
        "color": Color;
    }
    interface IonPickerColumnAttributes {
        "disabled": boolean;
        "value": string;
        "color": Color;
        "numericInput": boolean;
    }
    interface IonPickerColumnOptionAttributes {
        "disabled": boolean;
        "value": string;
        "color": Color;
    }
    interface IonPickerLegacyAttributes {
        "overlayIndex": number;
        "hasController": boolean;
        "keyboardClose": boolean;
        "cssClass": string | string[];
        "duration": number;
        "showBackdrop": boolean;
        "backdropDismiss": boolean;
        "animated": boolean;
        "isOpen": boolean;
        "trigger": string | undefined;
    }
    interface IonPopoverAttributes {
        "hasController": boolean;
        "overlayIndex": number;
        "component": ComponentRef;
        "keyboardClose": boolean;
        "cssClass": string | string[];
        "backdropDismiss": boolean;
        "event": string;
        "showBackdrop": boolean;
        "translucent": boolean;
        "animated": boolean;
        "triggerAction": TriggerAction;
        "trigger": string | undefined;
        "size": PopoverSize;
        "dismissOnSelect": boolean;
        "reference": PositionReference;
        "side": PositionSide;
        "alignment": PositionAlign;
        "arrow": boolean;
        "isOpen": boolean;
        "keyboardEvents": boolean;
        "focusTrap": boolean;
        "keepContentsMounted": boolean;
    }
    interface IonProgressBarAttributes {
        "type": 'determinate' | 'indeterminate';
        "reversed": boolean;
        "value": number;
        "buffer": number;
        "color": Color;
    }
    interface IonRadioAttributes {
        "color": Color;
        "name": string;
        "disabled": boolean;
        "value": string;
        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
        "justify": 'start' | 'end' | 'space-between';
        "alignment": 'start' | 'center';
    }
    interface IonRadioGroupAttributes {
        "allowEmptySelection": boolean;
        "compareWith": string | RadioGroupCompareFn | null;
        "name": string;
        "value": string;
        "helperText": string;
        "errorText": string;
    }
    interface IonRangeAttributes {
        "color": Color;
        "debounce": number;
        "name": string;
        "label": string;
        "dualKnobs": boolean;
        "min": number;
        "max": number;
        "pin": boolean;
        "snaps": boolean;
        "step": number;
        "ticks": boolean;
        "activeBarStart": number;
        "disabled": boolean;
        "value": RangeValue;
        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
    }
    interface IonRefresherAttributes {
        "pullMin": number;
        "pullMax": number;
        "closeDuration": string;
        "snapbackDuration": string;
        "pullFactor": number;
        "disabled": boolean;
    }
    interface IonRefresherContentAttributes {
        "pullingIcon": SpinnerTypes | string | null;
        "pullingText": string | IonicSafeString;
        "refreshingSpinner": SpinnerTypes | null;
        "refreshingText": string | IonicSafeString;
    }
    interface IonReorderGroupAttributes {
        "disabled": boolean;
    }
    interface IonRippleEffectAttributes {
        "type": 'bounded' | 'unbounded';
    }
    interface IonRouteAttributes {
        "url": string;
        "component": string;
    }
    interface IonRouteRedirectAttributes {
        "from": string;
        "to": string | undefined | null;
    }
    interface IonRouterAttributes {
        "root": string;
        "useHash": boolean;
    }
    interface IonRouterLinkAttributes {
        "color": Color;
        "href": string | undefined;
        "rel": string | undefined;
        "routerDirection": RouterDirection;
        "target": string | undefined;
    }
    interface IonRouterOutletAttributes {
        "mode": "ios" | "md";
        "animated": boolean;
    }
    interface IonSearchbarAttributes {
        "color": Color;
        "animated": boolean;
        "autocapitalize": string;
        "autocomplete": AutocompleteTypes;
        "autocorrect": 'on' | 'off';
        "cancelButtonIcon": string;
        "cancelButtonText": string;
        "clearIcon": string;
        "debounce": number;
        "disabled": boolean;
        "inputmode": 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
        "enterkeyhint": 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
        "maxlength": number;
        "minlength": number;
        "name": string;
        "placeholder": string;
        "searchIcon": string;
        "showCancelButton": 'never' | 'focus' | 'always';
        "showClearButton": 'never' | 'focus' | 'always';
        "spellcheck": boolean;
        "type": 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
        "value": string | null;
    }
    interface IonSegmentAttributes {
        "color": Color;
        "disabled": boolean;
        "scrollable": boolean;
        "swipeGesture": boolean;
        "value": string;
        "selectOnFocus": boolean;
    }
    interface IonSegmentButtonAttributes {
        "contentId": string;
        "disabled": boolean;
        "layout": SegmentButtonLayout;
        "type": 'submit' | 'reset' | 'button';
        "value": string;
    }
    interface IonSegmentViewAttributes {
        "disabled": boolean;
        "swipeGesture": boolean;
    }
    interface IonSelectAttributes {
        "cancelText": string;
        "color": Color;
        "compareWith": string | SelectCompareFn | null;
        "disabled": boolean;
        "fill": 'outline' | 'solid';
        "errorText": string;
        "helperText": string;
        "interface": SelectInterface;
        "interfaceOptions": string;
        "justify": 'start' | 'end' | 'space-between';
        "label": string;
        "labelPlacement": 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
        "multiple": boolean;
        "name": string;
        "okText": string;
        "placeholder": string;
        "selectedText": string | null;
        "toggleIcon": string;
        "expandedIcon": string;
        "shape": 'round';
        "value": string;
        "required": boolean;
    }
    interface IonSelectModalAttributes {
        "header": string;
        "cancelText": string;
        "multiple": boolean;
    }
    interface IonSelectOptionAttributes {
        "disabled": boolean;
        "value": string;
    }
    interface IonSelectPopoverAttributes {
        "header": string;
        "subHeader": string;
        "message": string;
        "multiple": boolean;
    }
    interface IonSkeletonTextAttributes {
        "animated": boolean;
    }
    interface IonSpinnerAttributes {
        "color": Color;
        "duration": number;
        "name": SpinnerTypes;
        "paused": boolean;
    }
    interface IonSplitPaneAttributes {
        "contentId": string;
        "disabled": boolean;
        "when": string;
    }
    interface IonTabAttributes {
        "active": boolean;
        "tab": string;
        "component": ComponentRef;
    }
    interface IonTabBarAttributes {
        "color": Color;
        "selectedTab": string;
        "translucent": boolean;
    }
    interface IonTabButtonAttributes {
        "disabled": boolean;
        "download": string | undefined;
        "href": string | undefined;
        "rel": string | undefined;
        "layout": TabButtonLayout;
        "selected": boolean;
        "tab": string;
        "target": string | undefined;
    }
    interface IonTabsAttributes {
        "useRouter": boolean;
    }
    interface IonTextAttributes {
        "color": Color;
    }
    interface IonTextareaAttributes {
        "color": Color;
        "autocapitalize": string;
        "autofocus": boolean;
        "clearOnEdit": boolean;
        "debounce": number;
        "disabled": boolean;
        "fill": 'outline' | 'solid';
        "inputmode": 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
        "enterkeyhint": 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
        "maxlength": number;
        "minlength": number;
        "name": string;
        "placeholder": string;
        "readonly": boolean;
        "required": boolean;
        "spellcheck": boolean;
        "cols": number;
        "rows": number;
        "wrap": 'hard' | 'soft' | 'off';
        "autoGrow": boolean;
        "value": string | null;
        "counter": boolean;
        "errorText": string;
        "helperText": string;
        "label": string;
        "labelPlacement": 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
        "shape": 'round';
    }
    interface IonTitleAttributes {
        "color": Color;
        "size": 'large' | 'small';
    }
    interface IonToastAttributes {
        "overlayIndex": number;
        "hasController": boolean;
        "color": Color;
        "cssClass": string | string[];
        "duration": number;
        "header": string;
        "layout": ToastLayout;
        "message": string | IonicSafeString;
        "keyboardClose": boolean;
        "position": ToastPosition;
        "positionAnchor": HTMLElement | string;
        "translucent": boolean;
        "animated": boolean;
        "icon": string;
        "swipeGesture": ToastSwipeGestureDirection;
        "isOpen": boolean;
        "trigger": string | undefined;
    }
    interface IonToggleAttributes {
        "color": Color;
        "name": string;
        "checked": boolean;
        "disabled": boolean;
        "errorText": string;
        "helperText": string;
        "value": string | null;
        "enableOnOffLabels": boolean | undefined;
        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
        "justify": 'start' | 'end' | 'space-between';
        "alignment": 'start' | 'center';
        "required": boolean;
    }
    interface IonToolbarAttributes {
        "color": Color;
    }

    interface IntrinsicElements {
        "ion-accordion": Omit<IonAccordion, keyof IonAccordionAttributes> & { [K in keyof IonAccordion & keyof IonAccordionAttributes]?: IonAccordion[K] } & { [K in keyof IonAccordion & keyof IonAccordionAttributes as `attr:${K}`]?: IonAccordionAttributes[K] } & { [K in keyof IonAccordion & keyof IonAccordionAttributes as `prop:${K}`]?: IonAccordion[K] };
        "ion-accordion-group": Omit<IonAccordionGroup, keyof IonAccordionGroupAttributes> & { [K in keyof IonAccordionGroup & keyof IonAccordionGroupAttributes]?: IonAccordionGroup[K] } & { [K in keyof IonAccordionGroup & keyof IonAccordionGroupAttributes as `attr:${K}`]?: IonAccordionGroupAttributes[K] } & { [K in keyof IonAccordionGroup & keyof IonAccordionGroupAttributes as `prop:${K}`]?: IonAccordionGroup[K] };
        "ion-action-sheet": Omit<IonActionSheet, keyof IonActionSheetAttributes> & { [K in keyof IonActionSheet & keyof IonActionSheetAttributes]?: IonActionSheet[K] } & { [K in keyof IonActionSheet & keyof IonActionSheetAttributes as `attr:${K}`]?: IonActionSheetAttributes[K] } & { [K in keyof IonActionSheet & keyof IonActionSheetAttributes as `prop:${K}`]?: IonActionSheet[K] } & OneOf<"overlayIndex", IonActionSheet["overlayIndex"], IonActionSheetAttributes["overlayIndex"]>;
        "ion-alert": Omit<IonAlert, keyof IonAlertAttributes> & { [K in keyof IonAlert & keyof IonAlertAttributes]?: IonAlert[K] } & { [K in keyof IonAlert & keyof IonAlertAttributes as `attr:${K}`]?: IonAlertAttributes[K] } & { [K in keyof IonAlert & keyof IonAlertAttributes as `prop:${K}`]?: IonAlert[K] } & OneOf<"overlayIndex", IonAlert["overlayIndex"], IonAlertAttributes["overlayIndex"]>;
        "ion-app": IonApp;
        "ion-avatar": IonAvatar;
        "ion-back-button": Omit<IonBackButton, keyof IonBackButtonAttributes> & { [K in keyof IonBackButton & keyof IonBackButtonAttributes]?: IonBackButton[K] } & { [K in keyof IonBackButton & keyof IonBackButtonAttributes as `attr:${K}`]?: IonBackButtonAttributes[K] } & { [K in keyof IonBackButton & keyof IonBackButtonAttributes as `prop:${K}`]?: IonBackButton[K] };
        "ion-backdrop": Omit<IonBackdrop, keyof IonBackdropAttributes> & { [K in keyof IonBackdrop & keyof IonBackdropAttributes]?: IonBackdrop[K] } & { [K in keyof IonBackdrop & keyof IonBackdropAttributes as `attr:${K}`]?: IonBackdropAttributes[K] } & { [K in keyof IonBackdrop & keyof IonBackdropAttributes as `prop:${K}`]?: IonBackdrop[K] };
        "ion-badge": Omit<IonBadge, keyof IonBadgeAttributes> & { [K in keyof IonBadge & keyof IonBadgeAttributes]?: IonBadge[K] } & { [K in keyof IonBadge & keyof IonBadgeAttributes as `attr:${K}`]?: IonBadgeAttributes[K] } & { [K in keyof IonBadge & keyof IonBadgeAttributes as `prop:${K}`]?: IonBadge[K] };
        "ion-breadcrumb": Omit<IonBreadcrumb, keyof IonBreadcrumbAttributes> & { [K in keyof IonBreadcrumb & keyof IonBreadcrumbAttributes]?: IonBreadcrumb[K] } & { [K in keyof IonBreadcrumb & keyof IonBreadcrumbAttributes as `attr:${K}`]?: IonBreadcrumbAttributes[K] } & { [K in keyof IonBreadcrumb & keyof IonBreadcrumbAttributes as `prop:${K}`]?: IonBreadcrumb[K] } & OneOf<"last", IonBreadcrumb["last"], IonBreadcrumbAttributes["last"]> & OneOf<"showCollapsedIndicator", IonBreadcrumb["showCollapsedIndicator"], IonBreadcrumbAttributes["showCollapsedIndicator"]>;
        "ion-breadcrumbs": Omit<IonBreadcrumbs, keyof IonBreadcrumbsAttributes> & { [K in keyof IonBreadcrumbs & keyof IonBreadcrumbsAttributes]?: IonBreadcrumbs[K] } & { [K in keyof IonBreadcrumbs & keyof IonBreadcrumbsAttributes as `attr:${K}`]?: IonBreadcrumbsAttributes[K] } & { [K in keyof IonBreadcrumbs & keyof IonBreadcrumbsAttributes as `prop:${K}`]?: IonBreadcrumbs[K] };
        "ion-button": Omit<IonButton, keyof IonButtonAttributes> & { [K in keyof IonButton & keyof IonButtonAttributes]?: IonButton[K] } & { [K in keyof IonButton & keyof IonButtonAttributes as `attr:${K}`]?: IonButtonAttributes[K] } & { [K in keyof IonButton & keyof IonButtonAttributes as `prop:${K}`]?: IonButton[K] };
        "ion-buttons": Omit<IonButtons, keyof IonButtonsAttributes> & { [K in keyof IonButtons & keyof IonButtonsAttributes]?: IonButtons[K] } & { [K in keyof IonButtons & keyof IonButtonsAttributes as `attr:${K}`]?: IonButtonsAttributes[K] } & { [K in keyof IonButtons & keyof IonButtonsAttributes as `prop:${K}`]?: IonButtons[K] };
        "ion-card": Omit<IonCard, keyof IonCardAttributes> & { [K in keyof IonCard & keyof IonCardAttributes]?: IonCard[K] } & { [K in keyof IonCard & keyof IonCardAttributes as `attr:${K}`]?: IonCardAttributes[K] } & { [K in keyof IonCard & keyof IonCardAttributes as `prop:${K}`]?: IonCard[K] };
        "ion-card-content": IonCardContent;
        "ion-card-header": Omit<IonCardHeader, keyof IonCardHeaderAttributes> & { [K in keyof IonCardHeader & keyof IonCardHeaderAttributes]?: IonCardHeader[K] } & { [K in keyof IonCardHeader & keyof IonCardHeaderAttributes as `attr:${K}`]?: IonCardHeaderAttributes[K] } & { [K in keyof IonCardHeader & keyof IonCardHeaderAttributes as `prop:${K}`]?: IonCardHeader[K] };
        "ion-card-subtitle": Omit<IonCardSubtitle, keyof IonCardSubtitleAttributes> & { [K in keyof IonCardSubtitle & keyof IonCardSubtitleAttributes]?: IonCardSubtitle[K] } & { [K in keyof IonCardSubtitle & keyof IonCardSubtitleAttributes as `attr:${K}`]?: IonCardSubtitleAttributes[K] } & { [K in keyof IonCardSubtitle & keyof IonCardSubtitleAttributes as `prop:${K}`]?: IonCardSubtitle[K] };
        "ion-card-title": Omit<IonCardTitle, keyof IonCardTitleAttributes> & { [K in keyof IonCardTitle & keyof IonCardTitleAttributes]?: IonCardTitle[K] } & { [K in keyof IonCardTitle & keyof IonCardTitleAttributes as `attr:${K}`]?: IonCardTitleAttributes[K] } & { [K in keyof IonCardTitle & keyof IonCardTitleAttributes as `prop:${K}`]?: IonCardTitle[K] };
        "ion-checkbox": Omit<IonCheckbox, keyof IonCheckboxAttributes> & { [K in keyof IonCheckbox & keyof IonCheckboxAttributes]?: IonCheckbox[K] } & { [K in keyof IonCheckbox & keyof IonCheckboxAttributes as `attr:${K}`]?: IonCheckboxAttributes[K] } & { [K in keyof IonCheckbox & keyof IonCheckboxAttributes as `prop:${K}`]?: IonCheckbox[K] };
        "ion-chip": Omit<IonChip, keyof IonChipAttributes> & { [K in keyof IonChip & keyof IonChipAttributes]?: IonChip[K] } & { [K in keyof IonChip & keyof IonChipAttributes as `attr:${K}`]?: IonChipAttributes[K] } & { [K in keyof IonChip & keyof IonChipAttributes as `prop:${K}`]?: IonChip[K] };
        "ion-col": Omit<IonCol, keyof IonColAttributes> & { [K in keyof IonCol & keyof IonColAttributes]?: IonCol[K] } & { [K in keyof IonCol & keyof IonColAttributes as `attr:${K}`]?: IonColAttributes[K] } & { [K in keyof IonCol & keyof IonColAttributes as `prop:${K}`]?: IonCol[K] };
        "ion-content": Omit<IonContent, keyof IonContentAttributes> & { [K in keyof IonContent & keyof IonContentAttributes]?: IonContent[K] } & { [K in keyof IonContent & keyof IonContentAttributes as `attr:${K}`]?: IonContentAttributes[K] } & { [K in keyof IonContent & keyof IonContentAttributes as `prop:${K}`]?: IonContent[K] };
        "ion-datetime": Omit<IonDatetime, keyof IonDatetimeAttributes> & { [K in keyof IonDatetime & keyof IonDatetimeAttributes]?: IonDatetime[K] } & { [K in keyof IonDatetime & keyof IonDatetimeAttributes as `attr:${K}`]?: IonDatetimeAttributes[K] } & { [K in keyof IonDatetime & keyof IonDatetimeAttributes as `prop:${K}`]?: IonDatetime[K] };
        "ion-datetime-button": Omit<IonDatetimeButton, keyof IonDatetimeButtonAttributes> & { [K in keyof IonDatetimeButton & keyof IonDatetimeButtonAttributes]?: IonDatetimeButton[K] } & { [K in keyof IonDatetimeButton & keyof IonDatetimeButtonAttributes as `attr:${K}`]?: IonDatetimeButtonAttributes[K] } & { [K in keyof IonDatetimeButton & keyof IonDatetimeButtonAttributes as `prop:${K}`]?: IonDatetimeButton[K] };
        "ion-fab": Omit<IonFab, keyof IonFabAttributes> & { [K in keyof IonFab & keyof IonFabAttributes]?: IonFab[K] } & { [K in keyof IonFab & keyof IonFabAttributes as `attr:${K}`]?: IonFabAttributes[K] } & { [K in keyof IonFab & keyof IonFabAttributes as `prop:${K}`]?: IonFab[K] };
        "ion-fab-button": Omit<IonFabButton, keyof IonFabButtonAttributes> & { [K in keyof IonFabButton & keyof IonFabButtonAttributes]?: IonFabButton[K] } & { [K in keyof IonFabButton & keyof IonFabButtonAttributes as `attr:${K}`]?: IonFabButtonAttributes[K] } & { [K in keyof IonFabButton & keyof IonFabButtonAttributes as `prop:${K}`]?: IonFabButton[K] };
        "ion-fab-list": Omit<IonFabList, keyof IonFabListAttributes> & { [K in keyof IonFabList & keyof IonFabListAttributes]?: IonFabList[K] } & { [K in keyof IonFabList & keyof IonFabListAttributes as `attr:${K}`]?: IonFabListAttributes[K] } & { [K in keyof IonFabList & keyof IonFabListAttributes as `prop:${K}`]?: IonFabList[K] };
        "ion-footer": Omit<IonFooter, keyof IonFooterAttributes> & { [K in keyof IonFooter & keyof IonFooterAttributes]?: IonFooter[K] } & { [K in keyof IonFooter & keyof IonFooterAttributes as `attr:${K}`]?: IonFooterAttributes[K] } & { [K in keyof IonFooter & keyof IonFooterAttributes as `prop:${K}`]?: IonFooter[K] };
        "ion-grid": Omit<IonGrid, keyof IonGridAttributes> & { [K in keyof IonGrid & keyof IonGridAttributes]?: IonGrid[K] } & { [K in keyof IonGrid & keyof IonGridAttributes as `attr:${K}`]?: IonGridAttributes[K] } & { [K in keyof IonGrid & keyof IonGridAttributes as `prop:${K}`]?: IonGrid[K] };
        "ion-header": Omit<IonHeader, keyof IonHeaderAttributes> & { [K in keyof IonHeader & keyof IonHeaderAttributes]?: IonHeader[K] } & { [K in keyof IonHeader & keyof IonHeaderAttributes as `attr:${K}`]?: IonHeaderAttributes[K] } & { [K in keyof IonHeader & keyof IonHeaderAttributes as `prop:${K}`]?: IonHeader[K] };
        "ion-img": Omit<IonImg, keyof IonImgAttributes> & { [K in keyof IonImg & keyof IonImgAttributes]?: IonImg[K] } & { [K in keyof IonImg & keyof IonImgAttributes as `attr:${K}`]?: IonImgAttributes[K] } & { [K in keyof IonImg & keyof IonImgAttributes as `prop:${K}`]?: IonImg[K] };
        "ion-infinite-scroll": Omit<IonInfiniteScroll, keyof IonInfiniteScrollAttributes> & { [K in keyof IonInfiniteScroll & keyof IonInfiniteScrollAttributes]?: IonInfiniteScroll[K] } & { [K in keyof IonInfiniteScroll & keyof IonInfiniteScrollAttributes as `attr:${K}`]?: IonInfiniteScrollAttributes[K] } & { [K in keyof IonInfiniteScroll & keyof IonInfiniteScrollAttributes as `prop:${K}`]?: IonInfiniteScroll[K] };
        "ion-infinite-scroll-content": Omit<IonInfiniteScrollContent, keyof IonInfiniteScrollContentAttributes> & { [K in keyof IonInfiniteScrollContent & keyof IonInfiniteScrollContentAttributes]?: IonInfiniteScrollContent[K] } & { [K in keyof IonInfiniteScrollContent & keyof IonInfiniteScrollContentAttributes as `attr:${K}`]?: IonInfiniteScrollContentAttributes[K] } & { [K in keyof IonInfiniteScrollContent & keyof IonInfiniteScrollContentAttributes as `prop:${K}`]?: IonInfiniteScrollContent[K] };
        "ion-input": Omit<IonInput, keyof IonInputAttributes> & { [K in keyof IonInput & keyof IonInputAttributes]?: IonInput[K] } & { [K in keyof IonInput & keyof IonInputAttributes as `attr:${K}`]?: IonInputAttributes[K] } & { [K in keyof IonInput & keyof IonInputAttributes as `prop:${K}`]?: IonInput[K] };
        "ion-input-otp": Omit<IonInputOtp, keyof IonInputOtpAttributes> & { [K in keyof IonInputOtp & keyof IonInputOtpAttributes]?: IonInputOtp[K] } & { [K in keyof IonInputOtp & keyof IonInputOtpAttributes as `attr:${K}`]?: IonInputOtpAttributes[K] } & { [K in keyof IonInputOtp & keyof IonInputOtpAttributes as `prop:${K}`]?: IonInputOtp[K] };
        "ion-input-password-toggle": Omit<IonInputPasswordToggle, keyof IonInputPasswordToggleAttributes> & { [K in keyof IonInputPasswordToggle & keyof IonInputPasswordToggleAttributes]?: IonInputPasswordToggle[K] } & { [K in keyof IonInputPasswordToggle & keyof IonInputPasswordToggleAttributes as `attr:${K}`]?: IonInputPasswordToggleAttributes[K] } & { [K in keyof IonInputPasswordToggle & keyof IonInputPasswordToggleAttributes as `prop:${K}`]?: IonInputPasswordToggle[K] };
        "ion-item": Omit<IonItem, keyof IonItemAttributes> & { [K in keyof IonItem & keyof IonItemAttributes]?: IonItem[K] } & { [K in keyof IonItem & keyof IonItemAttributes as `attr:${K}`]?: IonItemAttributes[K] } & { [K in keyof IonItem & keyof IonItemAttributes as `prop:${K}`]?: IonItem[K] };
        "ion-item-divider": Omit<IonItemDivider, keyof IonItemDividerAttributes> & { [K in keyof IonItemDivider & keyof IonItemDividerAttributes]?: IonItemDivider[K] } & { [K in keyof IonItemDivider & keyof IonItemDividerAttributes as `attr:${K}`]?: IonItemDividerAttributes[K] } & { [K in keyof IonItemDivider & keyof IonItemDividerAttributes as `prop:${K}`]?: IonItemDivider[K] };
        "ion-item-group": IonItemGroup;
        "ion-item-option": Omit<IonItemOption, keyof IonItemOptionAttributes> & { [K in keyof IonItemOption & keyof IonItemOptionAttributes]?: IonItemOption[K] } & { [K in keyof IonItemOption & keyof IonItemOptionAttributes as `attr:${K}`]?: IonItemOptionAttributes[K] } & { [K in keyof IonItemOption & keyof IonItemOptionAttributes as `prop:${K}`]?: IonItemOption[K] };
        "ion-item-options": Omit<IonItemOptions, keyof IonItemOptionsAttributes> & { [K in keyof IonItemOptions & keyof IonItemOptionsAttributes]?: IonItemOptions[K] } & { [K in keyof IonItemOptions & keyof IonItemOptionsAttributes as `attr:${K}`]?: IonItemOptionsAttributes[K] } & { [K in keyof IonItemOptions & keyof IonItemOptionsAttributes as `prop:${K}`]?: IonItemOptions[K] };
        "ion-item-sliding": Omit<IonItemSliding, keyof IonItemSlidingAttributes> & { [K in keyof IonItemSliding & keyof IonItemSlidingAttributes]?: IonItemSliding[K] } & { [K in keyof IonItemSliding & keyof IonItemSlidingAttributes as `attr:${K}`]?: IonItemSlidingAttributes[K] } & { [K in keyof IonItemSliding & keyof IonItemSlidingAttributes as `prop:${K}`]?: IonItemSliding[K] };
        "ion-label": Omit<IonLabel, keyof IonLabelAttributes> & { [K in keyof IonLabel & keyof IonLabelAttributes]?: IonLabel[K] } & { [K in keyof IonLabel & keyof IonLabelAttributes as `attr:${K}`]?: IonLabelAttributes[K] } & { [K in keyof IonLabel & keyof IonLabelAttributes as `prop:${K}`]?: IonLabel[K] };
        "ion-list": Omit<IonList, keyof IonListAttributes> & { [K in keyof IonList & keyof IonListAttributes]?: IonList[K] } & { [K in keyof IonList & keyof IonListAttributes as `attr:${K}`]?: IonListAttributes[K] } & { [K in keyof IonList & keyof IonListAttributes as `prop:${K}`]?: IonList[K] };
        "ion-list-header": Omit<IonListHeader, keyof IonListHeaderAttributes> & { [K in keyof IonListHeader & keyof IonListHeaderAttributes]?: IonListHeader[K] } & { [K in keyof IonListHeader & keyof IonListHeaderAttributes as `attr:${K}`]?: IonListHeaderAttributes[K] } & { [K in keyof IonListHeader & keyof IonListHeaderAttributes as `prop:${K}`]?: IonListHeader[K] };
        "ion-loading": Omit<IonLoading, keyof IonLoadingAttributes> & { [K in keyof IonLoading & keyof IonLoadingAttributes]?: IonLoading[K] } & { [K in keyof IonLoading & keyof IonLoadingAttributes as `attr:${K}`]?: IonLoadingAttributes[K] } & { [K in keyof IonLoading & keyof IonLoadingAttributes as `prop:${K}`]?: IonLoading[K] } & OneOf<"overlayIndex", IonLoading["overlayIndex"], IonLoadingAttributes["overlayIndex"]>;
        "ion-menu": Omit<IonMenu, keyof IonMenuAttributes> & { [K in keyof IonMenu & keyof IonMenuAttributes]?: IonMenu[K] } & { [K in keyof IonMenu & keyof IonMenuAttributes as `attr:${K}`]?: IonMenuAttributes[K] } & { [K in keyof IonMenu & keyof IonMenuAttributes as `prop:${K}`]?: IonMenu[K] };
        "ion-menu-button": Omit<IonMenuButton, keyof IonMenuButtonAttributes> & { [K in keyof IonMenuButton & keyof IonMenuButtonAttributes]?: IonMenuButton[K] } & { [K in keyof IonMenuButton & keyof IonMenuButtonAttributes as `attr:${K}`]?: IonMenuButtonAttributes[K] } & { [K in keyof IonMenuButton & keyof IonMenuButtonAttributes as `prop:${K}`]?: IonMenuButton[K] };
        "ion-menu-toggle": Omit<IonMenuToggle, keyof IonMenuToggleAttributes> & { [K in keyof IonMenuToggle & keyof IonMenuToggleAttributes]?: IonMenuToggle[K] } & { [K in keyof IonMenuToggle & keyof IonMenuToggleAttributes as `attr:${K}`]?: IonMenuToggleAttributes[K] } & { [K in keyof IonMenuToggle & keyof IonMenuToggleAttributes as `prop:${K}`]?: IonMenuToggle[K] };
        "ion-modal": Omit<IonModal, keyof IonModalAttributes> & { [K in keyof IonModal & keyof IonModalAttributes]?: IonModal[K] } & { [K in keyof IonModal & keyof IonModalAttributes as `attr:${K}`]?: IonModalAttributes[K] } & { [K in keyof IonModal & keyof IonModalAttributes as `prop:${K}`]?: IonModal[K] } & OneOf<"overlayIndex", IonModal["overlayIndex"], IonModalAttributes["overlayIndex"]>;
        "ion-nav": Omit<IonNav, keyof IonNavAttributes> & { [K in keyof IonNav & keyof IonNavAttributes]?: IonNav[K] } & { [K in keyof IonNav & keyof IonNavAttributes as `attr:${K}`]?: IonNavAttributes[K] } & { [K in keyof IonNav & keyof IonNavAttributes as `prop:${K}`]?: IonNav[K] };
        "ion-nav-link": Omit<IonNavLink, keyof IonNavLinkAttributes> & { [K in keyof IonNavLink & keyof IonNavLinkAttributes]?: IonNavLink[K] } & { [K in keyof IonNavLink & keyof IonNavLinkAttributes as `attr:${K}`]?: IonNavLinkAttributes[K] } & { [K in keyof IonNavLink & keyof IonNavLinkAttributes as `prop:${K}`]?: IonNavLink[K] };
        "ion-note": Omit<IonNote, keyof IonNoteAttributes> & { [K in keyof IonNote & keyof IonNoteAttributes]?: IonNote[K] } & { [K in keyof IonNote & keyof IonNoteAttributes as `attr:${K}`]?: IonNoteAttributes[K] } & { [K in keyof IonNote & keyof IonNoteAttributes as `prop:${K}`]?: IonNote[K] };
        "ion-picker": IonPicker;
        "ion-picker-column": Omit<IonPickerColumn, keyof IonPickerColumnAttributes> & { [K in keyof IonPickerColumn & keyof IonPickerColumnAttributes]?: IonPickerColumn[K] } & { [K in keyof IonPickerColumn & keyof IonPickerColumnAttributes as `attr:${K}`]?: IonPickerColumnAttributes[K] } & { [K in keyof IonPickerColumn & keyof IonPickerColumnAttributes as `prop:${K}`]?: IonPickerColumn[K] };
        "ion-picker-column-option": Omit<IonPickerColumnOption, keyof IonPickerColumnOptionAttributes> & { [K in keyof IonPickerColumnOption & keyof IonPickerColumnOptionAttributes]?: IonPickerColumnOption[K] } & { [K in keyof IonPickerColumnOption & keyof IonPickerColumnOptionAttributes as `attr:${K}`]?: IonPickerColumnOptionAttributes[K] } & { [K in keyof IonPickerColumnOption & keyof IonPickerColumnOptionAttributes as `prop:${K}`]?: IonPickerColumnOption[K] };
        "ion-picker-legacy": Omit<IonPickerLegacy, keyof IonPickerLegacyAttributes> & { [K in keyof IonPickerLegacy & keyof IonPickerLegacyAttributes]?: IonPickerLegacy[K] } & { [K in keyof IonPickerLegacy & keyof IonPickerLegacyAttributes as `attr:${K}`]?: IonPickerLegacyAttributes[K] } & { [K in keyof IonPickerLegacy & keyof IonPickerLegacyAttributes as `prop:${K}`]?: IonPickerLegacy[K] } & OneOf<"overlayIndex", IonPickerLegacy["overlayIndex"], IonPickerLegacyAttributes["overlayIndex"]>;
        "ion-picker-legacy-column": IonPickerLegacyColumn;
        "ion-popover": Omit<IonPopover, keyof IonPopoverAttributes> & { [K in keyof IonPopover & keyof IonPopoverAttributes]?: IonPopover[K] } & { [K in keyof IonPopover & keyof IonPopoverAttributes as `attr:${K}`]?: IonPopoverAttributes[K] } & { [K in keyof IonPopover & keyof IonPopoverAttributes as `prop:${K}`]?: IonPopover[K] } & OneOf<"overlayIndex", IonPopover["overlayIndex"], IonPopoverAttributes["overlayIndex"]>;
        "ion-progress-bar": Omit<IonProgressBar, keyof IonProgressBarAttributes> & { [K in keyof IonProgressBar & keyof IonProgressBarAttributes]?: IonProgressBar[K] } & { [K in keyof IonProgressBar & keyof IonProgressBarAttributes as `attr:${K}`]?: IonProgressBarAttributes[K] } & { [K in keyof IonProgressBar & keyof IonProgressBarAttributes as `prop:${K}`]?: IonProgressBar[K] };
        "ion-radio": Omit<IonRadio, keyof IonRadioAttributes> & { [K in keyof IonRadio & keyof IonRadioAttributes]?: IonRadio[K] } & { [K in keyof IonRadio & keyof IonRadioAttributes as `attr:${K}`]?: IonRadioAttributes[K] } & { [K in keyof IonRadio & keyof IonRadioAttributes as `prop:${K}`]?: IonRadio[K] };
        "ion-radio-group": Omit<IonRadioGroup, keyof IonRadioGroupAttributes> & { [K in keyof IonRadioGroup & keyof IonRadioGroupAttributes]?: IonRadioGroup[K] } & { [K in keyof IonRadioGroup & keyof IonRadioGroupAttributes as `attr:${K}`]?: IonRadioGroupAttributes[K] } & { [K in keyof IonRadioGroup & keyof IonRadioGroupAttributes as `prop:${K}`]?: IonRadioGroup[K] };
        "ion-range": Omit<IonRange, keyof IonRangeAttributes> & { [K in keyof IonRange & keyof IonRangeAttributes]?: IonRange[K] } & { [K in keyof IonRange & keyof IonRangeAttributes as `attr:${K}`]?: IonRangeAttributes[K] } & { [K in keyof IonRange & keyof IonRangeAttributes as `prop:${K}`]?: IonRange[K] };
        "ion-refresher": Omit<IonRefresher, keyof IonRefresherAttributes> & { [K in keyof IonRefresher & keyof IonRefresherAttributes]?: IonRefresher[K] } & { [K in keyof IonRefresher & keyof IonRefresherAttributes as `attr:${K}`]?: IonRefresherAttributes[K] } & { [K in keyof IonRefresher & keyof IonRefresherAttributes as `prop:${K}`]?: IonRefresher[K] };
        "ion-refresher-content": Omit<IonRefresherContent, keyof IonRefresherContentAttributes> & { [K in keyof IonRefresherContent & keyof IonRefresherContentAttributes]?: IonRefresherContent[K] } & { [K in keyof IonRefresherContent & keyof IonRefresherContentAttributes as `attr:${K}`]?: IonRefresherContentAttributes[K] } & { [K in keyof IonRefresherContent & keyof IonRefresherContentAttributes as `prop:${K}`]?: IonRefresherContent[K] };
        "ion-reorder": IonReorder;
        "ion-reorder-group": Omit<IonReorderGroup, keyof IonReorderGroupAttributes> & { [K in keyof IonReorderGroup & keyof IonReorderGroupAttributes]?: IonReorderGroup[K] } & { [K in keyof IonReorderGroup & keyof IonReorderGroupAttributes as `attr:${K}`]?: IonReorderGroupAttributes[K] } & { [K in keyof IonReorderGroup & keyof IonReorderGroupAttributes as `prop:${K}`]?: IonReorderGroup[K] };
        "ion-ripple-effect": Omit<IonRippleEffect, keyof IonRippleEffectAttributes> & { [K in keyof IonRippleEffect & keyof IonRippleEffectAttributes]?: IonRippleEffect[K] } & { [K in keyof IonRippleEffect & keyof IonRippleEffectAttributes as `attr:${K}`]?: IonRippleEffectAttributes[K] } & { [K in keyof IonRippleEffect & keyof IonRippleEffectAttributes as `prop:${K}`]?: IonRippleEffect[K] };
        "ion-route": Omit<IonRoute, keyof IonRouteAttributes> & { [K in keyof IonRoute & keyof IonRouteAttributes]?: IonRoute[K] } & { [K in keyof IonRoute & keyof IonRouteAttributes as `attr:${K}`]?: IonRouteAttributes[K] } & { [K in keyof IonRoute & keyof IonRouteAttributes as `prop:${K}`]?: IonRoute[K] } & OneOf<"component", IonRoute["component"], IonRouteAttributes["component"]>;
        "ion-route-redirect": Omit<IonRouteRedirect, keyof IonRouteRedirectAttributes> & { [K in keyof IonRouteRedirect & keyof IonRouteRedirectAttributes]?: IonRouteRedirect[K] } & { [K in keyof IonRouteRedirect & keyof IonRouteRedirectAttributes as `attr:${K}`]?: IonRouteRedirectAttributes[K] } & { [K in keyof IonRouteRedirect & keyof IonRouteRedirectAttributes as `prop:${K}`]?: IonRouteRedirect[K] } & OneOf<"from", IonRouteRedirect["from"], IonRouteRedirectAttributes["from"]> & OneOf<"to", IonRouteRedirect["to"], IonRouteRedirectAttributes["to"]>;
        "ion-router": Omit<IonRouter, keyof IonRouterAttributes> & { [K in keyof IonRouter & keyof IonRouterAttributes]?: IonRouter[K] } & { [K in keyof IonRouter & keyof IonRouterAttributes as `attr:${K}`]?: IonRouterAttributes[K] } & { [K in keyof IonRouter & keyof IonRouterAttributes as `prop:${K}`]?: IonRouter[K] };
        "ion-router-link": Omit<IonRouterLink, keyof IonRouterLinkAttributes> & { [K in keyof IonRouterLink & keyof IonRouterLinkAttributes]?: IonRouterLink[K] } & { [K in keyof IonRouterLink & keyof IonRouterLinkAttributes as `attr:${K}`]?: IonRouterLinkAttributes[K] } & { [K in keyof IonRouterLink & keyof IonRouterLinkAttributes as `prop:${K}`]?: IonRouterLink[K] };
        "ion-router-outlet": Omit<IonRouterOutlet, keyof IonRouterOutletAttributes> & { [K in keyof IonRouterOutlet & keyof IonRouterOutletAttributes]?: IonRouterOutlet[K] } & { [K in keyof IonRouterOutlet & keyof IonRouterOutletAttributes as `attr:${K}`]?: IonRouterOutletAttributes[K] } & { [K in keyof IonRouterOutlet & keyof IonRouterOutletAttributes as `prop:${K}`]?: IonRouterOutlet[K] };
        "ion-row": IonRow;
        "ion-searchbar": Omit<IonSearchbar, keyof IonSearchbarAttributes> & { [K in keyof IonSearchbar & keyof IonSearchbarAttributes]?: IonSearchbar[K] } & { [K in keyof IonSearchbar & keyof IonSearchbarAttributes as `attr:${K}`]?: IonSearchbarAttributes[K] } & { [K in keyof IonSearchbar & keyof IonSearchbarAttributes as `prop:${K}`]?: IonSearchbar[K] };
        "ion-segment": Omit<IonSegment, keyof IonSegmentAttributes> & { [K in keyof IonSegment & keyof IonSegmentAttributes]?: IonSegment[K] } & { [K in keyof IonSegment & keyof IonSegmentAttributes as `attr:${K}`]?: IonSegmentAttributes[K] } & { [K in keyof IonSegment & keyof IonSegmentAttributes as `prop:${K}`]?: IonSegment[K] };
        "ion-segment-button": Omit<IonSegmentButton, keyof IonSegmentButtonAttributes> & { [K in keyof IonSegmentButton & keyof IonSegmentButtonAttributes]?: IonSegmentButton[K] } & { [K in keyof IonSegmentButton & keyof IonSegmentButtonAttributes as `attr:${K}`]?: IonSegmentButtonAttributes[K] } & { [K in keyof IonSegmentButton & keyof IonSegmentButtonAttributes as `prop:${K}`]?: IonSegmentButton[K] };
        "ion-segment-content": IonSegmentContent;
        "ion-segment-view": Omit<IonSegmentView, keyof IonSegmentViewAttributes> & { [K in keyof IonSegmentView & keyof IonSegmentViewAttributes]?: IonSegmentView[K] } & { [K in keyof IonSegmentView & keyof IonSegmentViewAttributes as `attr:${K}`]?: IonSegmentViewAttributes[K] } & { [K in keyof IonSegmentView & keyof IonSegmentViewAttributes as `prop:${K}`]?: IonSegmentView[K] };
        "ion-select": Omit<IonSelect, keyof IonSelectAttributes> & { [K in keyof IonSelect & keyof IonSelectAttributes]?: IonSelect[K] } & { [K in keyof IonSelect & keyof IonSelectAttributes as `attr:${K}`]?: IonSelectAttributes[K] } & { [K in keyof IonSelect & keyof IonSelectAttributes as `prop:${K}`]?: IonSelect[K] };
        "ion-select-modal": Omit<IonSelectModal, keyof IonSelectModalAttributes> & { [K in keyof IonSelectModal & keyof IonSelectModalAttributes]?: IonSelectModal[K] } & { [K in keyof IonSelectModal & keyof IonSelectModalAttributes as `attr:${K}`]?: IonSelectModalAttributes[K] } & { [K in keyof IonSelectModal & keyof IonSelectModalAttributes as `prop:${K}`]?: IonSelectModal[K] };
        "ion-select-option": Omit<IonSelectOption, keyof IonSelectOptionAttributes> & { [K in keyof IonSelectOption & keyof IonSelectOptionAttributes]?: IonSelectOption[K] } & { [K in keyof IonSelectOption & keyof IonSelectOptionAttributes as `attr:${K}`]?: IonSelectOptionAttributes[K] } & { [K in keyof IonSelectOption & keyof IonSelectOptionAttributes as `prop:${K}`]?: IonSelectOption[K] };
        "ion-select-popover": Omit<IonSelectPopover, keyof IonSelectPopoverAttributes> & { [K in keyof IonSelectPopover & keyof IonSelectPopoverAttributes]?: IonSelectPopover[K] } & { [K in keyof IonSelectPopover & keyof IonSelectPopoverAttributes as `attr:${K}`]?: IonSelectPopoverAttributes[K] } & { [K in keyof IonSelectPopover & keyof IonSelectPopoverAttributes as `prop:${K}`]?: IonSelectPopover[K] };
        "ion-skeleton-text": Omit<IonSkeletonText, keyof IonSkeletonTextAttributes> & { [K in keyof IonSkeletonText & keyof IonSkeletonTextAttributes]?: IonSkeletonText[K] } & { [K in keyof IonSkeletonText & keyof IonSkeletonTextAttributes as `attr:${K}`]?: IonSkeletonTextAttributes[K] } & { [K in keyof IonSkeletonText & keyof IonSkeletonTextAttributes as `prop:${K}`]?: IonSkeletonText[K] };
        "ion-spinner": Omit<IonSpinner, keyof IonSpinnerAttributes> & { [K in keyof IonSpinner & keyof IonSpinnerAttributes]?: IonSpinner[K] } & { [K in keyof IonSpinner & keyof IonSpinnerAttributes as `attr:${K}`]?: IonSpinnerAttributes[K] } & { [K in keyof IonSpinner & keyof IonSpinnerAttributes as `prop:${K}`]?: IonSpinner[K] };
        "ion-split-pane": Omit<IonSplitPane, keyof IonSplitPaneAttributes> & { [K in keyof IonSplitPane & keyof IonSplitPaneAttributes]?: IonSplitPane[K] } & { [K in keyof IonSplitPane & keyof IonSplitPaneAttributes as `attr:${K}`]?: IonSplitPaneAttributes[K] } & { [K in keyof IonSplitPane & keyof IonSplitPaneAttributes as `prop:${K}`]?: IonSplitPane[K] };
        "ion-tab": Omit<IonTab, keyof IonTabAttributes> & { [K in keyof IonTab & keyof IonTabAttributes]?: IonTab[K] } & { [K in keyof IonTab & keyof IonTabAttributes as `attr:${K}`]?: IonTabAttributes[K] } & { [K in keyof IonTab & keyof IonTabAttributes as `prop:${K}`]?: IonTab[K] } & OneOf<"tab", IonTab["tab"], IonTabAttributes["tab"]>;
        "ion-tab-bar": Omit<IonTabBar, keyof IonTabBarAttributes> & { [K in keyof IonTabBar & keyof IonTabBarAttributes]?: IonTabBar[K] } & { [K in keyof IonTabBar & keyof IonTabBarAttributes as `attr:${K}`]?: IonTabBarAttributes[K] } & { [K in keyof IonTabBar & keyof IonTabBarAttributes as `prop:${K}`]?: IonTabBar[K] };
        "ion-tab-button": Omit<IonTabButton, keyof IonTabButtonAttributes> & { [K in keyof IonTabButton & keyof IonTabButtonAttributes]?: IonTabButton[K] } & { [K in keyof IonTabButton & keyof IonTabButtonAttributes as `attr:${K}`]?: IonTabButtonAttributes[K] } & { [K in keyof IonTabButton & keyof IonTabButtonAttributes as `prop:${K}`]?: IonTabButton[K] };
        "ion-tabs": Omit<IonTabs, keyof IonTabsAttributes> & { [K in keyof IonTabs & keyof IonTabsAttributes]?: IonTabs[K] } & { [K in keyof IonTabs & keyof IonTabsAttributes as `attr:${K}`]?: IonTabsAttributes[K] } & { [K in keyof IonTabs & keyof IonTabsAttributes as `prop:${K}`]?: IonTabs[K] };
        "ion-text": Omit<IonText, keyof IonTextAttributes> & { [K in keyof IonText & keyof IonTextAttributes]?: IonText[K] } & { [K in keyof IonText & keyof IonTextAttributes as `attr:${K}`]?: IonTextAttributes[K] } & { [K in keyof IonText & keyof IonTextAttributes as `prop:${K}`]?: IonText[K] };
        "ion-textarea": Omit<IonTextarea, keyof IonTextareaAttributes> & { [K in keyof IonTextarea & keyof IonTextareaAttributes]?: IonTextarea[K] } & { [K in keyof IonTextarea & keyof IonTextareaAttributes as `attr:${K}`]?: IonTextareaAttributes[K] } & { [K in keyof IonTextarea & keyof IonTextareaAttributes as `prop:${K}`]?: IonTextarea[K] };
        "ion-thumbnail": IonThumbnail;
        "ion-title": Omit<IonTitle, keyof IonTitleAttributes> & { [K in keyof IonTitle & keyof IonTitleAttributes]?: IonTitle[K] } & { [K in keyof IonTitle & keyof IonTitleAttributes as `attr:${K}`]?: IonTitleAttributes[K] } & { [K in keyof IonTitle & keyof IonTitleAttributes as `prop:${K}`]?: IonTitle[K] };
        "ion-toast": Omit<IonToast, keyof IonToastAttributes> & { [K in keyof IonToast & keyof IonToastAttributes]?: IonToast[K] } & { [K in keyof IonToast & keyof IonToastAttributes as `attr:${K}`]?: IonToastAttributes[K] } & { [K in keyof IonToast & keyof IonToastAttributes as `prop:${K}`]?: IonToast[K] } & OneOf<"overlayIndex", IonToast["overlayIndex"], IonToastAttributes["overlayIndex"]>;
        "ion-toggle": Omit<IonToggle, keyof IonToggleAttributes> & { [K in keyof IonToggle & keyof IonToggleAttributes]?: IonToggle[K] } & { [K in keyof IonToggle & keyof IonToggleAttributes as `attr:${K}`]?: IonToggleAttributes[K] } & { [K in keyof IonToggle & keyof IonToggleAttributes as `prop:${K}`]?: IonToggle[K] };
        "ion-toolbar": Omit<IonToolbar, keyof IonToolbarAttributes> & { [K in keyof IonToolbar & keyof IonToolbarAttributes]?: IonToolbar[K] } & { [K in keyof IonToolbar & keyof IonToolbarAttributes as `attr:${K}`]?: IonToolbarAttributes[K] } & { [K in keyof IonToolbar & keyof IonToolbarAttributes as `prop:${K}`]?: IonToolbar[K] };
    }
}
export { LocalJSX as JSX };
declare module "@stencil/core" {
    export namespace JSX {
        interface IntrinsicElements {
            "ion-accordion": LocalJSX.IntrinsicElements["ion-accordion"] & JSXBase.HTMLAttributes<HTMLIonAccordionElement>;
            "ion-accordion-group": LocalJSX.IntrinsicElements["ion-accordion-group"] & JSXBase.HTMLAttributes<HTMLIonAccordionGroupElement>;
            "ion-action-sheet": LocalJSX.IntrinsicElements["ion-action-sheet"] & JSXBase.HTMLAttributes<HTMLIonActionSheetElement>;
            "ion-alert": LocalJSX.IntrinsicElements["ion-alert"] & JSXBase.HTMLAttributes<HTMLIonAlertElement>;
            "ion-app": LocalJSX.IntrinsicElements["ion-app"] & JSXBase.HTMLAttributes<HTMLIonAppElement>;
            "ion-avatar": LocalJSX.IntrinsicElements["ion-avatar"] & JSXBase.HTMLAttributes<HTMLIonAvatarElement>;
            "ion-back-button": LocalJSX.IntrinsicElements["ion-back-button"] & JSXBase.HTMLAttributes<HTMLIonBackButtonElement>;
            "ion-backdrop": LocalJSX.IntrinsicElements["ion-backdrop"] & JSXBase.HTMLAttributes<HTMLIonBackdropElement>;
            "ion-badge": LocalJSX.IntrinsicElements["ion-badge"] & JSXBase.HTMLAttributes<HTMLIonBadgeElement>;
            "ion-breadcrumb": LocalJSX.IntrinsicElements["ion-breadcrumb"] & JSXBase.HTMLAttributes<HTMLIonBreadcrumbElement>;
            "ion-breadcrumbs": LocalJSX.IntrinsicElements["ion-breadcrumbs"] & JSXBase.HTMLAttributes<HTMLIonBreadcrumbsElement>;
            "ion-button": LocalJSX.IntrinsicElements["ion-button"] & JSXBase.HTMLAttributes<HTMLIonButtonElement>;
            "ion-buttons": LocalJSX.IntrinsicElements["ion-buttons"] & JSXBase.HTMLAttributes<HTMLIonButtonsElement>;
            "ion-card": LocalJSX.IntrinsicElements["ion-card"] & JSXBase.HTMLAttributes<HTMLIonCardElement>;
            "ion-card-content": LocalJSX.IntrinsicElements["ion-card-content"] & JSXBase.HTMLAttributes<HTMLIonCardContentElement>;
            "ion-card-header": LocalJSX.IntrinsicElements["ion-card-header"] & JSXBase.HTMLAttributes<HTMLIonCardHeaderElement>;
            "ion-card-subtitle": LocalJSX.IntrinsicElements["ion-card-subtitle"] & JSXBase.HTMLAttributes<HTMLIonCardSubtitleElement>;
            "ion-card-title": LocalJSX.IntrinsicElements["ion-card-title"] & JSXBase.HTMLAttributes<HTMLIonCardTitleElement>;
            "ion-checkbox": LocalJSX.IntrinsicElements["ion-checkbox"] & JSXBase.HTMLAttributes<HTMLIonCheckboxElement>;
            "ion-chip": LocalJSX.IntrinsicElements["ion-chip"] & JSXBase.HTMLAttributes<HTMLIonChipElement>;
            "ion-col": LocalJSX.IntrinsicElements["ion-col"] & JSXBase.HTMLAttributes<HTMLIonColElement>;
            "ion-content": LocalJSX.IntrinsicElements["ion-content"] & JSXBase.HTMLAttributes<HTMLIonContentElement>;
            "ion-datetime": LocalJSX.IntrinsicElements["ion-datetime"] & JSXBase.HTMLAttributes<HTMLIonDatetimeElement>;
            "ion-datetime-button": LocalJSX.IntrinsicElements["ion-datetime-button"] & JSXBase.HTMLAttributes<HTMLIonDatetimeButtonElement>;
            "ion-fab": LocalJSX.IntrinsicElements["ion-fab"] & JSXBase.HTMLAttributes<HTMLIonFabElement>;
            "ion-fab-button": LocalJSX.IntrinsicElements["ion-fab-button"] & JSXBase.HTMLAttributes<HTMLIonFabButtonElement>;
            "ion-fab-list": LocalJSX.IntrinsicElements["ion-fab-list"] & JSXBase.HTMLAttributes<HTMLIonFabListElement>;
            "ion-footer": LocalJSX.IntrinsicElements["ion-footer"] & JSXBase.HTMLAttributes<HTMLIonFooterElement>;
            "ion-grid": LocalJSX.IntrinsicElements["ion-grid"] & JSXBase.HTMLAttributes<HTMLIonGridElement>;
            "ion-header": LocalJSX.IntrinsicElements["ion-header"] & JSXBase.HTMLAttributes<HTMLIonHeaderElement>;
            "ion-img": LocalJSX.IntrinsicElements["ion-img"] & JSXBase.HTMLAttributes<HTMLIonImgElement>;
            "ion-infinite-scroll": LocalJSX.IntrinsicElements["ion-infinite-scroll"] & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollElement>;
            "ion-infinite-scroll-content": LocalJSX.IntrinsicElements["ion-infinite-scroll-content"] & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollContentElement>;
            "ion-input": LocalJSX.IntrinsicElements["ion-input"] & JSXBase.HTMLAttributes<HTMLIonInputElement>;
            "ion-input-otp": LocalJSX.IntrinsicElements["ion-input-otp"] & JSXBase.HTMLAttributes<HTMLIonInputOtpElement>;
            "ion-input-password-toggle": LocalJSX.IntrinsicElements["ion-input-password-toggle"] & JSXBase.HTMLAttributes<HTMLIonInputPasswordToggleElement>;
            "ion-item": LocalJSX.IntrinsicElements["ion-item"] & JSXBase.HTMLAttributes<HTMLIonItemElement>;
            "ion-item-divider": LocalJSX.IntrinsicElements["ion-item-divider"] & JSXBase.HTMLAttributes<HTMLIonItemDividerElement>;
            "ion-item-group": LocalJSX.IntrinsicElements["ion-item-group"] & JSXBase.HTMLAttributes<HTMLIonItemGroupElement>;
            "ion-item-option": LocalJSX.IntrinsicElements["ion-item-option"] & JSXBase.HTMLAttributes<HTMLIonItemOptionElement>;
            "ion-item-options": LocalJSX.IntrinsicElements["ion-item-options"] & JSXBase.HTMLAttributes<HTMLIonItemOptionsElement>;
            "ion-item-sliding": LocalJSX.IntrinsicElements["ion-item-sliding"] & JSXBase.HTMLAttributes<HTMLIonItemSlidingElement>;
            "ion-label": LocalJSX.IntrinsicElements["ion-label"] & JSXBase.HTMLAttributes<HTMLIonLabelElement>;
            "ion-list": LocalJSX.IntrinsicElements["ion-list"] & JSXBase.HTMLAttributes<HTMLIonListElement>;
            "ion-list-header": LocalJSX.IntrinsicElements["ion-list-header"] & JSXBase.HTMLAttributes<HTMLIonListHeaderElement>;
            "ion-loading": LocalJSX.IntrinsicElements["ion-loading"] & JSXBase.HTMLAttributes<HTMLIonLoadingElement>;
            "ion-menu": LocalJSX.IntrinsicElements["ion-menu"] & JSXBase.HTMLAttributes<HTMLIonMenuElement>;
            "ion-menu-button": LocalJSX.IntrinsicElements["ion-menu-button"] & JSXBase.HTMLAttributes<HTMLIonMenuButtonElement>;
            "ion-menu-toggle": LocalJSX.IntrinsicElements["ion-menu-toggle"] & JSXBase.HTMLAttributes<HTMLIonMenuToggleElement>;
            "ion-modal": LocalJSX.IntrinsicElements["ion-modal"] & JSXBase.HTMLAttributes<HTMLIonModalElement>;
            "ion-nav": LocalJSX.IntrinsicElements["ion-nav"] & JSXBase.HTMLAttributes<HTMLIonNavElement>;
            "ion-nav-link": LocalJSX.IntrinsicElements["ion-nav-link"] & JSXBase.HTMLAttributes<HTMLIonNavLinkElement>;
            "ion-note": LocalJSX.IntrinsicElements["ion-note"] & JSXBase.HTMLAttributes<HTMLIonNoteElement>;
            "ion-picker": LocalJSX.IntrinsicElements["ion-picker"] & JSXBase.HTMLAttributes<HTMLIonPickerElement>;
            "ion-picker-column": LocalJSX.IntrinsicElements["ion-picker-column"] & JSXBase.HTMLAttributes<HTMLIonPickerColumnElement>;
            "ion-picker-column-option": LocalJSX.IntrinsicElements["ion-picker-column-option"] & JSXBase.HTMLAttributes<HTMLIonPickerColumnOptionElement>;
            "ion-picker-legacy": LocalJSX.IntrinsicElements["ion-picker-legacy"] & JSXBase.HTMLAttributes<HTMLIonPickerLegacyElement>;
            "ion-picker-legacy-column": LocalJSX.IntrinsicElements["ion-picker-legacy-column"] & JSXBase.HTMLAttributes<HTMLIonPickerLegacyColumnElement>;
            "ion-popover": LocalJSX.IntrinsicElements["ion-popover"] & JSXBase.HTMLAttributes<HTMLIonPopoverElement>;
            "ion-progress-bar": LocalJSX.IntrinsicElements["ion-progress-bar"] & JSXBase.HTMLAttributes<HTMLIonProgressBarElement>;
            "ion-radio": LocalJSX.IntrinsicElements["ion-radio"] & JSXBase.HTMLAttributes<HTMLIonRadioElement>;
            "ion-radio-group": LocalJSX.IntrinsicElements["ion-radio-group"] & JSXBase.HTMLAttributes<HTMLIonRadioGroupElement>;
            "ion-range": LocalJSX.IntrinsicElements["ion-range"] & JSXBase.HTMLAttributes<HTMLIonRangeElement>;
            "ion-refresher": LocalJSX.IntrinsicElements["ion-refresher"] & JSXBase.HTMLAttributes<HTMLIonRefresherElement>;
            "ion-refresher-content": LocalJSX.IntrinsicElements["ion-refresher-content"] & JSXBase.HTMLAttributes<HTMLIonRefresherContentElement>;
            "ion-reorder": LocalJSX.IntrinsicElements["ion-reorder"] & JSXBase.HTMLAttributes<HTMLIonReorderElement>;
            "ion-reorder-group": LocalJSX.IntrinsicElements["ion-reorder-group"] & JSXBase.HTMLAttributes<HTMLIonReorderGroupElement>;
            "ion-ripple-effect": LocalJSX.IntrinsicElements["ion-ripple-effect"] & JSXBase.HTMLAttributes<HTMLIonRippleEffectElement>;
            "ion-route": LocalJSX.IntrinsicElements["ion-route"] & JSXBase.HTMLAttributes<HTMLIonRouteElement>;
            "ion-route-redirect": LocalJSX.IntrinsicElements["ion-route-redirect"] & JSXBase.HTMLAttributes<HTMLIonRouteRedirectElement>;
            "ion-router": LocalJSX.IntrinsicElements["ion-router"] & JSXBase.HTMLAttributes<HTMLIonRouterElement>;
            "ion-router-link": LocalJSX.IntrinsicElements["ion-router-link"] & JSXBase.HTMLAttributes<HTMLIonRouterLinkElement>;
            "ion-router-outlet": LocalJSX.IntrinsicElements["ion-router-outlet"] & JSXBase.HTMLAttributes<HTMLIonRouterOutletElement>;
            "ion-row": LocalJSX.IntrinsicElements["ion-row"] & JSXBase.HTMLAttributes<HTMLIonRowElement>;
            "ion-searchbar": LocalJSX.IntrinsicElements["ion-searchbar"] & JSXBase.HTMLAttributes<HTMLIonSearchbarElement>;
            "ion-segment": LocalJSX.IntrinsicElements["ion-segment"] & JSXBase.HTMLAttributes<HTMLIonSegmentElement>;
            "ion-segment-button": LocalJSX.IntrinsicElements["ion-segment-button"] & JSXBase.HTMLAttributes<HTMLIonSegmentButtonElement>;
            "ion-segment-content": LocalJSX.IntrinsicElements["ion-segment-content"] & JSXBase.HTMLAttributes<HTMLIonSegmentContentElement>;
            "ion-segment-view": LocalJSX.IntrinsicElements["ion-segment-view"] & JSXBase.HTMLAttributes<HTMLIonSegmentViewElement>;
            "ion-select": LocalJSX.IntrinsicElements["ion-select"] & JSXBase.HTMLAttributes<HTMLIonSelectElement>;
            "ion-select-modal": LocalJSX.IntrinsicElements["ion-select-modal"] & JSXBase.HTMLAttributes<HTMLIonSelectModalElement>;
            "ion-select-option": LocalJSX.IntrinsicElements["ion-select-option"] & JSXBase.HTMLAttributes<HTMLIonSelectOptionElement>;
            "ion-select-popover": LocalJSX.IntrinsicElements["ion-select-popover"] & JSXBase.HTMLAttributes<HTMLIonSelectPopoverElement>;
            "ion-skeleton-text": LocalJSX.IntrinsicElements["ion-skeleton-text"] & JSXBase.HTMLAttributes<HTMLIonSkeletonTextElement>;
            "ion-spinner": LocalJSX.IntrinsicElements["ion-spinner"] & JSXBase.HTMLAttributes<HTMLIonSpinnerElement>;
            "ion-split-pane": LocalJSX.IntrinsicElements["ion-split-pane"] & JSXBase.HTMLAttributes<HTMLIonSplitPaneElement>;
            "ion-tab": LocalJSX.IntrinsicElements["ion-tab"] & JSXBase.HTMLAttributes<HTMLIonTabElement>;
            "ion-tab-bar": LocalJSX.IntrinsicElements["ion-tab-bar"] & JSXBase.HTMLAttributes<HTMLIonTabBarElement>;
            "ion-tab-button": LocalJSX.IntrinsicElements["ion-tab-button"] & JSXBase.HTMLAttributes<HTMLIonTabButtonElement>;
            "ion-tabs": LocalJSX.IntrinsicElements["ion-tabs"] & JSXBase.HTMLAttributes<HTMLIonTabsElement>;
            "ion-text": LocalJSX.IntrinsicElements["ion-text"] & JSXBase.HTMLAttributes<HTMLIonTextElement>;
            "ion-textarea": LocalJSX.IntrinsicElements["ion-textarea"] & JSXBase.HTMLAttributes<HTMLIonTextareaElement>;
            "ion-thumbnail": LocalJSX.IntrinsicElements["ion-thumbnail"] & JSXBase.HTMLAttributes<HTMLIonThumbnailElement>;
            "ion-title": LocalJSX.IntrinsicElements["ion-title"] & JSXBase.HTMLAttributes<HTMLIonTitleElement>;
            "ion-toast": LocalJSX.IntrinsicElements["ion-toast"] & JSXBase.HTMLAttributes<HTMLIonToastElement>;
            "ion-toggle": LocalJSX.IntrinsicElements["ion-toggle"] & JSXBase.HTMLAttributes<HTMLIonToggleElement>;
            "ion-toolbar": LocalJSX.IntrinsicElements["ion-toolbar"] & JSXBase.HTMLAttributes<HTMLIonToolbarElement>;
        }
    }
}