index.d.ts

// Generated by scripts/generator.js
// https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#im-using-an-attributeevent-on-a-dom-element-and-it-throws-a-type-error

/* eslint-disable */
/* tslint:disable */
import type { HTMLAttributes } from "svelte/elements";
import type {
  AccordionGroupChangeEventDetail,
  ActionSheetButton,
  AlertButton,
  AlertInput,
  BreadcrumbCollapsedClickEventDetail,
  CheckboxChangeEventDetail,
  ComponentProps,
  DatetimeChangeEventDetail,
  InputChangeEventDetail,
  InputInputEventDetail,
  ItemReorderEventDetail,
  ModalBreakpointChangeEventDetail,
  NavComponent,
  NavComponentWithProps,
  NavOptions,
  OverlayEventDetail,
  PickerButton,
  PickerColumn,
  RadioGroupChangeEventDetail,
  RangeChangeEventDetail,
  RangeKnobMoveEndEventDetail,
  RangeKnobMoveStartEventDetail,
  RefresherEventDetail,
  RouterEventDetail,
  ScrollBaseDetail,
  ScrollDetail,
  SearchbarChangeEventDetail,
  SearchbarInputEventDetail,
  SegmentChangeEventDetail,
  SelectChangeEventDetail,
  TextareaChangeEventDetail,
  TextareaInputEventDetail,
  ToastButton,
  ToggleChangeEventDetail,
  TransitionDoneFn,
  ViewController,
} from "@ionic/core";
import type {
  DatetimeHighlight,
  IonicConfig,
  IonicSafeString,
} from "@ionic/core";
import { SvelteComponent } from "svelte";
import { DatetimeHighlightStyle } from "@ionic/core/dist/types/components/datetime/datetime-interface";

export function setupIonicSvelte(config?: IonicConfig);
export function setupIonicBase(config?: IonicConfig);
export function registerMenu(menuId: string);
export function createNavPageFromSvelte(
  component: new (...args: any) => SvelteComponent,
  componentProps: {},
);

export { default as IonTabs } from "./components/IonTabs.svelte";
// export { default as IonTabsLegacy } from "./components/IonTabsLegacy.svelte";
export { default as IonPage } from "./components/IonPage.svelte";
export { default as IonNav } from "./components/IonNav.svelte";

// thank you ChatGPT!
export const navController: {
  canGoBack: (view?: ViewController) => boolean | undefined;
  getActive: () => ViewController | undefined;
  getByIndex: (index: number) => ViewController | undefined;
  getPrevious: (view?: ViewController) => ViewController | undefined;
  insert: <T extends NavComponent>(
    insertIndex: number,
    component: T,
    componentProps?: ComponentProps<T> | null,
    opts?: NavOptions | null,
    done?: TransitionDoneFn,
  ) => Promise<boolean> | undefined;
  insertPages: (
    insertIndex: number,
    insertComponents: NavComponent[] | NavComponentWithProps[],
    opts?: NavOptions | null,
    done?: TransitionDoneFn,
  ) => Promise<boolean> | undefined;
  pop: (
    opts?: NavOptions | null,
    done?: TransitionDoneFn,
  ) => Promise<boolean> | undefined;
  popTo: (
    indexOrViewCtrl: number | ViewController,
    opts?: NavOptions | null,
    done?: TransitionDoneFn,
  ) => Promise<boolean> | undefined;
  popToRoot: (
    opts?: NavOptions | null,
    done?: TransitionDoneFn,
  ) => Promise<boolean> | undefined;
  push: <T extends NavComponent>(
    component: T,
    componentProps?: ComponentProps<T>,
    opts?: NavOptions,
    done?: TransitionDoneFn,
  ) => Promise<boolean> | undefined;
  removeIndex: (
    startIndex: number,
    removeCount?: number,
    opts?: NavOptions | null,
    done?: TransitionDoneFn,
  ) => Promise<boolean> | undefined;
  setPages: (
    views: NavComponent[] | NavComponentWithProps[],
    opts?: NavOptions | null,
    done?: TransitionDoneFn,
  ) => Promise<boolean> | undefined;
  setRoot: <T extends NavComponent>(
    component: T,
    componentProps?: ComponentProps<T>,
    opts?: NavOptions,
    done?: TransitionDoneFn,
  ) => Promise<boolean> | undefined;
};

// we overload (modalcontroller and popovercontroller) from ionic-core with same types, so let's mirror these
export {
  modalController,
  popoverController,
  actionSheetController,
  alertController,
  loadingController,
  menuController,
  pickerController,
  toastController,
} from "@ionic/core";

// platforms
declare const PLATFORMS_MAP: {
  [key: string]: boolean;
};

declare type Platforms = keyof typeof PLATFORMS_MAP;

export function getPlatforms(win?: any): string[];
export function setupPlatforms(win: any);

interface IsPlatformSignature {
  (plt: Platforms): boolean;
  (win: Window, plt: Platforms): boolean;
}
export function isPlatform(
  winOrPlatform: Window | Platforms | undefined,
  platform?: Platforms,
): IsPlatformSignature;

export function testUserAgent(win: Window, expr: RegExp);

// not exported by @ionic/core
export type NavigationHookResult = boolean | NavigationHookOptions;
export interface NavigationHookOptions {
  redirect: string;
}
export interface HTMLBaseAttributes extends HTMLAttributes<HTMLBaseElement> {}

