@ionic/core 8.8.12-dev.11781813448.16e7a064 → 8.8.12-dev.11782342444.186b6e9c

package/dist/types/components/select/select-interface.d.ts

@@ -1,3 +1,6 @@
+import type { ActionSheetButton } from '../action-sheet/action-sheet-interface';
+import type { AlertInput } from '../alert/alert-interface';
+import type { SelectPopoverOption } from '../select-popover/select-popover-interface';
 export type SelectInterface = 'action-sheet' | 'popover' | 'alert' | 'modal';
 export type SelectCompareFn = (currentValue: any, compareValue: any) => boolean;
 export interface SelectChangeEventDetail<T = any> {
@@ -7,3 +10,31 @@ export interface SelectCustomEvent<T = any> extends CustomEvent {
     detail: SelectChangeEventDetail<T>;
     target: HTMLIonSelectElement;
 }
+export interface SelectActionSheetButton extends Omit<ActionSheetButton, 'text'>, RichContentOption {
+    /** The main text for the option as a string or an HTMLElement. */
+    text?: string | HTMLElement;
+}
+export interface SelectAlertInput extends Omit<AlertInput, 'label'>, RichContentOption {
+    /** The main label for the option as a string or an HTMLElement. */
+    label?: string | HTMLElement;
+    /** Where the label sits relative to the option's selection control. */
+    labelPlacement?: 'start' | 'end';
+    /** How to pack the label and the option's selection control within a line. */
+    justify?: 'start' | 'end' | 'space-between';
+}
+export interface SelectOverlayOption extends Omit<SelectPopoverOption, 'text'>, RichContentOption {
+    /** The main text for the option as a string or an HTMLElement. */
+    text?: string | HTMLElement;
+    /** Where the label sits relative to the option's selection control. */
+    labelPlacement?: 'start' | 'end';
+    /** How to pack the label and the option's selection control within a line. */
+    justify?: 'start' | 'end' | 'space-between';
+}
+export interface RichContentOption {
+    /** Content to display at the start of the option. */
+    startContent?: HTMLElement;
+    /** Content to display at the end of the option. */
+    endContent?: HTMLElement;
+    /** A description for the option. */
+    description?: string;
+}

package/dist/types/components/select/select.d.ts

@@ -32,6 +32,7 @@ export declare class Select implements ComponentInterface {
     private notchSpacerEl;
     private validationObserver?;
     private notchController?;
+    private customHTMLEnabled;
     el: HTMLIonSelectElement;
     isExpanded: boolean;
     /**
@@ -203,6 +204,7 @@ export declare class Select implements ComponentInterface {
     ionStyle: EventEmitter<StyleEventDetail>;
     protected styleChanged(): void;
     private setValue;
+    private isValueEqual;
     connectedCallback(): Promise<void>;
     componentWillLoad(): void;
     componentDidLoad(): void;
@@ -238,6 +240,12 @@ export declare class Select implements ComponentInterface {
      * was passed.
      */
     private get labelText();
+    /**
+     * Returns the text to display in the select based on the selected value.
+     *
+     * @param useHTML If `true`, the returned text will include any custom HTML content from the selected option. If `false`, the returned text will be plain text without any HTML. Defaults to `false`.
+     * @returns The text to display in the select, either with or without HTML based on the `useHTML` parameter.
+     */
     private getText;
     private setFocus;
     private emitStyle;
@@ -268,6 +276,16 @@ export declare class Select implements ComponentInterface {
      * when fill="outline".
      */
     private renderLabelContainer;
+    /**
+     * Wraps text nodes in the select text with span elements
+     * so spacing can be added between elements without
+     * changing the display to prevent losing the ellipses
+     * behavior.
+     *
+     * Only wraps when the string contains HTML elements
+     * alongside text.
+     */
+    private wrapSelectTextNodes;
     /**
      * Renders either the placeholder
      * or the selected values based on

package/dist/types/components/select-option/select-option.d.ts

@@ -1,4 +1,11 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ *
+ * @slot - Content is placed between the named slots if provided without a slot.
+ * @slot start - Content is placed to the left of the select option text in LTR, and to the right in RTL.
+ * @slot end - Content is placed to the right of the select option text in LTR, and to the left in RTL.
+ */
 export declare class SelectOption implements ComponentInterface {
     private inputId;
     el: HTMLElement;
@@ -10,5 +17,39 @@ export declare class SelectOption implements ComponentInterface {
      * The text value of the option.
      */
     value?: any | null;
+    /**
+     * Text that is placed underneath the option text to provide additional details about the option.
+     */
+    description?: string;
+    /**
+     * 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';
+    /**
+     * 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';
     render(): any;
 }

package/dist/types/components.d.ts

@@ -25,7 +25,6 @@ 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";
@@ -63,7 +62,6 @@ 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";
@@ -1295,9 +1293,9 @@ export namespace Components {
         "autocomplete": AutocompleteTypes;
         /**
           * Whether auto correction should be enabled when the user is entering/editing the text value.
-          * @default 'off'
+          * @default false
          */
-        "autocorrect": 'on' | 'off';
+        "autocorrect": boolean;
         /**
           * 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
@@ -2005,8 +2003,8 @@ export namespace Components {
          */
         "handle"?: boolean;
         /**
-          * The interaction behavior for the sheet modal when the handle is pressed.  Defaults to `"none"`, which  means the modal will not change size or position when the handle is pressed. Set to `"cycle"` to let the modal cycle between available breakpoints when pressed.  Handle behavior is unavailable when the `handle` property is set to `false` or when the `breakpoints` property is not set (using a fullscreen or card modal).
-          * @default 'none'
+          * 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'
          */
         "handleBehavior"?: ModalHandleBehavior;
         /**
@@ -2289,107 +2287,6 @@ 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.
@@ -2915,6 +2812,10 @@ 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 {
@@ -2937,9 +2838,9 @@ export namespace Components {
         "autocomplete": AutocompleteTypes;
         /**
           * Set the input's autocorrect property.
-          * @default 'off'
+          * @default false
          */
-        "autocorrect": 'on' | 'off';
+        "autocorrect": boolean;
         /**
           * Set the cancel button icon. Only applies to `md` mode. Defaults to `arrow-back-sharp`.
           * @default config.get('backButtonIcon', arrowBackSharp) as string
@@ -3241,11 +3142,27 @@ export namespace Components {
         "options": SelectModalOption[];
     }
     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. 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.
          */
@@ -3858,14 +3775,6 @@ 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;
@@ -4623,47 +4532,6 @@ 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;
@@ -5261,8 +5129,6 @@ 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;
@@ -6548,9 +6414,9 @@ declare namespace LocalJSX {
         "autocomplete"?: AutocompleteTypes;
         /**
           * Whether auto correction should be enabled when the user is entering/editing the text value.
-          * @default 'off'
+          * @default false
          */
-        "autocorrect"?: 'on' | 'off';
+        "autocorrect"?: boolean;
         /**
           * 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
@@ -7229,8 +7095,8 @@ declare namespace LocalJSX {
          */
         "handle"?: boolean;
         /**
-          * The interaction behavior for the sheet modal when the handle is pressed.  Defaults to `"none"`, which  means the modal will not change size or position when the handle is pressed. Set to `"cycle"` to let the modal cycle between available breakpoints when pressed.  Handle behavior is unavailable when the `handle` property is set to `false` or when the `breakpoints` property is not set (using a fullscreen or card modal).
-          * @default 'none'
+          * 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'
          */
         "handleBehavior"?: ModalHandleBehavior;
         /**
@@ -7432,110 +7298,6 @@ 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.
@@ -8100,6 +7862,10 @@ 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 {
     }
@@ -8121,9 +7887,9 @@ declare namespace LocalJSX {
         "autocomplete"?: AutocompleteTypes;
         /**
           * Set the input's autocorrect property.
-          * @default 'off'
+          * @default false
          */
-        "autocorrect"?: 'on' | 'off';
+        "autocorrect"?: boolean;
         /**
           * Set the cancel button icon. Only applies to `md` mode. Defaults to `arrow-back-sharp`.
           * @default config.get('backButtonIcon', arrowBackSharp) as string
@@ -8458,11 +8224,27 @@ declare namespace LocalJSX {
         "options"?: SelectModalOption[];
     }
     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. 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.
          */
@@ -9242,7 +9024,7 @@ declare namespace LocalJSX {
         "color": Color;
         "autocapitalize": string;
         "autocomplete": AutocompleteTypes;
-        "autocorrect": 'on' | 'off';
+        "autocorrect": boolean;
         "autofocus": boolean;
         "clearInput": boolean;
         "clearInputIcon": string;
@@ -9410,16 +9192,6 @@ 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;
@@ -9523,13 +9295,14 @@ declare namespace LocalJSX {
     interface IonRouterOutletAttributes {
         "mode": "ios" | "md";
         "animated": boolean;
+        "swipeGesture": boolean;
     }
     interface IonSearchbarAttributes {
         "color": Color;
         "animated": boolean;
         "autocapitalize": string;
         "autocomplete": AutocompleteTypes;
-        "autocorrect": 'on' | 'off';
+        "autocorrect": boolean;
         "cancelButtonIcon": string;
         "cancelButtonText": string;
         "clearIcon": string;
@@ -9599,6 +9372,9 @@ declare namespace LocalJSX {
     interface IonSelectOptionAttributes {
         "disabled": boolean;
         "value": string;
+        "description": string;
+        "labelPlacement": 'start' | 'end';
+        "justify": 'start' | 'end' | 'space-between';
     }
     interface IonSelectPopoverAttributes {
         "header": string;
@@ -9770,8 +9546,6 @@ 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] };
@@ -9873,8 +9647,6 @@ 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>;