@ionic/core 8.8.19-dev.11787007863.1976a30e → 8.8.19-dev.11787083540.1511caf2

package/dist/types/components.d.ts

@@ -25,6 +25,7 @@ import { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, S
 import { ViewController } from "./components/nav/view-controller";
 import { PickerChangeEventDetail } from "./components/picker/picker-interfaces";
 import { PickerColumnChangeEventDetail, PickerColumnValue } from "./components/picker-column/picker-column-interfaces";
+import { PickerButton, PickerColumn } from "./components/picker-legacy/picker-interface";
 import { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface";
 import { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface";
 import { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
@@ -62,6 +63,7 @@ export { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, S
 export { ViewController } from "./components/nav/view-controller";
 export { PickerChangeEventDetail } from "./components/picker/picker-interfaces";
 export { PickerColumnChangeEventDetail, PickerColumnValue } from "./components/picker-column/picker-column-interfaces";
+export { PickerButton, PickerColumn } from "./components/picker-legacy/picker-interface";
 export { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAction } from "./components/popover/popover-interface";
 export { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface";
 export { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
@@ -928,6 +930,7 @@ export namespace Components {
         "clearText": string;
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, refer to [theming](/docs/theming/basics).
+          * @default 'primary'
          */
         "color"?: Color;
         /**
@@ -1079,6 +1082,7 @@ export namespace Components {
     interface IonDatetimeButton {
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+          * @default 'primary'
          */
         "color"?: Color;
         /**
@@ -1245,9 +1249,6 @@ export namespace Components {
          */
         "translucent": boolean;
     }
-    /**
-     * @deprecated 
-     */
     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.
@@ -1302,9 +1303,9 @@ export namespace Components {
         "autocomplete": AutocompleteTypes;
         /**
           * Whether auto correction should be enabled when the user is entering/editing the text value.
-          * @default false
+          * @default 'off'
          */
-        "autocorrect": boolean;
+        "autocorrect": 'on' | 'off';
         /**
           * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
           * @default false
@@ -2012,8 +2013,8 @@ export namespace Components {
          */
         "handle"?: boolean;
         /**
-          * The interaction behavior for the sheet modal when the handle is 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).  Set to `"cycle"` to make the handle focusable and let the sheet modal cycle between available breakpoints when pressed. This keeps the sheet operable with assistive technology.  Set to `"none"` to make the handle purely decorative when pressed and removed from the tab order.  Defaults to `"cycle"`.
-          * @default 'cycle'
+          * The interaction behavior for the sheet modal when the handle is pressed.  Defaults to `"none"`, which  means the modal will not change size or position when the handle is pressed. Set to `"cycle"` to let the modal cycle between available breakpoints when pressed.  Handle behavior is unavailable when the `handle` property is set to `false` or when the `breakpoints` property is not set (using a fullscreen or card modal).
+          * @default 'none'
          */
         "handleBehavior"?: ModalHandleBehavior;
         /**
@@ -2117,6 +2118,10 @@ export namespace Components {
           * @param view The view to get.
          */
         "getPrevious": (view?: ViewController) => Promise<ViewController | undefined>;
+        /**
+          * Called by <ion-router> to retrieve the current component.
+         */
+        "getRouteId": () => Promise<RouteID | undefined>;
         /**
           * Inserts a component into the navigation stack at the specified index. This is useful to add a component at any point in the navigation stack.
           * @param insertIndex The index to insert the component at in the stack.
@@ -2192,6 +2197,15 @@ export namespace Components {
           * @param done The transition complete function.
          */
         "setRoot": <T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null, opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
+        /**
+          * Called by the router to update the view.
+          * @param id The component tag.
+          * @param params The component params.
+          * @param direction A direction hint.
+          * @param animation an AnimationBuilder.
+          * @return the status.
+         */
+        "setRouteId": (id: string, params: ComponentProps | undefined, direction: RouterDirection, animation?: AnimationBuilder) => Promise<RouteWrite>;
         /**
           * If the nav component should allow for swipe-to-go-back.
          */
@@ -2236,6 +2250,7 @@ export namespace Components {
     interface IonPickerColumn {
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+          * @default 'primary'
          */
         "color"?: Color;
         /**
@@ -2269,6 +2284,7 @@ export namespace Components {
     interface IonPickerColumnOption {
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+          * @default 'primary'
          */
         "color"?: Color;
         /**
@@ -2281,6 +2297,107 @@ export namespace Components {
          */
         "value"?: any | null;
     }
+    interface IonPickerLegacy {
+        /**
+          * If `true`, the picker will animate.
+          * @default true
+         */
+        "animated": boolean;
+        /**
+          * If `true`, the picker will be dismissed when the backdrop is clicked.
+          * @default true
+         */
+        "backdropDismiss": boolean;
+        /**
+          * Array of buttons to be displayed at the top of the picker.
+          * @default []
+         */
+        "buttons": PickerButton[];
+        /**
+          * Array of columns to be displayed in the picker.
+          * @default []
+         */
+        "columns": PickerColumn[];
+        /**
+          * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
+         */
+        "cssClass"?: string | string[];
+        "delegate"?: FrameworkDelegate;
+        /**
+          * Dismiss the picker overlay after it has been presented.
+          * @param data Any data to emit in the dismiss events.
+          * @param role The role of the element that is dismissing the picker. This can be useful in a button handler for determining which button was clicked to dismiss the picker. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+         */
+        "dismiss": (data?: any, role?: string) => Promise<boolean>;
+        /**
+          * Number of milliseconds to wait before dismissing the picker.
+          * @default 0
+         */
+        "duration": number;
+        /**
+          * Animation to use when the picker is presented.
+         */
+        "enterAnimation"?: AnimationBuilder;
+        /**
+          * Get the column that matches the specified name.
+          * @param name The name of the column.
+         */
+        "getColumn": (name: string) => Promise<PickerColumn | undefined>;
+        /**
+          * @default false
+         */
+        "hasController": boolean;
+        /**
+          * Additional attributes to pass to the picker.
+         */
+        "htmlAttributes"?: { [key: string]: any };
+        /**
+          * If `true`, the picker will open. If `false`, the picker will close. Use this if you need finer grained control over presentation, otherwise just use the pickerController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the picker dismisses. You will need to do that in your code.
+          * @default false
+         */
+        "isOpen": boolean;
+        /**
+          * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+          * @default true
+         */
+        "keyboardClose": boolean;
+        /**
+          * Animation to use when the picker is dismissed.
+         */
+        "leaveAnimation"?: AnimationBuilder;
+        /**
+          * The mode determines which platform styles to use.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * Returns a promise that resolves when the picker did dismiss.
+         */
+        "onDidDismiss": <T = any>() => Promise<OverlayEventDetail<T>>;
+        /**
+          * Returns a promise that resolves when the picker will dismiss.
+         */
+        "onWillDismiss": <T = any>() => Promise<OverlayEventDetail<T>>;
+        "overlayIndex": number;
+        /**
+          * Present the picker overlay after it has been created.
+         */
+        "present": () => Promise<void>;
+        /**
+          * If `true`, a backdrop will be displayed behind the picker.
+          * @default true
+         */
+        "showBackdrop": boolean;
+        /**
+          * An ID corresponding to the trigger element that causes the picker to open when clicked.
+         */
+        "trigger": string | undefined;
+    }
+    interface IonPickerLegacyColumn {
+        /**
+          * Picker column data
+         */
+        "col": PickerColumn;
+    }
     interface IonPopover {
         /**
           * Describes how to align the popover content with the `reference` point. Defaults to `"center"` for `ios` mode, and `"start"` for `md` mode.
@@ -2711,7 +2828,7 @@ export namespace Components {
          */
         "beforeLeave"?: NavigationHookCallback;
         /**
-          * Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-router-outlet`) 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.
+          * Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`) when the route matches.  The value of this property is not always the tagname of the component to load, in `ion-tabs` it actually refers to the name of the `ion-tab` to select.
          */
         "component": string;
         /**
@@ -2806,10 +2923,6 @@ export namespace Components {
          */
         "mode": "ios" | "md";
         "setRouteId": (id: string, params: ComponentProps | undefined, direction: RouterDirection, animation?: AnimationBuilder) => Promise<RouteWrite>;
-        /**
-          * If `true`, the router-outlet should allow navigation via swipe-to-go-back gesture. Defaults to `true` for `"ios"` mode and `false` for `"md"` mode.
-         */
-        "swipeGesture"?: boolean;
         "swipeHandler"?: SwipeGestureHandler;
     }
     interface IonRow {
@@ -2832,9 +2945,9 @@ export namespace Components {
         "autocomplete": AutocompleteTypes;
         /**
           * Set the input's autocorrect property.
-          * @default false
+          * @default 'off'
          */
-        "autocorrect": boolean;
+        "autocorrect": 'on' | 'off';
         /**
           * Set the cancel button icon. Only applies to `md` mode. Defaults to `arrow-back-sharp`.
           * @default config.get('backButtonIcon', arrowBackSharp) as string
@@ -3137,26 +3250,10 @@ export namespace Components {
     }
     interface IonSelectOption {
         /**
-          * Text that is placed underneath the option text to provide additional details about the option.
-         */
-        "description"?: string;
-        /**
-          * If `true`, the user cannot interact with the select option.
+          * If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
           * @default false
          */
         "disabled": boolean;
-        /**
-          * How to pack the label and the option's selection control 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.  Applies to the `alert`, `popover`, and `modal` interfaces, but has no visible effect on radio options in `popover` or `modal` on `md` (the radio control is hidden there).  When unset, the interface picks a default based on mode and control type.
-         */
-        "justify"?: 'start' | 'end' | 'space-between';
-        /**
-          * Where the label is placed relative to the option's selection control (radio circle or checkbox box) when the option is rendered in an `alert`, `popover`, or `modal` interface. `"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.  Applies to the `alert`, `popover`, and `modal` interfaces, but has no visible effect on radio options in `popover` or `modal` on `md` (the radio control is hidden there).  When unset, the interface picks a default based on mode and control type.
-         */
-        "labelPlacement"?: 'start' | 'end';
-        /**
-          * The mode determines the platform behaviors of the component.
-         */
-        "mode"?: "ios" | "md";
         /**
           * The text value of the option.
          */
@@ -3769,6 +3866,14 @@ export interface IonPickerColumnCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIonPickerColumnElement;
 }
+export interface IonPickerLegacyCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonPickerLegacyElement;
+}
+export interface IonPickerLegacyColumnCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonPickerLegacyColumnElement;
+}
 export interface IonPopoverCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIonPopoverElement;
@@ -4197,9 +4302,6 @@ declare global {
         "ionImgDidLoad": void;
         "ionError": void;
     }
-    /**
-     * @deprecated 
-     */
     interface HTMLIonImgElement extends Components.IonImg, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIonImgElementEventMap>(type: K, listener: (this: HTMLIonImgElement, ev: IonImgCustomEvent<HTMLIonImgElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4529,6 +4631,47 @@ declare global {
         prototype: HTMLIonPickerColumnOptionElement;
         new (): HTMLIonPickerColumnOptionElement;
     };
+    interface HTMLIonPickerLegacyElementEventMap {
+        "ionPickerDidPresent": void;
+        "ionPickerWillPresent": void;
+        "ionPickerWillDismiss": OverlayEventDetail;
+        "ionPickerDidDismiss": OverlayEventDetail;
+        "didPresent": void;
+        "willPresent": void;
+        "willDismiss": OverlayEventDetail;
+        "didDismiss": OverlayEventDetail;
+    }
+    interface HTMLIonPickerLegacyElement extends Components.IonPickerLegacy, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonPickerLegacyElementEventMap>(type: K, listener: (this: HTMLIonPickerLegacyElement, ev: IonPickerLegacyCustomEvent<HTMLIonPickerLegacyElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonPickerLegacyElementEventMap>(type: K, listener: (this: HTMLIonPickerLegacyElement, ev: IonPickerLegacyCustomEvent<HTMLIonPickerLegacyElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIonPickerLegacyElement: {
+        prototype: HTMLIonPickerLegacyElement;
+        new (): HTMLIonPickerLegacyElement;
+    };
+    interface HTMLIonPickerLegacyColumnElementEventMap {
+        "ionPickerColChange": PickerColumn;
+    }
+    interface HTMLIonPickerLegacyColumnElement extends Components.IonPickerLegacyColumn, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonPickerLegacyColumnElementEventMap>(type: K, listener: (this: HTMLIonPickerLegacyColumnElement, ev: IonPickerLegacyColumnCustomEvent<HTMLIonPickerLegacyColumnElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonPickerLegacyColumnElementEventMap>(type: K, listener: (this: HTMLIonPickerLegacyColumnElement, ev: IonPickerLegacyColumnCustomEvent<HTMLIonPickerLegacyColumnElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIonPickerLegacyColumnElement: {
+        prototype: HTMLIonPickerLegacyColumnElement;
+        new (): HTMLIonPickerLegacyColumnElement;
+    };
     interface HTMLIonPopoverElementEventMap {
         "ionPopoverDidPresent": void;
         "ionPopoverWillPresent": void;
@@ -5126,6 +5269,8 @@ declare global {
         "ion-picker": HTMLIonPickerElement;
         "ion-picker-column": HTMLIonPickerColumnElement;
         "ion-picker-column-option": HTMLIonPickerColumnOptionElement;
+        "ion-picker-legacy": HTMLIonPickerLegacyElement;
+        "ion-picker-legacy-column": HTMLIonPickerLegacyColumnElement;
         "ion-popover": HTMLIonPopoverElement;
         "ion-progress-bar": HTMLIonProgressBarElement;
         "ion-radio": HTMLIonRadioElement;
@@ -6028,6 +6173,7 @@ declare namespace LocalJSX {
         "clearText"?: string;
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, refer to [theming](/docs/theming/basics).
+          * @default 'primary'
          */
         "color"?: Color;
         /**
@@ -6181,6 +6327,7 @@ declare namespace LocalJSX {
     interface IonDatetimeButton {
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+          * @default 'primary'
          */
         "color"?: Color;
         /**
@@ -6347,9 +6494,6 @@ declare namespace LocalJSX {
          */
         "translucent"?: boolean;
     }
-    /**
-     * @deprecated 
-     */
     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.
@@ -6416,9 +6560,9 @@ declare namespace LocalJSX {
         "autocomplete"?: AutocompleteTypes;
         /**
           * Whether auto correction should be enabled when the user is entering/editing the text value.
-          * @default false
+          * @default 'off'
          */
-        "autocorrect"?: boolean;
+        "autocorrect"?: 'on' | 'off';
         /**
           * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
           * @default false
@@ -7097,8 +7241,8 @@ declare namespace LocalJSX {
          */
         "handle"?: boolean;
         /**
-          * The interaction behavior for the sheet modal when the handle is 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).  Set to `"cycle"` to make the handle focusable and let the sheet modal cycle between available breakpoints when pressed. This keeps the sheet operable with assistive technology.  Set to `"none"` to make the handle purely decorative when pressed and removed from the tab order.  Defaults to `"cycle"`.
-          * @default 'cycle'
+          * The interaction behavior for the sheet modal when the handle is pressed.  Defaults to `"none"`, which  means the modal will not change size or position when the handle is pressed. Set to `"cycle"` to let the modal cycle between available breakpoints when pressed.  Handle behavior is unavailable when the `handle` property is set to `false` or when the `breakpoints` property is not set (using a fullscreen or card modal).
+          * @default 'none'
          */
         "handleBehavior"?: ModalHandleBehavior;
         /**
@@ -7263,6 +7407,7 @@ declare namespace LocalJSX {
     interface IonPickerColumn {
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+          * @default 'primary'
          */
         "color"?: Color;
         /**
@@ -7286,6 +7431,7 @@ declare namespace LocalJSX {
     interface IonPickerColumnOption {
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+          * @default 'primary'
          */
         "color"?: Color;
         /**
@@ -7298,6 +7444,110 @@ declare namespace LocalJSX {
          */
         "value"?: any | null;
     }
+    interface IonPickerLegacy {
+        /**
+          * If `true`, the picker will animate.
+          * @default true
+         */
+        "animated"?: boolean;
+        /**
+          * If `true`, the picker will be dismissed when the backdrop is clicked.
+          * @default true
+         */
+        "backdropDismiss"?: boolean;
+        /**
+          * Array of buttons to be displayed at the top of the picker.
+          * @default []
+         */
+        "buttons"?: PickerButton[];
+        /**
+          * Array of columns to be displayed in the picker.
+          * @default []
+         */
+        "columns"?: PickerColumn[];
+        /**
+          * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
+         */
+        "cssClass"?: string | string[];
+        /**
+          * Number of milliseconds to wait before dismissing the picker.
+          * @default 0
+         */
+        "duration"?: number;
+        /**
+          * Animation to use when the picker is presented.
+         */
+        "enterAnimation"?: AnimationBuilder;
+        /**
+          * Additional attributes to pass to the picker.
+         */
+        "htmlAttributes"?: { [key: string]: any };
+        /**
+          * If `true`, the picker will open. If `false`, the picker will close. Use this if you need finer grained control over presentation, otherwise just use the pickerController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the picker dismisses. You will need to do that in your code.
+          * @default false
+         */
+        "isOpen"?: boolean;
+        /**
+          * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+          * @default true
+         */
+        "keyboardClose"?: boolean;
+        /**
+          * Animation to use when the picker is dismissed.
+         */
+        "leaveAnimation"?: AnimationBuilder;
+        /**
+          * The mode determines which platform styles to use.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * Emitted after the picker has dismissed. Shorthand for ionPickerDidDismiss.
+         */
+        "onDidDismiss"?: (event: IonPickerLegacyCustomEvent<OverlayEventDetail>) => void;
+        /**
+          * Emitted after the picker has presented. Shorthand for ionPickerWillDismiss.
+         */
+        "onDidPresent"?: (event: IonPickerLegacyCustomEvent<void>) => void;
+        /**
+          * Emitted after the picker has dismissed.
+         */
+        "onIonPickerDidDismiss"?: (event: IonPickerLegacyCustomEvent<OverlayEventDetail>) => void;
+        /**
+          * Emitted after the picker has presented.
+         */
+        "onIonPickerDidPresent"?: (event: IonPickerLegacyCustomEvent<void>) => void;
+        /**
+          * Emitted before the picker has dismissed.
+         */
+        "onIonPickerWillDismiss"?: (event: IonPickerLegacyCustomEvent<OverlayEventDetail>) => void;
+        /**
+          * Emitted before the picker has presented.
+         */
+        "onIonPickerWillPresent"?: (event: IonPickerLegacyCustomEvent<void>) => void;
+        /**
+          * Emitted before the picker has dismissed. Shorthand for ionPickerWillDismiss.
+         */
+        "onWillDismiss"?: (event: IonPickerLegacyCustomEvent<OverlayEventDetail>) => void;
+        /**
+          * Emitted before the picker has presented. Shorthand for ionPickerWillPresent.
+         */
+        "onWillPresent"?: (event: IonPickerLegacyCustomEvent<void>) => void;
+        /**
+          * If `true`, a backdrop will be displayed behind the picker.
+          * @default true
+         */
+        "showBackdrop"?: boolean;
+        /**
+          * An ID corresponding to the trigger element that causes the picker to open when clicked.
+         */
+        "trigger"?: string | undefined;
+    }
+    interface IonPickerLegacyColumn {
+        /**
+          * Picker column data
+         */
+        "col": PickerColumn;
+    }
     interface IonPopover {
         /**
           * Describes how to align the popover content with the `reference` point. Defaults to `"center"` for `ios` mode, and `"start"` for `md` mode.
@@ -7769,7 +8019,7 @@ declare namespace LocalJSX {
          */
         "beforeLeave"?: NavigationHookCallback;
         /**
-          * Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-router-outlet`) 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.
+          * Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`) when the route matches.  The value of this property is not always the tagname of the component to load, in `ion-tabs` it actually refers to the name of the `ion-tab` to select.
          */
         "component": string;
         /**
@@ -7862,10 +8112,6 @@ declare namespace LocalJSX {
           * @default getIonMode(this)
          */
         "mode"?: "ios" | "md";
-        /**
-          * If `true`, the router-outlet should allow navigation via swipe-to-go-back gesture. Defaults to `true` for `"ios"` mode and `false` for `"md"` mode.
-         */
-        "swipeGesture"?: boolean;
     }
     interface IonRow {
     }
@@ -7887,9 +8133,9 @@ declare namespace LocalJSX {
         "autocomplete"?: AutocompleteTypes;
         /**
           * Set the input's autocorrect property.
-          * @default false
+          * @default 'off'
          */
-        "autocorrect"?: boolean;
+        "autocorrect"?: 'on' | 'off';
         /**
           * Set the cancel button icon. Only applies to `md` mode. Defaults to `arrow-back-sharp`.
           * @default config.get('backButtonIcon', arrowBackSharp) as string
@@ -8225,26 +8471,10 @@ declare namespace LocalJSX {
     }
     interface IonSelectOption {
         /**
-          * Text that is placed underneath the option text to provide additional details about the option.
-         */
-        "description"?: string;
-        /**
-          * If `true`, the user cannot interact with the select option.
+          * If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
           * @default false
          */
         "disabled"?: boolean;
-        /**
-          * How to pack the label and the option's selection control 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.  Applies to the `alert`, `popover`, and `modal` interfaces, but has no visible effect on radio options in `popover` or `modal` on `md` (the radio control is hidden there).  When unset, the interface picks a default based on mode and control type.
-         */
-        "justify"?: 'start' | 'end' | 'space-between';
-        /**
-          * Where the label is placed relative to the option's selection control (radio circle or checkbox box) when the option is rendered in an `alert`, `popover`, or `modal` interface. `"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.  Applies to the `alert`, `popover`, and `modal` interfaces, but has no visible effect on radio options in `popover` or `modal` on `md` (the radio control is hidden there).  When unset, the interface picks a default based on mode and control type.
-         */
-        "labelPlacement"?: 'start' | 'end';
-        /**
-          * The mode determines the platform behaviors of the component.
-         */
-        "mode"?: "ios" | "md";
         /**
           * The text value of the option.
          */
@@ -9025,7 +9255,7 @@ declare namespace LocalJSX {
         "color": Color;
         "autocapitalize": string;
         "autocomplete": AutocompleteTypes;
-        "autocorrect": boolean;
+        "autocorrect": 'on' | 'off';
         "autofocus": boolean;
         "clearInput": boolean;
         "clearInputIcon": string;
@@ -9193,6 +9423,16 @@ declare namespace LocalJSX {
         "value": string;
         "color": Color;
     }
+    interface IonPickerLegacyAttributes {
+        "keyboardClose": boolean;
+        "cssClass": string | string[];
+        "duration": number;
+        "showBackdrop": boolean;
+        "backdropDismiss": boolean;
+        "animated": boolean;
+        "isOpen": boolean;
+        "trigger": string | undefined;
+    }
     interface IonPopoverAttributes {
         "component": ComponentRef;
         "keyboardClose": boolean;
@@ -9296,14 +9536,13 @@ declare namespace LocalJSX {
     interface IonRouterOutletAttributes {
         "mode": "ios" | "md";
         "animated": boolean;
-        "swipeGesture": boolean;
     }
     interface IonSearchbarAttributes {
         "color": Color;
         "animated": boolean;
         "autocapitalize": string;
         "autocomplete": AutocompleteTypes;
-        "autocorrect": boolean;
+        "autocorrect": 'on' | 'off';
         "cancelButtonIcon": string;
         "cancelButtonText": string;
         "clearIcon": string;
@@ -9373,9 +9612,6 @@ declare namespace LocalJSX {
     interface IonSelectOptionAttributes {
         "disabled": boolean;
         "value": string;
-        "description": string;
-        "labelPlacement": 'start' | 'end';
-        "justify": 'start' | 'end' | 'space-between';
     }
     interface IonSelectPopoverAttributes {
         "header": string;
@@ -9547,6 +9783,8 @@ declare namespace LocalJSX {
         "ion-picker": IonPicker;
         "ion-picker-column": Omit<IonPickerColumn, keyof IonPickerColumnAttributes> & { [K in keyof IonPickerColumn & keyof IonPickerColumnAttributes]?: IonPickerColumn[K] } & { [K in keyof IonPickerColumn & keyof IonPickerColumnAttributes as `attr:${K}`]?: IonPickerColumnAttributes[K] } & { [K in keyof IonPickerColumn & keyof IonPickerColumnAttributes as `prop:${K}`]?: IonPickerColumn[K] };
         "ion-picker-column-option": Omit<IonPickerColumnOption, keyof IonPickerColumnOptionAttributes> & { [K in keyof IonPickerColumnOption & keyof IonPickerColumnOptionAttributes]?: IonPickerColumnOption[K] } & { [K in keyof IonPickerColumnOption & keyof IonPickerColumnOptionAttributes as `attr:${K}`]?: IonPickerColumnOptionAttributes[K] } & { [K in keyof IonPickerColumnOption & keyof IonPickerColumnOptionAttributes as `prop:${K}`]?: IonPickerColumnOption[K] };
+        "ion-picker-legacy": Omit<IonPickerLegacy, keyof IonPickerLegacyAttributes> & { [K in keyof IonPickerLegacy & keyof IonPickerLegacyAttributes]?: IonPickerLegacy[K] } & { [K in keyof IonPickerLegacy & keyof IonPickerLegacyAttributes as `attr:${K}`]?: IonPickerLegacyAttributes[K] } & { [K in keyof IonPickerLegacy & keyof IonPickerLegacyAttributes as `prop:${K}`]?: IonPickerLegacy[K] };
+        "ion-picker-legacy-column": IonPickerLegacyColumn;
         "ion-popover": Omit<IonPopover, keyof IonPopoverAttributes> & { [K in keyof IonPopover & keyof IonPopoverAttributes]?: IonPopover[K] } & { [K in keyof IonPopover & keyof IonPopoverAttributes as `attr:${K}`]?: IonPopoverAttributes[K] } & { [K in keyof IonPopover & keyof IonPopoverAttributes as `prop:${K}`]?: IonPopover[K] };
         "ion-progress-bar": Omit<IonProgressBar, keyof IonProgressBarAttributes> & { [K in keyof IonProgressBar & keyof IonProgressBarAttributes]?: IonProgressBar[K] } & { [K in keyof IonProgressBar & keyof IonProgressBarAttributes as `attr:${K}`]?: IonProgressBarAttributes[K] } & { [K in keyof IonProgressBar & keyof IonProgressBarAttributes as `prop:${K}`]?: IonProgressBar[K] };
         "ion-radio": Omit<IonRadio, keyof IonRadioAttributes> & { [K in keyof IonRadio & keyof IonRadioAttributes]?: IonRadio[K] } & { [K in keyof IonRadio & keyof IonRadioAttributes as `attr:${K}`]?: IonRadioAttributes[K] } & { [K in keyof IonRadio & keyof IonRadioAttributes as `prop:${K}`]?: IonRadio[K] };
@@ -9622,9 +9860,6 @@ declare module "@stencil/core" {
             "ion-footer": LocalJSX.IntrinsicElements["ion-footer"] & JSXBase.HTMLAttributes<HTMLIonFooterElement>;
             "ion-grid": LocalJSX.IntrinsicElements["ion-grid"] & JSXBase.HTMLAttributes<HTMLIonGridElement>;
             "ion-header": LocalJSX.IntrinsicElements["ion-header"] & JSXBase.HTMLAttributes<HTMLIonHeaderElement>;
-            /**
-             * @deprecated 
-             */
             "ion-img": LocalJSX.IntrinsicElements["ion-img"] & JSXBase.HTMLAttributes<HTMLIonImgElement>;
             "ion-infinite-scroll": LocalJSX.IntrinsicElements["ion-infinite-scroll"] & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollElement>;
             "ion-infinite-scroll-content": LocalJSX.IntrinsicElements["ion-infinite-scroll-content"] & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollContentElement>;
@@ -9651,6 +9886,8 @@ declare module "@stencil/core" {
             "ion-picker": LocalJSX.IntrinsicElements["ion-picker"] & JSXBase.HTMLAttributes<HTMLIonPickerElement>;
             "ion-picker-column": LocalJSX.IntrinsicElements["ion-picker-column"] & JSXBase.HTMLAttributes<HTMLIonPickerColumnElement>;
             "ion-picker-column-option": LocalJSX.IntrinsicElements["ion-picker-column-option"] & JSXBase.HTMLAttributes<HTMLIonPickerColumnOptionElement>;
+            "ion-picker-legacy": LocalJSX.IntrinsicElements["ion-picker-legacy"] & JSXBase.HTMLAttributes<HTMLIonPickerLegacyElement>;
+            "ion-picker-legacy-column": LocalJSX.IntrinsicElements["ion-picker-legacy-column"] & JSXBase.HTMLAttributes<HTMLIonPickerLegacyColumnElement>;
             "ion-popover": LocalJSX.IntrinsicElements["ion-popover"] & JSXBase.HTMLAttributes<HTMLIonPopoverElement>;
             "ion-progress-bar": LocalJSX.IntrinsicElements["ion-progress-bar"] & JSXBase.HTMLAttributes<HTMLIonProgressBarElement>;
             "ion-radio": LocalJSX.IntrinsicElements["ion-radio"] & JSXBase.HTMLAttributes<HTMLIonRadioElement>;