declare global {
  namespace svelteHTML {
    interface IonAccordion {
      /**
       * If `true`, the accordion cannot be interacted with.
       * API info: https://ionicframework.com/docs/api/accordion#disabled
       */
      disabled?: boolean;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/accordion#mode
       */
      mode?: "ios" | "md";

      /**
       * If `true`, the accordion cannot be interacted with, but does not alter the opacity.
       * API info: https://ionicframework.com/docs/api/accordion#readonly
       */
      readonly?: boolean;

      /**
       * The toggle icon to use. This icon will be rotated when the accordion is expanded or collapsed.
       * API info: https://ionicframework.com/docs/api/accordion#toggleicon
       */
      "toggle-icon"?: string;

      /**
       * The slot inside of `ion-item` to place the toggle icon. Defaults to `"end"`.
       * API info: https://ionicframework.com/docs/api/accordion#toggleiconslot
       */
      "toggle-icon-slot"?: "end" | "start";

      /**
       * The value of the accordion. Defaults to an autogenerated value.
       * API info: https://ionicframework.com/docs/api/accordion#value
       */
      value?: string;
    }

    interface IonAccordionGroup {
      /**
       * If `true`, all accordions inside of the accordion group will animate when expanding or collapsing.
       * API info: https://ionicframework.com/docs/api/accordion-group#animated
       */
      animated?: boolean;

      /**
       * If `true`, the accordion group cannot be interacted with.
       * API info: https://ionicframework.com/docs/api/accordion-group#disabled
       */
      disabled?: boolean;

      /**
       * Describes the expansion behavior for each accordion. Possible values are `"compact"` and `"inset"`. Defaults to `"compact"`.
       * API info: https://ionicframework.com/docs/api/accordion-group#expand
       */
      expand?: "compact" | "inset";

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/accordion-group#mode
       */
      mode?: "ios" | "md";

      /**
       * If `true`, the accordion group can have multiple accordion components expanded at the same time.
       * API info: https://ionicframework.com/docs/api/accordion-group#multiple
       */
      multiple?: boolean | undefined;

      /**
       * If `true`, the accordion group cannot be interacted with, but does not alter the opacity.
       * API info: https://ionicframework.com/docs/api/accordion-group#readonly
       */
      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"`
       * API info: https://ionicframework.com/docs/api/accordion-group#value
       */
      value?: null | string | string[] | undefined;

      /**
       * (event : AccordionGroupChangeEventDetail<any>) => void :  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.
       */
      "on:ionChange"?: (
        event: CustomEvent<AccordionGroupChangeEventDetail<any>> & {
          target: HTMLIonAccordionGroupElement;
        },
      ) => void;
    }

    interface IonActionSheet {
      /**
       * If `true`, the action sheet will animate.
       * API info: https://ionicframework.com/docs/api/action-sheet#animated
       */
      animated?: boolean;

      /**
       * If `true`, the action sheet will be dismissed when the backdrop is clicked.
       * API info: https://ionicframework.com/docs/api/action-sheet#backdropdismiss
       */
      "backdrop-dismiss"?: boolean;

      /**
       * An array of buttons for the action sheet.
       * API info: https://ionicframework.com/docs/api/action-sheet#buttons
       */
      buttons?: (string | ActionSheetButton<any>)[];

      /**
       * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
       * API info: https://ionicframework.com/docs/api/action-sheet#cssclass
       */
      "css-class"?: string | string[] | undefined;

      /**
       * Animation to use when the action sheet is presented.
       * API info: https://ionicframework.com/docs/api/action-sheet#enteranimation
       */
      "enter-animation"?: ((baseEl: any, opts?: any) => Animation) | undefined;

      /**
       * Title for the action sheet.
       * API info: https://ionicframework.com/docs/api/action-sheet#header
       */
      header?: string | undefined;

      /**
       * Additional attributes to pass to the action sheet.
       * API info: https://ionicframework.com/docs/api/action-sheet#htmlattributes
       */
      "html-attributes"?: undefined | { [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.
       * API info: https://ionicframework.com/docs/api/action-sheet#isopen
       */
      "is-open"?: boolean;

      /**
       * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
       * API info: https://ionicframework.com/docs/api/action-sheet#keyboardclose
       */
      "keyboard-close"?: boolean;

      /**
       * Animation to use when the action sheet is dismissed.
       * API info: https://ionicframework.com/docs/api/action-sheet#leaveanimation
       */
      "leave-animation"?: ((baseEl: any, opts?: any) => Animation) | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/action-sheet#mode
       */
      mode?: "ios" | "md";

      /**
       * Subtitle for the action sheet.
       * API info: https://ionicframework.com/docs/api/action-sheet#subheader
       */
      "sub-header"?: string | undefined;

      /**
       * 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).
       * API info: https://ionicframework.com/docs/api/action-sheet#translucent
       */
      translucent?: boolean;

      /**
       * An ID corresponding to the trigger element that causes the action sheet to open when clicked.
       * API info: https://ionicframework.com/docs/api/action-sheet#trigger
       */
      trigger?: string | undefined;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted after the action sheet has dismissed. Shorthand for ionActionSheetDidDismiss.
       */
      "on:didDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonActionSheetElement;
        },
      ) => void;

      /**
       * () => void :  Emitted after the action sheet has presented. Shorthand for ionActionSheetWillDismiss.
       */
      "on:didPresent"?: () => void;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted after the action sheet has dismissed.
       */
      "on:ionActionSheetDidDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonActionSheetElement;
        },
      ) => void;

      /**
       * () => void :  Emitted after the action sheet has presented.
       */
      "on:ionActionSheetDidPresent"?: () => void;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted before the action sheet has dismissed.
       */
      "on:ionActionSheetWillDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonActionSheetElement;
        },
      ) => void;

      /**
       * () => void :  Emitted before the action sheet has presented.
       */
      "on:ionActionSheetWillPresent"?: () => void;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted before the action sheet has dismissed. Shorthand for ionActionSheetWillDismiss.
       */
      "on:willDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonActionSheetElement;
        },
      ) => void;

      /**
       * () => void :  Emitted before the action sheet has presented. Shorthand for ionActionSheetWillPresent.
       */
      "on:willPresent"?: () => void;
    }

    interface IonAlert {
      /**
       * If `true`, the alert will animate.
       * API info: https://ionicframework.com/docs/api/alert#animated
       */
      animated?: boolean;

      /**
       * If `true`, the alert will be dismissed when the backdrop is clicked.
       * API info: https://ionicframework.com/docs/api/alert#backdropdismiss
       */
      "backdrop-dismiss"?: boolean;

      /**
       * Array of buttons to be added to the alert.
       * API info: https://ionicframework.com/docs/api/alert#buttons
       */
      buttons?: (string | AlertButton)[];

      /**
       * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
       * API info: https://ionicframework.com/docs/api/alert#cssclass
       */
      "css-class"?: string | string[] | undefined;

      /**
       * Animation to use when the alert is presented.
       * API info: https://ionicframework.com/docs/api/alert#enteranimation
       */
      "enter-animation"?: ((baseEl: any, opts?: any) => Animation) | undefined;

      /**
       * The main title in the heading of the alert.
       * API info: https://ionicframework.com/docs/api/alert#header
       */
      header?: string | undefined;

      /**
       * Additional attributes to pass to the alert.
       * API info: https://ionicframework.com/docs/api/alert#htmlattributes
       */
      "html-attributes"?: undefined | { [key: string]: any };

      /**
       * Array of input to show in the alert.
       * API info: https://ionicframework.com/docs/api/alert#inputs
       */
      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.
       * API info: https://ionicframework.com/docs/api/alert#isopen
       */
      "is-open"?: boolean;

      /**
       * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
       * API info: https://ionicframework.com/docs/api/alert#keyboardclose
       */
      "keyboard-close"?: boolean;

      /**
       * Animation to use when the alert is dismissed.
       * API info: https://ionicframework.com/docs/api/alert#leaveanimation
       */
      "leave-animation"?: ((baseEl: any, opts?: any) => Animation) | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/alert#message
       */
      message?: IonicSafeString | string | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/alert#mode
       */
      mode?: "ios" | "md";

      /**
       * The subtitle in the heading of the alert. Displayed under the title.
       * API info: https://ionicframework.com/docs/api/alert#subheader
       */
      "sub-header"?: string | undefined;

      /**
       * 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).
       * API info: https://ionicframework.com/docs/api/alert#translucent
       */
      translucent?: boolean;

      /**
       * An ID corresponding to the trigger element that causes the alert to open when clicked.
       * API info: https://ionicframework.com/docs/api/alert#trigger
       */
      trigger?: string | undefined;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted after the alert has dismissed. Shorthand for ionAlertDidDismiss.
       */
      "on:didDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonAlertElement;
        },
      ) => void;

      /**
       * () => void :  Emitted after the alert has presented. Shorthand for ionAlertWillDismiss.
       */
      "on:didPresent"?: () => void;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted after the alert has dismissed.
       */
      "on:ionAlertDidDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonAlertElement;
        },
      ) => void;

      /**
       * () => void :  Emitted after the alert has presented.
       */
      "on:ionAlertDidPresent"?: () => void;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted before the alert has dismissed.
       */
      "on:ionAlertWillDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonAlertElement;
        },
      ) => void;

      /**
       * () => void :  Emitted before the alert has presented.
       */
      "on:ionAlertWillPresent"?: () => void;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted before the alert has dismissed. Shorthand for ionAlertWillDismiss.
       */
      "on:willDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonAlertElement;
        },
      ) => void;

      /**
       * () => void :  Emitted before the alert has presented. Shorthand for ionAlertWillPresent.
       */
      "on:willPresent"?: () => void;
    }

    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).
       * API info: https://ionicframework.com/docs/api/back-button#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * The url to navigate back to by default when there is no history.
       * API info: https://ionicframework.com/docs/api/back-button#defaulthref
       */
      "default-href"?: string | undefined;

      /**
       * If `true`, the user cannot interact with the button.
       * API info: https://ionicframework.com/docs/api/back-button#disabled
       */
      disabled?: boolean;

      /**
       * The built-in named SVG icon name or the exact `src` of an SVG file to use for the back button.
       * API info: https://ionicframework.com/docs/api/back-button#icon
       */
      icon?: null | string | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/back-button#mode
       */
      mode?: "ios" | "md";

      /**
       * When using a router, it specifies the transition animation when navigating to another page.
       * API info: https://ionicframework.com/docs/api/back-button#routeranimation
       */
      "router-animation"?: ((baseEl: any, opts?: any) => Animation) | undefined;

      /**
       * The text to display in the back button.
       * API info: https://ionicframework.com/docs/api/back-button#text
       */
      text?: null | string | undefined;

      /**
       * The type of the button.
       * API info: https://ionicframework.com/docs/api/back-button#type
       */
      type?: "button" | "reset" | "submit";
    }

    interface IonBackdrop {
      /**
       * If `true`, the backdrop will stop propagation on tap.
       * API info: https://ionicframework.com/docs/api/backdrop#stoppropagation
       */
      "stop-propagation"?: boolean;

      /**
       * If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.
       * API info: https://ionicframework.com/docs/api/backdrop#tappable
       */
      tappable?: boolean;

      /**
       * If `true`, the backdrop will be visible.
       * API info: https://ionicframework.com/docs/api/backdrop#visible
       */
      visible?: boolean;

      /**
       * () => void :  Emitted when the backdrop is tapped.
       */
      "on:ionBackdropTap"?: () => void;
    }

    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).
       * API info: https://ionicframework.com/docs/api/badge#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/badge#mode
       */
      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.
       * API info: https://ionicframework.com/docs/api/breadcrumb#active
       */
      active?: 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).
       * API info: https://ionicframework.com/docs/api/breadcrumb#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * If `true`, the user cannot interact with the breadcrumb.
       * API info: https://ionicframework.com/docs/api/breadcrumb#disabled
       */
      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).
       * API info: https://ionicframework.com/docs/api/breadcrumb#download
       */
      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.
       * API info: https://ionicframework.com/docs/api/breadcrumb#href
       */
      href?: string | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/breadcrumb#mode
       */
      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).
       * API info: https://ionicframework.com/docs/api/breadcrumb#rel
       */
      rel?: string | undefined;

      /**
       * When using a router, it specifies the transition animation when navigating to another page using `href`.
       * API info: https://ionicframework.com/docs/api/breadcrumb#routeranimation
       */
      "router-animation"?: ((baseEl: any, opts?: any) => Animation) | undefined;

      /**
       * When using a router, it specifies the transition direction when navigating to another page using `href`.
       * API info: https://ionicframework.com/docs/api/breadcrumb#routerdirection
       */
      "router-direction"?: "back" | "forward" | "root";

      /**
       * If true, show a separator between this breadcrumb and the next. Defaults to `true` for all breadcrumbs except the last.
       * API info: https://ionicframework.com/docs/api/breadcrumb#separator
       */
      separator?: boolean | undefined;

      /**
       * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
       * API info: https://ionicframework.com/docs/api/breadcrumb#target
       */
      target?: string | undefined;

      /**
       * () => void :  Emitted when the breadcrumb loses focus.
       */
      "on:ionBlur"?: () => void;

      /**
       * () => void :  Emitted when the breadcrumb has focus.
       */
      "on:ionFocus"?: () => void;
    }

    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).
       * API info: https://ionicframework.com/docs/api/breadcrumbs#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * The number of breadcrumbs to show after the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed.
       * API info: https://ionicframework.com/docs/api/breadcrumbs#itemsaftercollapse
       */
      "items-after-collapse"?: number;

      /**
       * The number of breadcrumbs to show before the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed.
       * API info: https://ionicframework.com/docs/api/breadcrumbs#itemsbeforecollapse
       */
      "items-before-collapse"?: number;

      /**
       * The maximum number of breadcrumbs to show before collapsing.
       * API info: https://ionicframework.com/docs/api/breadcrumbs#maxitems
       */
      "max-items"?: number | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/breadcrumbs#mode
       */
      mode?: "ios" | "md";

      /**
       * (event : BreadcrumbCollapsedClickEventDetail) => void :  Emitted when the collapsed indicator is clicked on.
       */
      "on:ionCollapsedClick"?: (
        event: CustomEvent<BreadcrumbCollapsedClickEventDetail> & {
          target: HTMLIonBreadcrumbsElement;
        },
      ) => void;
    }

    interface IonButton {
      /**
       * The type of button.
       * API info: https://ionicframework.com/docs/api/button#buttontype
       */
      "button-type"?: 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).
       * API info: https://ionicframework.com/docs/api/button#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * If `true`, the user cannot interact with the button.
       * API info: https://ionicframework.com/docs/api/button#disabled
       */
      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).
       * API info: https://ionicframework.com/docs/api/button#download
       */
      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.
       * API info: https://ionicframework.com/docs/api/button#expand
       */
      expand?: "block" | "full" | undefined;

      /**
       * 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"`.
       * API info: https://ionicframework.com/docs/api/button#fill
       */
      fill?: "clear" | "default" | "outline" | "solid" | undefined;

      /**
       * The HTML form element or form element id. Used to submit a form when the button is not a child of the form.
       * API info: https://ionicframework.com/docs/api/button#form
       */
      form?: HTMLFormElement | 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.
       * API info: https://ionicframework.com/docs/api/button#href
       */
      href?: string | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/button#mode
       */
      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).
       * API info: https://ionicframework.com/docs/api/button#rel
       */
      rel?: string | undefined;

      /**
       * When using a router, it specifies the transition animation when navigating to another page using `href`.
       * API info: https://ionicframework.com/docs/api/button#routeranimation
       */
      "router-animation"?: ((baseEl: any, opts?: any) => Animation) | undefined;

      /**
       * When using a router, it specifies the transition direction when navigating to another page using `href`.
       * API info: https://ionicframework.com/docs/api/button#routerdirection
       */
      "router-direction"?: "back" | "forward" | "root";

      /**
       * Set to `"round"` for a button with more rounded corners.
       * API info: https://ionicframework.com/docs/api/button#shape
       */
      shape?: "round" | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/button#size
       */
      size?: "default" | "large" | "small" | undefined;

      /**
       * If `true`, activates a button with a heavier font weight.
       * API info: https://ionicframework.com/docs/api/button#strong
       */
      strong?: boolean;

      /**
       * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
       * API info: https://ionicframework.com/docs/api/button#target
       */
      target?: string | undefined;

      /**
       * The type of the button.
       * API info: https://ionicframework.com/docs/api/button#type
       */
      type?: "button" | "reset" | "submit";

      /**
       * () => void :  Emitted when the button loses focus.
       */
      "on:ionBlur"?: () => void;

      /**
       * () => void :  Emitted when the button has focus.
       */
      "on:ionFocus"?: () => void;
    }

    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)
       * API info: https://ionicframework.com/docs/api/buttons#collapse
       */
      collapse?: boolean;
    }

    interface IonCard {
      /**
       * If `true`, a button tag will be rendered and the card will be tappable.
       * API info: https://ionicframework.com/docs/api/card#button
       */
      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).
       * API info: https://ionicframework.com/docs/api/card#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * If `true`, the user cannot interact with the card.
       * API info: https://ionicframework.com/docs/api/card#disabled
       */
      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).
       * API info: https://ionicframework.com/docs/api/card#download
       */
      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.
       * API info: https://ionicframework.com/docs/api/card#href
       */
      href?: string | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/card#mode
       */
      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).
       * API info: https://ionicframework.com/docs/api/card#rel
       */
      rel?: string | undefined;

      /**
       * When using a router, it specifies the transition animation when navigating to another page using `href`.
       * API info: https://ionicframework.com/docs/api/card#routeranimation
       */
      "router-animation"?: ((baseEl: any, opts?: any) => Animation) | undefined;

      /**
       * When using a router, it specifies the transition direction when navigating to another page using `href`.
       * API info: https://ionicframework.com/docs/api/card#routerdirection
       */
      "router-direction"?: "back" | "forward" | "root";

      /**
       * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
       * API info: https://ionicframework.com/docs/api/card#target
       */
      target?: string | undefined;

      /**
       * The type of the button. Only used when an `onclick` or `button` property is present.
       * API info: https://ionicframework.com/docs/api/card#type
       */
      type?: "button" | "reset" | "submit";
    }

    interface IonCardContent {
      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/card-content#mode
       */
      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).
       * API info: https://ionicframework.com/docs/api/card-header#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/card-header#mode
       */
      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).
       * API info: https://ionicframework.com/docs/api/card-header#translucent
       */
      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).
       * API info: https://ionicframework.com/docs/api/card-subtitle#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/card-subtitle#mode
       */
      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).
       * API info: https://ionicframework.com/docs/api/card-title#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/card-title#mode
       */
      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`.
       * API info: https://ionicframework.com/docs/api/checkbox#alignment
       */
      alignment?: "center" | "start" | undefined;

      /**
       * If `true`, the checkbox is selected.
       * API info: https://ionicframework.com/docs/api/checkbox#checked
       */
      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).
       * API info: https://ionicframework.com/docs/api/checkbox#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * If `true`, the user cannot interact with the checkbox.
       * API info: https://ionicframework.com/docs/api/checkbox#disabled
       */
      disabled?: boolean;

      /**
       * Text that is placed under the checkbox label and displayed when an error is detected.
       * API info: https://ionicframework.com/docs/api/checkbox#errortext
       */
      "error-text"?: string | undefined;

      /**
       * Text that is placed under the checkbox label and displayed when no error is detected.
       * API info: https://ionicframework.com/docs/api/checkbox#helpertext
       */
      "helper-text"?: string | undefined;

      /**
       * If `true`, the checkbox will visually appear as indeterminate.
       * API info: https://ionicframework.com/docs/api/checkbox#indeterminate
       */
      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`.
       * API info: https://ionicframework.com/docs/api/checkbox#justify
       */
      justify?: "end" | "space-between" | "start" | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/checkbox#labelplacement
       */
      "label-placement"?: "end" | "fixed" | "stacked" | "start";

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/checkbox#mode
       */
      mode?: "ios" | "md";

      /**
       * The name of the control, which is submitted with the form data.
       * API info: https://ionicframework.com/docs/api/checkbox#name
       */
      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.
       * API info: https://ionicframework.com/docs/api/checkbox#required
       */
      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>`.
       * API info: https://ionicframework.com/docs/api/checkbox#value
       */
      value?: any;

      /**
       * () => void :  Emitted when the checkbox loses focus.
       */
      "on:ionBlur"?: () => void;

      /**
       * (event : CheckboxChangeEventDetail<any>) => 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.
       */
      "on:ionChange"?: (
        event: CustomEvent<CheckboxChangeEventDetail<any>> & {
          target: HTMLIonCheckboxElement;
        },
      ) => void;

      /**
       * () => void :  Emitted when the checkbox has focus.
       */
      "on:ionFocus"?: () => void;
    }

    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).
       * API info: https://ionicframework.com/docs/api/chip#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * If `true`, the user cannot interact with the chip.
       * API info: https://ionicframework.com/docs/api/chip#disabled
       */
      disabled?: boolean;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/chip#mode
       */
      mode?: "ios" | "md";

      /**
       * Display an outline style button.
       * API info: https://ionicframework.com/docs/api/chip#outline
       */
      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.
       * API info: https://ionicframework.com/docs/api/col#offset
       */
      offset?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/col#offsetlg
       */
      "offset-lg"?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/col#offsetmd
       */
      "offset-md"?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/col#offsetsm
       */
      "offset-sm"?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/col#offsetxl
       */
      "offset-xl"?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/col#offsetxs
       */
      "offset-xs"?: string | undefined;

      /**
       * The amount to pull the column, in terms of how many columns it should shift to the start of the total available.
       * API info: https://ionicframework.com/docs/api/col#pull
       */
      pull?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/col#pulllg
       */
      "pull-lg"?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/col#pullmd
       */
      "pull-md"?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/col#pullsm
       */
      "pull-sm"?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/col#pullxl
       */
      "pull-xl"?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/col#pullxs
       */
      "pull-xs"?: string | undefined;

      /**
       * The amount to push the column, in terms of how many columns it should shift to the end of the total available.
       * API info: https://ionicframework.com/docs/api/col#push
       */
      push?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/col#pushlg
       */
      "push-lg"?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/col#pushmd
       */
      "push-md"?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/col#pushsm
       */
      "push-sm"?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/col#pushxl
       */
      "push-xl"?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/col#pushxs
       */
      "push-xs"?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/col#size
       */
      size?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/col#sizelg
       */
      "size-lg"?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/col#sizemd
       */
      "size-md"?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/col#sizesm
       */
      "size-sm"?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/col#sizexl
       */
      "size-xl"?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/col#sizexs
       */
      "size-xs"?: string | undefined;
    }

    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).
       * API info: https://ionicframework.com/docs/api/content#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * 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'`.
       * API info: https://ionicframework.com/docs/api/content#fixedslotplacement
       */
      "fixed-slot-placement"?: "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.
       * API info: https://ionicframework.com/docs/api/content#forceoverscroll
       */
      "force-overscroll"?: boolean | undefined;

      /**
       * If `true`, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent.
       * API info: https://ionicframework.com/docs/api/content#fullscreen
       */
      fullscreen?: boolean;

      /**
       * 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`.
       * API info: https://ionicframework.com/docs/api/content#scrollevents
       */
      "scroll-events"?: boolean;

      /**
       * If you want to enable the content scrolling in the X axis, set this property to `true`.
       * API info: https://ionicframework.com/docs/api/content#scrollx
       */
      "scroll-x"?: boolean;

      /**
       * If you want to disable the content scrolling in the Y axis, set this property to `false`.
       * API info: https://ionicframework.com/docs/api/content#scrolly
       */
      "scroll-y"?: boolean;

      /**
       * (event : ScrollDetail) => void :  Emitted while scrolling. This event is disabled by default. Set `scrollEvents` to `true` to enable.
       */
      "on:ionScroll"?: (
        event: CustomEvent<ScrollDetail> & { target: HTMLIonContentElement },
      ) => void;

      /**
       * (event : ScrollBaseDetail) => void :  Emitted when the scroll has ended. This event is disabled by default. Set `scrollEvents` to `true` to enable.
       */
      "on:ionScrollEnd"?: (
        event: CustomEvent<ScrollBaseDetail> & {
          target: HTMLIonContentElement;
        },
      ) => void;

      /**
       * (event : ScrollBaseDetail) => void :  Emitted when the scroll has started. This event is disabled by default. Set `scrollEvents` to `true` to enable.
       */
      "on:ionScrollStart"?: (
        event: CustomEvent<ScrollBaseDetail> & {
          target: HTMLIonContentElement;
        },
      ) => void;
    }

    interface IonDatetime {
      /**
       * The text to display on the picker's cancel button.
       * API info: https://ionicframework.com/docs/api/datetime#canceltext
       */
      "cancel-text"?: string;

      /**
       * The text to display on the picker's "Clear" button.
       * API info: https://ionicframework.com/docs/api/datetime#cleartext
       */
      "clear-text"?: 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).
       * API info: https://ionicframework.com/docs/api/datetime#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/datetime#dayvalues
       */
      "day-values"?: number | number[] | string | undefined;

      /**
       * If `true`, the user cannot interact with the datetime.
       * API info: https://ionicframework.com/docs/api/datetime#disabled
       */
      disabled?: boolean;

      /**
       * The text to display on the picker's "Done" button.
       * API info: https://ionicframework.com/docs/api/datetime#donetext
       */
      "done-text"?: string;

      /**
       * The first day of the week to use for `ion-datetime`. The default value is `0` and represents Sunday.
       * API info: https://ionicframework.com/docs/api/datetime#firstdayofweek
       */
      "first-day-of-week"?: 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).
       * API info: https://ionicframework.com/docs/api/datetime#formatoptions
       */
      "format-options"?:
        | undefined
        | {
            date: DateTimeFormatOptions;
            time?: DateTimeFormatOptions | undefined;
          }
        | {
            date?: DateTimeFormatOptions | undefined;
            time: DateTimeFormatOptions;
          };

      /**
       * 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"`.
       * API info: https://ionicframework.com/docs/api/datetime#highlighteddates
       */
      "highlighted-dates"?:
        | ((dateIsoString: string) => DatetimeHighlightStyle | undefined)
        | DatetimeHighlight[]
        | undefined;

      /**
       * The hour cycle of the `ion-datetime`. If no value is set, this is specified by the current locale.
       * API info: https://ionicframework.com/docs/api/datetime#hourcycle
       */
      "hour-cycle"?: "h11" | "h12" | "h23" | "h24" | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/datetime#hourvalues
       */
      "hour-values"?: number | number[] | string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/datetime#isdateenabled
       */
      "is-date-enabled"?: ((dateIsoString: string) => boolean) | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/datetime#locale
       */
      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.
       * API info: https://ionicframework.com/docs/api/datetime#max
       */
      max?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/datetime#min
       */
      min?: string | undefined;

      /**
       * 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"`.
       * API info: https://ionicframework.com/docs/api/datetime#minutevalues
       */
      "minute-values"?: number | number[] | string | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/datetime#mode
       */
      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`.
       * API info: https://ionicframework.com/docs/api/datetime#monthvalues
       */
      "month-values"?: number | number[] | string | undefined;

      /**
       * If `true`, multiple dates can be selected at once. Only applies to `presentation="date"` and `preferWheel="false"`.
       * API info: https://ionicframework.com/docs/api/datetime#multiple
       */
      multiple?: boolean;

      /**
       * The name of the control, which is submitted with the form data.
       * API info: https://ionicframework.com/docs/api/datetime#name
       */
      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"`.
       * API info: https://ionicframework.com/docs/api/datetime#preferwheel
       */
      "prefer-wheel"?: 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.
       * API info: https://ionicframework.com/docs/api/datetime#presentation
       */
      presentation?:
        | "date"
        | "date-time"
        | "month"
        | "month-year"
        | "time"
        | "time-date"
        | "year";

      /**
       * If `true`, the datetime appears normal but the selected date cannot be changed.
       * API info: https://ionicframework.com/docs/api/datetime#readonly
       */
      readonly?: 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.
       * API info: https://ionicframework.com/docs/api/datetime#showclearbutton
       */
      "show-clear-button"?: 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.
       * API info: https://ionicframework.com/docs/api/datetime#showdefaultbuttons
       */
      "show-default-buttons"?: 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.
       * API info: https://ionicframework.com/docs/api/datetime#showdefaulttimelabel
       */
      "show-default-time-label"?: boolean;

      /**
       * If `true`, a header will be shown above the calendar picker. This will include both the slotted title, and the selected date.
       * API info: https://ionicframework.com/docs/api/datetime#showdefaulttitle
       */
      "show-default-title"?: 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.
       * API info: https://ionicframework.com/docs/api/datetime#size
       */
      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.
       * API info: https://ionicframework.com/docs/api/datetime#titleselecteddatesformatter
       */
      "title-selected-dates-formatter"?:
        | ((selectedDates: string[]) => string)
        | undefined;

      /**
       * The value of the datetime as a valid ISO 8601 datetime string. This should be an array of strings only when `multiple="true"`.
       * API info: https://ionicframework.com/docs/api/datetime#value
       */
      value?: null | string | string[] | undefined;

      /**
       * 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"`.
       * API info: https://ionicframework.com/docs/api/datetime#yearvalues
       */
      "year-values"?: number | number[] | string | undefined;

      /**
       * () => void :  Emitted when the datetime loses focus.
       */
      "on:ionBlur"?: () => void;

      /**
       * () => void :  Emitted when the datetime selection was cancelled.
       */
      "on:ionCancel"?: () => void;

      /**
       * (event : DatetimeChangeEventDetail) => void :  Emitted when the value (selected date) has changed.  This event will not emit when programmatically setting the `value` property.
       */
      "on:ionChange"?: (
        event: CustomEvent<DatetimeChangeEventDetail> & {
          target: HTMLIonDatetimeElement;
        },
      ) => void;

      /**
       * () => void :  Emitted when the datetime has focus.
       */
      "on:ionFocus"?: () => void;
    }

    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).
       * API info: https://ionicframework.com/docs/api/datetime-button#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * The ID of the `ion-datetime` instance associated with the datetime button.
       * API info: https://ionicframework.com/docs/api/datetime-button#datetime
       */
      datetime?: string | undefined;

      /**
       * If `true`, the user cannot interact with the button.
       * API info: https://ionicframework.com/docs/api/datetime-button#disabled
       */
      disabled?: boolean;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/datetime-button#mode
       */
      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.
       * API info: https://ionicframework.com/docs/api/fab#activated
       */
      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.
       * API info: https://ionicframework.com/docs/api/fab#edge
       */
      edge?: boolean;

      /**
       * Where to align the fab horizontally in the viewport.
       * API info: https://ionicframework.com/docs/api/fab#horizontal
       */
      horizontal?: "center" | "end" | "start" | undefined;

      /**
       * Where to align the fab vertically in the viewport.
       * API info: https://ionicframework.com/docs/api/fab#vertical
       */
      vertical?: "bottom" | "center" | "top" | undefined;
    }

    interface IonFabButton {
      /**
       * If `true`, the fab button will be show a close icon.
       * API info: https://ionicframework.com/docs/api/fab-button#activated
       */
      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.
       * API info: https://ionicframework.com/docs/api/fab-button#closeicon
       */
      "close-icon"?: 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).
       * API info: https://ionicframework.com/docs/api/fab-button#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * If `true`, the user cannot interact with the fab button.
       * API info: https://ionicframework.com/docs/api/fab-button#disabled
       */
      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).
       * API info: https://ionicframework.com/docs/api/fab-button#download
       */
      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.
       * API info: https://ionicframework.com/docs/api/fab-button#href
       */
      href?: string | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/fab-button#mode
       */
      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).
       * API info: https://ionicframework.com/docs/api/fab-button#rel
       */
      rel?: string | undefined;

      /**
       * When using a router, it specifies the transition animation when navigating to another page using `href`.
       * API info: https://ionicframework.com/docs/api/fab-button#routeranimation
       */
      "router-animation"?: ((baseEl: any, opts?: any) => Animation) | undefined;

      /**
       * When using a router, it specifies the transition direction when navigating to another page using `href`.
       * API info: https://ionicframework.com/docs/api/fab-button#routerdirection
       */
      "router-direction"?: "back" | "forward" | "root";

      /**
       * If `true`, the fab button will show when in a fab-list.
       * API info: https://ionicframework.com/docs/api/fab-button#show
       */
      show?: boolean;

      /**
       * The size of the button. Set this to `small` in order to have a mini fab button.
       * API info: https://ionicframework.com/docs/api/fab-button#size
       */
      size?: "small" | undefined;

      /**
       * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
       * API info: https://ionicframework.com/docs/api/fab-button#target
       */
      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).
       * API info: https://ionicframework.com/docs/api/fab-button#translucent
       */
      translucent?: boolean;

      /**
       * The type of the button.
       * API info: https://ionicframework.com/docs/api/fab-button#type
       */
      type?: "button" | "reset" | "submit";

      /**
       * () => void :  Emitted when the button loses focus.
       */
      "on:ionBlur"?: () => void;

      /**
       * () => void :  Emitted when the button has focus.
       */
      "on:ionFocus"?: () => void;
    }

    interface IonFabList {
      /**
       * If `true`, the fab list will show all fab buttons in the list.
       * API info: https://ionicframework.com/docs/api/fab-list#activated
       */
      activated?: boolean;

      /**
       * The side the fab list will show on relative to the main fab button.
       * API info: https://ionicframework.com/docs/api/fab-list#side
       */
      side?: "bottom" | "end" | "start" | "top";
    }

    interface IonFooter {
      /**
       * Describes the scroll effect that will be applied to the footer. Only applies in iOS mode.
       * API info: https://ionicframework.com/docs/api/footer#collapse
       */
      collapse?: "fade" | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/footer#mode
       */
      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.
       * API info: https://ionicframework.com/docs/api/footer#translucent
       */
      translucent?: boolean;
    }

    interface IonGrid {
      /**
       * If `true`, the grid will have a fixed width based on the screen size.
       * API info: https://ionicframework.com/docs/api/grid#fixed
       */
      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)
       * API info: https://ionicframework.com/docs/api/header#collapse
       */
      collapse?: "condense" | "fade" | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/header#mode
       */
      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.
       * API info: https://ionicframework.com/docs/api/header#translucent
       */
      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.
       * API info: https://ionicframework.com/docs/api/img#alt
       */
      alt?: string | undefined;

      /**
       * The image URL. This attribute is mandatory for the `<img>` element.
       * API info: https://ionicframework.com/docs/api/img#src
       */
      src?: string | undefined;

      /**
       * () => void :  Emitted when the img fails to load
       */
      "on:ionError"?: () => void;

      /**
       * () => void :  Emitted when the image has finished loading
       */
      "on:ionImgDidLoad"?: () => void;

      /**
       * () => void :  Emitted when the img src has been set
       */
      "on:ionImgWillLoad"?: () => void;
    }

    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.
       * API info: https://ionicframework.com/docs/api/infinite-scroll#disabled
       */
      disabled?: boolean;

      /**
       * The position of the infinite scroll element. The value can be either `top` or `bottom`.
       * API info: https://ionicframework.com/docs/api/infinite-scroll#position
       */
      position?: "bottom" | "top";

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/infinite-scroll#threshold
       */
      threshold?: string;

      /**
       * () => void :  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.
       */
      "on:ionInfinite"?: () => void;
    }

    interface IonInfiniteScrollContent {
      /**
       * An animated SVG spinner that shows while loading.
       * API info: https://ionicframework.com/docs/api/infinite-scroll-content#loadingspinner
       */
      "loading-spinner"?:
        | "bubbles"
        | "circles"
        | "circular"
        | "crescent"
        | "dots"
        | "lines"
        | "lines-sharp"
        | "lines-sharp-small"
        | "lines-small"
        | null
        | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/infinite-scroll-content#loadingtext
       */
      "loading-text"?: IonicSafeString | string | undefined;
    }

    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"`.
       * API info: https://ionicframework.com/docs/api/input#autocapitalize
       */
      autocapitalize?: string;

      /**
       * Indicates whether the value of the control can be automatically completed by the browser.
       * API info: https://ionicframework.com/docs/api/input#autocomplete
       */
      autocomplete?:
        | "name"
        | "email"
        | "tel"
        | "url"
        | "on"
        | "off"
        | "honorific-prefix"
        | "given-name"
        | "additional-name"
        | "family-name"
        | "honorific-suffix"
        | "nickname"
        | "username"
        | "new-password"
        | "current-password"
        | "one-time-code"
        | "organization-title"
        | "organization"
        | "street-address"
        | "address-line1"
        | "address-line2"
        | "address-line3"
        | "address-level4"
        | "address-level3"
        | "address-level2"
        | "address-level1"
        | "country"
        | "country-name"
        | "postal-code"
        | "cc-name"
        | "cc-given-name"
        | "cc-additional-name"
        | "cc-family-name"
        | "cc-number"
        | "cc-exp"
        | "cc-exp-month"
        | "cc-exp-year"
        | "cc-csc"
        | "cc-type"
        | "transaction-currency"
        | "transaction-amount"
        | "language"
        | "bday"
        | "bday-day"
        | "bday-month"
        | "bday-year"
        | "sex"
        | "tel-country-code"
        | "tel-national"
        | "tel-area-code"
        | "tel-local"
        | "tel-extension"
        | "impp"
        | "photo";

      /**
       * Whether auto correction should be enabled when the user is entering/editing the text value.
       * API info: https://ionicframework.com/docs/api/input#autocorrect
       */
      autocorrect?: "off" | "on";

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/input#autofocus
       */
      autofocus?: boolean;

      /**
       * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
       * API info: https://ionicframework.com/docs/api/input#clearinput
       */
      "clear-input"?: boolean;

      /**
       * The icon to use for the clear button. Only applies when `clearInput` is set to `true`.
       * API info: https://ionicframework.com/docs/api/input#clearinputicon
       */
      "clear-input-icon"?: string | undefined;

      /**
       * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
       * API info: https://ionicframework.com/docs/api/input#clearonedit
       */
      "clear-on-edit"?: boolean | undefined;

      /**
       * 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).
       * API info: https://ionicframework.com/docs/api/input#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/input#counter
       */
      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.
       * API info: https://ionicframework.com/docs/api/input#counterformatter
       */
      "counter-formatter"?:
        | ((inputLength: number, maxLength: number) => string)
        | undefined;

      /**
       * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
       * API info: https://ionicframework.com/docs/api/input#debounce
       */
      debounce?: number | undefined;

      /**
       * If `true`, the user cannot interact with the input.
       * API info: https://ionicframework.com/docs/api/input#disabled
       */
      disabled?: boolean;

      /**
       * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
       * API info: https://ionicframework.com/docs/api/input#enterkeyhint
       */
      enterkeyhint?:
        | "done"
        | "enter"
        | "go"
        | "next"
        | "previous"
        | "search"
        | "send"
        | undefined;

      /**
       * Text that is placed under the input and displayed when an error is detected.
       * API info: https://ionicframework.com/docs/api/input#errortext
       */
      "error-text"?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/input#fill
       */
      fill?: "outline" | "solid" | undefined;

      /**
       * Text that is placed under the input and displayed when no error is detected.
       * API info: https://ionicframework.com/docs/api/input#helpertext
       */
      "helper-text"?: string | undefined;

      /**
       * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
       * API info: https://ionicframework.com/docs/api/input#inputmode
       */
      inputmode?:
        | "decimal"
        | "email"
        | "none"
        | "numeric"
        | "search"
        | "tel"
        | "text"
        | "url"
        | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/input#label
       */
      label?: string | undefined;

      /**
       * 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 ("...").
       * API info: https://ionicframework.com/docs/api/input#labelplacement
       */
      "label-placement"?: "end" | "fixed" | "floating" | "stacked" | "start";

      /**
       * The maximum value, which must not be less than its minimum (min attribute) value.
       * API info: https://ionicframework.com/docs/api/input#max
       */
      max?: number | string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/input#maxlength
       */
      maxlength?: number | undefined;

      /**
       * The minimum value, which must not be greater than its maximum (max attribute) value.
       * API info: https://ionicframework.com/docs/api/input#min
       */
      min?: number | string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/input#minlength
       */
      minlength?: number | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/input#mode
       */
      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.
       * API info: https://ionicframework.com/docs/api/input#multiple
       */
      multiple?: boolean | undefined;

      /**
       * The name of the control, which is submitted with the form data.
       * API info: https://ionicframework.com/docs/api/input#name
       */
      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.
       * API info: https://ionicframework.com/docs/api/input#pattern
       */
      pattern?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/input#placeholder
       */
      placeholder?: string | undefined;

      /**
       * If `true`, the user cannot modify the value.
       * API info: https://ionicframework.com/docs/api/input#readonly
       */
      readonly?: boolean;

      /**
       * If `true`, the user must fill in a value before submitting a form.
       * API info: https://ionicframework.com/docs/api/input#required
       */
      required?: boolean;

      /**
       * The shape of the input. If "round" it will have an increased border radius.
       * API info: https://ionicframework.com/docs/api/input#shape
       */
      shape?: "round" | undefined;

      /**
       * If `true`, the element will have its spelling and grammar checked.
       * API info: https://ionicframework.com/docs/api/input#spellcheck
       */
      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.
       * API info: https://ionicframework.com/docs/api/input#step
       */
      step?: string | undefined;

      /**
       * The type of control to display. The default type is text.
       * API info: https://ionicframework.com/docs/api/input#type
       */
      type?:
        | "date"
        | "datetime-local"
        | "email"
        | "month"
        | "number"
        | "password"
        | "search"
        | "tel"
        | "text"
        | "time"
        | "url"
        | "week";

      /**
       * The value of the input.
       * API info: https://ionicframework.com/docs/api/input#value
       */
      value?: null | number | string | undefined;

      /**
       * (event : FocusEvent) => void :  Emitted when the input loses focus.
       */
      "on:ionBlur"?: (
        event: CustomEvent<FocusEvent> & { target: HTMLIonInputElement },
      ) => void;

      /**
       * (event : InputChangeEventDetail) => 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.
       */
      "on:ionChange"?: (
        event: CustomEvent<InputChangeEventDetail> & {
          target: HTMLIonInputElement;
        },
      ) => void;

      /**
       * (event : FocusEvent) => void :  Emitted when the input has focus.
       */
      "on:ionFocus"?: (
        event: CustomEvent<FocusEvent> & { target: HTMLIonInputElement },
      ) => void;

      /**
       * (event : InputInputEventDetail) => 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`.
       */
      "on:ionInput"?: (
        event: CustomEvent<InputInputEventDetail> & {
          target: HTMLIonInputElement;
        },
      ) => void;
    }

    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).
       * API info: https://ionicframework.com/docs/api/input-password-toggle#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * The icon that can be used to represent hiding a password. If not set, the "eyeOff" Ionicon will be used.
       * API info: https://ionicframework.com/docs/api/input-password-toggle#hideicon
       */
      "hide-icon"?: string | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/input-password-toggle#mode
       */
      mode?: "ios" | "md";

      /**
       * The icon that can be used to represent showing a password. If not set, the "eye" Ionicon will be used.
       * API info: https://ionicframework.com/docs/api/input-password-toggle#showicon
       */
      "show-icon"?: string | undefined;
    }

    interface IonItem {
      /**
       * If `true`, a button tag will be rendered and the item will be tappable.
       * API info: https://ionicframework.com/docs/api/item#button
       */
      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).
       * API info: https://ionicframework.com/docs/api/item#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/item#detail
       */
      detail?: boolean | undefined;

      /**
       * The icon to use when `detail` is set to `true`.
       * API info: https://ionicframework.com/docs/api/item#detailicon
       */
      "detail-icon"?: string;

      /**
       * If `true`, the user cannot interact with the item.
       * API info: https://ionicframework.com/docs/api/item#disabled
       */
      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).
       * API info: https://ionicframework.com/docs/api/item#download
       */
      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.
       * API info: https://ionicframework.com/docs/api/item#href
       */
      href?: string | undefined;

      /**
       * How the bottom border should be displayed on the item.
       * API info: https://ionicframework.com/docs/api/item#lines
       */
      lines?: "full" | "inset" | "none" | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/item#mode
       */
      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).
       * API info: https://ionicframework.com/docs/api/item#rel
       */
      rel?: string | undefined;

      /**
       * When using a router, it specifies the transition animation when navigating to another page using `href`.
       * API info: https://ionicframework.com/docs/api/item#routeranimation
       */
      "router-animation"?: ((baseEl: any, opts?: any) => Animation) | undefined;

      /**
       * When using a router, it specifies the transition direction when navigating to another page using `href`.
       * API info: https://ionicframework.com/docs/api/item#routerdirection
       */
      "router-direction"?: "back" | "forward" | "root";

      /**
       * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
       * API info: https://ionicframework.com/docs/api/item#target
       */
      target?: string | undefined;

      /**
       * The type of the button. Only used when an `onclick` or `button` property is present.
       * API info: https://ionicframework.com/docs/api/item#type
       */
      type?: "button" | "reset" | "submit";
    }

    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).
       * API info: https://ionicframework.com/docs/api/item-divider#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/item-divider#mode
       */
      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
       * API info: https://ionicframework.com/docs/api/item-divider#sticky
       */
      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).
       * API info: https://ionicframework.com/docs/api/item-option#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * If `true`, the user cannot interact with the item option.
       * API info: https://ionicframework.com/docs/api/item-option#disabled
       */
      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).
       * API info: https://ionicframework.com/docs/api/item-option#download
       */
      download?: string | undefined;

      /**
       * If `true`, the option will expand to take up the available width and cover any other options.
       * API info: https://ionicframework.com/docs/api/item-option#expandable
       */
      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.
       * API info: https://ionicframework.com/docs/api/item-option#href
       */
      href?: string | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/item-option#mode
       */
      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).
       * API info: https://ionicframework.com/docs/api/item-option#rel
       */
      rel?: string | undefined;

      /**
       * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
       * API info: https://ionicframework.com/docs/api/item-option#target
       */
      target?: string | undefined;

      /**
       * The type of the button.
       * API info: https://ionicframework.com/docs/api/item-option#type
       */
      type?: "button" | "reset" | "submit";
    }

    interface IonItemOptions {
      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/item-options#side
       */
      side?: "end" | "start";

      /**
       * (event : any) => void :  Emitted when the item has been fully swiped.
       */
      "on:ionSwipe"?: (
        event: CustomEvent<any> & { target: HTMLIonItemOptionsElement },
      ) => void;
    }

    interface IonItemSliding {
      /**
       * If `true`, the user cannot interact with the sliding item.
       * API info: https://ionicframework.com/docs/api/item-sliding#disabled
       */
      disabled?: boolean;

      /**
       * (event : any) => void :  Emitted when the sliding position changes.
       */
      "on:ionDrag"?: (
        event: CustomEvent<any> & { target: HTMLIonItemSlidingElement },
      ) => 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).
       * API info: https://ionicframework.com/docs/api/label#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/label#mode
       */
      mode?: "ios" | "md";

      /**
       * The position determines where and how the label behaves inside an item.
       * API info: https://ionicframework.com/docs/api/label#position
       */
      position?: "fixed" | "floating" | "stacked" | undefined;
    }

    interface IonList {
      /**
       * If `true`, the list will have margin around it and rounded corners.
       * API info: https://ionicframework.com/docs/api/list#inset
       */
      inset?: boolean;

      /**
       * How the bottom border should be displayed on all items.
       * API info: https://ionicframework.com/docs/api/list#lines
       */
      lines?: "full" | "inset" | "none" | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/list#mode
       */
      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).
       * API info: https://ionicframework.com/docs/api/list-header#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * How the bottom border should be displayed on the list header.
       * API info: https://ionicframework.com/docs/api/list-header#lines
       */
      lines?: "full" | "inset" | "none" | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/list-header#mode
       */
      mode?: "ios" | "md";
    }

    interface IonLoading {
      /**
       * If `true`, the loading indicator will animate.
       * API info: https://ionicframework.com/docs/api/loading#animated
       */
      animated?: boolean;

      /**
       * If `true`, the loading indicator will be dismissed when the backdrop is clicked.
       * API info: https://ionicframework.com/docs/api/loading#backdropdismiss
       */
      "backdrop-dismiss"?: boolean;

      /**
       * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
       * API info: https://ionicframework.com/docs/api/loading#cssclass
       */
      "css-class"?: string | string[] | undefined;

      /**
       * Number of milliseconds to wait before dismissing the loading indicator.
       * API info: https://ionicframework.com/docs/api/loading#duration
       */
      duration?: number;

      /**
       * Animation to use when the loading indicator is presented.
       * API info: https://ionicframework.com/docs/api/loading#enteranimation
       */
      "enter-animation"?: ((baseEl: any, opts?: any) => Animation) | undefined;

      /**
       * Additional attributes to pass to the loader.
       * API info: https://ionicframework.com/docs/api/loading#htmlattributes
       */
      "html-attributes"?: undefined | { [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.
       * API info: https://ionicframework.com/docs/api/loading#isopen
       */
      "is-open"?: boolean;

      /**
       * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
       * API info: https://ionicframework.com/docs/api/loading#keyboardclose
       */
      "keyboard-close"?: boolean;

      /**
       * Animation to use when the loading indicator is dismissed.
       * API info: https://ionicframework.com/docs/api/loading#leaveanimation
       */
      "leave-animation"?: ((baseEl: any, opts?: any) => Animation) | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/loading#message
       */
      message?: IonicSafeString | string | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/loading#mode
       */
      mode?: "ios" | "md";

      /**
       * If `true`, a backdrop will be displayed behind the loading indicator.
       * API info: https://ionicframework.com/docs/api/loading#showbackdrop
       */
      "show-backdrop"?: boolean;

      /**
       * The name of the spinner to display.
       * API info: https://ionicframework.com/docs/api/loading#spinner
       */
      spinner?:
        | "bubbles"
        | "circles"
        | "circular"
        | "crescent"
        | "dots"
        | "lines"
        | "lines-sharp"
        | "lines-sharp-small"
        | "lines-small"
        | null
        | undefined;

      /**
       * 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).
       * API info: https://ionicframework.com/docs/api/loading#translucent
       */
      translucent?: boolean;

      /**
       * An ID corresponding to the trigger element that causes the loading indicator to open when clicked.
       * API info: https://ionicframework.com/docs/api/loading#trigger
       */
      trigger?: string | undefined;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted after the loading indicator has dismissed. Shorthand for ionLoadingDidDismiss.
       */
      "on:didDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonLoadingElement;
        },
      ) => void;

      /**
       * () => void :  Emitted after the loading indicator has presented. Shorthand for ionLoadingWillDismiss.
       */
      "on:didPresent"?: () => void;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted after the loading has dismissed.
       */
      "on:ionLoadingDidDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonLoadingElement;
        },
      ) => void;

      /**
       * () => void :  Emitted after the loading has presented.
       */
      "on:ionLoadingDidPresent"?: () => void;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted before the loading has dismissed.
       */
      "on:ionLoadingWillDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonLoadingElement;
        },
      ) => void;

      /**
       * () => void :  Emitted before the loading has presented.
       */
      "on:ionLoadingWillPresent"?: () => void;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted before the loading indicator has dismissed. Shorthand for ionLoadingWillDismiss.
       */
      "on:willDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonLoadingElement;
        },
      ) => void;

      /**
       * () => void :  Emitted before the loading indicator has presented. Shorthand for ionLoadingWillPresent.
       */
      "on:willPresent"?: () => void;
    }

    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`.
       * API info: https://ionicframework.com/docs/api/menu#contentid
       */
      "content-id"?: string | undefined;

      /**
       * If `true`, the menu is disabled.
       * API info: https://ionicframework.com/docs/api/menu#disabled
       */
      disabled?: boolean;

      /**
       * The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered.
       * API info: https://ionicframework.com/docs/api/menu#maxedgestart
       */
      "max-edge-start"?: number;

      /**
       * An id for the menu.
       * API info: https://ionicframework.com/docs/api/menu#menuid
       */
      "menu-id"?: string | undefined;

      /**
       * Which side of the view the menu should be placed.
       * API info: https://ionicframework.com/docs/api/menu#side
       */
      side?: "end" | "start";

      /**
       * If `true`, swiping the menu is enabled.
       * API info: https://ionicframework.com/docs/api/menu#swipegesture
       */
      "swipe-gesture"?: boolean;

      /**
       * The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`.
       * API info: https://ionicframework.com/docs/api/menu#type
       */
      type?: "overlay" | "push" | "reveal" | undefined;

      /**
       * (event : MenuCloseEventDetail) => void :  Emitted when the menu is closed.
       */
      "on:ionDidClose"?: (
        event: CustomEvent<MenuCloseEventDetail> & {
          target: HTMLIonMenuElement;
        },
      ) => void;

      /**
       * () => void :  Emitted when the menu is open.
       */
      "on:ionDidOpen"?: () => void;

      /**
       * (event : MenuCloseEventDetail) => void :  Emitted when the menu is about to be closed.
       */
      "on:ionWillClose"?: (
        event: CustomEvent<MenuCloseEventDetail> & {
          target: HTMLIonMenuElement;
        },
      ) => void;

      /**
       * () => void :  Emitted when the menu is about to be opened.
       */
      "on:ionWillOpen"?: () => void;
    }

    interface IonMenuButton {
      /**
       * Automatically hides the menu button when the corresponding menu is not active
       * API info: https://ionicframework.com/docs/api/menu-button#autohide
       */
      "auto-hide"?: 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).
       * API info: https://ionicframework.com/docs/api/menu-button#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * If `true`, the user cannot interact with the menu button.
       * API info: https://ionicframework.com/docs/api/menu-button#disabled
       */
      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
       * API info: https://ionicframework.com/docs/api/menu-button#menu
       */
      menu?: string | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/menu-button#mode
       */
      mode?: "ios" | "md";

      /**
       * The type of the button.
       * API info: https://ionicframework.com/docs/api/menu-button#type
       */
      type?: "button" | "reset" | "submit";
    }

    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.
       * API info: https://ionicframework.com/docs/api/menu-toggle#autohide
       */
      "auto-hide"?: 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.
       * API info: https://ionicframework.com/docs/api/menu-toggle#menu
       */
      menu?: string | undefined;
    }

    interface IonModal {
      /**
       * If `true`, the modal will animate.
       * API info: https://ionicframework.com/docs/api/modal#animated
       */
      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.
       * API info: https://ionicframework.com/docs/api/modal#backdropbreakpoint
       */
      "backdrop-breakpoint"?: number;

      /**
       * If `true`, the modal will be dismissed when the backdrop is clicked.
       * API info: https://ionicframework.com/docs/api/modal#backdropdismiss
       */
      "backdrop-dismiss"?: 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]
       * API info: https://ionicframework.com/docs/api/modal#breakpoints
       */
      breakpoints?: number[] | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/modal#candismiss
       */
      "can-dismiss"?:
        | ((data?: any, role?: string | undefined) => Promise<boolean>)
        | boolean;

      /**
       * Animation to use when the modal is presented.
       * API info: https://ionicframework.com/docs/api/modal#enteranimation
       */
      "enter-animation"?: ((baseEl: any, opts?: any) => Animation) | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/modal#expandtoscroll
       */
      "expand-to-scroll"?: 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.
       * API info: https://ionicframework.com/docs/api/modal#focustrap
       */
      "focus-trap"?: 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.
       * API info: https://ionicframework.com/docs/api/modal#handle
       */
      handle?: boolean | undefined;

      /**
       * 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).
       * API info: https://ionicframework.com/docs/api/modal#handlebehavior
       */
      "handle-behavior"?: "cycle" | "none" | undefined;

      /**
       * Additional attributes to pass to the modal.
       * API info: https://ionicframework.com/docs/api/modal#htmlattributes
       */
      "html-attributes"?: undefined | { [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.
       * API info: https://ionicframework.com/docs/api/modal#initialbreakpoint
       */
      "initial-breakpoint"?: number | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/modal#isopen
       */
      "is-open"?: 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.
       * API info: https://ionicframework.com/docs/api/modal#keepcontentsmounted
       */
      "keep-contents-mounted"?: boolean;

      /**
       * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
       * API info: https://ionicframework.com/docs/api/modal#keyboardclose
       */
      "keyboard-close"?: boolean;

      /**
       * Animation to use when the modal is dismissed.
       * API info: https://ionicframework.com/docs/api/modal#leaveanimation
       */
      "leave-animation"?: ((baseEl: any, opts?: any) => Animation) | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/modal#mode
       */
      mode?: "ios" | "md";

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/modal#presentingelement
       */
      "presenting-element"?: HTMLElement | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/modal#showbackdrop
       */
      "show-backdrop"?: boolean;

      /**
       * An ID corresponding to the trigger element that causes the modal to open when clicked.
       * API info: https://ionicframework.com/docs/api/modal#trigger
       */
      trigger?: string | undefined;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted after the modal has dismissed. Shorthand for ionModalDidDismiss.
       */
      "on:didDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonModalElement;
        },
      ) => void;

      /**
       * () => void :  Emitted after the modal has presented. Shorthand for ionModalDidPresent.
       */
      "on:didPresent"?: () => void;

      /**
       * (event : ModalBreakpointChangeEventDetail) => void :  Emitted after the modal breakpoint has changed.
       */
      "on:ionBreakpointDidChange"?: (
        event: CustomEvent<ModalBreakpointChangeEventDetail> & {
          target: HTMLIonModalElement;
        },
      ) => void;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted after the modal has dismissed.
       */
      "on:ionModalDidDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonModalElement;
        },
      ) => void;

      /**
       * () => void :  Emitted after the modal has presented.
       */
      "on:ionModalDidPresent"?: () => void;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted before the modal has dismissed.
       */
      "on:ionModalWillDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonModalElement;
        },
      ) => void;

      /**
       * () => void :  Emitted before the modal has presented.
       */
      "on:ionModalWillPresent"?: () => void;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted before the modal has dismissed. Shorthand for ionModalWillDismiss.
       */
      "on:willDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonModalElement;
        },
      ) => void;

      /**
       * () => void :  Emitted before the modal has presented. Shorthand for ionModalWillPresent.
       */
      "on:willPresent"?: () => void;
    }

    interface IonNav {
      /**
       * If `true`, the nav should animate the transition of components.
       * API info: https://ionicframework.com/docs/api/nav#animated
       */
      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.
       * API info: https://ionicframework.com/docs/api/nav#animation
       */
      animation?: ((baseEl: any, opts?: any) => Animation) | undefined;

      /**
       * Root NavComponent to load
       * API info: https://ionicframework.com/docs/api/nav#root
       */
      root?:
        | Function
        | HTMLElement
        | ViewController
        | null
        | string
        | undefined;

      /**
       * Any parameters for the root component
       * API info: https://ionicframework.com/docs/api/nav#rootparams
       */
      "root-params"?: undefined | { [key: string]: any };

      /**
       * If the nav component should allow for swipe-to-go-back.
       * API info: https://ionicframework.com/docs/api/nav#swipegesture
       */
      "swipe-gesture"?: boolean | undefined;

      /**
       * () => void :  Event fired when the nav has changed components
       */
      "on:ionNavDidChange"?: () => void;

      /**
       * () => void :  Event fired when the nav will change components
       */
      "on:ionNavWillChange"?: () => void;
    }

    interface IonNavLink {
      /**
       * Component to navigate to. Only used if the `routerDirection` is `"forward"` or `"root"`.
       * API info: https://ionicframework.com/docs/api/nav-link#component
       */
      component?:
        | Function
        | HTMLElement
        | ViewController
        | null
        | string
        | undefined;

      /**
       * Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`.
       * API info: https://ionicframework.com/docs/api/nav-link#componentprops
       */
      "component-props"?: undefined | { [key: string]: any };

      /**
       * The transition animation when navigating to another page.
       * API info: https://ionicframework.com/docs/api/nav-link#routeranimation
       */
      "router-animation"?: ((baseEl: any, opts?: any) => Animation) | undefined;

      /**
       * The transition direction when navigating to another page.
       * API info: https://ionicframework.com/docs/api/nav-link#routerdirection
       */
      "router-direction"?: "back" | "forward" | "root";
    }

    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).
       * API info: https://ionicframework.com/docs/api/note#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/note#mode
       */
      mode?: "ios" | "md";
    }

    interface IonPicker {
      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/picker#mode
       */
      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).
       * API info: https://ionicframework.com/docs/api/picker-column#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * If `true`, the user cannot interact with the picker.
       * API info: https://ionicframework.com/docs/api/picker-column#disabled
       */
      disabled?: boolean;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/picker-column#mode
       */
      mode?: "ios" | "md";

      /**
       * The selected option in the picker.
       * API info: https://ionicframework.com/docs/api/picker-column#value
       */
      value?: number | string | undefined;

      /**
       * (event : PickerColumnChangeEventDetail) => void :  Emitted when the value has changed.  This event will not emit when programmatically setting the `value` property.
       */
      "on:ionChange"?: (
        event: CustomEvent<PickerColumnChangeEventDetail> & {
          target: HTMLIonPickerColumnElement;
        },
      ) => void;
    }

    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).
       * API info: https://ionicframework.com/docs/api/picker-column-option#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * If `true`, the user cannot interact with the picker column option.
       * API info: https://ionicframework.com/docs/api/picker-column-option#disabled
       */
      disabled?: boolean;

      /**
       * The text value of the option.
       * API info: https://ionicframework.com/docs/api/picker-column-option#value
       */
      value?: any;
    }

    interface IonPickerLegacy {
      /**
       * If `true`, the picker will animate.
       * API info: https://ionicframework.com/docs/api/picker-legacy#animated
       */
      animated?: boolean;

      /**
       * If `true`, the picker will be dismissed when the backdrop is clicked.
       * API info: https://ionicframework.com/docs/api/picker-legacy#backdropdismiss
       */
      "backdrop-dismiss"?: boolean;

      /**
       * Array of buttons to be displayed at the top of the picker.
       * API info: https://ionicframework.com/docs/api/picker-legacy#buttons
       */
      buttons?: PickerButton[];

      /**
       * Array of columns to be displayed in the picker.
       * API info: https://ionicframework.com/docs/api/picker-legacy#columns
       */
      columns?: PickerColumn[];

      /**
       * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
       * API info: https://ionicframework.com/docs/api/picker-legacy#cssclass
       */
      "css-class"?: string | string[] | undefined;

      /**
       * Number of milliseconds to wait before dismissing the picker.
       * API info: https://ionicframework.com/docs/api/picker-legacy#duration
       */
      duration?: number;

      /**
       * Animation to use when the picker is presented.
       * API info: https://ionicframework.com/docs/api/picker-legacy#enteranimation
       */
      "enter-animation"?: ((baseEl: any, opts?: any) => Animation) | undefined;

      /**
       * Additional attributes to pass to the picker.
       * API info: https://ionicframework.com/docs/api/picker-legacy#htmlattributes
       */
      "html-attributes"?: undefined | { [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.
       * API info: https://ionicframework.com/docs/api/picker-legacy#isopen
       */
      "is-open"?: boolean;

      /**
       * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
       * API info: https://ionicframework.com/docs/api/picker-legacy#keyboardclose
       */
      "keyboard-close"?: boolean;

      /**
       * Animation to use when the picker is dismissed.
       * API info: https://ionicframework.com/docs/api/picker-legacy#leaveanimation
       */
      "leave-animation"?: ((baseEl: any, opts?: any) => Animation) | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/picker-legacy#mode
       */
      mode?: "ios" | "md";

      /**
       * If `true`, a backdrop will be displayed behind the picker.
       * API info: https://ionicframework.com/docs/api/picker-legacy#showbackdrop
       */
      "show-backdrop"?: boolean;

      /**
       * An ID corresponding to the trigger element that causes the picker to open when clicked.
       * API info: https://ionicframework.com/docs/api/picker-legacy#trigger
       */
      trigger?: string | undefined;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted after the picker has dismissed. Shorthand for ionPickerDidDismiss.
       */
      "on:didDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonPickerLegacyElement;
        },
      ) => void;

      /**
       * () => void :  Emitted after the picker has presented. Shorthand for ionPickerWillDismiss.
       */
      "on:didPresent"?: () => void;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted after the picker has dismissed.
       */
      "on:ionPickerDidDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonPickerLegacyElement;
        },
      ) => void;

      /**
       * () => void :  Emitted after the picker has presented.
       */
      "on:ionPickerDidPresent"?: () => void;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted before the picker has dismissed.
       */
      "on:ionPickerWillDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonPickerLegacyElement;
        },
      ) => void;

      /**
       * () => void :  Emitted before the picker has presented.
       */
      "on:ionPickerWillPresent"?: () => void;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted before the picker has dismissed. Shorthand for ionPickerWillDismiss.
       */
      "on:willDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonPickerLegacyElement;
        },
      ) => void;

      /**
       * () => void :  Emitted before the picker has presented. Shorthand for ionPickerWillPresent.
       */
      "on:willPresent"?: () => 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.
       * API info: https://ionicframework.com/docs/api/popover#alignment
       */
      alignment?: "center" | "end" | "start" | undefined;

      /**
       * If `true`, the popover will animate.
       * API info: https://ionicframework.com/docs/api/popover#animated
       */
      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.
       * API info: https://ionicframework.com/docs/api/popover#arrow
       */
      arrow?: boolean;

      /**
       * If `true`, the popover will be dismissed when the backdrop is clicked.
       * API info: https://ionicframework.com/docs/api/popover#backdropdismiss
       */
      "backdrop-dismiss"?: 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`.
       * API info: https://ionicframework.com/docs/api/popover#component
       */
      component?: Function | HTMLElement | null | string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/popover#componentprops
       */
      "component-props"?: undefined | { [key: string]: any };

      /**
       * If `true`, the popover will be automatically dismissed when the content has been clicked.
       * API info: https://ionicframework.com/docs/api/popover#dismissonselect
       */
      "dismiss-on-select"?: boolean;

      /**
       * Animation to use when the popover is presented.
       * API info: https://ionicframework.com/docs/api/popover#enteranimation
       */
      "enter-animation"?: ((baseEl: any, opts?: any) => Animation) | undefined;

      /**
       * The event to pass to the popover animation.
       * API info: https://ionicframework.com/docs/api/popover#event
       */
      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.
       * API info: https://ionicframework.com/docs/api/popover#focustrap
       */
      "focus-trap"?: boolean;

      /**
       * Additional attributes to pass to the popover.
       * API info: https://ionicframework.com/docs/api/popover#htmlattributes
       */
      "html-attributes"?: undefined | { [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.
       * API info: https://ionicframework.com/docs/api/popover#isopen
       */
      "is-open"?: 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.
       * API info: https://ionicframework.com/docs/api/popover#keepcontentsmounted
       */
      "keep-contents-mounted"?: boolean;

      /**
       * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
       * API info: https://ionicframework.com/docs/api/popover#keyboardclose
       */
      "keyboard-close"?: boolean;

      /**
       * Animation to use when the popover is dismissed.
       * API info: https://ionicframework.com/docs/api/popover#leaveanimation
       */
      "leave-animation"?: ((baseEl: any, opts?: any) => Animation) | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/popover#mode
       */
      mode?: "ios" | "md";

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/popover#reference
       */
      reference?: "event" | "trigger";

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/popover#showbackdrop
       */
      "show-backdrop"?: 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.
       * API info: https://ionicframework.com/docs/api/popover#side
       */
      side?: "bottom" | "end" | "left" | "right" | "start" | "top";

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/popover#size
       */
      size?: "auto" | "cover";

      /**
       * 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).
       * API info: https://ionicframework.com/docs/api/popover#translucent
       */
      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.
       * API info: https://ionicframework.com/docs/api/popover#trigger
       */
      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.
       * API info: https://ionicframework.com/docs/api/popover#triggeraction
       */
      "trigger-action"?: "click" | "context-menu" | "hover";

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted after the popover has dismissed. Shorthand for ionPopoverDidDismiss.
       */
      "on:didDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonPopoverElement;
        },
      ) => void;

      /**
       * () => void :  Emitted after the popover has presented. Shorthand for ionPopoverWillDismiss.
       */
      "on:didPresent"?: () => void;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted after the popover has dismissed.
       */
      "on:ionPopoverDidDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonPopoverElement;
        },
      ) => void;

      /**
       * () => void :  Emitted after the popover has presented.
       */
      "on:ionPopoverDidPresent"?: () => void;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted before the popover has dismissed.
       */
      "on:ionPopoverWillDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonPopoverElement;
        },
      ) => void;

      /**
       * () => void :  Emitted before the popover has presented.
       */
      "on:ionPopoverWillPresent"?: () => void;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted before the popover has dismissed. Shorthand for ionPopoverWillDismiss.
       */
      "on:willDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonPopoverElement;
        },
      ) => void;

      /**
       * () => void :  Emitted before the popover has presented. Shorthand for ionPopoverWillPresent.
       */
      "on:willPresent"?: () => void;
    }

    interface IonProgressBar {
      /**
       * If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1].
       * API info: https://ionicframework.com/docs/api/progress-bar#buffer
       */
      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).
       * API info: https://ionicframework.com/docs/api/progress-bar#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/progress-bar#mode
       */
      mode?: "ios" | "md";

      /**
       * If true, reverse the progress bar direction.
       * API info: https://ionicframework.com/docs/api/progress-bar#reversed
       */
      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).
       * API info: https://ionicframework.com/docs/api/progress-bar#type
       */
      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].
       * API info: https://ionicframework.com/docs/api/progress-bar#value
       */
      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`.
       * API info: https://ionicframework.com/docs/api/radio#alignment
       */
      alignment?: "center" | "start" | undefined;

      /**
       * 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).
       * API info: https://ionicframework.com/docs/api/radio#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * If `true`, the user cannot interact with the radio.
       * API info: https://ionicframework.com/docs/api/radio#disabled
       */
      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`.
       * API info: https://ionicframework.com/docs/api/radio#justify
       */
      justify?: "end" | "space-between" | "start" | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/radio#labelplacement
       */
      "label-placement"?: "end" | "fixed" | "stacked" | "start";

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/radio#mode
       */
      mode?: "ios" | "md";

      /**
       * The name of the control, which is submitted with the form data.
       * API info: https://ionicframework.com/docs/api/radio#name
       */
      name?: string;

      /**
       * the value of the radio.
       * API info: https://ionicframework.com/docs/api/radio#value
       */
      value?: any;

      /**
       * () => void :  Emitted when the radio button loses focus.
       */
      "on:ionBlur"?: () => void;

      /**
       * () => void :  Emitted when the radio button has focus.
       */
      "on:ionFocus"?: () => void;
    }

    interface IonRadioGroup {
      /**
       * If `true`, the radios can be deselected.
       * API info: https://ionicframework.com/docs/api/radio-group#allowemptyselection
       */
      "allow-empty-selection"?: 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.
       * API info: https://ionicframework.com/docs/api/radio-group#comparewith
       */
      "compare-with"?:
        | ((currentValue: any, compareValue: any) => boolean)
        | null
        | string
        | undefined;

      /**
       * The error text to display at the top of the radio group.
       * API info: https://ionicframework.com/docs/api/radio-group#errortext
       */
      "error-text"?: string | undefined;

      /**
       * The helper text to display at the top of the radio group.
       * API info: https://ionicframework.com/docs/api/radio-group#helpertext
       */
      "helper-text"?: string | undefined;

      /**
       * The name of the control, which is submitted with the form data.
       * API info: https://ionicframework.com/docs/api/radio-group#name
       */
      name?: string;

      /**
       * the value of the radio group.
       * API info: https://ionicframework.com/docs/api/radio-group#value
       */
      value?: any;

      /**
       * (event : RadioGroupChangeEventDetail<any>) => void :  Emitted when the value has changed.  This event will not emit when programmatically setting the `value` property.
       */
      "on:ionChange"?: (
        event: CustomEvent<RadioGroupChangeEventDetail<any>> & {
          target: HTMLIonRadioGroupElement;
        },
      ) => void;
    }

    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.
       * API info: https://ionicframework.com/docs/api/range#activebarstart
       */
      "active-bar-start"?: number | undefined;

      /**
       * 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).
       * API info: https://ionicframework.com/docs/api/range#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * How long, in milliseconds, to wait to trigger the `ionInput` event after each change in the range value.
       * API info: https://ionicframework.com/docs/api/range#debounce
       */
      debounce?: number | undefined;

      /**
       * If `true`, the user cannot interact with the range.
       * API info: https://ionicframework.com/docs/api/range#disabled
       */
      disabled?: boolean;

      /**
       * Show two knobs.
       * API info: https://ionicframework.com/docs/api/range#dualknobs
       */
      "dual-knobs"?: 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.
       * API info: https://ionicframework.com/docs/api/range#label
       */
      label?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/range#labelplacement
       */
      "label-placement"?: "end" | "fixed" | "stacked" | "start";

      /**
       * Maximum integer value of the range.
       * API info: https://ionicframework.com/docs/api/range#max
       */
      max?: number;

      /**
       * Minimum integer value of the range.
       * API info: https://ionicframework.com/docs/api/range#min
       */
      min?: number;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/range#mode
       */
      mode?: "ios" | "md";

      /**
       * The name of the control, which is submitted with the form data.
       * API info: https://ionicframework.com/docs/api/range#name
       */
      name?: string;

      /**
       * If `true`, a pin with integer value is shown when the knob is pressed.
       * API info: https://ionicframework.com/docs/api/range#pin
       */
      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.
       * API info: https://ionicframework.com/docs/api/range#pinformatter
       */
      "pin-formatter"?: (value: number) => string | number;

      /**
       * If `true`, the knob snaps to tick marks evenly spaced based on the step property value.
       * API info: https://ionicframework.com/docs/api/range#snaps
       */
      snaps?: boolean;

      /**
       * Specifies the value granularity.
       * API info: https://ionicframework.com/docs/api/range#step
       */
      step?: number;

      /**
       * If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`.
       * API info: https://ionicframework.com/docs/api/range#ticks
       */
      ticks?: boolean;

      /**
       * the value of the range.
       * API info: https://ionicframework.com/docs/api/range#value
       */
      value?: number | { lower: number; upper: number };

      /**
       * () => void :  Emitted when the range loses focus.
       */
      "on:ionBlur"?: () => void;

      /**
       * (event : RangeChangeEventDetail) => 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.
       */
      "on:ionChange"?: (
        event: CustomEvent<RangeChangeEventDetail> & {
          target: HTMLIonRangeElement;
        },
      ) => void;

      /**
       * () => void :  Emitted when the range has focus.
       */
      "on:ionFocus"?: () => void;

      /**
       * (event : RangeChangeEventDetail) => 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.
       */
      "on:ionInput"?: (
        event: CustomEvent<RangeChangeEventDetail> & {
          target: HTMLIonRangeElement;
        },
      ) => void;

      /**
       * (event : RangeKnobMoveEndEventDetail) => void :  Emitted when the user finishes moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.
       */
      "on:ionKnobMoveEnd"?: (
        event: CustomEvent<RangeKnobMoveEndEventDetail> & {
          target: HTMLIonRangeElement;
        },
      ) => void;

      /**
       * (event : RangeKnobMoveStartEventDetail) => void :  Emitted when the user starts moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.
       */
      "on:ionKnobMoveStart"?: (
        event: CustomEvent<RangeKnobMoveStartEventDetail> & {
          target: HTMLIonRangeElement;
        },
      ) => void;
    }

    interface IonRefresher {
      /**
       * Time it takes to close the refresher. Does not apply when the refresher content uses a spinner, enabling the native refresher.
       * API info: https://ionicframework.com/docs/api/refresher#closeduration
       */
      "close-duration"?: string;

      /**
       * If `true`, the refresher will be hidden.
       * API info: https://ionicframework.com/docs/api/refresher#disabled
       */
      disabled?: boolean;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/refresher#mode
       */
      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.
       * API info: https://ionicframework.com/docs/api/refresher#pullfactor
       */
      "pull-factor"?: 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.
       * API info: https://ionicframework.com/docs/api/refresher#pullmax
       */
      "pull-max"?: 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.
       * API info: https://ionicframework.com/docs/api/refresher#pullmin
       */
      "pull-min"?: 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.
       * API info: https://ionicframework.com/docs/api/refresher#snapbackduration
       */
      "snapback-duration"?: string;

      /**
       * () => void :  Emitted while the user is pulling down the content and exposing the refresher.
       */
      "on:ionPull"?: () => void;

      /**
       * (event : RefresherEventDetail) => 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.
       */
      "on:ionRefresh"?: (
        event: CustomEvent<RefresherEventDetail> & {
          target: HTMLIonRefresherElement;
        },
      ) => void;

      /**
       * () => void :  Emitted when the user begins to start pulling down.
       */
      "on:ionStart"?: () => void;
    }

    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.
       * API info: https://ionicframework.com/docs/api/refresher-content#pullingicon
       */
      "pulling-icon"?: null | string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/refresher-content#pullingtext
       */
      "pulling-text"?: IonicSafeString | string | undefined;

      /**
       * An animated SVG spinner that shows when refreshing begins
       * API info: https://ionicframework.com/docs/api/refresher-content#refreshingspinner
       */
      "refreshing-spinner"?:
        | "bubbles"
        | "circles"
        | "circular"
        | "crescent"
        | "dots"
        | "lines"
        | "lines-sharp"
        | "lines-sharp-small"
        | "lines-small"
        | null
        | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/refresher-content#refreshingtext
       */
      "refreshing-text"?: IonicSafeString | string | undefined;
    }

    interface IonReorder {}

    interface IonReorderGroup {
      /**
       * If `true`, the reorder will be hidden.
       * API info: https://ionicframework.com/docs/api/reorder-group#disabled
       */
      disabled?: boolean;

      /**
       * (event : ItemReorderEventDetail) => void :  Event that needs to be listened to in order to complete the reorder action. Once the event has been emitted, the `complete()` method then needs to be called in order to finalize the reorder action.
       */
      "on:ionItemReorder"?: (
        event: CustomEvent<ItemReorderEventDetail> & {
          target: HTMLIonReorderGroupElement;
        },
      ) => 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.
       * API info: https://ionicframework.com/docs/api/ripple-effect#type
       */
      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.
       * API info: https://ionicframework.com/docs/api/route#beforeenter
       */
      "before-enter"?:
        | (() => NavigationHookResult | Promise<NavigationHookResult>)
        | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/route#beforeleave
       */
      "before-leave"?:
        | (() => NavigationHookResult | Promise<NavigationHookResult>)
        | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/route#component
       */
      component?: string;

      /**
       * A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed to the defined component when rendered.
       * API info: https://ionicframework.com/docs/api/route#componentprops
       */
      "component-props"?: undefined | { [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.
       * API info: https://ionicframework.com/docs/api/route#url
       */
      url?: string;

      /**
       * (event : any) => void :  Used internally by `ion-router` to know when this route did change.
       */
      "on:ionRouteDataChanged"?: (
        event: CustomEvent<any> & { target: HTMLIonRouteElement },
      ) => void;
    }

    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.
       * API info: https://ionicframework.com/docs/api/route-redirect#from
       */
      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.
       * API info: https://ionicframework.com/docs/api/route-redirect#to
       */
      to?: null | string | undefined;

      /**
       * (event : any) => void :  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.
       */
      "on:ionRouteRedirectChanged"?: (
        event: CustomEvent<any> & { target: HTMLIonRouteRedirectElement },
      ) => void;
    }

    interface IonRouter {
      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/router#root
       */
      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.
       * API info: https://ionicframework.com/docs/api/router#usehash
       */
      "use-hash"?: boolean;

      /**
       * (event : RouterEventDetail) => void :  Emitted when the route had changed
       */
      "on:ionRouteDidChange"?: (
        event: CustomEvent<RouterEventDetail> & {
          target: HTMLIonRouterElement;
        },
      ) => void;

      /**
       * (event : RouterEventDetail) => void :  Event emitted when the route is about to change
       */
      "on:ionRouteWillChange"?: (
        event: CustomEvent<RouterEventDetail> & {
          target: HTMLIonRouterElement;
        },
      ) => void;
    }

    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).
       * API info: https://ionicframework.com/docs/api/router-link#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
       * API info: https://ionicframework.com/docs/api/router-link#href
       */
      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).
       * API info: https://ionicframework.com/docs/api/router-link#rel
       */
      rel?: string | undefined;

      /**
       * When using a router, it specifies the transition animation when navigating to another page using `href`.
       * API info: https://ionicframework.com/docs/api/router-link#routeranimation
       */
      "router-animation"?: ((baseEl: any, opts?: any) => Animation) | undefined;

      /**
       * When using a router, it specifies the transition direction when navigating to another page using `href`.
       * API info: https://ionicframework.com/docs/api/router-link#routerdirection
       */
      "router-direction"?: "back" | "forward" | "root";

      /**
       * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
       * API info: https://ionicframework.com/docs/api/router-link#target
       */
      target?: string | undefined;
    }

    interface IonRouterOutlet {
      /**
       * If `true`, the router-outlet should animate the transition of components.
       * API info: https://ionicframework.com/docs/api/router-outlet#animated
       */
      animated?: boolean;

      /**
       * This property allows to create custom transition using AnimationBuilder functions.
       * API info: https://ionicframework.com/docs/api/router-outlet#animation
       */
      animation?: ((baseEl: any, opts?: any) => Animation) | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/router-outlet#mode
       */
      mode?: "ios" | "md";
    }

    interface IonRow {}

    interface IonSearchbar {
      /**
       * If `true`, enable searchbar animation.
       * API info: https://ionicframework.com/docs/api/searchbar#animated
       */
      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"`.
       * API info: https://ionicframework.com/docs/api/searchbar#autocapitalize
       */
      autocapitalize?: string;

      /**
       * Set the input's autocomplete property.
       * API info: https://ionicframework.com/docs/api/searchbar#autocomplete
       */
      autocomplete?:
        | "name"
        | "email"
        | "tel"
        | "url"
        | "on"
        | "off"
        | "honorific-prefix"
        | "given-name"
        | "additional-name"
        | "family-name"
        | "honorific-suffix"
        | "nickname"
        | "username"
        | "new-password"
        | "current-password"
        | "one-time-code"
        | "organization-title"
        | "organization"
        | "street-address"
        | "address-line1"
        | "address-line2"
        | "address-line3"
        | "address-level4"
        | "address-level3"
        | "address-level2"
        | "address-level1"
        | "country"
        | "country-name"
        | "postal-code"
        | "cc-name"
        | "cc-given-name"
        | "cc-additional-name"
        | "cc-family-name"
        | "cc-number"
        | "cc-exp"
        | "cc-exp-month"
        | "cc-exp-year"
        | "cc-csc"
        | "cc-type"
        | "transaction-currency"
        | "transaction-amount"
        | "language"
        | "bday"
        | "bday-day"
        | "bday-month"
        | "bday-year"
        | "sex"
        | "tel-country-code"
        | "tel-national"
        | "tel-area-code"
        | "tel-local"
        | "tel-extension"
        | "impp"
        | "photo";

      /**
       * Set the input's autocorrect property.
       * API info: https://ionicframework.com/docs/api/searchbar#autocorrect
       */
      autocorrect?: "off" | "on";

      /**
       * Set the cancel button icon. Only applies to `md` mode. Defaults to `arrow-back-sharp`.
       * API info: https://ionicframework.com/docs/api/searchbar#cancelbuttonicon
       */
      "cancel-button-icon"?: string;

      /**
       * Set the the cancel button text. Only applies to `ios` mode.
       * API info: https://ionicframework.com/docs/api/searchbar#cancelbuttontext
       */
      "cancel-button-text"?: string;

      /**
       * Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`.
       * API info: https://ionicframework.com/docs/api/searchbar#clearicon
       */
      "clear-icon"?: string | undefined;

      /**
       * 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).
       * API info: https://ionicframework.com/docs/api/searchbar#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
       * API info: https://ionicframework.com/docs/api/searchbar#debounce
       */
      debounce?: number | undefined;

      /**
       * If `true`, the user cannot interact with the input.
       * API info: https://ionicframework.com/docs/api/searchbar#disabled
       */
      disabled?: boolean;

      /**
       * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
       * API info: https://ionicframework.com/docs/api/searchbar#enterkeyhint
       */
      enterkeyhint?:
        | "done"
        | "enter"
        | "go"
        | "next"
        | "previous"
        | "search"
        | "send"
        | undefined;

      /**
       * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
       * API info: https://ionicframework.com/docs/api/searchbar#inputmode
       */
      inputmode?:
        | "decimal"
        | "email"
        | "none"
        | "numeric"
        | "search"
        | "tel"
        | "text"
        | "url"
        | undefined;

      /**
       * This attribute specifies the maximum number of characters that the user can enter.
       * API info: https://ionicframework.com/docs/api/searchbar#maxlength
       */
      maxlength?: number | undefined;

      /**
       * This attribute specifies the minimum number of characters that the user can enter.
       * API info: https://ionicframework.com/docs/api/searchbar#minlength
       */
      minlength?: number | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/searchbar#mode
       */
      mode?: "ios" | "md";

      /**
       * If used in a form, set the name of the control, which is submitted with the form data.
       * API info: https://ionicframework.com/docs/api/searchbar#name
       */
      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)
       * API info: https://ionicframework.com/docs/api/searchbar#placeholder
       */
      placeholder?: string;

      /**
       * The icon to use as the search icon. Defaults to `search-outline` in `ios` mode and `search-sharp` in `md` mode.
       * API info: https://ionicframework.com/docs/api/searchbar#searchicon
       */
      "search-icon"?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/searchbar#showcancelbutton
       */
      "show-cancel-button"?: "always" | "focus" | "never";

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/searchbar#showclearbutton
       */
      "show-clear-button"?: "always" | "focus" | "never";

      /**
       * If `true`, enable spellcheck on the input.
       * API info: https://ionicframework.com/docs/api/searchbar#spellcheck
       */
      spellcheck?: boolean;

      /**
       * Set the type of the input.
       * API info: https://ionicframework.com/docs/api/searchbar#type
       */
      type?:
        | "email"
        | "number"
        | "password"
        | "search"
        | "tel"
        | "text"
        | "url";

      /**
       * the value of the searchbar.
       * API info: https://ionicframework.com/docs/api/searchbar#value
       */
      value?: null | string | undefined;

      /**
       * () => void :  Emitted when the input loses focus.
       */
      "on:ionBlur"?: () => void;

      /**
       * () => void :  Emitted when the cancel button is clicked.
       */
      "on:ionCancel"?: () => void;

      /**
       * (event : SearchbarChangeEventDetail) => 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.
       */
      "on:ionChange"?: (
        event: CustomEvent<SearchbarChangeEventDetail> & {
          target: HTMLIonSearchbarElement;
        },
      ) => void;

      /**
       * () => void :  Emitted when the clear input button is clicked.
       */
      "on:ionClear"?: () => void;

      /**
       * () => void :  Emitted when the input has focus.
       */
      "on:ionFocus"?: () => void;

      /**
       * (event : SearchbarInputEventDetail) => void :  Emitted when the `value` of the `ion-searchbar` element has changed.
       */
      "on:ionInput"?: (
        event: CustomEvent<SearchbarInputEventDetail> & {
          target: HTMLIonSearchbarElement;
        },
      ) => void;
    }

    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).
       * API info: https://ionicframework.com/docs/api/segment#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * If `true`, the user cannot interact with the segment.
       * API info: https://ionicframework.com/docs/api/segment#disabled
       */
      disabled?: boolean;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/segment#mode
       */
      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.
       * API info: https://ionicframework.com/docs/api/segment#scrollable
       */
      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.
       * API info: https://ionicframework.com/docs/api/segment#selectonfocus
       */
      "select-on-focus"?: boolean;

      /**
       * If `true`, users will be able to swipe between segment buttons to activate them.
       * API info: https://ionicframework.com/docs/api/segment#swipegesture
       */
      "swipe-gesture"?: boolean;

      /**
       * the value of the segment.
       * API info: https://ionicframework.com/docs/api/segment#value
       */
      value?: number | string | undefined;

      /**
       * (event : SegmentChangeEventDetail) => void :  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.
       */
      "on:ionChange"?: (
        event: CustomEvent<SegmentChangeEventDetail> & {
          target: HTMLIonSegmentElement;
        },
      ) => void;
    }

    interface IonSegmentButton {
      /**
       * The `id` of the segment content.
       * API info: https://ionicframework.com/docs/api/segment-button#contentid
       */
      "content-id"?: string | undefined;

      /**
       * If `true`, the user cannot interact with the segment button.
       * API info: https://ionicframework.com/docs/api/segment-button#disabled
       */
      disabled?: boolean;

      /**
       * Set the layout of the text and icon in the segment.
       * API info: https://ionicframework.com/docs/api/segment-button#layout
       */
      layout?:
        | "icon-bottom"
        | "icon-end"
        | "icon-hide"
        | "icon-start"
        | "icon-top"
        | "label-hide"
        | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/segment-button#mode
       */
      mode?: "ios" | "md";

      /**
       * The type of the button.
       * API info: https://ionicframework.com/docs/api/segment-button#type
       */
      type?: "button" | "reset" | "submit";

      /**
       * The value of the segment button.
       * API info: https://ionicframework.com/docs/api/segment-button#value
       */
      value?: number | string;
    }

    interface IonSegmentContent {}

    interface IonSegmentView {
      /**
       * If `true`, the segment view cannot be interacted with.
       * API info: https://ionicframework.com/docs/api/segment-view#disabled
       */
      disabled?: boolean;

      /**
       * (event : SegmentViewScrollEvent) => void :  Emitted when the segment view is scrolled.
       */
      "on:ionSegmentViewScroll"?: (
        event: CustomEvent<SegmentViewScrollEvent> & {
          target: HTMLIonSegmentViewElement;
        },
      ) => void;
    }

    interface IonSelect {
      /**
       * The text to display on the cancel button.
       * API info: https://ionicframework.com/docs/api/select#canceltext
       */
      "cancel-text"?: 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.
       * API info: https://ionicframework.com/docs/api/select#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/select#comparewith
       */
      "compare-with"?:
        | ((currentValue: any, compareValue: any) => boolean)
        | null
        | string
        | undefined;

      /**
       * If `true`, the user cannot interact with the select.
       * API info: https://ionicframework.com/docs/api/select#disabled
       */
      disabled?: boolean;

      /**
       * Text that is placed under the select and displayed when an error is detected.
       * API info: https://ionicframework.com/docs/api/select#errortext
       */
      "error-text"?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/select#expandedicon
       */
      "expanded-icon"?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/select#fill
       */
      fill?: "outline" | "solid" | undefined;

      /**
       * Text that is placed under the select and displayed when no error is detected.
       * API info: https://ionicframework.com/docs/api/select#helpertext
       */
      "helper-text"?: string | undefined;

      /**
       * The interface the select should use: `action-sheet`, `popover`, `alert`, or `modal`.
       * API info: https://ionicframework.com/docs/api/select#interface
       */
      interface?: "action-sheet" | "alert" | "modal" | "popover";

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/select#interfaceoptions
       */
      "interface-options"?: 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.
       * API info: https://ionicframework.com/docs/api/select#justify
       */
      justify?: "end" | "space-between" | "start" | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/select#label
       */
      label?: string | undefined;

      /**
       * 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`.
       * API info: https://ionicframework.com/docs/api/select#labelplacement
       */
      "label-placement"?:
        | "end"
        | "fixed"
        | "floating"
        | "stacked"
        | "start"
        | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/select#mode
       */
      mode?: "ios" | "md";

      /**
       * If `true`, the select can accept multiple values.
       * API info: https://ionicframework.com/docs/api/select#multiple
       */
      multiple?: boolean;

      /**
       * The name of the control, which is submitted with the form data.
       * API info: https://ionicframework.com/docs/api/select#name
       */
      name?: string;

      /**
       * The text to display on the ok button.
       * API info: https://ionicframework.com/docs/api/select#oktext
       */
      "ok-text"?: string;

      /**
       * The text to display when the select is empty.
       * API info: https://ionicframework.com/docs/api/select#placeholder
       */
      placeholder?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/select#required
       */
      required?: boolean;

      /**
       * The text to display instead of the selected option's value.
       * API info: https://ionicframework.com/docs/api/select#selectedtext
       */
      "selected-text"?: null | string | undefined;

      /**
       * The shape of the select. If "round" it will have an increased border radius.
       * API info: https://ionicframework.com/docs/api/select#shape
       */
      shape?: "round" | undefined;

      /**
       * The toggle icon to use. Defaults to `chevronExpand` for `ios` mode, or `caretDownSharp` for `md` mode.
       * API info: https://ionicframework.com/docs/api/select#toggleicon
       */
      "toggle-icon"?: string | undefined;

      /**
       * The value of the select.
       * API info: https://ionicframework.com/docs/api/select#value
       */
      value?: any;

      /**
       * () => void :  Emitted when the select loses focus.
       */
      "on:ionBlur"?: () => void;

      /**
       * () => void :  Emitted when the selection is cancelled.
       */
      "on:ionCancel"?: () => void;

      /**
       * (event : SelectChangeEventDetail<any>) => void :  Emitted when the value has changed.  This event will not emit when programmatically setting the `value` property.
       */
      "on:ionChange"?: (
        event: CustomEvent<SelectChangeEventDetail<any>> & {
          target: HTMLIonSelectElement;
        },
      ) => void;

      /**
       * () => void :  Emitted when the overlay is dismissed.
       */
      "on:ionDismiss"?: () => void;

      /**
       * () => void :  Emitted when the select has focus.
       */
      "on:ionFocus"?: () => void;
    }

    interface IonSelectModal {
      /**
       *
       * API info: https://ionicframework.com/docs/api/select-modal#header
       */
      header?: string | undefined;

      /**
       *
       * API info: https://ionicframework.com/docs/api/select-modal#multiple
       */
      multiple?: boolean | undefined;

      /**
       *
       * API info: https://ionicframework.com/docs/api/select-modal#options
       */
      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.
       * API info: https://ionicframework.com/docs/api/select-option#disabled
       */
      disabled?: boolean;

      /**
       * The text value of the option.
       * API info: https://ionicframework.com/docs/api/select-option#value
       */
      value?: any;
    }

    interface IonSkeletonText {
      /**
       * If `true`, the skeleton text will animate.
       * API info: https://ionicframework.com/docs/api/skeleton-text#animated
       */
      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).
       * API info: https://ionicframework.com/docs/api/spinner#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * Duration of the spinner animation in milliseconds. The default varies based on the spinner.
       * API info: https://ionicframework.com/docs/api/spinner#duration
       */
      duration?: number | undefined;

      /**
       * The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used.
       * API info: https://ionicframework.com/docs/api/spinner#name
       */
      name?:
        | "bubbles"
        | "circles"
        | "circular"
        | "crescent"
        | "dots"
        | "lines"
        | "lines-sharp"
        | "lines-sharp-small"
        | "lines-small"
        | undefined;

      /**
       * If `true`, the spinner's animation will be paused.
       * API info: https://ionicframework.com/docs/api/spinner#paused
       */
      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`.
       * API info: https://ionicframework.com/docs/api/split-pane#contentid
       */
      "content-id"?: string | undefined;

      /**
       * If `true`, the split pane will be hidden.
       * API info: https://ionicframework.com/docs/api/split-pane#disabled
       */
      disabled?: 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.
       * API info: https://ionicframework.com/docs/api/split-pane#when
       */
      when?: boolean | string;

      /**
       * (event : { visible: boolean; }) => void :  Expression to be called when the split-pane visibility has changed
       */
      "on:ionSplitPaneVisible"?: (
        event: CustomEvent<{ visible: boolean }> & {
          target: HTMLIonSplitPaneElement;
        },
      ) => void;
    }

    interface IonTab {
      /**
       * The component to display inside of the tab.
       * API info: https://ionicframework.com/docs/api/tab#component
       */
      component?: Function | HTMLElement | null | string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/tab#tab
       */
      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).
       * API info: https://ionicframework.com/docs/api/tab-bar#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/tab-bar#mode
       */
      mode?: "ios" | "md";

      /**
       * The selected tab component
       * API info: https://ionicframework.com/docs/api/tab-bar#selectedtab
       */
      "selected-tab"?: string | undefined;

      /**
       * 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).
       * API info: https://ionicframework.com/docs/api/tab-bar#translucent
       */
      translucent?: boolean;
    }

    interface IonTabButton {
      /**
       * If `true`, the user cannot interact with the tab button.
       * API info: https://ionicframework.com/docs/api/tab-button#disabled
       */
      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).
       * API info: https://ionicframework.com/docs/api/tab-button#download
       */
      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.
       * API info: https://ionicframework.com/docs/api/tab-button#href
       */
      href?: string | undefined;

      /**
       * Set the layout of the text and icon in the tab bar. It defaults to `"icon-top"`.
       * API info: https://ionicframework.com/docs/api/tab-button#layout
       */
      layout?:
        | "icon-bottom"
        | "icon-end"
        | "icon-hide"
        | "icon-start"
        | "icon-top"
        | "label-hide"
        | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/tab-button#mode
       */
      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).
       * API info: https://ionicframework.com/docs/api/tab-button#rel
       */
      rel?: string | undefined;

      /**
       * The selected tab component
       * API info: https://ionicframework.com/docs/api/tab-button#selected
       */
      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.
       * API info: https://ionicframework.com/docs/api/tab-button#tab
       */
      tab?: string | undefined;

      /**
       * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
       * API info: https://ionicframework.com/docs/api/tab-button#target
       */
      target?: string | undefined;
    }

    interface IonTabs {
      /**
       * (event : { tab: string; }) => void :  Emitted when the navigation has finished transitioning to a new component.
       */
      "on:ionTabsDidChange"?: (
        event: CustomEvent<{ tab: string }> & { target: HTMLIonTabsElement },
      ) => void;

      /**
       * (event : { tab: string; }) => void :  Emitted when the navigation is about to transition to a new component.
       */
      "on:ionTabsWillChange"?: (
        event: CustomEvent<{ tab: string }> & { target: HTMLIonTabsElement },
      ) => void;
    }

    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).
       * API info: https://ionicframework.com/docs/api/text#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/text#mode
       */
      mode?: "ios" | "md";
    }

    interface IonTextarea {
      /**
       * If `true`, the textarea container will grow and shrink based on the contents of the textarea.
       * API info: https://ionicframework.com/docs/api/textarea#autogrow
       */
      "auto-grow"?: 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"`.
       * API info: https://ionicframework.com/docs/api/textarea#autocapitalize
       */
      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.
       * API info: https://ionicframework.com/docs/api/textarea#autofocus
       */
      autofocus?: boolean;

      /**
       * If `true`, the value will be cleared after focus upon edit.
       * API info: https://ionicframework.com/docs/api/textarea#clearonedit
       */
      "clear-on-edit"?: 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).
       * API info: https://ionicframework.com/docs/api/textarea#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.
       * API info: https://ionicframework.com/docs/api/textarea#cols
       */
      cols?: number | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/textarea#counter
       */
      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.
       * API info: https://ionicframework.com/docs/api/textarea#counterformatter
       */
      "counter-formatter"?:
        | ((inputLength: number, maxLength: number) => string)
        | undefined;

      /**
       * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
       * API info: https://ionicframework.com/docs/api/textarea#debounce
       */
      debounce?: number | undefined;

      /**
       * If `true`, the user cannot interact with the textarea.
       * API info: https://ionicframework.com/docs/api/textarea#disabled
       */
      disabled?: boolean;

      /**
       * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
       * API info: https://ionicframework.com/docs/api/textarea#enterkeyhint
       */
      enterkeyhint?:
        | "done"
        | "enter"
        | "go"
        | "next"
        | "previous"
        | "search"
        | "send"
        | undefined;

      /**
       * Text that is placed under the textarea and displayed when an error is detected.
       * API info: https://ionicframework.com/docs/api/textarea#errortext
       */
      "error-text"?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/textarea#fill
       */
      fill?: "outline" | "solid" | undefined;

      /**
       * Text that is placed under the textarea and displayed when no error is detected.
       * API info: https://ionicframework.com/docs/api/textarea#helpertext
       */
      "helper-text"?: string | undefined;

      /**
       * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
       * API info: https://ionicframework.com/docs/api/textarea#inputmode
       */
      inputmode?:
        | "decimal"
        | "email"
        | "none"
        | "numeric"
        | "search"
        | "tel"
        | "text"
        | "url"
        | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/textarea#label
       */
      label?: string | undefined;

      /**
       * 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 ("...").
       * API info: https://ionicframework.com/docs/api/textarea#labelplacement
       */
      "label-placement"?: "end" | "fixed" | "floating" | "stacked" | "start";

      /**
       * This attribute specifies the maximum number of characters that the user can enter.
       * API info: https://ionicframework.com/docs/api/textarea#maxlength
       */
      maxlength?: number | undefined;

      /**
       * This attribute specifies the minimum number of characters that the user can enter.
       * API info: https://ionicframework.com/docs/api/textarea#minlength
       */
      minlength?: number | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/textarea#mode
       */
      mode?: "ios" | "md";

      /**
       * The name of the control, which is submitted with the form data.
       * API info: https://ionicframework.com/docs/api/textarea#name
       */
      name?: string;

      /**
       * Instructional text that shows before the input has a value.
       * API info: https://ionicframework.com/docs/api/textarea#placeholder
       */
      placeholder?: string | undefined;

      /**
       * If `true`, the user cannot modify the value.
       * API info: https://ionicframework.com/docs/api/textarea#readonly
       */
      readonly?: boolean;

      /**
       * If `true`, the user must fill in a value before submitting a form.
       * API info: https://ionicframework.com/docs/api/textarea#required
       */
      required?: boolean;

      /**
       * The number of visible text lines for the control.
       * API info: https://ionicframework.com/docs/api/textarea#rows
       */
      rows?: number | undefined;

      /**
       * The shape of the textarea. If "round" it will have an increased border radius.
       * API info: https://ionicframework.com/docs/api/textarea#shape
       */
      shape?: "round" | undefined;

      /**
       * If `true`, the element will have its spelling and grammar checked.
       * API info: https://ionicframework.com/docs/api/textarea#spellcheck
       */
      spellcheck?: boolean;

      /**
       * The value of the textarea.
       * API info: https://ionicframework.com/docs/api/textarea#value
       */
      value?: null | string | undefined;

      /**
       * Indicates how the control wraps text.
       * API info: https://ionicframework.com/docs/api/textarea#wrap
       */
      wrap?: "hard" | "off" | "soft" | undefined;

      /**
       * (event : FocusEvent) => void :  Emitted when the input loses focus.
       */
      "on:ionBlur"?: (
        event: CustomEvent<FocusEvent> & { target: HTMLIonTextareaElement },
      ) => void;

      /**
       * (event : TextareaChangeEventDetail) => 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.
       */
      "on:ionChange"?: (
        event: CustomEvent<TextareaChangeEventDetail> & {
          target: HTMLIonTextareaElement;
        },
      ) => void;

      /**
       * (event : FocusEvent) => void :  Emitted when the input has focus.
       */
      "on:ionFocus"?: (
        event: CustomEvent<FocusEvent> & { target: HTMLIonTextareaElement },
      ) => void;

      /**
       * (event : TextareaInputEventDetail) => 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.
       */
      "on:ionInput"?: (
        event: CustomEvent<TextareaInputEventDetail> & {
          target: HTMLIonTextareaElement;
        },
      ) => void;
    }

    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).
       * API info: https://ionicframework.com/docs/api/title#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * The size of the toolbar title.
       * API info: https://ionicframework.com/docs/api/title#size
       */
      size?: "large" | "small" | undefined;
    }

    interface IonToast {
      /**
       * If `true`, the toast will animate.
       * API info: https://ionicframework.com/docs/api/toast#animated
       */
      animated?: boolean;

      /**
       * An array of buttons for the toast.
       * API info: https://ionicframework.com/docs/api/toast#buttons
       */
      buttons?: (string | ToastButton)[] | undefined;

      /**
       * 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).
       * API info: https://ionicframework.com/docs/api/toast#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
       * API info: https://ionicframework.com/docs/api/toast#cssclass
       */
      "css-class"?: string | string[] | undefined;

      /**
       * How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called.
       * API info: https://ionicframework.com/docs/api/toast#duration
       */
      duration?: number;

      /**
       * Animation to use when the toast is presented.
       * API info: https://ionicframework.com/docs/api/toast#enteranimation
       */
      "enter-animation"?: ((baseEl: any, opts?: any) => Animation) | undefined;

      /**
       * Header to be shown in the toast.
       * API info: https://ionicframework.com/docs/api/toast#header
       */
      header?: string | undefined;

      /**
       * Additional attributes to pass to the toast.
       * API info: https://ionicframework.com/docs/api/toast#htmlattributes
       */
      "html-attributes"?: undefined | { [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
       * API info: https://ionicframework.com/docs/api/toast#icon
       */
      icon?: string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/toast#isopen
       */
      "is-open"?: boolean;

      /**
       * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
       * API info: https://ionicframework.com/docs/api/toast#keyboardclose
       */
      "keyboard-close"?: 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.
       * API info: https://ionicframework.com/docs/api/toast#layout
       */
      layout?: "baseline" | "stacked";

      /**
       * Animation to use when the toast is dismissed.
       * API info: https://ionicframework.com/docs/api/toast#leaveanimation
       */
      "leave-animation"?: ((baseEl: any, opts?: any) => Animation) | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/toast#message
       */
      message?: IonicSafeString | string | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/toast#mode
       */
      mode?: "ios" | "md";

      /**
       * The starting position of the toast on the screen. Can be tweaked further using the `positionAnchor` property.
       * API info: https://ionicframework.com/docs/api/toast#position
       */
      position?: "bottom" | "middle" | "top";

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/toast#positionanchor
       */
      "position-anchor"?: HTMLElement | string | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/toast#swipegesture
       */
      "swipe-gesture"?: "vertical" | undefined;

      /**
       * 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).
       * API info: https://ionicframework.com/docs/api/toast#translucent
       */
      translucent?: boolean;

      /**
       * An ID corresponding to the trigger element that causes the toast to open when clicked.
       * API info: https://ionicframework.com/docs/api/toast#trigger
       */
      trigger?: string | undefined;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted after the toast has dismissed. Shorthand for ionToastDidDismiss.
       */
      "on:didDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonToastElement;
        },
      ) => void;

      /**
       * () => void :  Emitted after the toast has presented. Shorthand for ionToastWillDismiss.
       */
      "on:didPresent"?: () => void;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted after the toast has dismissed.
       */
      "on:ionToastDidDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonToastElement;
        },
      ) => void;

      /**
       * () => void :  Emitted after the toast has presented.
       */
      "on:ionToastDidPresent"?: () => void;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted before the toast has dismissed.
       */
      "on:ionToastWillDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonToastElement;
        },
      ) => void;

      /**
       * () => void :  Emitted before the toast has presented.
       */
      "on:ionToastWillPresent"?: () => void;

      /**
       * (event : OverlayEventDetail<any>) => void :  Emitted before the toast has dismissed. Shorthand for ionToastWillDismiss.
       */
      "on:willDismiss"?: (
        event: CustomEvent<OverlayEventDetail<any>> & {
          target: HTMLIonToastElement;
        },
      ) => void;

      /**
       * () => void :  Emitted before the toast has presented. Shorthand for ionToastWillPresent.
       */
      "on:willPresent"?: () => void;
    }

    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`.
       * API info: https://ionicframework.com/docs/api/toggle#alignment
       */
      alignment?: "center" | "start" | undefined;

      /**
       * If `true`, the toggle is selected.
       * API info: https://ionicframework.com/docs/api/toggle#checked
       */
      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).
       * API info: https://ionicframework.com/docs/api/toggle#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * If `true`, the user cannot interact with the toggle.
       * API info: https://ionicframework.com/docs/api/toggle#disabled
       */
      disabled?: boolean;

      /**
       * Enables the on/off accessibility switch labels within the toggle.
       * API info: https://ionicframework.com/docs/api/toggle#enableonofflabels
       */
      "enable-on-off-labels"?: boolean | undefined;

      /**
       * Text that is placed under the toggle label and displayed when an error is detected.
       * API info: https://ionicframework.com/docs/api/toggle#errortext
       */
      "error-text"?: string | undefined;

      /**
       * Text that is placed under the toggle label and displayed when no error is detected.
       * API info: https://ionicframework.com/docs/api/toggle#helpertext
       */
      "helper-text"?: string | undefined;

      /**
       * 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`.
       * API info: https://ionicframework.com/docs/api/toggle#justify
       */
      justify?: "end" | "space-between" | "start" | undefined;

      /**
       * 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.
       * API info: https://ionicframework.com/docs/api/toggle#labelplacement
       */
      "label-placement"?: "end" | "fixed" | "stacked" | "start";

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/toggle#mode
       */
      mode?: "ios" | "md";

      /**
       * The name of the control, which is submitted with the form data.
       * API info: https://ionicframework.com/docs/api/toggle#name
       */
      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.
       * API info: https://ionicframework.com/docs/api/toggle#required
       */
      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>`.
       * API info: https://ionicframework.com/docs/api/toggle#value
       */
      value?: null | string | undefined;

      /**
       * () => void :  Emitted when the toggle loses focus.
       */
      "on:ionBlur"?: () => void;

      /**
       * (event : ToggleChangeEventDetail<any>) => void :  Emitted when the user switches the toggle on or off.  This event will not emit when programmatically setting the `checked` property.
       */
      "on:ionChange"?: (
        event: CustomEvent<ToggleChangeEventDetail<any>> & {
          target: HTMLIonToggleElement;
        },
      ) => void;

      /**
       * () => void :  Emitted when the toggle has focus.
       */
      "on:ionFocus"?: () => void;
    }

    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).
       * API info: https://ionicframework.com/docs/api/toolbar#color
       */
      color?:
        | "danger"
        | "dark"
        | "light"
        | "medium"
        | "primary"
        | "secondary"
        | "success"
        | "tertiary"
        | "warning"
        | (string & Record<never, never>)
        | undefined;

      /**
       * The mode determines which platform styles to use.
       * API info: https://ionicframework.com/docs/api/toolbar#mode
       */
      mode?: "ios" | "md";
    }

    interface IntrinsicElements {
      "ion-accordion": IonAccordion & HTMLBaseAttributes;
      "ion-accordion-group": IonAccordionGroup & HTMLBaseAttributes;
      "ion-action-sheet": IonActionSheet & HTMLBaseAttributes;
      "ion-alert": IonAlert & HTMLBaseAttributes;
      "ion-app": IonApp & HTMLBaseAttributes;
      "ion-avatar": IonAvatar & HTMLBaseAttributes;
      "ion-back-button": IonBackButton & HTMLBaseAttributes;
      "ion-backdrop": IonBackdrop & HTMLBaseAttributes;
      "ion-badge": IonBadge & HTMLBaseAttributes;
      "ion-breadcrumb": IonBreadcrumb & HTMLBaseAttributes;
      "ion-breadcrumbs": IonBreadcrumbs & HTMLBaseAttributes;
      "ion-button": IonButton & HTMLBaseAttributes;
      "ion-buttons": IonButtons & HTMLBaseAttributes;
      "ion-card": IonCard & HTMLBaseAttributes;
      "ion-card-content": IonCardContent & HTMLBaseAttributes;
      "ion-card-header": IonCardHeader & HTMLBaseAttributes;
      "ion-card-subtitle": IonCardSubtitle & HTMLBaseAttributes;
      "ion-card-title": IonCardTitle & HTMLBaseAttributes;
      "ion-checkbox": IonCheckbox & HTMLBaseAttributes;
      "ion-chip": IonChip & HTMLBaseAttributes;
      "ion-col": IonCol & HTMLBaseAttributes;
      "ion-content": IonContent & HTMLBaseAttributes;
      "ion-datetime": IonDatetime & HTMLBaseAttributes;
      "ion-datetime-button": IonDatetimeButton & HTMLBaseAttributes;
      "ion-fab": IonFab & HTMLBaseAttributes;
      "ion-fab-button": IonFabButton & HTMLBaseAttributes;
      "ion-fab-list": IonFabList & HTMLBaseAttributes;
      "ion-footer": IonFooter & HTMLBaseAttributes;
      "ion-grid": IonGrid & HTMLBaseAttributes;
      "ion-header": IonHeader & HTMLBaseAttributes;
      "ion-img": IonImg & HTMLBaseAttributes;
      "ion-infinite-scroll": IonInfiniteScroll & HTMLBaseAttributes;
      "ion-infinite-scroll-content": IonInfiniteScrollContent &
        HTMLBaseAttributes;
      "ion-input": IonInput & HTMLBaseAttributes;
      "ion-input-password-toggle": IonInputPasswordToggle & HTMLBaseAttributes;
      "ion-item": IonItem & HTMLBaseAttributes;
      "ion-item-divider": IonItemDivider & HTMLBaseAttributes;
      "ion-item-group": IonItemGroup & HTMLBaseAttributes;
      "ion-item-option": IonItemOption & HTMLBaseAttributes;
      "ion-item-options": IonItemOptions & HTMLBaseAttributes;
      "ion-item-sliding": IonItemSliding & HTMLBaseAttributes;
      "ion-label": IonLabel & HTMLBaseAttributes;
      "ion-list": IonList & HTMLBaseAttributes;
      "ion-list-header": IonListHeader & HTMLBaseAttributes;
      "ion-loading": IonLoading & HTMLBaseAttributes;
      "ion-menu": IonMenu & HTMLBaseAttributes;
      "ion-menu-button": IonMenuButton & HTMLBaseAttributes;
      "ion-menu-toggle": IonMenuToggle & HTMLBaseAttributes;
      "ion-modal": IonModal & HTMLBaseAttributes;
      "ion-nav": IonNav & HTMLBaseAttributes;
      "ion-nav-link": IonNavLink & HTMLBaseAttributes;
      "ion-note": IonNote & HTMLBaseAttributes;
      "ion-picker": IonPicker & HTMLBaseAttributes;
      "ion-picker-column": IonPickerColumn & HTMLBaseAttributes;
      "ion-picker-column-option": IonPickerColumnOption & HTMLBaseAttributes;
      "ion-picker-legacy": IonPickerLegacy & HTMLBaseAttributes;
      "ion-popover": IonPopover & HTMLBaseAttributes;
      "ion-progress-bar": IonProgressBar & HTMLBaseAttributes;
      "ion-radio": IonRadio & HTMLBaseAttributes;
      "ion-radio-group": IonRadioGroup & HTMLBaseAttributes;
      "ion-range": IonRange & HTMLBaseAttributes;
      "ion-refresher": IonRefresher & HTMLBaseAttributes;
      "ion-refresher-content": IonRefresherContent & HTMLBaseAttributes;
      "ion-reorder": IonReorder & HTMLBaseAttributes;
      "ion-reorder-group": IonReorderGroup & HTMLBaseAttributes;
      "ion-ripple-effect": IonRippleEffect & HTMLBaseAttributes;
      "ion-route": IonRoute & HTMLBaseAttributes;
      "ion-route-redirect": IonRouteRedirect & HTMLBaseAttributes;
      "ion-router": IonRouter & HTMLBaseAttributes;
      "ion-router-link": IonRouterLink & HTMLBaseAttributes;
      "ion-router-outlet": IonRouterOutlet & HTMLBaseAttributes;
      "ion-row": IonRow & HTMLBaseAttributes;
      "ion-searchbar": IonSearchbar & HTMLBaseAttributes;
      "ion-segment": IonSegment & HTMLBaseAttributes;
      "ion-segment-button": IonSegmentButton & HTMLBaseAttributes;
      "ion-segment-content": IonSegmentContent & HTMLBaseAttributes;
      "ion-segment-view": IonSegmentView & HTMLBaseAttributes;
      "ion-select": IonSelect & HTMLBaseAttributes;
      "ion-select-modal": IonSelectModal & HTMLBaseAttributes;
      "ion-select-option": IonSelectOption & HTMLBaseAttributes;
      "ion-skeleton-text": IonSkeletonText & HTMLBaseAttributes;
      "ion-spinner": IonSpinner & HTMLBaseAttributes;
      "ion-split-pane": IonSplitPane & HTMLBaseAttributes;
      "ion-tab": IonTab & HTMLBaseAttributes;
      "ion-tab-bar": IonTabBar & HTMLBaseAttributes;
      "ion-tab-button": IonTabButton & HTMLBaseAttributes;
      "ion-tabs": IonTabs & HTMLBaseAttributes;
      "ion-text": IonText & HTMLBaseAttributes;
      "ion-textarea": IonTextarea & HTMLBaseAttributes;
      "ion-thumbnail": IonThumbnail & HTMLBaseAttributes;
      "ion-title": IonTitle & HTMLBaseAttributes;
      "ion-toast": IonToast & HTMLBaseAttributes;
      "ion-toggle": IonToggle & HTMLBaseAttributes;
      "ion-toolbar": IonToolbar & HTMLBaseAttributes;
    }
  }
}