voyager-ionic-core 8.5.7 → 8.7.1

package/dist/types/components.d.ts

@@ -18,6 +18,7 @@ import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-int
 import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 import { SpinnerTypes } from "./components/spinner/spinner-configs";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
+import { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from "./components/input-otp/input-otp-interface";
 import { MenuChangeEventDetail, MenuCloseEventDetail, MenuType, Side } from "./components/menu/menu-interface";
 import { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
 import { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
@@ -29,7 +30,7 @@ import { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAct
 import { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface";
 import { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
 import { RefresherEventDetail } from "./components/refresher/refresher-interface";
-import { ItemReorderEventDetail } from "./components/reorder-group/reorder-group-interface";
+import { ItemReorderEventDetail, ReorderEndEventDetail, ReorderMoveEventDetail } from "./components/reorder-group/reorder-group-interface";
 import { NavigationHookCallback } from "./components/route/route-interface";
 import { SearchbarChangeEventDetail, SearchbarInputEventDetail } from "./components/searchbar/searchbar-interface";
 import { SegmentChangeEventDetail, SegmentValue } from "./components/segment/segment-interface";
@@ -55,6 +56,7 @@ export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-int
 export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 export { SpinnerTypes } from "./components/spinner/spinner-configs";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
+export { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from "./components/input-otp/input-otp-interface";
 export { MenuChangeEventDetail, MenuCloseEventDetail, MenuType, Side } from "./components/menu/menu-interface";
 export { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
 export { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
@@ -66,7 +68,7 @@ export { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAct
 export { RadioGroupChangeEventDetail, RadioGroupCompareFn } from "./components/radio-group/radio-group-interface";
 export { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface";
 export { RefresherEventDetail } from "./components/refresher/refresher-interface";
-export { ItemReorderEventDetail } from "./components/reorder-group/reorder-group-interface";
+export { ItemReorderEventDetail, ReorderEndEventDetail, ReorderMoveEventDetail } from "./components/reorder-group/reorder-group-interface";
 export { NavigationHookCallback } from "./components/route/route-interface";
 export { SearchbarChangeEventDetail, SearchbarInputEventDetail } from "./components/searchbar/searchbar-interface";
 export { SegmentChangeEventDetail, SegmentValue } from "./components/segment/segment-interface";
@@ -83,6 +85,7 @@ export namespace Components {
     interface IonAccordion {
         /**
           * If `true`, the accordion cannot be interacted with.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -91,32 +94,39 @@ export namespace Components {
         "mode"?: "ios" | "md";
         /**
           * If `true`, the accordion cannot be interacted with, but does not alter the opacity.
+          * @default false
          */
         "readonly": boolean;
         /**
           * The toggle icon to use. This icon will be rotated when the accordion is expanded or collapsed.
+          * @default chevronDown
          */
         "toggleIcon": string;
         /**
           * The slot inside of `ion-item` to place the toggle icon. Defaults to `"end"`.
+          * @default 'end'
          */
         "toggleIconSlot": 'start' | 'end';
         /**
           * The value of the accordion. Defaults to an autogenerated value.
+          * @default `ion-accordion-${accordionIds++}`
          */
         "value": string;
     }
     interface IonAccordionGroup {
         /**
           * If `true`, all accordions inside of the accordion group will animate when expanding or collapsing.
+          * @default true
          */
         "animated": boolean;
         /**
           * If `true`, the accordion group cannot be interacted with.
+          * @default false
          */
         "disabled": boolean;
         /**
           * Describes the expansion behavior for each accordion. Possible values are `"compact"` and `"inset"`. Defaults to `"compact"`.
+          * @default 'compact'
          */
         "expand": 'compact' | 'inset';
         "getAccordions": () => Promise<HTMLIonAccordionElement[]>;
@@ -130,6 +140,7 @@ export namespace Components {
         "multiple"?: boolean;
         /**
           * If `true`, the accordion group cannot be interacted with, but does not alter the opacity.
+          * @default false
          */
         "readonly": boolean;
         /**
@@ -144,14 +155,17 @@ export namespace Components {
     interface IonActionSheet {
         /**
           * If `true`, the action sheet will animate.
+          * @default true
          */
         "animated": boolean;
         /**
           * If `true`, the action sheet will be dismissed when the backdrop is clicked.
+          * @default true
          */
         "backdropDismiss": boolean;
         /**
           * An array of buttons for the action sheet.
+          * @default []
          */
         "buttons": (ActionSheetButton | string)[];
         /**
@@ -160,15 +174,18 @@ export namespace Components {
         "cssClass"?: string | string[];
         "delegate"?: FrameworkDelegate;
         /**
-          * Dismiss the action sheet overlay after it has been presented.
+          * Dismiss the action sheet overlay after it has been presented. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
           * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+          * @param role The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
           * Animation to use when the action sheet is presented.
          */
         "enterAnimation"?: AnimationBuilder;
+        /**
+          * @default false
+         */
         "hasController": boolean;
         /**
           * Title for the action sheet.
@@ -180,10 +197,12 @@ export namespace Components {
         "htmlAttributes"?: { [key: string]: any };
         /**
           * If `true`, the action sheet will open. If `false`, the action sheet will close. Use this if you need finer grained control over presentation, otherwise just use the actionSheetController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the action sheet dismisses. You will need to do that in your code.
+          * @default false
          */
         "isOpen": boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+          * @default true
          */
         "keyboardClose": boolean;
         /**
@@ -213,6 +232,7 @@ export namespace Components {
         "subHeader"?: string;
         /**
           * If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+          * @default false
          */
         "translucent": boolean;
         /**
@@ -223,14 +243,17 @@ export namespace Components {
     interface IonAlert {
         /**
           * If `true`, the alert will animate.
+          * @default true
          */
         "animated": boolean;
         /**
           * If `true`, the alert will be dismissed when the backdrop is clicked.
+          * @default true
          */
         "backdropDismiss": boolean;
         /**
           * Array of buttons to be added to the alert.
+          * @default []
          */
         "buttons": (AlertButton | string)[];
         /**
@@ -239,15 +262,18 @@ export namespace Components {
         "cssClass"?: string | string[];
         "delegate"?: FrameworkDelegate;
         /**
-          * Dismiss the alert overlay after it has been presented.
+          * Dismiss the alert overlay after it has been presented. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
           * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+          * @param role The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
           * Animation to use when the alert is presented.
          */
         "enterAnimation"?: AnimationBuilder;
+        /**
+          * @default false
+         */
         "hasController": boolean;
         /**
           * The main title in the heading of the alert.
@@ -259,14 +285,17 @@ export namespace Components {
         "htmlAttributes"?: { [key: string]: any };
         /**
           * Array of input to show in the alert.
+          * @default []
          */
         "inputs": AlertInput[];
         /**
           * If `true`, the alert will open. If `false`, the alert will close. Use this if you need finer grained control over presentation, otherwise just use the alertController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the alert dismisses. You will need to do that in your code.
+          * @default false
          */
         "isOpen": boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+          * @default true
          */
         "keyboardClose": boolean;
         /**
@@ -300,6 +329,7 @@ export namespace Components {
         "subHeader"?: string;
         /**
           * If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+          * @default false
          */
         "translucent": boolean;
         /**
@@ -310,6 +340,7 @@ export namespace Components {
     interface IonApp {
         /**
           * Used to set focus on an element that uses `ion-focusable`. Do not use this if focusing the element as a result of a keyboard event as the focus utility should handle this for us. This method should be used when we want to programmatically focus an element as a result of another user action. (Ex: We focus the first element inside of a popover when the user presents it, but the popover is not always presented as a result of keyboard action.)
+          * @param elements An array of HTML elements to set focus on.
          */
         "setFocus": (elements: HTMLElement[]) => Promise<void>;
     }
@@ -326,6 +357,7 @@ export namespace Components {
         "defaultHref"?: string;
         /**
           * If `true`, the user cannot interact with the button.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -346,20 +378,24 @@ export namespace Components {
         "text"?: string | null;
         /**
           * The type of the button.
+          * @default 'button'
          */
         "type": 'submit' | 'reset' | 'button';
     }
     interface IonBackdrop {
         /**
           * If `true`, the backdrop will stop propagation on tap.
+          * @default true
          */
         "stopPropagation": boolean;
         /**
           * If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.
+          * @default true
          */
         "tappable": boolean;
         /**
           * If `true`, the backdrop will be visible.
+          * @default true
          */
         "visible": boolean;
     }
@@ -376,8 +412,12 @@ export namespace Components {
     interface IonBreadcrumb {
         /**
           * If `true`, the breadcrumb will take on a different look to show that it is the currently active breadcrumb. Defaults to `true` for the last breadcrumb if it is not set on any.
+          * @default false
          */
         "active": boolean;
+        /**
+          * @default false
+         */
         "collapsed": boolean;
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
@@ -385,6 +425,7 @@ export namespace Components {
         "color"?: Color;
         /**
           * If `true`, the user cannot interact with the breadcrumb.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -410,6 +451,7 @@ export namespace Components {
         "routerAnimation": AnimationBuilder | undefined;
         /**
           * When using a router, it specifies the transition direction when navigating to another page using `href`.
+          * @default 'forward'
          */
         "routerDirection": RouterDirection;
         /**
@@ -429,10 +471,12 @@ export namespace Components {
         "color"?: Color;
         /**
           * The number of breadcrumbs to show after the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed.
+          * @default 1
          */
         "itemsAfterCollapse": number;
         /**
           * The number of breadcrumbs to show before the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed.
+          * @default 1
          */
         "itemsBeforeCollapse": number;
         /**
@@ -447,6 +491,7 @@ export namespace Components {
     interface IonButton {
         /**
           * The type of button.
+          * @default 'button'
          */
         "buttonType": string;
         /**
@@ -455,6 +500,7 @@ export namespace Components {
         "color"?: Color;
         /**
           * If `true`, the user cannot interact with the button.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -491,6 +537,7 @@ export namespace Components {
         "routerAnimation": AnimationBuilder | undefined;
         /**
           * When using a router, it specifies the transition direction when navigating to another page using `href`.
+          * @default 'forward'
          */
         "routerDirection": RouterDirection;
         /**
@@ -503,6 +550,7 @@ export namespace Components {
         "size"?: 'small' | 'default' | 'large';
         /**
           * If `true`, activates a button with a heavier font weight.
+          * @default false
          */
         "strong": boolean;
         /**
@@ -511,18 +559,21 @@ export namespace Components {
         "target": string | undefined;
         /**
           * The type of the button.
+          * @default 'button'
          */
         "type": 'submit' | 'reset' | 'button';
     }
     interface IonButtons {
         /**
           * If true, buttons will disappear when its parent toolbar has fully collapsed if the toolbar is not the first toolbar. If the toolbar is the first toolbar, the buttons will be hidden and will only be shown once all toolbars have fully collapsed.  Only applies in `ios` mode with `collapse` set to `true` on `ion-header`.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
+          * @default false
          */
         "collapse": boolean;
     }
     interface IonCard {
         /**
           * If `true`, a button tag will be rendered and the card will be tappable.
+          * @default false
          */
         "button": boolean;
         /**
@@ -531,6 +582,7 @@ export namespace Components {
         "color"?: Color;
         /**
           * If `true`, the user cannot interact with the card.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -555,6 +607,7 @@ export namespace Components {
         "routerAnimation": AnimationBuilder | undefined;
         /**
           * When using a router, it specifies the transition direction when navigating to another page using `href`.
+          * @default 'forward'
          */
         "routerDirection": RouterDirection;
         /**
@@ -563,6 +616,7 @@ export namespace Components {
         "target": string | undefined;
         /**
           * The type of the button. Only used when an `onclick` or `button` property is present.
+          * @default 'button'
          */
         "type": 'submit' | 'reset' | 'button';
     }
@@ -583,6 +637,7 @@ export namespace Components {
         "mode"?: "ios" | "md";
         /**
           * If `true`, the card header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+          * @default false
          */
         "translucent": boolean;
     }
@@ -613,6 +668,7 @@ export namespace Components {
         "alignment"?: 'start' | 'center';
         /**
           * If `true`, the checkbox is selected.
+          * @default false
          */
         "checked": boolean;
         /**
@@ -621,6 +677,7 @@ export namespace Components {
         "color"?: Color;
         /**
           * If `true`, the user cannot interact with the checkbox.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -633,6 +690,7 @@ export namespace Components {
         "helperText"?: string;
         /**
           * If `true`, the checkbox will visually appear as indeterminate.
+          * @default false
          */
         "indeterminate": boolean;
         /**
@@ -641,6 +699,7 @@ export namespace Components {
         "justify"?: 'start' | 'end' | 'space-between';
         /**
           * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
+          * @default 'start'
          */
         "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
         /**
@@ -649,15 +708,18 @@ export namespace Components {
         "mode"?: "ios" | "md";
         /**
           * The name of the control, which is submitted with the form data.
+          * @default this.inputId
          */
         "name": string;
         /**
           * If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid.
+          * @default false
          */
         "required": boolean;
         "setFocus": () => Promise<void>;
         /**
           * The value of the checkbox does not mean if it's checked or not, use the `checked` property for that.  The value of a checkbox is analogous to the value of an `<input type="checkbox">`, it's only used when the checkbox participates in a native `<form>`.
+          * @default 'on'
          */
         "value": any | null;
     }
@@ -668,6 +730,7 @@ export namespace Components {
         "color"?: Color;
         /**
           * If `true`, the user cannot interact with the chip.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -676,6 +739,7 @@ export namespace Components {
         "mode"?: "ios" | "md";
         /**
           * Display an outline style button.
+          * @default false
          */
         "outline": boolean;
     }
@@ -784,6 +848,7 @@ export namespace Components {
         "color"?: Color;
         /**
           * Controls where the fixed content is placed relative to the main content in the DOM. This can be used to control the order in which fixed elements receive keyboard focus. For example, if a FAB in the fixed slot should receive keyboard focus before the main page content, set this property to `'before'`.
+          * @default 'after'
          */
         "fixedSlotPlacement": 'after' | 'before';
         /**
@@ -792,6 +857,7 @@ export namespace Components {
         "forceOverscroll"?: boolean;
         /**
           * If `true`, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent.
+          * @default false
          */
         "fullscreen": boolean;
         /**
@@ -811,6 +877,7 @@ export namespace Components {
         "scrollByPoint": (x: number, y: number, duration: number) => Promise<void>;
         /**
           * Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to `true`.
+          * @default false
          */
         "scrollEvents": boolean;
         /**
@@ -832,32 +899,39 @@ export namespace Components {
         "scrollToTop": (duration?: number) => Promise<void>;
         /**
           * If you want to enable the content scrolling in the X axis, set this property to `true`.
+          * @default false
          */
         "scrollX": boolean;
         /**
           * If you want to disable the content scrolling in the Y axis, set this property to `false`.
+          * @default true
          */
         "scrollY": boolean;
     }
     interface IonDatetime {
         /**
           * Emits the ionCancel event and optionally closes the popover or modal that the datetime was presented in.
+          * @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
          */
         "cancel": (closeOverlay?: boolean) => Promise<void>;
         /**
           * The text to display on the picker's cancel button.
+          * @default 'Cancel'
          */
         "cancelText": string;
         /**
           * The text to display on the picker's "Clear" button.
+          * @default 'Clear'
          */
         "clearText": string;
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+          * @default 'primary'
          */
         "color"?: Color;
         /**
           * Confirms the selected datetime value, updates the `value` property, and optionally closes the popover or modal that the datetime was presented in.
+          * @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
          */
         "confirm": (closeOverlay?: boolean) => Promise<void>;
         /**
@@ -866,14 +940,17 @@ export namespace Components {
         "dayValues"?: number[] | number | string;
         /**
           * If `true`, the user cannot interact with the datetime.
+          * @default false
          */
         "disabled": boolean;
         /**
           * The text to display on the picker's "Done" button.
+          * @default 'Done'
          */
         "doneText": string;
         /**
           * The first day of the week to use for `ion-datetime`. The default value is `0` and represents Sunday.
+          * @default 0
          */
         "firstDayOfWeek": number;
         /**
@@ -898,6 +975,7 @@ export namespace Components {
         "isDateEnabled"?: (dateIsoString: string) => boolean;
         /**
           * The locale to use for `ion-datetime`. This impacts month and day name formatting. The `"default"` value refers to the default locale set by your device.
+          * @default 'default'
          */
         "locale": string;
         /**
@@ -922,46 +1000,62 @@ export namespace Components {
         "monthValues"?: number[] | number | string;
         /**
           * If `true`, multiple dates can be selected at once. Only applies to `presentation="date"` and `preferWheel="false"`.
+          * @default false
          */
         "multiple": boolean;
         /**
           * The name of the control, which is submitted with the form data.
+          * @default this.inputId
          */
         "name": string;
         /**
           * If `true`, a wheel picker will be rendered instead of a calendar grid where possible. If `false`, a calendar grid will be rendered instead of a wheel picker where possible.  A wheel picker can be rendered instead of a grid when `presentation` is one of the following values: `"date"`, `"date-time"`, or `"time-date"`.  A wheel picker will always be rendered regardless of the `preferWheel` value when `presentation` is one of the following values: `"time"`, `"month"`, `"month-year"`, or `"year"`.
+          * @default false
          */
         "preferWheel": boolean;
         /**
           * Which values you want to select. `"date"` will show a calendar picker to select the month, day, and year. `"time"` will show a time picker to select the hour, minute, and (optionally) AM/PM. `"date-time"` will show the date picker first and time picker second. `"time-date"` will show the time picker first and date picker second.
+          * @default 'date-time'
          */
         "presentation": DatetimePresentation;
         /**
           * If `true`, the datetime appears normal but the selected date cannot be changed.
+          * @default false
          */
         "readonly": boolean;
         /**
           * Resets the internal state of the datetime but does not update the value. Passing a valid ISO-8601 string will reset the state of the component to the provided date. If no value is provided, the internal state will be reset to the clamped value of the min, max and today.
+          * @param startDate A valid [ISO-8601 string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format) to reset the datetime state to.
          */
         "reset": (startDate?: string) => Promise<void>;
+        /**
+          * If `true`, the datetime calendar displays a six-week (42-day) layout, including days from the previous and next months to fill the grid. These adjacent days are selectable unless disabled.
+          * @default false
+         */
+        "showAdjacentDays": boolean;
         /**
           * If `true`, a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.
+          * @default false
          */
         "showClearButton": boolean;
         /**
           * If `true`, the default "Cancel" and "OK" buttons will be rendered at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.
+          * @default false
          */
         "showDefaultButtons": boolean;
         /**
           * If `true`, the default "Time" label will be rendered for the time selector of the `ion-datetime` component. Developers can also use the `time-label` slot if they want to customize this label. If a custom label is set in the `time-label` slot then the default label will not be rendered.
+          * @default true
          */
         "showDefaultTimeLabel": boolean;
         /**
           * If `true`, a header will be shown above the calendar picker. This will include both the slotted title, and the selected date.
+          * @default false
          */
         "showDefaultTitle": boolean;
         /**
           * If `cover`, the `ion-datetime` will expand to cover the full width of its container. If `fixed`, the `ion-datetime` will have a fixed width.
+          * @default 'fixed'
          */
         "size": 'cover' | 'fixed';
         /**
@@ -980,6 +1074,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;
         /**
@@ -988,6 +1083,7 @@ export namespace Components {
         "datetime"?: string;
         /**
           * If `true`, the user cannot interact with the button.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -998,6 +1094,7 @@ export namespace Components {
     interface IonFab {
         /**
           * If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.
+          * @default false
          */
         "activated": boolean;
         /**
@@ -1006,6 +1103,7 @@ export namespace Components {
         "close": () => Promise<void>;
         /**
           * If `true`, the fab will display on the edge of the header if `vertical` is `"top"`, and on the edge of the footer if it is `"bottom"`. Should be used with a `fixed` slot.
+          * @default false
          */
         "edge": boolean;
         /**
@@ -1024,10 +1122,12 @@ export namespace Components {
     interface IonFabButton {
         /**
           * If `true`, the fab button will be show a close icon.
+          * @default false
          */
         "activated": boolean;
         /**
           * The icon name to use for the close icon. This will appear when the fab button is pressed. Only applies if it is the main button inside of a fab containing a fab list.
+          * @default close
          */
         "closeIcon": string;
         /**
@@ -1036,6 +1136,7 @@ export namespace Components {
         "color"?: Color;
         /**
           * If `true`, the user cannot interact with the fab button.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -1060,10 +1161,12 @@ export namespace Components {
         "routerAnimation": AnimationBuilder | undefined;
         /**
           * When using a router, it specifies the transition direction when navigating to another page using `href`.
+          * @default 'forward'
          */
         "routerDirection": RouterDirection;
         /**
           * If `true`, the fab button will show when in a fab-list.
+          * @default false
          */
         "show": boolean;
         /**
@@ -1076,20 +1179,24 @@ export namespace Components {
         "target": string | undefined;
         /**
           * If `true`, the fab button will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+          * @default false
          */
         "translucent": boolean;
         /**
           * The type of the button.
+          * @default 'button'
          */
         "type": 'submit' | 'reset' | 'button';
     }
     interface IonFabList {
         /**
           * If `true`, the fab list will show all fab buttons in the list.
+          * @default false
          */
         "activated": boolean;
         /**
           * The side the fab list will show on relative to the main fab button.
+          * @default 'bottom'
          */
         "side": 'start' | 'end' | 'top' | 'bottom';
     }
@@ -1104,12 +1211,14 @@ export namespace Components {
         "mode"?: "ios" | "md";
         /**
           * If `true`, the footer will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content.
+          * @default false
          */
         "translucent": boolean;
     }
     interface IonGrid {
         /**
           * If `true`, the grid will have a fixed width based on the screen size.
+          * @default false
          */
         "fixed": boolean;
     }
@@ -1124,6 +1233,7 @@ export namespace Components {
         "mode"?: "ios" | "md";
         /**
           * If `true`, the header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.
+          * @default false
          */
         "translucent": boolean;
     }
@@ -1144,14 +1254,17 @@ export namespace Components {
         "complete": () => Promise<void>;
         /**
           * If `true`, the infinite scroll will be hidden and scroll event listeners will be removed.  Set this to true to disable the infinite scroll from actively trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed.
+          * @default false
          */
         "disabled": boolean;
         /**
           * The position of the infinite scroll element. The value can be either `top` or `bottom`.
+          * @default 'bottom'
          */
         "position": 'top' | 'bottom';
         /**
           * The threshold distance from the bottom of the content to call the `infinite` output event when scrolled. The threshold value can be either a percent, or in pixels. For example, use the value of `10%` for the `infinite` output event to get called when the user has scrolled 10% from the bottom of the page. Use the value `100px` when the scroll is within 100 pixels from the bottom of the page.
+          * @default '15%'
          */
         "threshold": string;
     }
@@ -1168,22 +1281,27 @@ export namespace Components {
     interface IonInput {
         /**
           * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+          * @default 'off'
          */
         "autocapitalize": string;
         /**
           * Indicates whether the value of the control can be automatically completed by the browser.
+          * @default 'off'
          */
         "autocomplete": AutocompleteTypes;
         /**
           * Whether auto correction should be enabled when the user is entering/editing the text value.
+          * @default 'off'
          */
         "autocorrect": 'on' | 'off';
         /**
           * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
+          * @default false
          */
         "autofocus": boolean;
         /**
           * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
+          * @default false
          */
         "clearInput": boolean;
         /**
@@ -1200,6 +1318,7 @@ export namespace Components {
         "color"?: Color;
         /**
           * If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.
+          * @default false
          */
         "counter": boolean;
         /**
@@ -1212,6 +1331,7 @@ export namespace Components {
         "debounce"?: number;
         /**
           * If `true`, the user cannot interact with the input.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -1244,6 +1364,7 @@ export namespace Components {
         "label"?: string;
         /**
           * Where to place the label relative to the input. `"start"`: The label will appear to the left of the input in LTR and to the right in RTL. `"end"`: The label will appear to the right of the input in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `"stacked"`: The label will appear smaller and above the input regardless even when the input is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * @default 'start'
          */
         "labelPlacement": 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
         /**
@@ -1272,6 +1393,7 @@ export namespace Components {
         "multiple"?: boolean;
         /**
           * The name of the control, which is submitted with the form data.
+          * @default this.inputId
          */
         "name": string;
         /**
@@ -1284,10 +1406,12 @@ export namespace Components {
         "placeholder"?: string;
         /**
           * If `true`, the user cannot modify the value.
+          * @default false
          */
         "readonly": boolean;
         /**
           * If `true`, the user must fill in a value before submitting a form.
+          * @default false
          */
         "required": boolean;
         /**
@@ -1300,6 +1424,7 @@ export namespace Components {
         "shape"?: 'round';
         /**
           * If `true`, the element will have its spelling and grammar checked.
+          * @default false
          */
         "spellcheck": boolean;
         /**
@@ -1308,10 +1433,80 @@ export namespace Components {
         "step"?: string;
         /**
           * The type of control to display. The default type is text.
+          * @default 'text'
          */
         "type": TextFieldTypes;
         /**
           * The value of the input.
+          * @default ''
+         */
+        "value"?: string | number | null;
+    }
+    interface IonInputOtp {
+        /**
+          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+          * @default 'off'
+         */
+        "autocapitalize": string;
+        /**
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+         */
+        "color"?: Color;
+        /**
+          * If `true`, the user cannot interact with the input.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * The fill for the input boxes. If `"solid"` the input boxes will have a background. If `"outline"` the input boxes will be transparent with a border.
+          * @default 'outline'
+         */
+        "fill"?: 'outline' | 'solid';
+        /**
+          * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.  For numbers (type="number"): "numeric" For text (type="text"): "text"
+         */
+        "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        /**
+          * The number of input boxes to display.
+          * @default 4
+         */
+        "length": number;
+        /**
+          * A regex pattern string for allowed characters. Defaults based on type.  For numbers (`type="number"`): `"[\p{N}]"` For text (`type="text"`): `"[\p{L}\p{N}]"`
+         */
+        "pattern"?: string;
+        /**
+          * If `true`, the user cannot modify the value.
+          * @default false
+         */
+        "readonly": boolean;
+        /**
+          * Where separators should be shown between input boxes. Can be a comma-separated string or an array of numbers.  For example: `"3"` will show a separator after the 3rd input box. `[1,4]` will show a separator after the 1st and 4th input boxes. `"all"` will show a separator between every input box.
+         */
+        "separators"?: 'all' | string | number[];
+        /**
+          * Sets focus to an input box.
+          * @param index - The index of the input box to focus (0-based). If provided and the input box has a value, the input box at that index will be focused. Otherwise, the first empty input box or the last input if all are filled will be focused.
+         */
+        "setFocus": (index?: number) => Promise<void>;
+        /**
+          * The shape of the input boxes. If "round" they will have an increased border radius. If "rectangular" they will have no border radius. If "soft" they will have a soft border radius.
+          * @default 'round'
+         */
+        "shape": 'round' | 'rectangular' | 'soft';
+        /**
+          * The size of the input boxes.
+          * @default 'medium'
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * The type of input allowed in the input boxes.
+          * @default 'number'
+         */
+        "type": 'text' | 'number';
+        /**
+          * The value of the input group.
+          * @default ''
          */
         "value"?: string | number | null;
     }
@@ -1332,11 +1527,15 @@ export namespace Components {
           * The icon that can be used to represent showing a password. If not set, the "eye" Ionicon will be used.
          */
         "showIcon"?: string;
+        /**
+          * @default 'password'
+         */
         "type": TextFieldTypes;
     }
     interface IonItem {
         /**
           * If `true`, a button tag will be rendered and the item will be tappable.
+          * @default false
          */
         "button": boolean;
         /**
@@ -1349,10 +1548,12 @@ export namespace Components {
         "detail"?: boolean;
         /**
           * The icon to use when `detail` is set to `true`.
+          * @default chevronForward
          */
         "detailIcon": string;
         /**
           * If `true`, the user cannot interact with the item.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -1381,6 +1582,7 @@ export namespace Components {
         "routerAnimation": AnimationBuilder | undefined;
         /**
           * When using a router, it specifies the transition direction when navigating to another page using `href`.
+          * @default 'forward'
          */
         "routerDirection": RouterDirection;
         /**
@@ -1389,6 +1591,7 @@ export namespace Components {
         "target": string | undefined;
         /**
           * The type of the button. Only used when an `onclick` or `button` property is present.
+          * @default 'button'
          */
         "type": 'submit' | 'reset' | 'button';
     }
@@ -1403,6 +1606,7 @@ export namespace Components {
         "mode"?: "ios" | "md";
         /**
           * When it's set to `true`, the item-divider will stay visible when it reaches the top of the viewport until the next `ion-item-divider` replaces it.  This feature relies in `position:sticky`: https://caniuse.com/#feat=css-sticky
+          * @default false
          */
         "sticky": boolean;
     }
@@ -1415,6 +1619,7 @@ export namespace Components {
         "color"?: Color;
         /**
           * If `true`, the user cannot interact with the item option.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -1423,6 +1628,7 @@ export namespace Components {
         "download": string | undefined;
         /**
           * If `true`, the option will expand to take up the available width and cover any other options.
+          * @default false
          */
         "expandable": boolean;
         /**
@@ -1443,6 +1649,7 @@ export namespace Components {
         "target": string | undefined;
         /**
           * The type of the button.
+          * @default 'button'
          */
         "type": 'submit' | 'reset' | 'button';
     }
@@ -1450,6 +1657,7 @@ export namespace Components {
         "fireSwipeEvent": () => Promise<void>;
         /**
           * The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each.
+          * @default 'end'
          */
         "side": Side;
     }
@@ -1464,6 +1672,7 @@ export namespace Components {
         "closeOpened": () => Promise<boolean>;
         /**
           * If `true`, the user cannot interact with the sliding item.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -1501,6 +1710,7 @@ export namespace Components {
         "closeSlidingItems": () => Promise<boolean>;
         /**
           * If `true`, the list will have margin around it and rounded corners.
+          * @default false
          */
         "inset": boolean;
         /**
@@ -1529,10 +1739,12 @@ export namespace Components {
     interface IonLoading {
         /**
           * If `true`, the loading indicator will animate.
+          * @default true
          */
         "animated": boolean;
         /**
           * If `true`, the loading indicator will be dismissed when the backdrop is clicked.
+          * @default false
          */
         "backdropDismiss": boolean;
         /**
@@ -1541,19 +1753,23 @@ export namespace Components {
         "cssClass"?: string | string[];
         "delegate"?: FrameworkDelegate;
         /**
-          * Dismiss the loading overlay after it has been presented.
+          * Dismiss the loading overlay after it has been presented. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
           * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+          * @param role The role of the element that is dismissing the loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
           * Number of milliseconds to wait before dismissing the loading indicator.
+          * @default 0
          */
         "duration": number;
         /**
           * Animation to use when the loading indicator is presented.
          */
         "enterAnimation"?: AnimationBuilder;
+        /**
+          * @default false
+         */
         "hasController": boolean;
         /**
           * Additional attributes to pass to the loader.
@@ -1561,10 +1777,12 @@ export namespace Components {
         "htmlAttributes"?: { [key: string]: any };
         /**
           * If `true`, the loading indicator will open. If `false`, the loading indicator will close. Use this if you need finer grained control over presentation, otherwise just use the loadingController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the loading indicator dismisses. You will need to do that in your code.
+          * @default false
          */
         "isOpen": boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+          * @default true
          */
         "keyboardClose": boolean;
         /**
@@ -1594,6 +1812,7 @@ export namespace Components {
         "present": () => Promise<void>;
         /**
           * If `true`, a backdrop will be displayed behind the loading indicator.
+          * @default true
          */
         "showBackdrop": boolean;
         /**
@@ -1602,6 +1821,7 @@ export namespace Components {
         "spinner"?: SpinnerTypes | null;
         /**
           * If `true`, the loading indicator will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+          * @default false
          */
         "translucent": boolean;
         /**
@@ -1612,6 +1832,8 @@ export namespace Components {
     interface IonMenu {
         /**
           * Closes the menu. If the menu is already closed or it can't be closed, it returns `false`.
+          * @param animated If `true`, the menu will animate when closing. If `false`, the menu will close instantly without animation. Defaults to `true`.
+          * @param role The role of the element that is closing the menu. This can be useful in a button handler for determining which button was clicked to close the menu. Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
          */
         "close": (animated?: boolean, role?: string) => Promise<boolean>;
         /**
@@ -1620,10 +1842,11 @@ export namespace Components {
         "contentId"?: string;
         /**
           * If `true`, the menu is disabled.
+          * @default false
          */
         "disabled": boolean;
         /**
-          * Returns `true` is the menu is active.  A menu is active when it can be opened or closed, meaning it's enabled and it's not part of a `ion-split-pane`.
+          * Returns `true` if the menu is active.  A menu is active when it can be opened or closed, meaning it's enabled and it's not part of a `ion-split-pane`.
          */
         "isActive": () => Promise<boolean>;
         /**
@@ -1632,6 +1855,7 @@ export namespace Components {
         "isOpen": () => Promise<boolean>;
         /**
           * The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered.
+          * @default 50
          */
         "maxEdgeStart": number;
         /**
@@ -1640,22 +1864,29 @@ export namespace Components {
         "menuId"?: string;
         /**
           * Opens the menu. If the menu is already open or it can't be opened, it returns `false`.
+          * @param animated If `true`, the menu will animate when opening. If `false`, the menu will open instantly without animation. Defaults to `true`.
          */
         "open": (animated?: boolean) => Promise<boolean>;
         /**
-          * Opens or closes the button. If the operation can't be completed successfully, it returns `false`.
+          * Opens or closes the menu. If the operation can't be completed successfully, it returns `false`.
+          * @param shouldOpen If `true`, the menu will open. If `false`, the menu will close.
+          * @param animated If `true`, the menu will animate when opening/closing. If `false`, the menu will open/close instantly without animation.
+          * @param role The role of the element that is closing the menu.
          */
         "setOpen": (shouldOpen: boolean, animated?: boolean, role?: string) => Promise<boolean>;
         /**
           * Which side of the view the menu should be placed.
+          * @default 'start'
          */
         "side": Side;
         /**
           * If `true`, swiping the menu is enabled.
+          * @default true
          */
         "swipeGesture": boolean;
         /**
           * Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it. If the operation can't be completed successfully, it returns `false`.
+          * @param animated If `true`, the menu will animate when opening/closing. If `false`, the menu will open/close instantly without animation. Defaults to `true`.
          */
         "toggle": (animated?: boolean) => Promise<boolean>;
         /**
@@ -1666,6 +1897,7 @@ export namespace Components {
     interface IonMenuButton {
         /**
           * Automatically hides the menu button when the corresponding menu is not active
+          * @default true
          */
         "autoHide": boolean;
         /**
@@ -1674,6 +1906,7 @@ export namespace Components {
         "color"?: Color;
         /**
           * If `true`, the user cannot interact with the menu button.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -1686,12 +1919,14 @@ export namespace Components {
         "mode"?: "ios" | "md";
         /**
           * The type of the button.
+          * @default 'button'
          */
         "type": 'submit' | 'reset' | 'button';
     }
     interface IonMenuToggle {
         /**
           * Automatically hides the content when the corresponding menu is not active.  By default, it's `true`. Change it to `false` in order to keep `ion-menu-toggle` always visible regardless the state of the menu.
+          * @default true
          */
         "autoHide": boolean;
         /**
@@ -1702,14 +1937,17 @@ export namespace Components {
     interface IonModal {
         /**
           * If `true`, the modal will animate.
+          * @default true
          */
         "animated": boolean;
         /**
           * A decimal value between 0 and 1 that indicates the point after which the backdrop will begin to fade in when using a sheet modal. Prior to this point, the backdrop will be hidden and the content underneath the sheet can be interacted with. This value is exclusive meaning the backdrop will become active after the value specified.
+          * @default 0
          */
         "backdropBreakpoint": number;
         /**
           * If `true`, the modal will be dismissed when the backdrop is clicked.
+          * @default true
          */
         "backdropDismiss": boolean;
         /**
@@ -1718,6 +1956,7 @@ export namespace Components {
         "breakpoints"?: number[];
         /**
           * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
+          * @default true
          */
         "canDismiss": boolean | ((data?: any, role?: string) => Promise<boolean>);
         /**
@@ -1734,9 +1973,9 @@ export namespace Components {
         "cssClass"?: string | string[];
         "delegate"?: FrameworkDelegate;
         /**
-          * Dismiss the modal overlay after it has been presented.
+          * Dismiss the modal overlay after it has been presented. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
           * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+          * @param role The role of the element that is dismissing the modal. For example, `cancel` or `backdrop`.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
@@ -1745,10 +1984,12 @@ export namespace Components {
         "enterAnimation"?: AnimationBuilder;
         /**
           * Controls whether scrolling or dragging within the sheet modal expands it to a larger breakpoint. This only takes effect when `breakpoints` and `initialBreakpoint` are set.  If `true`, scrolling or dragging anywhere in the modal will first expand it to the next breakpoint. Once fully expanded, scrolling will affect the content. If `false`, scrolling will always affect the content. The modal will only expand when dragging the header or handle. The modal will close when dragging the header or handle. It can also be closed when dragging the content, but only if the content is scrolled to the top.
+          * @default true
          */
         "expandToScroll": boolean;
         /**
           * If `true`, focus will not be allowed to move outside of this overlay. If `false`, focus will be allowed to move outside of the overlay.  In most scenarios this property should remain set to `true`. Setting this property to `false` can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this to `false` when absolutely necessary.  Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. Developers would disable focus trapping on the Ionic overlay when presenting the 3rd party overlay and then re-enable focus trapping when dismissing the 3rd party overlay and moving focus back to the Ionic overlay.
+          * @default true
          */
         "focusTrap": boolean;
         /**
@@ -1761,8 +2002,12 @@ 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'
          */
         "handleBehavior"?: ModalHandleBehavior;
+        /**
+          * @default false
+         */
         "hasController": boolean;
         /**
           * Additional attributes to pass to the modal.
@@ -1774,14 +2019,17 @@ export namespace Components {
         "initialBreakpoint"?: number;
         /**
           * If `true`, the modal will open. If `false`, the modal will close. Use this if you need finer grained control over presentation, otherwise just use the modalController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the modal dismisses. You will need to do that in your code.
+          * @default false
          */
         "isOpen": boolean;
         /**
           * If `true`, the component passed into `ion-modal` will automatically be mounted when the modal is created. The component will remain mounted even when the modal is dismissed. However, the component will be destroyed when the modal is destroyed. This property is not reactive and should only be used when initially creating a modal.  Note: This feature only applies to inline modals in JavaScript frameworks such as Angular, React, and Vue.
+          * @default false
          */
         "keepContentsMounted": boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+          * @default true
          */
         "keyboardClose": boolean;
         /**
@@ -1810,11 +2058,13 @@ export namespace Components {
          */
         "presentingElement"?: HTMLElement;
         /**
-          * Move a sheet style modal to a specific breakpoint. The breakpoint value must be a value defined in your `breakpoints` array.
+          * Move a sheet style modal to a specific breakpoint.
+          * @param breakpoint The breakpoint value to move the sheet modal to. Must be a value defined in your `breakpoints` array.
          */
         "setCurrentBreakpoint": (breakpoint: number) => Promise<void>;
         /**
           * If `true`, a backdrop will be displayed behind the modal. This property controls whether or not the backdrop darkens the screen when the modal is presented. It does not control whether or not the backdrop is active or present in the DOM.
+          * @default true
          */
         "showBackdrop": boolean;
         /**
@@ -1825,6 +2075,7 @@ export namespace Components {
     interface IonNav {
         /**
           * If `true`, the nav should animate the transition of components.
+          * @default true
          */
         "animated": boolean;
         /**
@@ -1963,6 +2214,7 @@ export namespace Components {
         "routerAnimation"?: AnimationBuilder;
         /**
           * The transition direction when navigating to another page.
+          * @default 'forward'
          */
         "routerDirection": RouterDirection;
     }
@@ -1986,10 +2238,12 @@ 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;
         /**
           * If `true`, the user cannot interact with the picker.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -1998,6 +2252,7 @@ export namespace Components {
         "mode"?: "ios" | "md";
         /**
           * If `true`, tapping the picker will reveal a number input keyboard that lets the user type in values for each picker column. This is useful when working with time pickers.
+          * @default false
          */
         "numericInput": boolean;
         "scrollActiveItemIntoView": (smooth?: boolean) => Promise<void>;
@@ -2017,10 +2272,12 @@ 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;
         /**
           * If `true`, the user cannot interact with the picker column option.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -2031,18 +2288,22 @@ export namespace Components {
     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[];
         /**
@@ -2058,6 +2319,7 @@ export namespace Components {
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
           * Number of milliseconds to wait before dismissing the picker.
+          * @default 0
          */
         "duration": number;
         /**
@@ -2069,6 +2331,9 @@ export namespace Components {
           * @param name The name of the column.
          */
         "getColumn": (name: string) => Promise<PickerColumn | undefined>;
+        /**
+          * @default false
+         */
         "hasController": boolean;
         /**
           * Additional attributes to pass to the picker.
@@ -2076,10 +2341,12 @@ export namespace Components {
         "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;
         /**
@@ -2105,6 +2372,7 @@ export namespace Components {
         "present": () => Promise<void>;
         /**
           * If `true`, a backdrop will be displayed behind the picker.
+          * @default true
          */
         "showBackdrop": boolean;
         /**
@@ -2125,14 +2393,17 @@ export namespace Components {
         "alignment"?: PositionAlign;
         /**
           * If `true`, the popover will animate.
+          * @default true
          */
         "animated": boolean;
         /**
           * If `true`, the popover will display an arrow that points at the `reference` when running in `ios` mode. Does not apply in `md` mode.
+          * @default true
          */
         "arrow": boolean;
         /**
           * If `true`, the popover will be dismissed when the backdrop is clicked.
+          * @default true
          */
         "backdropDismiss": boolean;
         /**
@@ -2149,14 +2420,15 @@ export namespace Components {
         "cssClass"?: string | string[];
         "delegate"?: FrameworkDelegate;
         /**
-          * Dismiss the popover overlay after it has been presented.
+          * Dismiss the popover overlay after it has been presented. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
           * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'.
-          * @param dismissParentPopover If `true`, dismissing this popover will also dismiss a parent popover if this popover is nested. Defaults to `true`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+          * @param role The role of the element that is dismissing the popover. For example, `cancel` or `backdrop`.
+          * @param dismissParentPopover If `true`, dismissing this popover will also dismiss a parent popover if this popover is nested. Defaults to `true`.
          */
         "dismiss": (data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>;
         /**
           * If `true`, the popover will be automatically dismissed when the content has been clicked.
+          * @default false
          */
         "dismissOnSelect": boolean;
         /**
@@ -2169,9 +2441,13 @@ export namespace Components {
         "event": any;
         /**
           * If `true`, focus will not be allowed to move outside of this overlay. If `false`, focus will be allowed to move outside of the overlay.  In most scenarios this property should remain set to `true`. Setting this property to `false` can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this to `false` when absolutely necessary.  Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. Developers would disable focus trapping on the Ionic overlay when presenting the 3rd party overlay and then re-enable focus trapping when dismissing the 3rd party overlay and moving focus back to the Ionic overlay.
+          * @default true
          */
         "focusTrap": boolean;
         "getParentPopover": () => Promise<HTMLIonPopoverElement | null>;
+        /**
+          * @default false
+         */
         "hasController": boolean;
         /**
           * Additional attributes to pass to the popover.
@@ -2179,16 +2455,22 @@ export namespace Components {
         "htmlAttributes"?: { [key: string]: any };
         /**
           * If `true`, the popover will open. If `false`, the popover will close. Use this if you need finer grained control over presentation, otherwise just use the popoverController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the popover dismisses. You will need to do that in your code.
+          * @default false
          */
         "isOpen": boolean;
         /**
           * If `true`, the component passed into `ion-popover` will automatically be mounted when the popover is created. The component will remain mounted even when the popover is dismissed. However, the component will be destroyed when the popover is destroyed. This property is not reactive and should only be used when initially creating a popover.  Note: This feature only applies to inline popovers in JavaScript frameworks such as Angular, React, and Vue.
+          * @default false
          */
         "keepContentsMounted": boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+          * @default true
          */
         "keyboardClose": boolean;
+        /**
+          * @default false
+         */
         "keyboardEvents": boolean;
         /**
           * Animation to use when the popover is dismissed.
@@ -2209,6 +2491,7 @@ export namespace Components {
         "overlayIndex": number;
         /**
           * Present the popover overlay after it has been created. Developers can pass a mouse, touch, or pointer event to position the popover relative to where that event was dispatched.
+          * @param event The event to position the popover relative to.
          */
         "present": (event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent) => Promise<void>;
         /**
@@ -2217,22 +2500,27 @@ export namespace Components {
         "presentFromTrigger": (event?: any, focusDescendant?: boolean) => Promise<void>;
         /**
           * Describes what to position the popover relative to. If `"trigger"`, the popover will be positioned relative to the trigger button. If passing in an event, this is determined via event.target. If `"event"`, the popover will be positioned relative to the x/y coordinates of the trigger action. If passing in an event, this is determined via event.clientX and event.clientY.
+          * @default 'trigger'
          */
         "reference": PositionReference;
         /**
           * If `true`, a backdrop will be displayed behind the popover. This property controls whether or not the backdrop darkens the screen when the popover is presented. It does not control whether or not the backdrop is active or present in the DOM.
+          * @default true
          */
         "showBackdrop": boolean;
         /**
           * Describes which side of the `reference` point to position the popover on. The `"start"` and `"end"` values are RTL-aware, and the `"left"` and `"right"` values are not.
+          * @default 'bottom'
          */
         "side": PositionSide;
         /**
           * Describes how to calculate the popover width. If `"cover"`, the popover width will match the width of the trigger. If `"auto"`, the popover width will be set to a static default value.
+          * @default 'auto'
          */
         "size": PopoverSize;
         /**
           * If `true`, the popover will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+          * @default false
          */
         "translucent": boolean;
         /**
@@ -2241,12 +2529,14 @@ export namespace Components {
         "trigger": string | undefined;
         /**
           * Describes what kind of interaction with the trigger that should cause the popover to open. Does not apply when the `trigger` property is `undefined`. If `"click"`, the popover will be presented when the trigger is left clicked. If `"hover"`, the popover will be presented when a pointer hovers over the trigger. If `"context-menu"`, the popover will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing.
+          * @default 'click'
          */
         "triggerAction": TriggerAction;
     }
     interface IonProgressBar {
         /**
           * If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1].
+          * @default 1
          */
         "buffer": number;
         /**
@@ -2259,14 +2549,17 @@ export namespace Components {
         "mode"?: "ios" | "md";
         /**
           * If true, reverse the progress bar direction.
+          * @default false
          */
         "reversed": boolean;
         /**
           * The state of the progress bar, based on if the time the process takes is known or not. Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
+          * @default 'determinate'
          */
         "type": 'determinate' | 'indeterminate';
         /**
           * The value determines how much of the active bar should display when the `type` is `"determinate"`. The value should be between [0, 1].
+          * @default 0
          */
         "value": number;
     }
@@ -2281,6 +2574,7 @@ export namespace Components {
         "color"?: Color;
         /**
           * If `true`, the user cannot interact with the radio.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -2289,6 +2583,7 @@ export namespace Components {
         "justify"?: 'start' | 'end' | 'space-between';
         /**
           * Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
+          * @default 'start'
          */
         "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
         /**
@@ -2297,6 +2592,7 @@ export namespace Components {
         "mode"?: "ios" | "md";
         /**
           * The name of the control, which is submitted with the form data.
+          * @default this.inputId
          */
         "name": string;
         "setButtonTabindex": (value: number) => Promise<void>;
@@ -2309,6 +2605,7 @@ export namespace Components {
     interface IonRadioGroup {
         /**
           * If `true`, the radios can be deselected.
+          * @default false
          */
         "allowEmptySelection": boolean;
         /**
@@ -2325,6 +2622,7 @@ export namespace Components {
         "helperText"?: string;
         /**
           * The name of the control, which is submitted with the form data.
+          * @default this.inputId
          */
         "name": string;
         "setFocus": () => Promise<void>;
@@ -2348,10 +2646,12 @@ export namespace Components {
         "debounce"?: number;
         /**
           * If `true`, the user cannot interact with the range.
+          * @default false
          */
         "disabled": boolean;
         /**
           * Show two knobs.
+          * @default false
          */
         "dualKnobs": boolean;
         /**
@@ -2360,14 +2660,17 @@ export namespace Components {
         "label"?: string;
         /**
           * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the range regardless of the direction.
+          * @default 'start'
          */
         "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * Maximum integer value of the range.
+          * @default 100
          */
         "max": number;
         /**
           * Minimum integer value of the range.
+          * @default 0
          */
         "min": number;
         /**
@@ -2376,30 +2679,37 @@ export namespace Components {
         "mode"?: "ios" | "md";
         /**
           * The name of the control, which is submitted with the form data.
+          * @default this.rangeId
          */
         "name": string;
         /**
           * If `true`, a pin with integer value is shown when the knob is pressed.
+          * @default false
          */
         "pin": boolean;
         /**
           * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
+          * @default (value: number): number => Math.round(value)
          */
         "pinFormatter": PinFormatter;
         /**
           * If `true`, the knob snaps to tick marks evenly spaced based on the step property value.
+          * @default false
          */
         "snaps": boolean;
         /**
           * Specifies the value granularity.
+          * @default 1
          */
         "step": number;
         /**
           * If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`.
+          * @default true
          */
         "ticks": boolean;
         /**
           * the value of the range.
+          * @default 0
          */
         "value": RangeValue;
     }
@@ -2410,6 +2720,7 @@ export namespace Components {
         "cancel": () => Promise<void>;
         /**
           * Time it takes to close the refresher. Does not apply when the refresher content uses a spinner, enabling the native refresher.
+          * @default '280ms'
          */
         "closeDuration": string;
         /**
@@ -2418,6 +2729,7 @@ export namespace Components {
         "complete": () => Promise<void>;
         /**
           * If `true`, the refresher will be hidden.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -2430,18 +2742,22 @@ export namespace Components {
         "mode"?: "ios" | "md";
         /**
           * How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead.  For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.  Does not apply when the refresher content uses a spinner, enabling the native refresher.
+          * @default 1
          */
         "pullFactor": number;
         /**
           * The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. Does not apply when  the refresher content uses a spinner, enabling the native refresher.
+          * @default this.pullMin + 60
          */
         "pullMax": number;
         /**
           * The minimum distance the user must pull down until the refresher will go into the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.
+          * @default 60
          */
         "pullMin": number;
         /**
           * Time it takes the refresher to snap back to the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.
+          * @default '280ms'
          */
         "snapbackDuration": string;
     }
@@ -2467,12 +2783,13 @@ export namespace Components {
     }
     interface IonReorderGroup {
         /**
-          * Completes the reorder operation. Must be called by the `ionItemReorder` event.  If a list of items is passed, the list will be reordered and returned in the proper order.  If no parameters are passed or if `true` is passed in, the reorder will complete and the item will remain in the position it was dragged to. If `false` is passed, the reorder will complete and the item will bounce back to its original position.
+          * Completes the reorder operation. Must be called by the `ionReorderEnd` event.  If a list of items is passed, the list will be reordered and returned in the proper order.  If no parameters are passed or if `true` is passed in, the reorder will complete and the item will remain in the position it was dragged to. If `false` is passed, the reorder will complete and the item will bounce back to its original position.
           * @param listOrReorder A list of items to be sorted and returned in the new order or a boolean of whether or not the reorder should reposition the item.
          */
         "complete": (listOrReorder?: boolean | any[]) => Promise<any>;
         /**
           * If `true`, the reorder will be hidden.
+          * @default true
          */
         "disabled": boolean;
     }
@@ -2485,6 +2802,7 @@ export namespace Components {
         "addRipple": (x: number, y: number) => Promise<() => void>;
         /**
           * Sets the type of ripple-effect:  - `bounded`: the ripple effect expands from the user's click position - `unbounded`: the ripple effect expands from the center of the button and overflows the container.  NOTE: Surfaces for bounded ripples should have the overflow property set to hidden, while surfaces for unbounded ripples should have it set to visible.
+          * @default 'bounded'
          */
         "type": 'bounded' | 'unbounded';
     }
@@ -2507,6 +2825,7 @@ export namespace Components {
         "componentProps"?: { [key: string]: any };
         /**
           * Relative path that needs to match in order for this route to apply.  Accepts paths similar to expressjs so that you can define parameters in the url /foo/:bar where bar would be available in incoming props.
+          * @default ''
          */
         "url": string;
     }
@@ -2532,14 +2851,17 @@ export namespace Components {
           * Navigate to the specified path.
           * @param path The path to navigate to.
           * @param direction The direction of the animation. Defaults to `"forward"`.
+          * @param animation A custom animation to use for the transition.
          */
         "push": (path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>;
         /**
           * The root path to use when matching URLs. By default, this is set to "/", but you can specify an alternate prefix for all URL paths.
+          * @default '/'
          */
         "root": string;
         /**
           * The router can work in two "modes": - With hash: `/index.html#/path/to/page` - Without hash: `/path/to/page`  Using one or another might depend in the requirements of your app and/or where it's deployed.  Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might requires additional server-side configuration in order to properly work.  On the other side hash-navigation is much easier to deploy, it even works over the file protocol.  By default, this property is `true`, change to `false` to allow hash-less URLs.
+          * @default true
          */
         "useHash": boolean;
     }
@@ -2562,6 +2884,7 @@ export namespace Components {
         "routerAnimation": AnimationBuilder | undefined;
         /**
           * When using a router, it specifies the transition direction when navigating to another page using `href`.
+          * @default 'forward'
          */
         "routerDirection": RouterDirection;
         /**
@@ -2572,6 +2895,7 @@ export namespace Components {
     interface IonRouterOutlet {
         /**
           * If `true`, the router-outlet should animate the transition of components.
+          * @default true
          */
         "animated": boolean;
         /**
@@ -2583,6 +2907,7 @@ export namespace Components {
         "getRouteId": () => Promise<RouteID | undefined>;
         /**
           * The mode determines which platform styles to use.
+          * @default getIonMode(this)
          */
         "mode": "ios" | "md";
         "setRouteId": (id: string, params: ComponentProps | undefined, direction: RouterDirection, animation?: AnimationBuilder) => Promise<RouteWrite>;
@@ -2593,26 +2918,32 @@ export namespace Components {
     interface IonSearchbar {
         /**
           * If `true`, enable searchbar animation.
+          * @default false
          */
         "animated": boolean;
         /**
           * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+          * @default 'off'
          */
         "autocapitalize": string;
         /**
           * Set the input's autocomplete property.
+          * @default 'off'
          */
         "autocomplete": AutocompleteTypes;
         /**
           * Set the input's autocorrect property.
+          * @default 'off'
          */
         "autocorrect": 'on' | 'off';
         /**
           * Set the cancel button icon. Only applies to `md` mode. Defaults to `arrow-back-sharp`.
+          * @default config.get('backButtonIcon', arrowBackSharp) as string
          */
         "cancelButtonIcon": string;
         /**
-          * Set the the cancel button text. Only applies to `ios` mode.
+          * Set the cancel button text. Only applies to `ios` mode.
+          * @default 'Cancel'
          */
         "cancelButtonText": string;
         /**
@@ -2629,6 +2960,7 @@ export namespace Components {
         "debounce"?: number;
         /**
           * If `true`, the user cannot interact with the input.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -2657,10 +2989,12 @@ export namespace Components {
         "mode"?: "ios" | "md";
         /**
           * If used in a form, set the name of the control, which is submitted with the form data.
+          * @default this.inputId
          */
         "name": string;
         /**
           * Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+          * @default 'Search'
          */
         "placeholder": string;
         /**
@@ -2668,27 +3002,32 @@ export namespace Components {
          */
         "searchIcon"?: string;
         /**
-          * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global `input.focus()`.  Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.  Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.  See [managing focus](/docs/developing/managing-focus) for more information.
+          * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global `input.focus()`. Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method. Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved.  See [managing focus](/docs/developing/managing-focus) for more information.
          */
         "setFocus": () => Promise<void>;
         /**
           * Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state.
+          * @default 'never'
          */
         "showCancelButton": 'never' | 'focus' | 'always';
         /**
           * Sets the behavior for the clear button. Defaults to `"focus"`. Setting to `"focus"` shows the clear button on focus if the input is not empty. Setting to `"never"` hides the clear button. Setting to `"always"` shows the clear button regardless of focus state, but only if the input is not empty.
+          * @default 'always'
          */
         "showClearButton": 'never' | 'focus' | 'always';
         /**
           * If `true`, enable spellcheck on the input.
+          * @default false
          */
         "spellcheck": boolean;
         /**
           * Set the type of the input.
+          * @default 'search'
          */
         "type": 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
         /**
           * the value of the searchbar.
+          * @default ''
          */
         "value"?: string | null;
     }
@@ -2699,6 +3038,7 @@ export namespace Components {
         "color"?: Color;
         /**
           * If `true`, the user cannot interact with the segment.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -2707,14 +3047,17 @@ export namespace Components {
         "mode"?: "ios" | "md";
         /**
           * If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.
+          * @default false
          */
         "scrollable": boolean;
         /**
           * If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element. If `false`, keyboard navigation will only focus the `ion-segment-button` element.
+          * @default false
          */
         "selectOnFocus": boolean;
         /**
           * If `true`, users will be able to swipe between segment buttons to activate them.
+          * @default true
          */
         "swipeGesture": boolean;
         /**
@@ -2729,10 +3072,12 @@ export namespace Components {
         "contentId"?: string;
         /**
           * If `true`, the user cannot interact with the segment button.
+          * @default false
          */
         "disabled": boolean;
         /**
           * Set the layout of the text and icon in the segment.
+          * @default 'icon-top'
          */
         "layout"?: SegmentButtonLayout;
         /**
@@ -2742,10 +3087,12 @@ export namespace Components {
         "setFocus": () => Promise<void>;
         /**
           * The type of the button.
+          * @default 'button'
          */
         "type": 'submit' | 'reset' | 'button';
         /**
           * The value of the segment button.
+          * @default 'ion-sb-' + ids++
          */
         "value": SegmentValue;
     }
@@ -2754,6 +3101,7 @@ export namespace Components {
     interface IonSegmentView {
         /**
           * If `true`, the segment view cannot be interacted with.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -2765,6 +3113,7 @@ export namespace Components {
     interface IonSelect {
         /**
           * The text to display on the cancel button.
+          * @default 'Cancel'
          */
         "cancelText": string;
         /**
@@ -2777,6 +3126,7 @@ export namespace Components {
         "compareWith"?: string | SelectCompareFn | null;
         /**
           * If `true`, the user cannot interact with the select.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -2797,10 +3147,12 @@ export namespace Components {
         "helperText"?: string;
         /**
           * The interface the select should use: `action-sheet`, `popover`, `alert`, or `modal`.
+          * @default 'alert'
          */
         "interface": SelectInterface;
         /**
           * Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [ion-alert docs](./alert), the [ion-action-sheet docs](./action-sheet), the [ion-popover docs](./popover), and the [ion-modal docs](./modal) for the create options for each interface.  Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
+          * @default {}
          */
         "interfaceOptions": any;
         /**
@@ -2813,6 +3165,7 @@ export namespace Components {
         "label"?: string;
         /**
           * Where to place the label relative to the select. `"start"`: The label will appear to the left of the select in LTR and to the right in RTL. `"end"`: The label will appear to the right of the select in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select. `"stacked"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). When using `"floating"` or `"stacked"` we recommend initializing the select with either a `value` or a `placeholder`.
+          * @default 'start'
          */
         "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
         /**
@@ -2821,14 +3174,17 @@ export namespace Components {
         "mode"?: "ios" | "md";
         /**
           * If `true`, the select can accept multiple values.
+          * @default false
          */
         "multiple": boolean;
         /**
           * The name of the control, which is submitted with the form data.
+          * @default this.inputId
          */
         "name": string;
         /**
           * The text to display on the ok button.
+          * @default 'OK'
          */
         "okText": string;
         /**
@@ -2842,6 +3198,7 @@ export namespace Components {
         "placeholder"?: string;
         /**
           * If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid.
+          * @default false
          */
         "required": boolean;
         /**
@@ -2864,11 +3221,15 @@ export namespace Components {
     interface IonSelectModal {
         "header"?: string;
         "multiple"?: boolean;
+        /**
+          * @default []
+         */
         "options": SelectModalOption[];
     }
     interface IonSelectOption {
         /**
           * If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -2891,6 +3252,7 @@ export namespace Components {
         "multiple"?: boolean;
         /**
           * An array of options for the popover
+          * @default []
          */
         "options": SelectPopoverOption[];
         /**
@@ -2901,6 +3263,7 @@ export namespace Components {
     interface IonSkeletonText {
         /**
           * If `true`, the skeleton text will animate.
+          * @default false
          */
         "animated": boolean;
     }
@@ -2919,6 +3282,7 @@ export namespace Components {
         "name"?: SpinnerTypes;
         /**
           * If `true`, the spinner's animation will be paused.
+          * @default false
          */
         "paused": boolean;
     }
@@ -2929,15 +3293,20 @@ export namespace Components {
         "contentId"?: string;
         /**
           * If `true`, the split pane will be hidden.
+          * @default false
          */
         "disabled": boolean;
         "isVisible": () => Promise<boolean>;
         /**
           * When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression.
+          * @default QUERY['lg']
          */
         "when": string | boolean;
     }
     interface IonTab {
+        /**
+          * @default false
+         */
         "active": boolean;
         /**
           * The component to display inside of the tab.
@@ -2968,12 +3337,14 @@ export namespace Components {
         "selectedTab"?: string;
         /**
           * If `true`, the tab bar will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+          * @default false
          */
         "translucent": boolean;
     }
     interface IonTabButton {
         /**
           * If `true`, the user cannot interact with the tab button.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -2998,6 +3369,7 @@ export namespace Components {
         "rel": string | undefined;
         /**
           * The selected tab component
+          * @default false
          */
         "selected": boolean;
         /**
@@ -3026,6 +3398,9 @@ export namespace Components {
          */
         "select": (tab: string | HTMLIonTabElement) => Promise<boolean>;
         "setRouteId": (id: string) => Promise<RouteWrite>;
+        /**
+          * @default false
+         */
         "useRouter": boolean;
     }
     interface IonText {
@@ -3041,18 +3416,22 @@ export namespace Components {
     interface IonTextarea {
         /**
           * If `true`, the textarea container will grow and shrink based on the contents of the textarea.
+          * @default false
          */
         "autoGrow": boolean;
         /**
           * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+          * @default 'none'
          */
         "autocapitalize": string;
         /**
           * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
+          * @default false
          */
         "autofocus": boolean;
         /**
           * If `true`, the value will be cleared after focus upon edit.
+          * @default false
          */
         "clearOnEdit": boolean;
         /**
@@ -3065,6 +3444,7 @@ export namespace Components {
         "cols"?: number;
         /**
           * If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.
+          * @default false
          */
         "counter": boolean;
         /**
@@ -3077,6 +3457,7 @@ export namespace Components {
         "debounce"?: number;
         /**
           * If `true`, the user cannot interact with the textarea.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -3109,6 +3490,7 @@ export namespace Components {
         "label"?: string;
         /**
           * Where to place the label relative to the textarea. `"start"`: The label will appear to the left of the textarea in LTR and to the right in RTL. `"end"`: The label will appear to the right of the textarea in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea. `"stacked"`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * @default 'start'
          */
         "labelPlacement": 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
         /**
@@ -3125,6 +3507,7 @@ export namespace Components {
         "mode"?: "ios" | "md";
         /**
           * The name of the control, which is submitted with the form data.
+          * @default this.inputId
          */
         "name": string;
         /**
@@ -3133,10 +3516,12 @@ export namespace Components {
         "placeholder"?: string;
         /**
           * If `true`, the user cannot modify the value.
+          * @default false
          */
         "readonly": boolean;
         /**
           * If `true`, the user must fill in a value before submitting a form.
+          * @default false
          */
         "required": boolean;
         /**
@@ -3153,10 +3538,12 @@ export namespace Components {
         "shape"?: 'round';
         /**
           * If `true`, the element will have its spelling and grammar checked.
+          * @default false
          */
         "spellcheck": boolean;
         /**
           * The value of the textarea.
+          * @default ''
          */
         "value"?: string | null;
         /**
@@ -3179,6 +3566,7 @@ export namespace Components {
     interface IonToast {
         /**
           * If `true`, the toast will animate.
+          * @default true
          */
         "animated": boolean;
         /**
@@ -3195,19 +3583,23 @@ export namespace Components {
         "cssClass"?: string | string[];
         "delegate"?: FrameworkDelegate;
         /**
-          * Dismiss the toast overlay after it has been presented.
+          * Dismiss the toast overlay after it has been presented. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
           * @param data Any data to emit in the dismiss events.
-          * @param role The role of the element that is dismissing the toast. This can be useful in a button handler for determining which button was clicked to dismiss the toast. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.  This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+          * @param role The role of the element that is dismissing the toast. This can be useful in a button handler for determining which button was clicked to dismiss the toast. Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
          */
         "dismiss": (data?: any, role?: string) => Promise<boolean>;
         /**
           * How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called.
+          * @default config.getNumber('toastDuration', 0)
          */
         "duration": number;
         /**
           * Animation to use when the toast is presented.
          */
         "enterAnimation"?: AnimationBuilder;
+        /**
+          * @default false
+         */
         "hasController": boolean;
         /**
           * Header to be shown in the toast.
@@ -3223,14 +3615,17 @@ export namespace Components {
         "icon"?: string;
         /**
           * If `true`, the toast will open. If `false`, the toast will close. Use this if you need finer grained control over presentation, otherwise just use the toastController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the toast dismisses. You will need to do that in your code.
+          * @default false
          */
         "isOpen": boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+          * @default false
          */
         "keyboardClose": boolean;
         /**
           * Defines how the message and buttons are laid out in the toast. 'baseline': The message and the buttons will appear on the same line. Message text may wrap within the message container. 'stacked': The buttons containers and message will stack on top of each other. Use this if you have long text in your buttons.
+          * @default 'baseline'
          */
         "layout": ToastLayout;
         /**
@@ -3256,6 +3651,7 @@ export namespace Components {
         "overlayIndex": number;
         /**
           * The starting position of the toast on the screen. Can be tweaked further using the `positionAnchor` property.
+          * @default 'bottom'
          */
         "position": ToastPosition;
         /**
@@ -3272,6 +3668,7 @@ export namespace Components {
         "swipeGesture"?: ToastSwipeGestureDirection;
         /**
           * If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+          * @default false
          */
         "translucent": boolean;
         /**
@@ -3286,6 +3683,7 @@ export namespace Components {
         "alignment"?: 'start' | 'center';
         /**
           * If `true`, the toggle is selected.
+          * @default false
          */
         "checked": boolean;
         /**
@@ -3294,10 +3692,12 @@ export namespace Components {
         "color"?: Color;
         /**
           * If `true`, the user cannot interact with the toggle.
+          * @default false
          */
         "disabled": boolean;
         /**
           * Enables the on/off accessibility switch labels within the toggle.
+          * @default config.get('toggleOnOffLabels')
          */
         "enableOnOffLabels": boolean | undefined;
         /**
@@ -3314,6 +3714,7 @@ export namespace Components {
         "justify"?: 'start' | 'end' | 'space-between';
         /**
           * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
+          * @default 'start'
          */
         "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
         /**
@@ -3322,14 +3723,17 @@ export namespace Components {
         "mode"?: "ios" | "md";
         /**
           * The name of the control, which is submitted with the form data.
+          * @default this.inputId
          */
         "name": string;
         /**
           * If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid.
+          * @default false
          */
         "required": boolean;
         /**
           * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
+          * @default 'on'
          */
         "value"?: string | null;
     }
@@ -3400,6 +3804,10 @@ export interface IonInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIonInputElement;
 }
+export interface IonInputOtpCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonInputOtpElement;
+}
 export interface IonItemOptionsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIonItemOptionsElement;
@@ -3929,6 +4337,27 @@ declare global {
         prototype: HTMLIonInputElement;
         new (): HTMLIonInputElement;
     };
+    interface HTMLIonInputOtpElementEventMap {
+        "ionInput": InputOtpInputEventDetail;
+        "ionChange": InputOtpChangeEventDetail;
+        "ionComplete": InputOtpCompleteEventDetail;
+        "ionBlur": FocusEvent;
+        "ionFocus": FocusEvent;
+    }
+    interface HTMLIonInputOtpElement extends Components.IonInputOtp, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonInputOtpElementEventMap>(type: K, listener: (this: HTMLIonInputOtpElement, ev: IonInputOtpCustomEvent<HTMLIonInputOtpElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonInputOtpElementEventMap>(type: K, listener: (this: HTMLIonInputOtpElement, ev: IonInputOtpCustomEvent<HTMLIonInputOtpElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIonInputOtpElement: {
+        prototype: HTMLIonInputOtpElement;
+        new (): HTMLIonInputOtpElement;
+    };
     interface HTMLIonInputPasswordToggleElement extends Components.IonInputPasswordToggle, HTMLStencilElement {
     }
     var HTMLIonInputPasswordToggleElement: {
@@ -4340,6 +4769,9 @@ declare global {
     };
     interface HTMLIonReorderGroupElementEventMap {
         "ionItemReorder": ItemReorderEventDetail;
+        "ionReorderStart": void;
+        "ionReorderMove": ReorderMoveEventDetail;
+        "ionReorderEnd": ReorderEndEventDetail;
     }
     interface HTMLIonReorderGroupElement extends Components.IonReorderGroup, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIonReorderGroupElementEventMap>(type: K, listener: (this: HTMLIonReorderGroupElement, ev: IonReorderGroupCustomEvent<HTMLIonReorderGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4788,6 +5220,7 @@ declare global {
         "ion-infinite-scroll": HTMLIonInfiniteScrollElement;
         "ion-infinite-scroll-content": HTMLIonInfiniteScrollContentElement;
         "ion-input": HTMLIonInputElement;
+        "ion-input-otp": HTMLIonInputOtpElement;
         "ion-input-password-toggle": HTMLIonInputPasswordToggleElement;
         "ion-item": HTMLIonItemElement;
         "ion-item-divider": HTMLIonItemDividerElement;
@@ -4856,6 +5289,7 @@ declare namespace LocalJSX {
     interface IonAccordion {
         /**
           * If `true`, the accordion cannot be interacted with.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -4864,32 +5298,39 @@ declare namespace LocalJSX {
         "mode"?: "ios" | "md";
         /**
           * If `true`, the accordion cannot be interacted with, but does not alter the opacity.
+          * @default false
          */
         "readonly"?: boolean;
         /**
           * The toggle icon to use. This icon will be rotated when the accordion is expanded or collapsed.
+          * @default chevronDown
          */
         "toggleIcon"?: string;
         /**
           * The slot inside of `ion-item` to place the toggle icon. Defaults to `"end"`.
+          * @default 'end'
          */
         "toggleIconSlot"?: 'start' | 'end';
         /**
           * The value of the accordion. Defaults to an autogenerated value.
+          * @default `ion-accordion-${accordionIds++}`
          */
         "value"?: string;
     }
     interface IonAccordionGroup {
         /**
           * If `true`, all accordions inside of the accordion group will animate when expanding or collapsing.
+          * @default true
          */
         "animated"?: boolean;
         /**
           * If `true`, the accordion group cannot be interacted with.
+          * @default false
          */
         "disabled"?: boolean;
         /**
           * Describes the expansion behavior for each accordion. Possible values are `"compact"` and `"inset"`. Defaults to `"compact"`.
+          * @default 'compact'
          */
         "expand"?: 'compact' | 'inset';
         /**
@@ -4906,6 +5347,7 @@ declare namespace LocalJSX {
         "onIonChange"?: (event: IonAccordionGroupCustomEvent<AccordionGroupChangeEventDetail>) => void;
         /**
           * If `true`, the accordion group cannot be interacted with, but does not alter the opacity.
+          * @default false
          */
         "readonly"?: boolean;
         /**
@@ -4916,14 +5358,17 @@ declare namespace LocalJSX {
     interface IonActionSheet {
         /**
           * If `true`, the action sheet will animate.
+          * @default true
          */
         "animated"?: boolean;
         /**
           * If `true`, the action sheet will be dismissed when the backdrop is clicked.
+          * @default true
          */
         "backdropDismiss"?: boolean;
         /**
           * An array of buttons for the action sheet.
+          * @default []
          */
         "buttons"?: (ActionSheetButton | string)[];
         /**
@@ -4944,10 +5389,12 @@ declare namespace LocalJSX {
         "htmlAttributes"?: { [key: string]: any };
         /**
           * If `true`, the action sheet will open. If `false`, the action sheet will close. Use this if you need finer grained control over presentation, otherwise just use the actionSheetController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the action sheet dismisses. You will need to do that in your code.
+          * @default false
          */
         "isOpen"?: boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+          * @default true
          */
         "keyboardClose"?: boolean;
         /**
@@ -4996,6 +5443,7 @@ declare namespace LocalJSX {
         "subHeader"?: string;
         /**
           * If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+          * @default false
          */
         "translucent"?: boolean;
         /**
@@ -5006,14 +5454,17 @@ declare namespace LocalJSX {
     interface IonAlert {
         /**
           * If `true`, the alert will animate.
+          * @default true
          */
         "animated"?: boolean;
         /**
           * If `true`, the alert will be dismissed when the backdrop is clicked.
+          * @default true
          */
         "backdropDismiss"?: boolean;
         /**
           * Array of buttons to be added to the alert.
+          * @default []
          */
         "buttons"?: (AlertButton | string)[];
         /**
@@ -5034,14 +5485,17 @@ declare namespace LocalJSX {
         "htmlAttributes"?: { [key: string]: any };
         /**
           * Array of input to show in the alert.
+          * @default []
          */
         "inputs"?: AlertInput[];
         /**
           * If `true`, the alert will open. If `false`, the alert will close. Use this if you need finer grained control over presentation, otherwise just use the alertController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the alert dismisses. You will need to do that in your code.
+          * @default false
          */
         "isOpen"?: boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+          * @default true
          */
         "keyboardClose"?: boolean;
         /**
@@ -5094,6 +5548,7 @@ declare namespace LocalJSX {
         "subHeader"?: string;
         /**
           * If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+          * @default false
          */
         "translucent"?: boolean;
         /**
@@ -5116,6 +5571,7 @@ declare namespace LocalJSX {
         "defaultHref"?: string;
         /**
           * If `true`, the user cannot interact with the button.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -5136,6 +5592,7 @@ declare namespace LocalJSX {
         "text"?: string | null;
         /**
           * The type of the button.
+          * @default 'button'
          */
         "type"?: 'submit' | 'reset' | 'button';
     }
@@ -5146,14 +5603,17 @@ declare namespace LocalJSX {
         "onIonBackdropTap"?: (event: IonBackdropCustomEvent<void>) => void;
         /**
           * If `true`, the backdrop will stop propagation on tap.
+          * @default true
          */
         "stopPropagation"?: boolean;
         /**
           * If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.
+          * @default true
          */
         "tappable"?: boolean;
         /**
           * If `true`, the backdrop will be visible.
+          * @default true
          */
         "visible"?: boolean;
     }
@@ -5170,6 +5630,7 @@ declare namespace LocalJSX {
     interface IonBreadcrumb {
         /**
           * If `true`, the breadcrumb will take on a different look to show that it is the currently active breadcrumb. Defaults to `true` for the last breadcrumb if it is not set on any.
+          * @default false
          */
         "active"?: boolean;
         /**
@@ -5178,6 +5639,7 @@ declare namespace LocalJSX {
         "color"?: Color;
         /**
           * If `true`, the user cannot interact with the breadcrumb.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -5210,6 +5672,7 @@ declare namespace LocalJSX {
         "routerAnimation"?: AnimationBuilder | undefined;
         /**
           * When using a router, it specifies the transition direction when navigating to another page using `href`.
+          * @default 'forward'
          */
         "routerDirection"?: RouterDirection;
         /**
@@ -5228,10 +5691,12 @@ declare namespace LocalJSX {
         "color"?: Color;
         /**
           * The number of breadcrumbs to show after the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed.
+          * @default 1
          */
         "itemsAfterCollapse"?: number;
         /**
           * The number of breadcrumbs to show before the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed.
+          * @default 1
          */
         "itemsBeforeCollapse"?: number;
         /**
@@ -5250,6 +5715,7 @@ declare namespace LocalJSX {
     interface IonButton {
         /**
           * The type of button.
+          * @default 'button'
          */
         "buttonType"?: string;
         /**
@@ -5258,6 +5724,7 @@ declare namespace LocalJSX {
         "color"?: Color;
         /**
           * If `true`, the user cannot interact with the button.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -5302,6 +5769,7 @@ declare namespace LocalJSX {
         "routerAnimation"?: AnimationBuilder | undefined;
         /**
           * When using a router, it specifies the transition direction when navigating to another page using `href`.
+          * @default 'forward'
          */
         "routerDirection"?: RouterDirection;
         /**
@@ -5314,6 +5782,7 @@ declare namespace LocalJSX {
         "size"?: 'small' | 'default' | 'large';
         /**
           * If `true`, activates a button with a heavier font weight.
+          * @default false
          */
         "strong"?: boolean;
         /**
@@ -5322,18 +5791,21 @@ declare namespace LocalJSX {
         "target"?: string | undefined;
         /**
           * The type of the button.
+          * @default 'button'
          */
         "type"?: 'submit' | 'reset' | 'button';
     }
     interface IonButtons {
         /**
           * If true, buttons will disappear when its parent toolbar has fully collapsed if the toolbar is not the first toolbar. If the toolbar is the first toolbar, the buttons will be hidden and will only be shown once all toolbars have fully collapsed.  Only applies in `ios` mode with `collapse` set to `true` on `ion-header`.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
+          * @default false
          */
         "collapse"?: boolean;
     }
     interface IonCard {
         /**
           * If `true`, a button tag will be rendered and the card will be tappable.
+          * @default false
          */
         "button"?: boolean;
         /**
@@ -5342,6 +5814,7 @@ declare namespace LocalJSX {
         "color"?: Color;
         /**
           * If `true`, the user cannot interact with the card.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -5366,6 +5839,7 @@ declare namespace LocalJSX {
         "routerAnimation"?: AnimationBuilder | undefined;
         /**
           * When using a router, it specifies the transition direction when navigating to another page using `href`.
+          * @default 'forward'
          */
         "routerDirection"?: RouterDirection;
         /**
@@ -5374,6 +5848,7 @@ declare namespace LocalJSX {
         "target"?: string | undefined;
         /**
           * The type of the button. Only used when an `onclick` or `button` property is present.
+          * @default 'button'
          */
         "type"?: 'submit' | 'reset' | 'button';
     }
@@ -5394,6 +5869,7 @@ declare namespace LocalJSX {
         "mode"?: "ios" | "md";
         /**
           * If `true`, the card header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+          * @default false
          */
         "translucent"?: boolean;
     }
@@ -5424,6 +5900,7 @@ declare namespace LocalJSX {
         "alignment"?: 'start' | 'center';
         /**
           * If `true`, the checkbox is selected.
+          * @default false
          */
         "checked"?: boolean;
         /**
@@ -5432,6 +5909,7 @@ declare namespace LocalJSX {
         "color"?: Color;
         /**
           * If `true`, the user cannot interact with the checkbox.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -5444,6 +5922,7 @@ declare namespace LocalJSX {
         "helperText"?: string;
         /**
           * If `true`, the checkbox will visually appear as indeterminate.
+          * @default false
          */
         "indeterminate"?: boolean;
         /**
@@ -5452,6 +5931,7 @@ declare namespace LocalJSX {
         "justify"?: 'start' | 'end' | 'space-between';
         /**
           * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
+          * @default 'start'
          */
         "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
         /**
@@ -5460,6 +5940,7 @@ declare namespace LocalJSX {
         "mode"?: "ios" | "md";
         /**
           * The name of the control, which is submitted with the form data.
+          * @default this.inputId
          */
         "name"?: string;
         /**
@@ -5476,10 +5957,12 @@ declare namespace LocalJSX {
         "onIonFocus"?: (event: IonCheckboxCustomEvent<void>) => void;
         /**
           * If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid.
+          * @default false
          */
         "required"?: boolean;
         /**
           * The value of the checkbox does not mean if it's checked or not, use the `checked` property for that.  The value of a checkbox is analogous to the value of an `<input type="checkbox">`, it's only used when the checkbox participates in a native `<form>`.
+          * @default 'on'
          */
         "value"?: any | null;
     }
@@ -5490,6 +5973,7 @@ declare namespace LocalJSX {
         "color"?: Color;
         /**
           * If `true`, the user cannot interact with the chip.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -5498,6 +5982,7 @@ declare namespace LocalJSX {
         "mode"?: "ios" | "md";
         /**
           * Display an outline style button.
+          * @default false
          */
         "outline"?: boolean;
     }
@@ -5606,6 +6091,7 @@ declare namespace LocalJSX {
         "color"?: Color;
         /**
           * Controls where the fixed content is placed relative to the main content in the DOM. This can be used to control the order in which fixed elements receive keyboard focus. For example, if a FAB in the fixed slot should receive keyboard focus before the main page content, set this property to `'before'`.
+          * @default 'after'
          */
         "fixedSlotPlacement"?: 'after' | 'before';
         /**
@@ -5614,6 +6100,7 @@ declare namespace LocalJSX {
         "forceOverscroll"?: boolean;
         /**
           * If `true`, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent.
+          * @default false
          */
         "fullscreen"?: boolean;
         /**
@@ -5630,28 +6117,34 @@ declare namespace LocalJSX {
         "onIonScrollStart"?: (event: IonContentCustomEvent<ScrollBaseDetail>) => void;
         /**
           * Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to `true`.
+          * @default false
          */
         "scrollEvents"?: boolean;
         /**
           * If you want to enable the content scrolling in the X axis, set this property to `true`.
+          * @default false
          */
         "scrollX"?: boolean;
         /**
           * If you want to disable the content scrolling in the Y axis, set this property to `false`.
+          * @default true
          */
         "scrollY"?: boolean;
     }
     interface IonDatetime {
         /**
           * The text to display on the picker's cancel button.
+          * @default 'Cancel'
          */
         "cancelText"?: string;
         /**
           * The text to display on the picker's "Clear" button.
+          * @default 'Clear'
          */
         "clearText"?: string;
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+          * @default 'primary'
          */
         "color"?: Color;
         /**
@@ -5660,14 +6153,17 @@ declare namespace LocalJSX {
         "dayValues"?: number[] | number | string;
         /**
           * If `true`, the user cannot interact with the datetime.
+          * @default false
          */
         "disabled"?: boolean;
         /**
           * The text to display on the picker's "Done" button.
+          * @default 'Done'
          */
         "doneText"?: string;
         /**
           * The first day of the week to use for `ion-datetime`. The default value is `0` and represents Sunday.
+          * @default 0
          */
         "firstDayOfWeek"?: number;
         /**
@@ -5692,6 +6188,7 @@ declare namespace LocalJSX {
         "isDateEnabled"?: (dateIsoString: string) => boolean;
         /**
           * The locale to use for `ion-datetime`. This impacts month and day name formatting. The `"default"` value refers to the default locale set by your device.
+          * @default 'default'
          */
         "locale"?: string;
         /**
@@ -5716,10 +6213,12 @@ declare namespace LocalJSX {
         "monthValues"?: number[] | number | string;
         /**
           * If `true`, multiple dates can be selected at once. Only applies to `presentation="date"` and `preferWheel="false"`.
+          * @default false
          */
         "multiple"?: boolean;
         /**
           * The name of the control, which is submitted with the form data.
+          * @default this.inputId
          */
         "name"?: string;
         /**
@@ -5740,34 +6239,47 @@ declare namespace LocalJSX {
         "onIonFocus"?: (event: IonDatetimeCustomEvent<void>) => void;
         /**
           * If `true`, a wheel picker will be rendered instead of a calendar grid where possible. If `false`, a calendar grid will be rendered instead of a wheel picker where possible.  A wheel picker can be rendered instead of a grid when `presentation` is one of the following values: `"date"`, `"date-time"`, or `"time-date"`.  A wheel picker will always be rendered regardless of the `preferWheel` value when `presentation` is one of the following values: `"time"`, `"month"`, `"month-year"`, or `"year"`.
+          * @default false
          */
         "preferWheel"?: boolean;
         /**
           * Which values you want to select. `"date"` will show a calendar picker to select the month, day, and year. `"time"` will show a time picker to select the hour, minute, and (optionally) AM/PM. `"date-time"` will show the date picker first and time picker second. `"time-date"` will show the time picker first and date picker second.
+          * @default 'date-time'
          */
         "presentation"?: DatetimePresentation;
         /**
           * If `true`, the datetime appears normal but the selected date cannot be changed.
+          * @default false
          */
         "readonly"?: boolean;
+        /**
+          * If `true`, the datetime calendar displays a six-week (42-day) layout, including days from the previous and next months to fill the grid. These adjacent days are selectable unless disabled.
+          * @default false
+         */
+        "showAdjacentDays"?: boolean;
         /**
           * If `true`, a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.
+          * @default false
          */
         "showClearButton"?: boolean;
         /**
           * If `true`, the default "Cancel" and "OK" buttons will be rendered at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered.
+          * @default false
          */
         "showDefaultButtons"?: boolean;
         /**
           * If `true`, the default "Time" label will be rendered for the time selector of the `ion-datetime` component. Developers can also use the `time-label` slot if they want to customize this label. If a custom label is set in the `time-label` slot then the default label will not be rendered.
+          * @default true
          */
         "showDefaultTimeLabel"?: boolean;
         /**
           * If `true`, a header will be shown above the calendar picker. This will include both the slotted title, and the selected date.
+          * @default false
          */
         "showDefaultTitle"?: boolean;
         /**
           * If `cover`, the `ion-datetime` will expand to cover the full width of its container. If `fixed`, the `ion-datetime` will have a fixed width.
+          * @default 'fixed'
          */
         "size"?: 'cover' | 'fixed';
         /**
@@ -5786,6 +6298,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;
         /**
@@ -5794,6 +6307,7 @@ declare namespace LocalJSX {
         "datetime"?: string;
         /**
           * If `true`, the user cannot interact with the button.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -5804,10 +6318,12 @@ declare namespace LocalJSX {
     interface IonFab {
         /**
           * If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.
+          * @default false
          */
         "activated"?: boolean;
         /**
           * If `true`, the fab will display on the edge of the header if `vertical` is `"top"`, and on the edge of the footer if it is `"bottom"`. Should be used with a `fixed` slot.
+          * @default false
          */
         "edge"?: boolean;
         /**
@@ -5822,10 +6338,12 @@ declare namespace LocalJSX {
     interface IonFabButton {
         /**
           * If `true`, the fab button will be show a close icon.
+          * @default false
          */
         "activated"?: boolean;
         /**
           * The icon name to use for the close icon. This will appear when the fab button is pressed. Only applies if it is the main button inside of a fab containing a fab list.
+          * @default close
          */
         "closeIcon"?: string;
         /**
@@ -5834,6 +6352,7 @@ declare namespace LocalJSX {
         "color"?: Color;
         /**
           * If `true`, the user cannot interact with the fab button.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -5866,10 +6385,12 @@ declare namespace LocalJSX {
         "routerAnimation"?: AnimationBuilder | undefined;
         /**
           * When using a router, it specifies the transition direction when navigating to another page using `href`.
+          * @default 'forward'
          */
         "routerDirection"?: RouterDirection;
         /**
           * If `true`, the fab button will show when in a fab-list.
+          * @default false
          */
         "show"?: boolean;
         /**
@@ -5882,20 +6403,24 @@ declare namespace LocalJSX {
         "target"?: string | undefined;
         /**
           * If `true`, the fab button will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+          * @default false
          */
         "translucent"?: boolean;
         /**
           * The type of the button.
+          * @default 'button'
          */
         "type"?: 'submit' | 'reset' | 'button';
     }
     interface IonFabList {
         /**
           * If `true`, the fab list will show all fab buttons in the list.
+          * @default false
          */
         "activated"?: boolean;
         /**
           * The side the fab list will show on relative to the main fab button.
+          * @default 'bottom'
          */
         "side"?: 'start' | 'end' | 'top' | 'bottom';
     }
@@ -5910,12 +6435,14 @@ declare namespace LocalJSX {
         "mode"?: "ios" | "md";
         /**
           * If `true`, the footer will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content.
+          * @default false
          */
         "translucent"?: boolean;
     }
     interface IonGrid {
         /**
           * If `true`, the grid will have a fixed width based on the screen size.
+          * @default false
          */
         "fixed"?: boolean;
     }
@@ -5930,6 +6457,7 @@ declare namespace LocalJSX {
         "mode"?: "ios" | "md";
         /**
           * If `true`, the header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).  Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.
+          * @default false
          */
         "translucent"?: boolean;
     }
@@ -5958,6 +6486,7 @@ declare namespace LocalJSX {
     interface IonInfiniteScroll {
         /**
           * If `true`, the infinite scroll will be hidden and scroll event listeners will be removed.  Set this to true to disable the infinite scroll from actively trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -5966,10 +6495,12 @@ declare namespace LocalJSX {
         "onIonInfinite"?: (event: IonInfiniteScrollCustomEvent<void>) => void;
         /**
           * The position of the infinite scroll element. The value can be either `top` or `bottom`.
+          * @default 'bottom'
          */
         "position"?: 'top' | 'bottom';
         /**
           * The threshold distance from the bottom of the content to call the `infinite` output event when scrolled. The threshold value can be either a percent, or in pixels. For example, use the value of `10%` for the `infinite` output event to get called when the user has scrolled 10% from the bottom of the page. Use the value `100px` when the scroll is within 100 pixels from the bottom of the page.
+          * @default '15%'
          */
         "threshold"?: string;
     }
@@ -5986,22 +6517,27 @@ declare namespace LocalJSX {
     interface IonInput {
         /**
           * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+          * @default 'off'
          */
         "autocapitalize"?: string;
         /**
           * Indicates whether the value of the control can be automatically completed by the browser.
+          * @default 'off'
          */
         "autocomplete"?: AutocompleteTypes;
         /**
           * Whether auto correction should be enabled when the user is entering/editing the text value.
+          * @default 'off'
          */
         "autocorrect"?: 'on' | 'off';
         /**
           * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
+          * @default false
          */
         "autofocus"?: boolean;
         /**
           * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
+          * @default false
          */
         "clearInput"?: boolean;
         /**
@@ -6018,6 +6554,7 @@ declare namespace LocalJSX {
         "color"?: Color;
         /**
           * If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.
+          * @default false
          */
         "counter"?: boolean;
         /**
@@ -6030,6 +6567,7 @@ declare namespace LocalJSX {
         "debounce"?: number;
         /**
           * If `true`, the user cannot interact with the input.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -6058,6 +6596,7 @@ declare namespace LocalJSX {
         "label"?: string;
         /**
           * Where to place the label relative to the input. `"start"`: The label will appear to the left of the input in LTR and to the right in RTL. `"end"`: The label will appear to the right of the input in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `"stacked"`: The label will appear smaller and above the input regardless even when the input is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * @default 'start'
          */
         "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
         /**
@@ -6086,6 +6625,7 @@ declare namespace LocalJSX {
         "multiple"?: boolean;
         /**
           * The name of the control, which is submitted with the form data.
+          * @default this.inputId
          */
         "name"?: string;
         /**
@@ -6114,10 +6654,12 @@ declare namespace LocalJSX {
         "placeholder"?: string;
         /**
           * If `true`, the user cannot modify the value.
+          * @default false
          */
         "readonly"?: boolean;
         /**
           * If `true`, the user must fill in a value before submitting a form.
+          * @default false
          */
         "required"?: boolean;
         /**
@@ -6126,6 +6668,7 @@ declare namespace LocalJSX {
         "shape"?: 'round';
         /**
           * If `true`, the element will have its spelling and grammar checked.
+          * @default false
          */
         "spellcheck"?: boolean;
         /**
@@ -6134,10 +6677,95 @@ declare namespace LocalJSX {
         "step"?: string;
         /**
           * The type of control to display. The default type is text.
+          * @default 'text'
          */
         "type"?: TextFieldTypes;
         /**
           * The value of the input.
+          * @default ''
+         */
+        "value"?: string | number | null;
+    }
+    interface IonInputOtp {
+        /**
+          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+          * @default 'off'
+         */
+        "autocapitalize"?: string;
+        /**
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+         */
+        "color"?: Color;
+        /**
+          * If `true`, the user cannot interact with the input.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * The fill for the input boxes. If `"solid"` the input boxes will have a background. If `"outline"` the input boxes will be transparent with a border.
+          * @default 'outline'
+         */
+        "fill"?: 'outline' | 'solid';
+        /**
+          * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.  For numbers (type="number"): "numeric" For text (type="text"): "text"
+         */
+        "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        /**
+          * The number of input boxes to display.
+          * @default 4
+         */
+        "length"?: number;
+        /**
+          * Emitted when the input group loses focus.
+         */
+        "onIonBlur"?: (event: IonInputOtpCustomEvent<FocusEvent>) => void;
+        /**
+          * The `ionChange` event is fired when the user modifies the input's value. Unlike the `ionInput` event, the `ionChange` event is only fired when changes are committed, not as the user types.  The `ionChange` event fires when the `<ion-input-otp>` component loses focus after its value has changed.  This event will not emit when programmatically setting the `value` property.
+         */
+        "onIonChange"?: (event: IonInputOtpCustomEvent<InputOtpChangeEventDetail>) => void;
+        /**
+          * Emitted when all input boxes have been filled with valid values.
+         */
+        "onIonComplete"?: (event: IonInputOtpCustomEvent<InputOtpCompleteEventDetail>) => void;
+        /**
+          * Emitted when the input group has focus.
+         */
+        "onIonFocus"?: (event: IonInputOtpCustomEvent<FocusEvent>) => void;
+        /**
+          * The `ionInput` event is fired each time the user modifies the input's value. Unlike the `ionChange` event, the `ionInput` event is fired for each alteration to the input's value. This typically happens for each keystroke as the user types.  For elements that accept text input (`type=text`, `type=tel`, etc.), the interface is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others, the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If the input is cleared on edit, the type is `null`.
+         */
+        "onIonInput"?: (event: IonInputOtpCustomEvent<InputOtpInputEventDetail>) => void;
+        /**
+          * A regex pattern string for allowed characters. Defaults based on type.  For numbers (`type="number"`): `"[\p{N}]"` For text (`type="text"`): `"[\p{L}\p{N}]"`
+         */
+        "pattern"?: string;
+        /**
+          * If `true`, the user cannot modify the value.
+          * @default false
+         */
+        "readonly"?: boolean;
+        /**
+          * Where separators should be shown between input boxes. Can be a comma-separated string or an array of numbers.  For example: `"3"` will show a separator after the 3rd input box. `[1,4]` will show a separator after the 1st and 4th input boxes. `"all"` will show a separator between every input box.
+         */
+        "separators"?: 'all' | string | number[];
+        /**
+          * The shape of the input boxes. If "round" they will have an increased border radius. If "rectangular" they will have no border radius. If "soft" they will have a soft border radius.
+          * @default 'round'
+         */
+        "shape"?: 'round' | 'rectangular' | 'soft';
+        /**
+          * The size of the input boxes.
+          * @default 'medium'
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * The type of input allowed in the input boxes.
+          * @default 'number'
+         */
+        "type"?: 'text' | 'number';
+        /**
+          * The value of the input group.
+          * @default ''
          */
         "value"?: string | number | null;
     }
@@ -6162,6 +6790,7 @@ declare namespace LocalJSX {
     interface IonItem {
         /**
           * If `true`, a button tag will be rendered and the item will be tappable.
+          * @default false
          */
         "button"?: boolean;
         /**
@@ -6174,10 +6803,12 @@ declare namespace LocalJSX {
         "detail"?: boolean;
         /**
           * The icon to use when `detail` is set to `true`.
+          * @default chevronForward
          */
         "detailIcon"?: string;
         /**
           * If `true`, the user cannot interact with the item.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -6206,6 +6837,7 @@ declare namespace LocalJSX {
         "routerAnimation"?: AnimationBuilder | undefined;
         /**
           * When using a router, it specifies the transition direction when navigating to another page using `href`.
+          * @default 'forward'
          */
         "routerDirection"?: RouterDirection;
         /**
@@ -6214,6 +6846,7 @@ declare namespace LocalJSX {
         "target"?: string | undefined;
         /**
           * The type of the button. Only used when an `onclick` or `button` property is present.
+          * @default 'button'
          */
         "type"?: 'submit' | 'reset' | 'button';
     }
@@ -6228,6 +6861,7 @@ declare namespace LocalJSX {
         "mode"?: "ios" | "md";
         /**
           * When it's set to `true`, the item-divider will stay visible when it reaches the top of the viewport until the next `ion-item-divider` replaces it.  This feature relies in `position:sticky`: https://caniuse.com/#feat=css-sticky
+          * @default false
          */
         "sticky"?: boolean;
     }
@@ -6240,6 +6874,7 @@ declare namespace LocalJSX {
         "color"?: Color;
         /**
           * If `true`, the user cannot interact with the item option.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -6248,6 +6883,7 @@ declare namespace LocalJSX {
         "download"?: string | undefined;
         /**
           * If `true`, the option will expand to take up the available width and cover any other options.
+          * @default false
          */
         "expandable"?: boolean;
         /**
@@ -6268,6 +6904,7 @@ declare namespace LocalJSX {
         "target"?: string | undefined;
         /**
           * The type of the button.
+          * @default 'button'
          */
         "type"?: 'submit' | 'reset' | 'button';
     }
@@ -6278,12 +6915,14 @@ declare namespace LocalJSX {
         "onIonSwipe"?: (event: IonItemOptionsCustomEvent<any>) => void;
         /**
           * The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each.
+          * @default 'end'
          */
         "side"?: Side;
     }
     interface IonItemSliding {
         /**
           * If `true`, the user cannot interact with the sliding item.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -6308,6 +6947,7 @@ declare namespace LocalJSX {
     interface IonList {
         /**
           * If `true`, the list will have margin around it and rounded corners.
+          * @default false
          */
         "inset"?: boolean;
         /**
@@ -6336,10 +6976,12 @@ declare namespace LocalJSX {
     interface IonLoading {
         /**
           * If `true`, the loading indicator will animate.
+          * @default true
          */
         "animated"?: boolean;
         /**
           * If `true`, the loading indicator will be dismissed when the backdrop is clicked.
+          * @default false
          */
         "backdropDismiss"?: boolean;
         /**
@@ -6348,6 +6990,7 @@ declare namespace LocalJSX {
         "cssClass"?: string | string[];
         /**
           * Number of milliseconds to wait before dismissing the loading indicator.
+          * @default 0
          */
         "duration"?: number;
         /**
@@ -6360,10 +7003,12 @@ declare namespace LocalJSX {
         "htmlAttributes"?: { [key: string]: any };
         /**
           * If `true`, the loading indicator will open. If `false`, the loading indicator will close. Use this if you need finer grained control over presentation, otherwise just use the loadingController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the loading indicator dismisses. You will need to do that in your code.
+          * @default false
          */
         "isOpen"?: boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+          * @default true
          */
         "keyboardClose"?: boolean;
         /**
@@ -6412,6 +7057,7 @@ declare namespace LocalJSX {
         "onWillPresent"?: (event: IonLoadingCustomEvent<void>) => void;
         /**
           * If `true`, a backdrop will be displayed behind the loading indicator.
+          * @default true
          */
         "showBackdrop"?: boolean;
         /**
@@ -6420,6 +7066,7 @@ declare namespace LocalJSX {
         "spinner"?: SpinnerTypes | null;
         /**
           * If `true`, the loading indicator will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+          * @default false
          */
         "translucent"?: boolean;
         /**
@@ -6434,10 +7081,12 @@ declare namespace LocalJSX {
         "contentId"?: string;
         /**
           * If `true`, the menu is disabled.
+          * @default false
          */
         "disabled"?: boolean;
         /**
           * The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered.
+          * @default 50
          */
         "maxEdgeStart"?: number;
         /**
@@ -6462,10 +7111,12 @@ declare namespace LocalJSX {
         "onIonWillOpen"?: (event: IonMenuCustomEvent<void>) => void;
         /**
           * Which side of the view the menu should be placed.
+          * @default 'start'
          */
         "side"?: Side;
         /**
           * If `true`, swiping the menu is enabled.
+          * @default true
          */
         "swipeGesture"?: boolean;
         /**
@@ -6476,6 +7127,7 @@ declare namespace LocalJSX {
     interface IonMenuButton {
         /**
           * Automatically hides the menu button when the corresponding menu is not active
+          * @default true
          */
         "autoHide"?: boolean;
         /**
@@ -6484,6 +7136,7 @@ declare namespace LocalJSX {
         "color"?: Color;
         /**
           * If `true`, the user cannot interact with the menu button.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -6496,12 +7149,14 @@ declare namespace LocalJSX {
         "mode"?: "ios" | "md";
         /**
           * The type of the button.
+          * @default 'button'
          */
         "type"?: 'submit' | 'reset' | 'button';
     }
     interface IonMenuToggle {
         /**
           * Automatically hides the content when the corresponding menu is not active.  By default, it's `true`. Change it to `false` in order to keep `ion-menu-toggle` always visible regardless the state of the menu.
+          * @default true
          */
         "autoHide"?: boolean;
         /**
@@ -6512,14 +7167,17 @@ declare namespace LocalJSX {
     interface IonModal {
         /**
           * If `true`, the modal will animate.
+          * @default true
          */
         "animated"?: boolean;
         /**
           * A decimal value between 0 and 1 that indicates the point after which the backdrop will begin to fade in when using a sheet modal. Prior to this point, the backdrop will be hidden and the content underneath the sheet can be interacted with. This value is exclusive meaning the backdrop will become active after the value specified.
+          * @default 0
          */
         "backdropBreakpoint"?: number;
         /**
           * If `true`, the modal will be dismissed when the backdrop is clicked.
+          * @default true
          */
         "backdropDismiss"?: boolean;
         /**
@@ -6528,6 +7186,7 @@ declare namespace LocalJSX {
         "breakpoints"?: number[];
         /**
           * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
+          * @default true
          */
         "canDismiss"?: boolean | ((data?: any, role?: string) => Promise<boolean>);
         /**
@@ -6536,10 +7195,12 @@ declare namespace LocalJSX {
         "enterAnimation"?: AnimationBuilder;
         /**
           * Controls whether scrolling or dragging within the sheet modal expands it to a larger breakpoint. This only takes effect when `breakpoints` and `initialBreakpoint` are set.  If `true`, scrolling or dragging anywhere in the modal will first expand it to the next breakpoint. Once fully expanded, scrolling will affect the content. If `false`, scrolling will always affect the content. The modal will only expand when dragging the header or handle. The modal will close when dragging the header or handle. It can also be closed when dragging the content, but only if the content is scrolled to the top.
+          * @default true
          */
         "expandToScroll"?: boolean;
         /**
           * If `true`, focus will not be allowed to move outside of this overlay. If `false`, focus will be allowed to move outside of the overlay.  In most scenarios this property should remain set to `true`. Setting this property to `false` can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this to `false` when absolutely necessary.  Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. Developers would disable focus trapping on the Ionic overlay when presenting the 3rd party overlay and then re-enable focus trapping when dismissing the 3rd party overlay and moving focus back to the Ionic overlay.
+          * @default true
          */
         "focusTrap"?: boolean;
         /**
@@ -6548,6 +7209,7 @@ 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'
          */
         "handleBehavior"?: ModalHandleBehavior;
         /**
@@ -6560,14 +7222,17 @@ declare namespace LocalJSX {
         "initialBreakpoint"?: number;
         /**
           * If `true`, the modal will open. If `false`, the modal will close. Use this if you need finer grained control over presentation, otherwise just use the modalController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the modal dismisses. You will need to do that in your code.
+          * @default false
          */
         "isOpen"?: boolean;
         /**
           * If `true`, the component passed into `ion-modal` will automatically be mounted when the modal is created. The component will remain mounted even when the modal is dismissed. However, the component will be destroyed when the modal is destroyed. This property is not reactive and should only be used when initially creating a modal.  Note: This feature only applies to inline modals in JavaScript frameworks such as Angular, React, and Vue.
+          * @default false
          */
         "keepContentsMounted"?: boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+          * @default true
          */
         "keyboardClose"?: boolean;
         /**
@@ -6620,6 +7285,7 @@ declare namespace LocalJSX {
         "presentingElement"?: HTMLElement;
         /**
           * If `true`, a backdrop will be displayed behind the modal. This property controls whether or not the backdrop darkens the screen when the modal is presented. It does not control whether or not the backdrop is active or present in the DOM.
+          * @default true
          */
         "showBackdrop"?: boolean;
         /**
@@ -6630,6 +7296,7 @@ declare namespace LocalJSX {
     interface IonNav {
         /**
           * If `true`, the nav should animate the transition of components.
+          * @default true
          */
         "animated"?: boolean;
         /**
@@ -6672,6 +7339,7 @@ declare namespace LocalJSX {
         "routerAnimation"?: AnimationBuilder;
         /**
           * The transition direction when navigating to another page.
+          * @default 'forward'
          */
         "routerDirection"?: RouterDirection;
     }
@@ -6694,10 +7362,12 @@ 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;
         /**
           * If `true`, the user cannot interact with the picker.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -6716,10 +7386,12 @@ 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;
         /**
           * If `true`, the user cannot interact with the picker column option.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -6730,18 +7402,22 @@ declare namespace LocalJSX {
     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[];
         /**
@@ -6750,6 +7426,7 @@ declare namespace LocalJSX {
         "cssClass"?: string | string[];
         /**
           * Number of milliseconds to wait before dismissing the picker.
+          * @default 0
          */
         "duration"?: number;
         /**
@@ -6762,10 +7439,12 @@ declare namespace LocalJSX {
         "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;
         /**
@@ -6810,6 +7489,7 @@ declare namespace LocalJSX {
         "onWillPresent"?: (event: IonPickerLegacyCustomEvent<void>) => void;
         /**
           * If `true`, a backdrop will be displayed behind the picker.
+          * @default true
          */
         "showBackdrop"?: boolean;
         /**
@@ -6830,14 +7510,17 @@ declare namespace LocalJSX {
         "alignment"?: PositionAlign;
         /**
           * If `true`, the popover will animate.
+          * @default true
          */
         "animated"?: boolean;
         /**
           * If `true`, the popover will display an arrow that points at the `reference` when running in `ios` mode. Does not apply in `md` mode.
+          * @default true
          */
         "arrow"?: boolean;
         /**
           * If `true`, the popover will be dismissed when the backdrop is clicked.
+          * @default true
          */
         "backdropDismiss"?: boolean;
         /**
@@ -6850,6 +7533,7 @@ declare namespace LocalJSX {
         "componentProps"?: ComponentProps;
         /**
           * If `true`, the popover will be automatically dismissed when the content has been clicked.
+          * @default false
          */
         "dismissOnSelect"?: boolean;
         /**
@@ -6862,6 +7546,7 @@ declare namespace LocalJSX {
         "event"?: any;
         /**
           * If `true`, focus will not be allowed to move outside of this overlay. If `false`, focus will be allowed to move outside of the overlay.  In most scenarios this property should remain set to `true`. Setting this property to `false` can cause severe accessibility issues as users relying on assistive technologies may be able to move focus into a confusing state. We recommend only setting this to `false` when absolutely necessary.  Developers may want to consider disabling focus trapping if this overlay presents a non-Ionic overlay from a 3rd party library. Developers would disable focus trapping on the Ionic overlay when presenting the 3rd party overlay and then re-enable focus trapping when dismissing the 3rd party overlay and moving focus back to the Ionic overlay.
+          * @default true
          */
         "focusTrap"?: boolean;
         /**
@@ -6870,14 +7555,17 @@ declare namespace LocalJSX {
         "htmlAttributes"?: { [key: string]: any };
         /**
           * If `true`, the popover will open. If `false`, the popover will close. Use this if you need finer grained control over presentation, otherwise just use the popoverController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the popover dismisses. You will need to do that in your code.
+          * @default false
          */
         "isOpen"?: boolean;
         /**
           * If `true`, the component passed into `ion-popover` will automatically be mounted when the popover is created. The component will remain mounted even when the popover is dismissed. However, the component will be destroyed when the popover is destroyed. This property is not reactive and should only be used when initially creating a popover.  Note: This feature only applies to inline popovers in JavaScript frameworks such as Angular, React, and Vue.
+          * @default false
          */
         "keepContentsMounted"?: boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+          * @default true
          */
         "keyboardClose"?: boolean;
         /**
@@ -6922,22 +7610,27 @@ declare namespace LocalJSX {
         "onWillPresent"?: (event: IonPopoverCustomEvent<void>) => void;
         /**
           * Describes what to position the popover relative to. If `"trigger"`, the popover will be positioned relative to the trigger button. If passing in an event, this is determined via event.target. If `"event"`, the popover will be positioned relative to the x/y coordinates of the trigger action. If passing in an event, this is determined via event.clientX and event.clientY.
+          * @default 'trigger'
          */
         "reference"?: PositionReference;
         /**
           * If `true`, a backdrop will be displayed behind the popover. This property controls whether or not the backdrop darkens the screen when the popover is presented. It does not control whether or not the backdrop is active or present in the DOM.
+          * @default true
          */
         "showBackdrop"?: boolean;
         /**
           * Describes which side of the `reference` point to position the popover on. The `"start"` and `"end"` values are RTL-aware, and the `"left"` and `"right"` values are not.
+          * @default 'bottom'
          */
         "side"?: PositionSide;
         /**
           * Describes how to calculate the popover width. If `"cover"`, the popover width will match the width of the trigger. If `"auto"`, the popover width will be set to a static default value.
+          * @default 'auto'
          */
         "size"?: PopoverSize;
         /**
           * If `true`, the popover will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+          * @default false
          */
         "translucent"?: boolean;
         /**
@@ -6946,12 +7639,14 @@ declare namespace LocalJSX {
         "trigger"?: string | undefined;
         /**
           * Describes what kind of interaction with the trigger that should cause the popover to open. Does not apply when the `trigger` property is `undefined`. If `"click"`, the popover will be presented when the trigger is left clicked. If `"hover"`, the popover will be presented when a pointer hovers over the trigger. If `"context-menu"`, the popover will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing.
+          * @default 'click'
          */
         "triggerAction"?: TriggerAction;
     }
     interface IonProgressBar {
         /**
           * If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1].
+          * @default 1
          */
         "buffer"?: number;
         /**
@@ -6964,14 +7659,17 @@ declare namespace LocalJSX {
         "mode"?: "ios" | "md";
         /**
           * If true, reverse the progress bar direction.
+          * @default false
          */
         "reversed"?: boolean;
         /**
           * The state of the progress bar, based on if the time the process takes is known or not. Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
+          * @default 'determinate'
          */
         "type"?: 'determinate' | 'indeterminate';
         /**
           * The value determines how much of the active bar should display when the `type` is `"determinate"`. The value should be between [0, 1].
+          * @default 0
          */
         "value"?: number;
     }
@@ -6986,6 +7684,7 @@ declare namespace LocalJSX {
         "color"?: Color;
         /**
           * If `true`, the user cannot interact with the radio.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -6994,6 +7693,7 @@ declare namespace LocalJSX {
         "justify"?: 'start' | 'end' | 'space-between';
         /**
           * Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
+          * @default 'start'
          */
         "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
         /**
@@ -7002,6 +7702,7 @@ declare namespace LocalJSX {
         "mode"?: "ios" | "md";
         /**
           * The name of the control, which is submitted with the form data.
+          * @default this.inputId
          */
         "name"?: string;
         /**
@@ -7020,6 +7721,7 @@ declare namespace LocalJSX {
     interface IonRadioGroup {
         /**
           * If `true`, the radios can be deselected.
+          * @default false
          */
         "allowEmptySelection"?: boolean;
         /**
@@ -7036,6 +7738,7 @@ declare namespace LocalJSX {
         "helperText"?: string;
         /**
           * The name of the control, which is submitted with the form data.
+          * @default this.inputId
          */
         "name"?: string;
         /**
@@ -7062,10 +7765,12 @@ declare namespace LocalJSX {
         "debounce"?: number;
         /**
           * If `true`, the user cannot interact with the range.
+          * @default false
          */
         "disabled"?: boolean;
         /**
           * Show two knobs.
+          * @default false
          */
         "dualKnobs"?: boolean;
         /**
@@ -7074,14 +7779,17 @@ declare namespace LocalJSX {
         "label"?: string;
         /**
           * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the range regardless of the direction.
+          * @default 'start'
          */
         "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * Maximum integer value of the range.
+          * @default 100
          */
         "max"?: number;
         /**
           * Minimum integer value of the range.
+          * @default 0
          */
         "min"?: number;
         /**
@@ -7090,6 +7798,7 @@ declare namespace LocalJSX {
         "mode"?: "ios" | "md";
         /**
           * The name of the control, which is submitted with the form data.
+          * @default this.rangeId
          */
         "name"?: string;
         /**
@@ -7118,36 +7827,44 @@ declare namespace LocalJSX {
         "onIonKnobMoveStart"?: (event: IonRangeCustomEvent<RangeKnobMoveStartEventDetail>) => void;
         /**
           * If `true`, a pin with integer value is shown when the knob is pressed.
+          * @default false
          */
         "pin"?: boolean;
         /**
           * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
+          * @default (value: number): number => Math.round(value)
          */
         "pinFormatter"?: PinFormatter;
         /**
           * If `true`, the knob snaps to tick marks evenly spaced based on the step property value.
+          * @default false
          */
         "snaps"?: boolean;
         /**
           * Specifies the value granularity.
+          * @default 1
          */
         "step"?: number;
         /**
           * If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`.
+          * @default true
          */
         "ticks"?: boolean;
         /**
           * the value of the range.
+          * @default 0
          */
         "value"?: RangeValue;
     }
     interface IonRefresher {
         /**
           * Time it takes to close the refresher. Does not apply when the refresher content uses a spinner, enabling the native refresher.
+          * @default '280ms'
          */
         "closeDuration"?: string;
         /**
           * If `true`, the refresher will be hidden.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -7168,18 +7885,22 @@ declare namespace LocalJSX {
         "onIonStart"?: (event: IonRefresherCustomEvent<void>) => void;
         /**
           * How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead.  For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.  Does not apply when the refresher content uses a spinner, enabling the native refresher.
+          * @default 1
          */
         "pullFactor"?: number;
         /**
           * The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. Does not apply when  the refresher content uses a spinner, enabling the native refresher.
+          * @default this.pullMin + 60
          */
         "pullMax"?: number;
         /**
           * The minimum distance the user must pull down until the refresher will go into the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.
+          * @default 60
          */
         "pullMin"?: number;
         /**
           * Time it takes the refresher to snap back to the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher.
+          * @default '280ms'
          */
         "snapbackDuration"?: string;
     }
@@ -7206,16 +7927,31 @@ declare namespace LocalJSX {
     interface IonReorderGroup {
         /**
           * If `true`, the reorder will be hidden.
+          * @default true
          */
         "disabled"?: boolean;
         /**
-          * Event that needs to be listened to in order to complete the reorder action. Once the event has been emitted, the `complete()` method then needs to be called in order to finalize the reorder action.
+          * Event that needs to be listened to in order to complete the reorder action.
+          * @deprecated Use `ionReorderEnd` instead. If you are accessing `event.detail.from` or `event.detail.to` and relying on them being different you should now add checks as they are always emitted in `ionReorderEnd`, even when they are the same.
          */
         "onIonItemReorder"?: (event: IonReorderGroupCustomEvent<ItemReorderEventDetail>) => void;
+        /**
+          * Event that is emitted when the reorder gesture ends. The from and to properties are always available, regardless of if the reorder gesture moved the item. If the item did not change from its start position, the from and to properties will be the same. Once the event has been emitted, the `complete()` method then needs to be called in order to finalize the reorder action.
+         */
+        "onIonReorderEnd"?: (event: IonReorderGroupCustomEvent<ReorderEndEventDetail>) => void;
+        /**
+          * Event that is emitted as the reorder gesture moves.
+         */
+        "onIonReorderMove"?: (event: IonReorderGroupCustomEvent<ReorderMoveEventDetail>) => void;
+        /**
+          * Event that is emitted when the reorder gesture starts.
+         */
+        "onIonReorderStart"?: (event: IonReorderGroupCustomEvent<void>) => void;
     }
     interface IonRippleEffect {
         /**
           * Sets the type of ripple-effect:  - `bounded`: the ripple effect expands from the user's click position - `unbounded`: the ripple effect expands from the center of the button and overflows the container.  NOTE: Surfaces for bounded ripples should have the overflow property set to hidden, while surfaces for unbounded ripples should have it set to visible.
+          * @default 'bounded'
          */
         "type"?: 'bounded' | 'unbounded';
     }
@@ -7242,6 +7978,7 @@ declare namespace LocalJSX {
         "onIonRouteDataChanged"?: (event: IonRouteCustomEvent<any>) => void;
         /**
           * Relative path that needs to match in order for this route to apply.  Accepts paths similar to expressjs so that you can define parameters in the url /foo/:bar where bar would be available in incoming props.
+          * @default ''
          */
         "url"?: string;
     }
@@ -7270,10 +8007,12 @@ declare namespace LocalJSX {
         "onIonRouteWillChange"?: (event: IonRouterCustomEvent<RouterEventDetail>) => void;
         /**
           * The root path to use when matching URLs. By default, this is set to "/", but you can specify an alternate prefix for all URL paths.
+          * @default '/'
          */
         "root"?: string;
         /**
           * The router can work in two "modes": - With hash: `/index.html#/path/to/page` - Without hash: `/path/to/page`  Using one or another might depend in the requirements of your app and/or where it's deployed.  Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might requires additional server-side configuration in order to properly work.  On the other side hash-navigation is much easier to deploy, it even works over the file protocol.  By default, this property is `true`, change to `false` to allow hash-less URLs.
+          * @default true
          */
         "useHash"?: boolean;
     }
@@ -7296,6 +8035,7 @@ declare namespace LocalJSX {
         "routerAnimation"?: AnimationBuilder | undefined;
         /**
           * When using a router, it specifies the transition direction when navigating to another page using `href`.
+          * @default 'forward'
          */
         "routerDirection"?: RouterDirection;
         /**
@@ -7306,6 +8046,7 @@ declare namespace LocalJSX {
     interface IonRouterOutlet {
         /**
           * If `true`, the router-outlet should animate the transition of components.
+          * @default true
          */
         "animated"?: boolean;
         /**
@@ -7314,6 +8055,7 @@ declare namespace LocalJSX {
         "animation"?: AnimationBuilder;
         /**
           * The mode determines which platform styles to use.
+          * @default getIonMode(this)
          */
         "mode"?: "ios" | "md";
     }
@@ -7322,26 +8064,32 @@ declare namespace LocalJSX {
     interface IonSearchbar {
         /**
           * If `true`, enable searchbar animation.
+          * @default false
          */
         "animated"?: boolean;
         /**
           * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+          * @default 'off'
          */
         "autocapitalize"?: string;
         /**
           * Set the input's autocomplete property.
+          * @default 'off'
          */
         "autocomplete"?: AutocompleteTypes;
         /**
           * Set the input's autocorrect property.
+          * @default 'off'
          */
         "autocorrect"?: 'on' | 'off';
         /**
           * Set the cancel button icon. Only applies to `md` mode. Defaults to `arrow-back-sharp`.
+          * @default config.get('backButtonIcon', arrowBackSharp) as string
          */
         "cancelButtonIcon"?: string;
         /**
-          * Set the the cancel button text. Only applies to `ios` mode.
+          * Set the cancel button text. Only applies to `ios` mode.
+          * @default 'Cancel'
          */
         "cancelButtonText"?: string;
         /**
@@ -7358,6 +8106,7 @@ declare namespace LocalJSX {
         "debounce"?: number;
         /**
           * If `true`, the user cannot interact with the input.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -7382,6 +8131,7 @@ declare namespace LocalJSX {
         "mode"?: "ios" | "md";
         /**
           * If used in a form, set the name of the control, which is submitted with the form data.
+          * @default this.inputId
          */
         "name"?: string;
         /**
@@ -7410,6 +8160,7 @@ declare namespace LocalJSX {
         "onIonInput"?: (event: IonSearchbarCustomEvent<SearchbarInputEventDetail>) => void;
         /**
           * Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+          * @default 'Search'
          */
         "placeholder"?: string;
         /**
@@ -7418,22 +8169,27 @@ declare namespace LocalJSX {
         "searchIcon"?: string;
         /**
           * Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state.
+          * @default 'never'
          */
         "showCancelButton"?: 'never' | 'focus' | 'always';
         /**
           * Sets the behavior for the clear button. Defaults to `"focus"`. Setting to `"focus"` shows the clear button on focus if the input is not empty. Setting to `"never"` hides the clear button. Setting to `"always"` shows the clear button regardless of focus state, but only if the input is not empty.
+          * @default 'always'
          */
         "showClearButton"?: 'never' | 'focus' | 'always';
         /**
           * If `true`, enable spellcheck on the input.
+          * @default false
          */
         "spellcheck"?: boolean;
         /**
           * Set the type of the input.
+          * @default 'search'
          */
         "type"?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
         /**
           * the value of the searchbar.
+          * @default ''
          */
         "value"?: string | null;
     }
@@ -7444,6 +8200,7 @@ declare namespace LocalJSX {
         "color"?: Color;
         /**
           * If `true`, the user cannot interact with the segment.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -7456,14 +8213,17 @@ declare namespace LocalJSX {
         "onIonChange"?: (event: IonSegmentCustomEvent<SegmentChangeEventDetail>) => void;
         /**
           * If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons.
+          * @default false
          */
         "scrollable"?: boolean;
         /**
           * If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element. If `false`, keyboard navigation will only focus the `ion-segment-button` element.
+          * @default false
          */
         "selectOnFocus"?: boolean;
         /**
           * If `true`, users will be able to swipe between segment buttons to activate them.
+          * @default true
          */
         "swipeGesture"?: boolean;
         /**
@@ -7478,10 +8238,12 @@ declare namespace LocalJSX {
         "contentId"?: string;
         /**
           * If `true`, the user cannot interact with the segment button.
+          * @default false
          */
         "disabled"?: boolean;
         /**
           * Set the layout of the text and icon in the segment.
+          * @default 'icon-top'
          */
         "layout"?: SegmentButtonLayout;
         /**
@@ -7490,10 +8252,12 @@ declare namespace LocalJSX {
         "mode"?: "ios" | "md";
         /**
           * The type of the button.
+          * @default 'button'
          */
         "type"?: 'submit' | 'reset' | 'button';
         /**
           * The value of the segment button.
+          * @default 'ion-sb-' + ids++
          */
         "value"?: SegmentValue;
     }
@@ -7502,6 +8266,7 @@ declare namespace LocalJSX {
     interface IonSegmentView {
         /**
           * If `true`, the segment view cannot be interacted with.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -7512,6 +8277,7 @@ declare namespace LocalJSX {
     interface IonSelect {
         /**
           * The text to display on the cancel button.
+          * @default 'Cancel'
          */
         "cancelText"?: string;
         /**
@@ -7524,6 +8290,7 @@ declare namespace LocalJSX {
         "compareWith"?: string | SelectCompareFn | null;
         /**
           * If `true`, the user cannot interact with the select.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -7544,10 +8311,12 @@ declare namespace LocalJSX {
         "helperText"?: string;
         /**
           * The interface the select should use: `action-sheet`, `popover`, `alert`, or `modal`.
+          * @default 'alert'
          */
         "interface"?: SelectInterface;
         /**
           * Any additional options that the `alert`, `action-sheet` or `popover` interface can take. See the [ion-alert docs](./alert), the [ion-action-sheet docs](./action-sheet), the [ion-popover docs](./popover), and the [ion-modal docs](./modal) for the create options for each interface.  Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
+          * @default {}
          */
         "interfaceOptions"?: any;
         /**
@@ -7560,6 +8329,7 @@ declare namespace LocalJSX {
         "label"?: string;
         /**
           * Where to place the label relative to the select. `"start"`: The label will appear to the left of the select in LTR and to the right in RTL. `"end"`: The label will appear to the right of the select in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select. `"stacked"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). When using `"floating"` or `"stacked"` we recommend initializing the select with either a `value` or a `placeholder`.
+          * @default 'start'
          */
         "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
         /**
@@ -7568,14 +8338,17 @@ declare namespace LocalJSX {
         "mode"?: "ios" | "md";
         /**
           * If `true`, the select can accept multiple values.
+          * @default false
          */
         "multiple"?: boolean;
         /**
           * The name of the control, which is submitted with the form data.
+          * @default this.inputId
          */
         "name"?: string;
         /**
           * The text to display on the ok button.
+          * @default 'OK'
          */
         "okText"?: string;
         /**
@@ -7604,6 +8377,7 @@ declare namespace LocalJSX {
         "placeholder"?: string;
         /**
           * If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid.
+          * @default false
          */
         "required"?: boolean;
         /**
@@ -7626,11 +8400,15 @@ declare namespace LocalJSX {
     interface IonSelectModal {
         "header"?: string;
         "multiple"?: boolean;
+        /**
+          * @default []
+         */
         "options"?: SelectModalOption[];
     }
     interface IonSelectOption {
         /**
           * If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -7653,6 +8431,7 @@ declare namespace LocalJSX {
         "multiple"?: boolean;
         /**
           * An array of options for the popover
+          * @default []
          */
         "options"?: SelectPopoverOption[];
         /**
@@ -7663,6 +8442,7 @@ declare namespace LocalJSX {
     interface IonSkeletonText {
         /**
           * If `true`, the skeleton text will animate.
+          * @default false
          */
         "animated"?: boolean;
     }
@@ -7681,6 +8461,7 @@ declare namespace LocalJSX {
         "name"?: SpinnerTypes;
         /**
           * If `true`, the spinner's animation will be paused.
+          * @default false
          */
         "paused"?: boolean;
     }
@@ -7691,6 +8472,7 @@ declare namespace LocalJSX {
         "contentId"?: string;
         /**
           * If `true`, the split pane will be hidden.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -7699,6 +8481,7 @@ declare namespace LocalJSX {
         "onIonSplitPaneVisible"?: (event: IonSplitPaneCustomEvent<{ visible: boolean }>) => void;
         /**
           * When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression.
+          * @default QUERY['lg']
          */
         "when"?: string | boolean;
     }
@@ -7727,12 +8510,14 @@ declare namespace LocalJSX {
         "selectedTab"?: string;
         /**
           * If `true`, the tab bar will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+          * @default false
          */
         "translucent"?: boolean;
     }
     interface IonTabButton {
         /**
           * If `true`, the user cannot interact with the tab button.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -7757,6 +8542,7 @@ declare namespace LocalJSX {
         "rel"?: string | undefined;
         /**
           * The selected tab component
+          * @default false
          */
         "selected"?: boolean;
         /**
@@ -7791,18 +8577,22 @@ declare namespace LocalJSX {
     interface IonTextarea {
         /**
           * If `true`, the textarea container will grow and shrink based on the contents of the textarea.
+          * @default false
          */
         "autoGrow"?: boolean;
         /**
           * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+          * @default 'none'
          */
         "autocapitalize"?: string;
         /**
           * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
+          * @default false
          */
         "autofocus"?: boolean;
         /**
           * If `true`, the value will be cleared after focus upon edit.
+          * @default false
          */
         "clearOnEdit"?: boolean;
         /**
@@ -7815,6 +8605,7 @@ declare namespace LocalJSX {
         "cols"?: number;
         /**
           * If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.
+          * @default false
          */
         "counter"?: boolean;
         /**
@@ -7827,6 +8618,7 @@ declare namespace LocalJSX {
         "debounce"?: number;
         /**
           * If `true`, the user cannot interact with the textarea.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -7855,6 +8647,7 @@ declare namespace LocalJSX {
         "label"?: string;
         /**
           * Where to place the label relative to the textarea. `"start"`: The label will appear to the left of the textarea in LTR and to the right in RTL. `"end"`: The label will appear to the right of the textarea in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea. `"stacked"`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * @default 'start'
          */
         "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
         /**
@@ -7871,6 +8664,7 @@ declare namespace LocalJSX {
         "mode"?: "ios" | "md";
         /**
           * The name of the control, which is submitted with the form data.
+          * @default this.inputId
          */
         "name"?: string;
         /**
@@ -7895,10 +8689,12 @@ declare namespace LocalJSX {
         "placeholder"?: string;
         /**
           * If `true`, the user cannot modify the value.
+          * @default false
          */
         "readonly"?: boolean;
         /**
           * If `true`, the user must fill in a value before submitting a form.
+          * @default false
          */
         "required"?: boolean;
         /**
@@ -7911,10 +8707,12 @@ declare namespace LocalJSX {
         "shape"?: 'round';
         /**
           * If `true`, the element will have its spelling and grammar checked.
+          * @default false
          */
         "spellcheck"?: boolean;
         /**
           * The value of the textarea.
+          * @default ''
          */
         "value"?: string | null;
         /**
@@ -7937,6 +8735,7 @@ declare namespace LocalJSX {
     interface IonToast {
         /**
           * If `true`, the toast will animate.
+          * @default true
          */
         "animated"?: boolean;
         /**
@@ -7953,6 +8752,7 @@ declare namespace LocalJSX {
         "cssClass"?: string | string[];
         /**
           * How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called.
+          * @default config.getNumber('toastDuration', 0)
          */
         "duration"?: number;
         /**
@@ -7973,14 +8773,17 @@ declare namespace LocalJSX {
         "icon"?: string;
         /**
           * If `true`, the toast will open. If `false`, the toast will close. Use this if you need finer grained control over presentation, otherwise just use the toastController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the toast dismisses. You will need to do that in your code.
+          * @default false
          */
         "isOpen"?: boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+          * @default false
          */
         "keyboardClose"?: boolean;
         /**
           * Defines how the message and buttons are laid out in the toast. 'baseline': The message and the buttons will appear on the same line. Message text may wrap within the message container. 'stacked': The buttons containers and message will stack on top of each other. Use this if you have long text in your buttons.
+          * @default 'baseline'
          */
         "layout"?: ToastLayout;
         /**
@@ -8029,6 +8832,7 @@ declare namespace LocalJSX {
         "onWillPresent"?: (event: IonToastCustomEvent<void>) => void;
         /**
           * The starting position of the toast on the screen. Can be tweaked further using the `positionAnchor` property.
+          * @default 'bottom'
          */
         "position"?: ToastPosition;
         /**
@@ -8041,6 +8845,7 @@ declare namespace LocalJSX {
         "swipeGesture"?: ToastSwipeGestureDirection;
         /**
           * If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+          * @default false
          */
         "translucent"?: boolean;
         /**
@@ -8055,6 +8860,7 @@ declare namespace LocalJSX {
         "alignment"?: 'start' | 'center';
         /**
           * If `true`, the toggle is selected.
+          * @default false
          */
         "checked"?: boolean;
         /**
@@ -8063,10 +8869,12 @@ declare namespace LocalJSX {
         "color"?: Color;
         /**
           * If `true`, the user cannot interact with the toggle.
+          * @default false
          */
         "disabled"?: boolean;
         /**
           * Enables the on/off accessibility switch labels within the toggle.
+          * @default config.get('toggleOnOffLabels')
          */
         "enableOnOffLabels"?: boolean | undefined;
         /**
@@ -8083,6 +8891,7 @@ declare namespace LocalJSX {
         "justify"?: 'start' | 'end' | 'space-between';
         /**
           * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
+          * @default 'start'
          */
         "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
         /**
@@ -8091,6 +8900,7 @@ declare namespace LocalJSX {
         "mode"?: "ios" | "md";
         /**
           * The name of the control, which is submitted with the form data.
+          * @default this.inputId
          */
         "name"?: string;
         /**
@@ -8107,10 +8917,12 @@ declare namespace LocalJSX {
         "onIonFocus"?: (event: IonToggleCustomEvent<void>) => void;
         /**
           * If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid.
+          * @default false
          */
         "required"?: boolean;
         /**
           * The value of the toggle does not mean if it's checked or not, use the `checked` property for that.  The value of a toggle is analogous to the value of a `<input type="checkbox">`, it's only used when the toggle participates in a native `<form>`.
+          * @default 'on'
          */
         "value"?: string | null;
     }
@@ -8159,6 +8971,7 @@ declare namespace LocalJSX {
         "ion-infinite-scroll": IonInfiniteScroll;
         "ion-infinite-scroll-content": IonInfiniteScrollContent;
         "ion-input": IonInput;
+        "ion-input-otp": IonInputOtp;
         "ion-input-password-toggle": IonInputPasswordToggle;
         "ion-item": IonItem;
         "ion-item-divider": IonItemDivider;
@@ -8261,6 +9074,7 @@ declare module "@stencil/core" {
             "ion-infinite-scroll": LocalJSX.IonInfiniteScroll & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollElement>;
             "ion-infinite-scroll-content": LocalJSX.IonInfiniteScrollContent & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollContentElement>;
             "ion-input": LocalJSX.IonInput & JSXBase.HTMLAttributes<HTMLIonInputElement>;
+            "ion-input-otp": LocalJSX.IonInputOtp & JSXBase.HTMLAttributes<HTMLIonInputOtpElement>;
             "ion-input-password-toggle": LocalJSX.IonInputPasswordToggle & JSXBase.HTMLAttributes<HTMLIonInputPasswordToggleElement>;
             "ion-item": LocalJSX.IonItem & JSXBase.HTMLAttributes<HTMLIonItemElement>;
             "ion-item-divider": LocalJSX.IonItemDivider & JSXBase.HTMLAttributes<HTMLIonItemDividerElement>;