@ionic/core 8.7.12-dev.11764955407.1ef60cf1 → 8.7.12-dev.11764959751.15a91dbd

package/dist/types/components.d.ts

@@ -89,7 +89,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -97,11 +97,14 @@ export namespace Components {
           * @default false
          */
         "readonly": boolean;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The toggle icon to use. This icon will be rotated when the accordion is expanded or collapsed.
-          * @default chevronDown
          */
-        "toggleIcon": string;
+        "toggleIcon"?: string;
         /**
           * The slot inside of `ion-item` to place the toggle icon. Defaults to `"end"`.
           * @default 'end'
@@ -131,7 +134,7 @@ export namespace Components {
         "expand": 'compact' | 'inset';
         "getAccordions": () => Promise<HTMLIonAccordionElement[]>;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -147,6 +150,14 @@ export namespace Components {
           * This method is used to ensure that the value of ion-accordion-group is being set in a valid way. This method should only be called in response to a user generated action.
          */
         "requestAccordionToggle": (accordionValue: string | undefined, accordionExpand: boolean) => Promise<void>;
+        /**
+          * Set to `"soft"` for an accordion group with slightly rounded corners, `"round"` for an accordion group with fully rounded corners, or `"rectangular"` for an accordion group without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes. Only applies when `expand` is set to `"inset"`.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The value of the accordion group. This controls which accordions are expanded. This should be an array of strings only when `multiple="true"`
          */
@@ -210,7 +221,7 @@ export namespace Components {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -231,7 +242,11 @@ 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).
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+        /**
+          * If `true`, the action sheet will be translucent. Only applies when the theme 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;
@@ -307,7 +322,7 @@ export namespace Components {
          */
         "message"?: string | IonicSafeString;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -328,7 +343,11 @@ 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).
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+        /**
+          * If `true`, the alert will be translucent. Only applies when the theme 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;
@@ -338,13 +357,42 @@ export namespace Components {
         "trigger": string | undefined;
     }
     interface IonApp {
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * 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>;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonAvatar {
+        /**
+          * If `true`, the user cannot interact with the avatar.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * Set to `"soft"` for an avatar with slightly rounded corners, `"round"` for an avatar with fully rounded corners, or `"rectangular"` for an avatar without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * Set to `"xxsmall"` for the smallest size. Set to `"xsmall"` for a very small size. Set to `"small"` for a compact size. Set to `"medium"` for the default height and width. Set to `"large"` for a larger size. Set to `"xlarge"` for the largest dimensions.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
+         */
+        "size"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonBackButton {
         /**
@@ -365,7 +413,7 @@ export namespace Components {
          */
         "icon"?: string | null;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -376,6 +424,10 @@ export namespace Components {
           * The text to display in the back button.
          */
         "text"?: string | null;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The type of the button.
           * @default 'button'
@@ -383,6 +435,10 @@ export namespace Components {
         "type": 'submit' | 'reset' | 'button';
     }
     interface IonBackdrop {
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * If `true`, the backdrop will stop propagation on tap.
           * @default true
@@ -393,6 +449,10 @@ export namespace Components {
           * @default true
          */
         "tappable": boolean;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * If `true`, the backdrop will be visible.
           * @default true
@@ -405,9 +465,29 @@ export namespace Components {
          */
         "color"?: Color;
         /**
-          * The mode determines which platform styles to use.
+          * Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for a badge with muted, subtle colors.  Only applies to the `ionic` theme.
+         */
+        "hue"?: 'bold' | 'subtle';
+        /**
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * Set to `"rectangular"` for non-rounded corners. Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round | rectangular';
+        /**
+          * Set to `"small"` for a small badge. Set to `"medium"` for a medium badge. Set to `"large"` for a large badge, when it is empty (no text or icon).  Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+        /**
+          * Set to `"top"` to position the badge on top right absolute position of the parent element. Set to `"bottom"` to position the badge on bottom right absolute position of the parent element.
+         */
+        "vertical"?: 'top' | 'bottom';
     }
     interface IonBreadcrumb {
         /**
@@ -438,7 +518,7 @@ export namespace Components {
         "href": string | undefined;
         "last": boolean;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -463,6 +543,10 @@ export namespace Components {
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
         "target": string | undefined;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonBreadcrumbs {
         /**
@@ -484,9 +568,13 @@ export namespace Components {
          */
         "maxItems"?: number;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonButton {
         /**
@@ -524,7 +612,7 @@ export namespace Components {
          */
         "href": string | undefined;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -541,13 +629,13 @@ export namespace Components {
          */
         "routerDirection": RouterDirection;
         /**
-          * Set to `"round"` for a button with more rounded corners.
+          * Set to `"soft"` for a button with slightly rounded corners, `"round"` for a button with fully rounded corners, or `"rectangular"` for a button without rounded corners. Defaults to `"soft"` for the `"ios"` theme and `"round"` for all other themes.
          */
-        "shape"?: 'round';
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
-          * Set to `"small"` for a button with less height and padding, to `"default"` for a button with the default height and padding, or to `"large"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `"small"` by default. Set the size to `"default"` inside of an item to make it a standard size button.
+          * Set to `"small"` for a button with less height and padding, to `"medium"` for a button with the medium height and padding, or to `"large"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `"small"` by default. Set the size to `"default"` inside of an item to make it a standard size button.
          */
-        "size"?: 'small' | 'default' | 'large';
+        "size"?: 'small' | 'default' | 'medium' | 'large';
         /**
           * If `true`, activates a button with a heavier font weight.
           * @default false
@@ -557,6 +645,10 @@ export namespace Components {
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
         "target": string | undefined;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The type of the button.
           * @default 'button'
@@ -565,10 +657,18 @@ export namespace Components {
     }
     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)
+          * 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 the `ios` theme 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;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonCard {
         /**
@@ -594,7 +694,7 @@ export namespace Components {
          */
         "href": string | undefined;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -610,10 +710,19 @@ export namespace Components {
           * @default 'forward'
          */
         "routerDirection": RouterDirection;
+        /**
+          * Set to `"soft"` for a card with slightly rounded corners, `"round"` for a card with more rounded corners, or `"rectangular"` for a card without rounded corners. Defaults to `"round"`.
+          * @default 'round'
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
         "target": string | undefined;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The type of the button. Only used when an `onclick` or `button` property is present.
           * @default 'button'
@@ -622,9 +731,13 @@ export namespace Components {
     }
     interface IonCardContent {
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonCardHeader {
         /**
@@ -632,11 +745,15 @@ export namespace Components {
          */
         "color"?: Color;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "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).
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+        /**
+          * If `true`, the card header will be translucent. Only applies when the theme 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;
@@ -647,9 +764,13 @@ export namespace Components {
          */
         "color"?: Color;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonCardTitle {
         /**
@@ -657,9 +778,13 @@ export namespace Components {
          */
         "color"?: Color;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonCheckbox {
         /**
@@ -703,7 +828,7 @@ export namespace Components {
          */
         "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -717,6 +842,19 @@ export namespace Components {
          */
         "required": boolean;
         "setFocus": () => Promise<void>;
+        /**
+          * Set to `"soft"` for a checkbox with more rounded corners. Only available when the theme is `"ionic"`.
+          * @default 'soft'
+         */
+        "shape"?: 'soft' | 'rectangular';
+        /**
+          * Set to `"small"` for a checkbox with less height and padding.
+         */
+        "size"?: 'small';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * 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'
@@ -734,7 +872,12 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * The mode determines which platform styles to use.
+          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Only applies to the `ionic` theme.
+          * @default 'subtle'
+         */
+        "hue"?: 'bold' | 'subtle';
+        /**
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -742,8 +885,24 @@ export namespace Components {
           * @default false
          */
         "outline": boolean;
+        /**
+          * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners. Defaults to `"round"` for the `"ionic"` theme and `"soft"` for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"` for the ionic theme, and  undefined for all other themes.
+         */
+        "size"?: 'small' | 'large';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonCol {
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * The amount to offset the column, in terms of how many columns it should shift to the end of the total available.
          */
@@ -768,52 +927,88 @@ export namespace Components {
           * The amount to offset the column for xs screens, in terms of how many columns it should shift to the end of the total available.
          */
         "offsetXs"?: string;
+        /**
+          * The order of the column, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "order"?: string;
+        /**
+          * The order of the column for lg screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderLg"?: string;
+        /**
+          * The order of the column for md screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderMd"?: string;
+        /**
+          * The order of the column for sm screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderSm"?: string;
+        /**
+          * The order of the column for xl screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderXl"?: string;
+        /**
+          * The order of the column for xs screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderXs"?: string;
         /**
           * The amount to pull the column, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pull"?: string;
         /**
           * The amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullLg"?: string;
         /**
           * The amount to pull the column for md screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullMd"?: string;
         /**
           * The amount to pull the column for sm screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullSm"?: string;
         /**
           * The amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullXl"?: string;
         /**
           * The amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullXs"?: string;
         /**
           * The amount to push the column, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "push"?: string;
         /**
           * The amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushLg"?: string;
         /**
           * The amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushMd"?: string;
         /**
           * The amount to push the column for sm screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushSm"?: string;
         /**
           * The amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushXl"?: string;
         /**
           * The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushXs"?: string;
         /**
@@ -840,6 +1035,10 @@ export namespace Components {
           * The size of the column for xs screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
          */
         "sizeXs"?: string;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonContent {
         /**
@@ -868,6 +1067,10 @@ export namespace Components {
           * Get the element where the actual scrolling takes place. This element can be used to subscribe to `scroll` events or manually modify `scrollTop`. However, it's recommended to use the API provided by `ion-content`:  i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events and `scrollToPoint()` to scroll the content into a certain point.
          */
         "getScrollElement": () => Promise<HTMLElement>;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * Scroll by a specified X/Y distance in the component.
           * @param x The amount to scroll by on the horizontal axis.
@@ -907,6 +1110,10 @@ export namespace Components {
           * @default true
          */
         "scrollY": boolean;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonDatetime {
         /**
@@ -991,7 +1198,7 @@ export namespace Components {
          */
         "minuteValues"?: number[] | number | string;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -1058,6 +1265,10 @@ export namespace Components {
           * @default 'fixed'
          */
         "size": 'cover' | 'fixed';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
@@ -1087,9 +1298,25 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+    }
+    interface IonDivider {
+        /**
+          * If `true`, the divider will have horizontal margins By default, it's `false`
+          * @default false
+         */
+        "inset": boolean;
+        /**
+          * Set to `"xxsmall"` for the smallest spacing. Set to "xsmall" for very small spacing. Set to `"small"` for small spacing. Set to "medium" for medium spacing. Set to "large" for large spacing. Set to `"xlarge"` for the largest spacing.  Defaults to `"medium"`.
+          * @default 'medium'
+         */
+        "spacing"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
     }
     interface IonFab {
         /**
@@ -1110,6 +1337,14 @@ export namespace Components {
           * Where to align the fab horizontally in the viewport.
          */
         "horizontal"?: 'start' | 'end' | 'center';
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * Opens/Closes the FAB list container.
          */
@@ -1127,9 +1362,8 @@ export namespace Components {
         "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;
+        "closeIcon"?: string;
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
@@ -1148,7 +1382,7 @@ export namespace Components {
          */
         "href": string | undefined;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -1178,7 +1412,11 @@ 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).
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+        /**
+          * If `true`, the fab button will be translucent. Only applies when the theme 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;
@@ -1194,23 +1432,35 @@ export namespace Components {
           * @default false
          */
         "activated": boolean;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * The side the fab list will show on relative to the main fab button.
           * @default 'bottom'
          */
         "side": 'start' | 'end' | 'top' | 'bottom';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonFooter {
         /**
-          * Describes the scroll effect that will be applied to the footer. Only applies in iOS mode.
+          * Describes the scroll effect that will be applied to the footer. Only applies when the theme is `"ios"`.
          */
         "collapse"?: 'fade';
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "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.
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+        /**
+          * If `true`, the footer will be translucent. Only applies when the theme 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;
@@ -1221,18 +1471,35 @@ export namespace Components {
           * @default false
          */
         "fixed": boolean;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonHeader {
         /**
-          * Describes the scroll effect that will be applied to the header. Only applies in iOS mode.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
+          * Describes the scroll effect that will be applied to the header. Only applies when the theme is `"ios"`.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
          */
         "collapse"?: 'condense' | 'fade';
         /**
-          * The mode determines which platform styles to use.
+          * If `true`, the header will have a line at the bottom. TODO(ROU-10855): add support for this prop on ios/md themes
+          * @default false
+         */
+        "divider": boolean;
+        /**
+          * The mode determines the platform behaviors of the component.
          */
         "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.
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+        /**
+          * If `true`, the header will be translucent. Only applies when the theme is `"ios"` or `"ionic"` 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;
@@ -1242,10 +1509,18 @@ export namespace Components {
           * This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.
          */
         "alt"?: string;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * The image URL. This attribute is mandatory for the `<img>` element.
          */
         "src"?: string;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonInfiniteScroll {
         /**
@@ -1257,11 +1532,24 @@ export namespace Components {
           * @default false
          */
         "disabled": boolean;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * The position of the infinite scroll element. The value can be either `top` or `bottom`.
           * @default 'bottom'
          */
         "position": 'top' | 'bottom';
+        /**
+          * If `true`, the infinite scroll will preserve the scroll position when the content is re-rendered. This is useful when the content is re-rendered with new keys, and the scroll position should be preserved.
+          * @default false
+         */
+        "preserveRerenderScrollPosition": boolean;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * 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%'
@@ -1277,6 +1565,14 @@ export namespace Components {
           * Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Content is parsed as plaintext by default. `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config before custom HTML can be used.
          */
         "loadingText"?: string | IonicSafeString;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonInput {
         /**
@@ -1343,7 +1639,7 @@ export namespace Components {
          */
         "errorText"?: string;
         /**
-          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
+          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available when the theme is `"md"`.
          */
         "fill"?: 'outline' | 'solid';
         /**
@@ -1363,10 +1659,9 @@ 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'
+          * 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 ("...").  Defaults to "stacked" for the ionic theme, or "start" for all other themes.  In the ionic theme, only the values "stacked" and "floating" are supported.
          */
-        "labelPlacement": 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
+        "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
         /**
           * The maximum value, which must not be less than its minimum (min attribute) value.
          */
@@ -1384,7 +1679,7 @@ export namespace Components {
          */
         "minlength"?: number;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -1419,9 +1714,14 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         /**
-          * The shape of the input. If "round" it will have an increased border radius.
+          * Set to `"soft"` for an input with slightly rounded corners, `"round"` for an input with fully rounded corners, or `"rectangular"` for an input without rounded corners. Defaults to `"round"` for the ionic theme, and `undefined` for all other themes. Only applies when the fill is set to `"solid"` or `"outline"`.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * The size of the input. If "large", it will have an increased height. By default the size is medium. This property only applies to the `"ionic"` theme.
+          * @default 'medium'
          */
-        "shape"?: 'round';
+        "size"?: 'medium' | 'large' | 'xlarge';
         /**
           * If `true`, the element will have its spelling and grammar checked.
           * @default false
@@ -1431,6 +1731,10 @@ export namespace Components {
           * Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number.
          */
         "step"?: string;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The type of control to display. The default type is text.
           * @default 'text'
@@ -1543,14 +1847,13 @@ export namespace Components {
          */
         "color"?: Color;
         /**
-          * If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present.
+          * If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `theme` is `"ios"` and an `href` or `button` property is present.
          */
         "detail"?: boolean;
         /**
           * The icon to use when `detail` is set to `true`.
-          * @default chevronForward
          */
-        "detailIcon": string;
+        "detailIcon"?: string;
         /**
           * If `true`, the user cannot interact with the item.
           * @default false
@@ -1569,7 +1872,7 @@ export namespace Components {
          */
         "lines"?: 'full' | 'inset' | 'none';
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -1589,6 +1892,10 @@ export namespace Components {
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
         "target": string | undefined;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The type of the button. Only used when an `onclick` or `button` property is present.
           * @default 'button'
@@ -1601,7 +1908,7 @@ export namespace Components {
          */
         "color"?: Color;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -1609,8 +1916,20 @@ export namespace Components {
           * @default false
          */
         "sticky": boolean;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonItemGroup {
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonItemOption {
         /**
@@ -1636,17 +1955,30 @@ export namespace Components {
          */
         "href": string | undefined;
         /**
-          * The mode determines which platform styles to use.
+          * Set to `"bold"` for an option with vibrant, bold colors or to `"subtle"` for an option with muted, subtle colors.  Only applies to the `ionic` theme.
+          * @default 'subtle'
+         */
+        "hue"?: 'bold' | 'subtle';
+        /**
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
           * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
          */
         "rel": string | undefined;
+        /**
+          * Set to `"rectangular"` for non-rounded corners. Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
         "target": string | undefined;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The type of the button.
           * @default 'button'
@@ -1655,11 +1987,19 @@ export namespace Components {
     }
     interface IonItemOptions {
         "fireSwipeEvent": () => Promise<void>;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * 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;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonItemSliding {
         /**
@@ -1683,11 +2023,19 @@ export namespace Components {
           * Get the ratio of the open amount of the item compared to the width of the options. If the number returned is positive, then the options on the right side are open. If the number returned is negative, then the options on the left side are open. If the absolute value of the number is greater than 1, the item is open more than the width of the options.
          */
         "getSlidingRatio": () => Promise<number>;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * Open the sliding item.
           * @param side The side of the options to open. If a side is not provided, it will open the first set of options it finds within the item.
          */
         "open": (side: Side | undefined) => Promise<void>;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonLabel {
         /**
@@ -1695,13 +2043,17 @@ export namespace Components {
          */
         "color"?: Color;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
           * The position determines where and how the label behaves inside an item.
          */
         "position"?: 'fixed' | 'stacked' | 'floating';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonList {
         /**
@@ -1718,9 +2070,17 @@ export namespace Components {
          */
         "lines"?: 'full' | 'inset' | 'none';
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * Set to `"soft"` for slightly rounded corners, `"round"` for fully rounded corners, or `"rectangular"` for no rounded corners.  Defaults to `"round"` for the `ionic` theme when inset is `true` defaults to `"rectangular"` for the `ionic` theme when inset is `false`, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonListHeader {
         /**
@@ -1732,9 +2092,13 @@ export namespace Components {
          */
         "lines"?: 'full' | 'inset' | 'none';
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonLoading {
         /**
@@ -1794,7 +2158,7 @@ export namespace Components {
          */
         "message"?: string | IonicSafeString;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -1820,7 +2184,11 @@ 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).
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+        /**
+          * If `true`, the loading indicator will be translucent. Only applies when the theme 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;
@@ -1862,6 +2230,10 @@ export namespace Components {
           * An id for the menu.
          */
         "menuId"?: string;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * 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`.
@@ -1884,6 +2256,10 @@ export namespace Components {
           * @default true
          */
         "swipeGesture": boolean;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * 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`.
@@ -1914,9 +2290,13 @@ export namespace Components {
          */
         "menu"?: string;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The type of the button.
           * @default 'button'
@@ -1933,6 +2313,14 @@ export namespace Components {
           * Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle.  If this property is not used, `ion-menu-toggle` will toggle the first menu that is active.
          */
         "menu"?: string;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonModal {
         /**
@@ -2037,7 +2425,7 @@ export namespace Components {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -2062,11 +2450,19 @@ export namespace Components {
           * @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>;
+        /**
+          * Set to `"soft"` for a modal with slightly rounded corners, `"round"` for a modal with fully rounded corners, or `"rectangular"` for a modal without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * 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;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * An ID corresponding to the trigger element that causes the modal to open when clicked.
          */
@@ -2079,7 +2475,7 @@ export namespace Components {
          */
         "animated": boolean;
         /**
-          * By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimationBuilder` functions.
+          * By default `ion-nav` animates transition between pages based on the mode ("ios" or "md"). However, this property allows to create custom transition using `AnimationBuilder` functions.
          */
         "animation"?: AnimationBuilder;
         /**
@@ -2127,6 +2523,10 @@ export namespace Components {
           * @param done The transition complete function.
          */
         "insertPages": (insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null, done?: TransitionDoneFn) => Promise<boolean>;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * Pop a component off of the navigation stack. Navigates back from the current component.
           * @param opts The navigation options.
@@ -2198,6 +2598,10 @@ export namespace Components {
           * If the nav component should allow for swipe-to-go-back.
          */
         "swipeGesture"?: boolean;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonNavLink {
         /**
@@ -2208,6 +2612,10 @@ export namespace Components {
           * Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`.
          */
         "componentProps"?: ComponentProps;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * The transition animation when navigating to another page.
          */
@@ -2217,6 +2625,10 @@ export namespace Components {
           * @default 'forward'
          */
         "routerDirection": RouterDirection;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonNote {
         /**
@@ -2224,16 +2636,24 @@ export namespace Components {
          */
         "color"?: Color;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonPicker {
         "exitInputMode": () => Promise<void>;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonPickerColumn {
         /**
@@ -2247,7 +2667,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -2264,6 +2684,10 @@ export namespace Components {
           * Sets the value prop and fires the ionChange event. This is used when we need to fire ionChange from user-generated events that cannot be caught with normal input/change event listeners.
          */
         "setValue": (value: PickerColumnValue) => Promise<void>;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The selected option in the picker.
          */
@@ -2280,6 +2704,14 @@ export namespace Components {
           * @default false
          */
         "disabled": boolean;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The text value of the option.
          */
@@ -2354,7 +2786,7 @@ export namespace Components {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -2375,6 +2807,10 @@ export namespace Components {
           * @default true
          */
         "showBackdrop": boolean;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * An ID corresponding to the trigger element that causes the picker to open when clicked.
          */
@@ -2388,7 +2824,7 @@ export namespace Components {
     }
     interface IonPopover {
         /**
-          * Describes how to align the popover content with the `reference` point. Defaults to `"center"` for `ios` mode, and `"start"` for `md` mode.
+          * Describes how to align the popover content with the `reference` point. Defaults to `"center"` for `"ios"` theme, and `"start"` for `"md"` theme.
          */
         "alignment"?: PositionAlign;
         /**
@@ -2397,7 +2833,7 @@ export namespace Components {
          */
         "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.
+          * If `true`, the popover will display an arrow that points at the `reference` on `"ios"` theme.
           * @default true
          */
         "arrow": boolean;
@@ -2477,7 +2913,7 @@ export namespace Components {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -2519,7 +2955,11 @@ export namespace Components {
          */
         "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).
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+        /**
+          * If `true`, the popover will be translucent. Only applies when the theme 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;
@@ -2544,7 +2984,7 @@ export namespace Components {
          */
         "color"?: Color;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -2552,6 +2992,14 @@ export namespace Components {
           * @default false
          */
         "reversed": boolean;
+        /**
+          * Set to `"round"` for a progress bar with rounded corners, or `"rectangular"` for a progress bar without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'round' | 'rectangular';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * 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'
@@ -2587,7 +3035,7 @@ export namespace Components {
          */
         "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -2597,6 +3045,10 @@ export namespace Components {
         "name": string;
         "setButtonTabindex": (value: number) => Promise<void>;
         "setFocus": (ev?: globalThis.Event) => Promise<void>;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * the value of the radio.
          */
@@ -2620,12 +3072,20 @@ export namespace Components {
           * The helper text to display at the top of the radio group.
          */
         "helperText"?: string;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * The name of the control, which is submitted with the form data.
           * @default this.inputId
          */
         "name": string;
         "setFocus": () => Promise<void>;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * the value of the radio group.
          */
@@ -2674,7 +3134,7 @@ export namespace Components {
          */
         "min": number;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -2702,6 +3162,10 @@ export namespace Components {
           * @default 1
          */
         "step": number;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`.
           * @default true
@@ -2737,7 +3201,7 @@ export namespace Components {
          */
         "getProgress": () => Promise<number>;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -2760,8 +3224,16 @@ export namespace Components {
           * @default '280ms'
          */
         "snapbackDuration": string;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonRefresherContent {
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * A static icon or a spinner to display when you begin to pull down. A spinner name can be provided to gradually show tick marks when pulling down on iOS devices.
          */
@@ -2778,8 +3250,20 @@ export namespace Components {
           * The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  Content is parsed as plaintext by default. `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config before custom HTML can be used.
          */
         "refreshingText"?: string | IonicSafeString;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonReorder {
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonReorderGroup {
         /**
@@ -2792,6 +3276,14 @@ export namespace Components {
           * @default true
          */
         "disabled": boolean;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonRippleEffect {
         /**
@@ -2800,6 +3292,14 @@ export namespace Components {
           * @param y The vertical coordinate of where the ripple should start.
          */
         "addRipple": (x: number, y: number) => Promise<() => void>;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * 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'
@@ -2823,6 +3323,14 @@ export namespace Components {
           * A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed to the defined component when rendered.
          */
         "componentProps"?: { [key: string]: any };
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * 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 ''
@@ -2845,6 +3353,10 @@ export namespace Components {
          */
         "back": () => Promise<void>;
         "canTransition": () => Promise<string | boolean>;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         "navChanged": (direction: RouterDirection) => Promise<boolean>;
         "printDebug": () => Promise<void>;
         /**
@@ -2859,6 +3371,10 @@ export namespace Components {
           * @default '/'
          */
         "root": string;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * 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
@@ -2874,6 +3390,10 @@ export namespace Components {
           * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
          */
         "href": string | undefined;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
          */
@@ -2891,6 +3411,10 @@ export namespace Components {
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
         "target": string | undefined;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonRouterOutlet {
         /**
@@ -2906,14 +3430,26 @@ export namespace Components {
         "delegate"?: FrameworkDelegate;
         "getRouteId": () => Promise<RouteID | undefined>;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
           * @default getIonMode(this)
          */
         "mode": "ios" | "md";
         "setRouteId": (id: string, params: ComponentProps | undefined, direction: RouterDirection, animation?: AnimationBuilder) => Promise<RouteWrite>;
         "swipeHandler"?: SwipeGestureHandler;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonRow {
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonSearchbar {
         /**
@@ -2937,17 +3473,16 @@ export namespace Components {
          */
         "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
+          * Set the cancel button icon. Only available when the theme is `"md"`. Defaults to `"arrow-back-sharp"`.
          */
-        "cancelButtonIcon": string;
+        "cancelButtonIcon"?: string;
         /**
-          * Set the cancel button text. Only applies to `ios` mode.
+          * Set the cancel button text. Only available when the theme is `"ios"`.
           * @default 'Cancel'
          */
         "cancelButtonText": string;
         /**
-          * Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`.
+          * Set the clear icon. Defaults to `"close-circle"` for `"ios"` theme and `"close-sharp"` for `"md"` and `"ionic"` theme.
          */
         "clearIcon"?: string;
         /**
@@ -2984,7 +3519,7 @@ export namespace Components {
          */
         "minlength"?: number;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -2998,13 +3533,17 @@ export namespace Components {
          */
         "placeholder": string;
         /**
-          * The icon to use as the search icon. Defaults to `search-outline` in `ios` mode and `search-sharp` in `md` mode.
+          * The icon to use as the search icon. Defaults to `"search-outline"` in the `"ios"` theme and `"search-sharp"` in the `"md"` and `"ionic"` themes. If `false`, no search icon will be displayed.
          */
-        "searchIcon"?: string;
+        "searchIcon"?: string | boolean;
         /**
           * 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>;
+        /**
+          * Set to `"soft"` for a searchbar with slightly rounded corners, `"round"` for a searchbar with fully rounded corners, or `"rectangular"` for a searchbar without rounded corners.  Defaults to `"round"` for the ionic theme, and `undefined` for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * 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'
@@ -3015,11 +3554,19 @@ export namespace Components {
           * @default 'always'
          */
         "showClearButton": 'never' | 'focus' | 'always';
+        /**
+          * Set to `"large"` for a searchbar with an increase in height, while "small" and "medium" provide progressively smaller heights.  Defaults to `"medium"` for the ionic theme, and `undefined` for all other themes.
+         */
+        "size"?: 'small' | 'medium' | 'large';
         /**
           * If `true`, enable spellcheck on the input.
           * @default false
          */
         "spellcheck": boolean;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * Set the type of the input.
           * @default 'search'
@@ -3042,7 +3589,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -3060,6 +3607,10 @@ export namespace Components {
           * @default true
          */
         "swipeGesture": boolean;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * the value of the segment.
          */
@@ -3081,10 +3632,14 @@ export namespace Components {
          */
         "layout"?: SegmentButtonLayout;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         "setFocus": () => Promise<void>;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The type of the button.
           * @default 'button'
@@ -3134,11 +3689,11 @@ export namespace Components {
          */
         "errorText"?: string;
         /**
-          * The toggle icon to show when the select is open. If defined, the icon rotation behavior in `md` mode will be disabled. If undefined, `toggleIcon` will be used for when the select is both open and closed.
+          * The toggle icon to show when the select is open. If defined, the icon rotation behavior in `"md"` theme will be disabled. If undefined, `toggleIcon` will be used for when the select is both open and closed.
          */
         "expandedIcon"?: string;
         /**
-          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
+          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in the `"md"` theme.
          */
         "fill"?: 'outline' | 'solid';
         /**
@@ -3169,7 +3724,7 @@ export namespace Components {
          */
         "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -3206,11 +3761,19 @@ export namespace Components {
          */
         "selectedText"?: string | null;
         /**
-          * The shape of the select. If "round" it will have an increased border radius.
+          * Set to `"soft"` for a select with slightly rounded corners, `"round"` for a select with fully rounded corners, or `"rectangular"` for a select without rounded corners.  Defaults to `"round"` for the `"ionic"` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * The size of the select. If "large" it will increase the height of the select, while "small" and "medium" provide progressively smaller heights.  Defaults to `"medium"` for the ionic theme, and  undefined for all other themes.
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * The theme determines the visual appearance of the component.
          */
-        "shape"?: 'round';
+        "theme"?: "ios" | "md" | "ionic";
         /**
-          * The toggle icon to use. Defaults to `chevronExpand` for `ios` mode, or `caretDownSharp` for `md` mode.
+          * The toggle icon to use. Defaults to `"chevronExpand"` for the `"ios"` theme, or `"caretDownSharp"` for the `"md"` and `"ionic"` themes.
          */
         "toggleIcon"?: string;
         /**
@@ -3232,6 +3795,14 @@ export namespace Components {
           * @default false
          */
         "disabled": boolean;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The text value of the option.
          */
@@ -3246,6 +3817,10 @@ export namespace Components {
           * The text content of the popover body
          */
         "message"?: string;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * If true, the select accepts multiple values
          */
@@ -3259,6 +3834,10 @@ export namespace Components {
           * The subheader text of the popover
          */
         "subHeader"?: string;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonSkeletonText {
         /**
@@ -3266,6 +3845,14 @@ export namespace Components {
           * @default false
          */
         "animated": boolean;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonSpinner {
         /**
@@ -3276,6 +3863,10 @@ export namespace Components {
           * Duration of the spinner animation in milliseconds. The default varies based on the spinner.
          */
         "duration"?: number;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used.
          */
@@ -3285,6 +3876,14 @@ export namespace Components {
           * @default false
          */
         "paused": boolean;
+        /**
+          * Set to `"xsmall"` for the smallest size. Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a large size. Set to `"xlarge"` for the largest size.  Defaults to `"xsmall"` for the `ionic` theme, undefined for all other themes.
+         */
+        "size"?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonSplitPane {
         /**
@@ -3297,6 +3896,14 @@ export namespace Components {
          */
         "disabled": boolean;
         "isVisible": () => Promise<boolean>;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * 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']
@@ -3313,6 +3920,10 @@ export namespace Components {
          */
         "component"?: ComponentRef;
         "delegate"?: FrameworkDelegate;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * Set the active component for the tab
          */
@@ -3321,6 +3932,10 @@ export namespace Components {
           * A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.
          */
         "tab": string;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonTabBar {
         /**
@@ -3328,7 +3943,12 @@ export namespace Components {
          */
         "color"?: Color;
         /**
-          * The mode determines which platform styles to use.
+          * Set to `"compact"` to display a width based on the items inside the tab bar. This value will only work for the `ionic` theme.  Set to `"full"` to display a full width tab bar.  Defaults to `"full"`.
+          * @default 'full'
+         */
+        "expand": 'compact' | 'full';
+        /**
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -3336,7 +3956,15 @@ 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).
+          * Set to `"soft"` for a tab bar with slightly rounded corners, `"round"` for a tab bar with fully rounded corners, or `"rectangular"` for a tab bar without rounded corners.  Defaults to `"round"` for the `"ionic"` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+        /**
+          * If `true`, the tab bar will be translucent. Only applies when the theme 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;
@@ -3360,7 +3988,7 @@ export namespace Components {
          */
         "layout"?: TabButtonLayout;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -3372,6 +4000,10 @@ export namespace Components {
           * @default false
          */
         "selected": boolean;
+        /**
+          * Set to `"soft"` for a tab-button with slightly rounded corners, `"round"` for a tab-button with fully rounded corners, or `"rectangular"` for a tab-button without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.
          */
@@ -3380,6 +4012,10 @@ export namespace Components {
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
         "target": string | undefined;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonTabs {
         "getRouteId": () => Promise<RouteID | undefined>;
@@ -3392,12 +4028,20 @@ export namespace Components {
           * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.
          */
         "getTab": (tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * Select a tab by the value of its `tab` property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
           * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.
          */
         "select": (tab: string | HTMLIonTabElement) => Promise<boolean>;
         "setRouteId": (id: string) => Promise<RouteWrite>;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * @default false
          */
@@ -3409,9 +4053,13 @@ export namespace Components {
          */
         "color"?: Color;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonTextarea {
         /**
@@ -3469,7 +4117,7 @@ export namespace Components {
          */
         "errorText"?: string;
         /**
-          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
+          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available when the theme is `"md"`.
          */
         "fill"?: 'outline' | 'solid';
         /**
@@ -3502,7 +4150,7 @@ export namespace Components {
          */
         "minlength"?: number;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -3533,14 +4181,23 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         /**
-          * The shape of the textarea. If "round" it will have an increased border radius.
+          * Set to `"soft"` for a textarea with slightly rounded corners, `"round"` for a textarea with fully rounded corners, or `"rectangular"` for a textarea without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * The size of the textarea. If "large" it will increase the height of the textarea, while "small" and "medium" provide progressively smaller heights. The default size is "medium". This property only applies to the `"ionic"` theme.
+          * @default 'medium'
          */
-        "shape"?: 'round';
+        "size"?: 'small' | 'medium' | 'large';
         /**
           * If `true`, the element will have its spelling and grammar checked.
           * @default false
          */
         "spellcheck": boolean;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The value of the textarea.
           * @default ''
@@ -3552,16 +4209,32 @@ export namespace Components {
         "wrap"?: 'hard' | 'soft' | 'off';
     }
     interface IonThumbnail {
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonTitle {
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * The size of the toolbar title.
          */
         "size"?: 'large' | 'small';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonToast {
         /**
@@ -3609,6 +4282,11 @@ export namespace Components {
           * Additional attributes to pass to the toast.
          */
         "htmlAttributes"?: { [key: string]: any };
+        /**
+          * Set to `"bold"` for a toast with vibrant, bold colors or to `"subtle"` for a toast with muted, subtle colors.  Only applies to the `ionic` theme.
+          * @default 'subtle'
+         */
+        "hue"?: 'bold' | 'subtle';
         /**
           * The name of the icon to display, or the path to a valid SVG file. See `ion-icon`. https://ionic.io/ionicons
          */
@@ -3637,7 +4315,7 @@ export namespace Components {
          */
         "message"?: string | IonicSafeString;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -3662,12 +4340,20 @@ export namespace Components {
           * Present the toast overlay after it has been created.
          */
         "present": () => Promise<void>;
+        /**
+          * Set to `"soft"` for a toast with slightly rounded corners, `"round"` for a toast with fully rounded corners, or `"rectangular"` for a toast without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * If set to 'vertical', the Toast can be dismissed with a swipe gesture. The swipe direction is determined by the value of the `position` property: `top`: The Toast can be swiped up to dismiss. `bottom`: The Toast can be swiped down to dismiss. `middle`: The Toast can be swiped up or down to dismiss.
          */
         "swipeGesture"?: ToastSwipeGestureDirection;
         /**
-          * If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+        /**
+          * If `true`, the toast will be translucent. Only applies when the theme 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;
@@ -3718,7 +4404,7 @@ export namespace Components {
          */
         "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -3731,6 +4417,10 @@ export namespace Components {
           * @default false
          */
         "required": boolean;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * 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'
@@ -3743,9 +4433,13 @@ export namespace Components {
          */
         "color"?: Color;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
 }
 export interface IonAccordionGroupCustomEvent<T> extends CustomEvent<T> {
@@ -4227,6 +4921,12 @@ declare global {
         prototype: HTMLIonDatetimeButtonElement;
         new (): HTMLIonDatetimeButtonElement;
     };
+    interface HTMLIonDividerElement extends Components.IonDivider, HTMLStencilElement {
+    }
+    var HTMLIonDividerElement: {
+        prototype: HTMLIonDividerElement;
+        new (): HTMLIonDividerElement;
+    };
     interface HTMLIonFabElement extends Components.IonFab, HTMLStencilElement {
     }
     var HTMLIonFabElement: {
@@ -5210,6 +5910,7 @@ declare global {
         "ion-content": HTMLIonContentElement;
         "ion-datetime": HTMLIonDatetimeElement;
         "ion-datetime-button": HTMLIonDatetimeButtonElement;
+        "ion-divider": HTMLIonDividerElement;
         "ion-fab": HTMLIonFabElement;
         "ion-fab-button": HTMLIonFabButtonElement;
         "ion-fab-list": HTMLIonFabListElement;
@@ -5293,7 +5994,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -5301,9 +6002,12 @@ declare namespace LocalJSX {
           * @default false
          */
         "readonly"?: boolean;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The toggle icon to use. This icon will be rotated when the accordion is expanded or collapsed.
-          * @default chevronDown
          */
         "toggleIcon"?: string;
         /**
@@ -5334,7 +6038,7 @@ declare namespace LocalJSX {
          */
         "expand"?: 'compact' | 'inset';
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -5350,6 +6054,14 @@ declare namespace LocalJSX {
           * @default false
          */
         "readonly"?: boolean;
+        /**
+          * Set to `"soft"` for an accordion group with slightly rounded corners, `"round"` for an accordion group with fully rounded corners, or `"rectangular"` for an accordion group without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes. Only applies when `expand` is set to `"inset"`.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The value of the accordion group. This controls which accordions are expanded. This should be an array of strings only when `multiple="true"`
          */
@@ -5402,7 +6114,7 @@ declare namespace LocalJSX {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -5442,7 +6154,11 @@ 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).
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+        /**
+          * If `true`, the action sheet will be translucent. Only applies when the theme 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;
@@ -5507,7 +6223,7 @@ declare namespace LocalJSX {
          */
         "message"?: string | IonicSafeString;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -5547,7 +6263,11 @@ 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).
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+        /**
+          * If `true`, the alert will be translucent. Only applies when the theme 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;
@@ -5557,8 +6277,37 @@ declare namespace LocalJSX {
         "trigger"?: string | undefined;
     }
     interface IonApp {
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonAvatar {
+        /**
+          * If `true`, the user cannot interact with the avatar.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * Set to `"soft"` for an avatar with slightly rounded corners, `"round"` for an avatar with fully rounded corners, or `"rectangular"` for an avatar without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * Set to `"xxsmall"` for the smallest size. Set to `"xsmall"` for a very small size. Set to `"small"` for a compact size. Set to `"medium"` for the default height and width. Set to `"large"` for a larger size. Set to `"xlarge"` for the largest dimensions.  Defaults to `"medium"` for the `ionic` theme, undefined for all other themes.
+         */
+        "size"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonBackButton {
         /**
@@ -5579,7 +6328,7 @@ declare namespace LocalJSX {
          */
         "icon"?: string | null;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -5590,6 +6339,10 @@ declare namespace LocalJSX {
           * The text to display in the back button.
          */
         "text"?: string | null;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The type of the button.
           * @default 'button'
@@ -5597,6 +6350,10 @@ declare namespace LocalJSX {
         "type"?: 'submit' | 'reset' | 'button';
     }
     interface IonBackdrop {
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * Emitted when the backdrop is tapped.
          */
@@ -5611,6 +6368,10 @@ declare namespace LocalJSX {
           * @default true
          */
         "tappable"?: boolean;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * If `true`, the backdrop will be visible.
           * @default true
@@ -5623,9 +6384,29 @@ declare namespace LocalJSX {
          */
         "color"?: Color;
         /**
-          * The mode determines which platform styles to use.
+          * Set to `"bold"` for a badge with vibrant, bold colors or to `"subtle"` for a badge with muted, subtle colors.  Only applies to the `ionic` theme.
+         */
+        "hue"?: 'bold' | 'subtle';
+        /**
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * Set to `"rectangular"` for non-rounded corners. Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round | rectangular';
+        /**
+          * Set to `"small"` for a small badge. Set to `"medium"` for a medium badge. Set to `"large"` for a large badge, when it is empty (no text or icon).  Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+        /**
+          * Set to `"top"` to position the badge on top right absolute position of the parent element. Set to `"bottom"` to position the badge on bottom right absolute position of the parent element.
+         */
+        "vertical"?: 'top' | 'bottom';
     }
     interface IonBreadcrumb {
         /**
@@ -5651,7 +6432,7 @@ declare namespace LocalJSX {
          */
         "href"?: string | undefined;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -5683,6 +6464,10 @@ declare namespace LocalJSX {
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
         "target"?: string | undefined;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonBreadcrumbs {
         /**
@@ -5704,13 +6489,17 @@ declare namespace LocalJSX {
          */
         "maxItems"?: number;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
           * Emitted when the collapsed indicator is clicked on.
          */
         "onIonCollapsedClick"?: (event: IonBreadcrumbsCustomEvent<BreadcrumbCollapsedClickEventDetail>) => void;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonButton {
         /**
@@ -5748,7 +6537,7 @@ declare namespace LocalJSX {
          */
         "href"?: string | undefined;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -5773,13 +6562,13 @@ declare namespace LocalJSX {
          */
         "routerDirection"?: RouterDirection;
         /**
-          * Set to `"round"` for a button with more rounded corners.
+          * Set to `"soft"` for a button with slightly rounded corners, `"round"` for a button with fully rounded corners, or `"rectangular"` for a button without rounded corners. Defaults to `"soft"` for the `"ios"` theme and `"round"` for all other themes.
          */
-        "shape"?: 'round';
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
-          * Set to `"small"` for a button with less height and padding, to `"default"` for a button with the default height and padding, or to `"large"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `"small"` by default. Set the size to `"default"` inside of an item to make it a standard size button.
+          * Set to `"small"` for a button with less height and padding, to `"medium"` for a button with the medium height and padding, or to `"large"` for a button with more height and padding. By default the size is unset, unless the button is inside of an item, where the size is `"small"` by default. Set the size to `"default"` inside of an item to make it a standard size button.
          */
-        "size"?: 'small' | 'default' | 'large';
+        "size"?: 'small' | 'default' | 'medium' | 'large';
         /**
           * If `true`, activates a button with a heavier font weight.
           * @default false
@@ -5789,6 +6578,10 @@ declare namespace LocalJSX {
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
         "target"?: string | undefined;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The type of the button.
           * @default 'button'
@@ -5797,10 +6590,18 @@ declare namespace LocalJSX {
     }
     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)
+          * 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 the `ios` theme 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;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonCard {
         /**
@@ -5826,7 +6627,7 @@ declare namespace LocalJSX {
          */
         "href"?: string | undefined;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -5842,10 +6643,19 @@ declare namespace LocalJSX {
           * @default 'forward'
          */
         "routerDirection"?: RouterDirection;
+        /**
+          * Set to `"soft"` for a card with slightly rounded corners, `"round"` for a card with more rounded corners, or `"rectangular"` for a card without rounded corners. Defaults to `"round"`.
+          * @default 'round'
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
         "target"?: string | undefined;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The type of the button. Only used when an `onclick` or `button` property is present.
           * @default 'button'
@@ -5854,9 +6664,13 @@ declare namespace LocalJSX {
     }
     interface IonCardContent {
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonCardHeader {
         /**
@@ -5864,11 +6678,15 @@ declare namespace LocalJSX {
          */
         "color"?: Color;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "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).
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+        /**
+          * If `true`, the card header will be translucent. Only applies when the theme 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;
@@ -5879,9 +6697,13 @@ declare namespace LocalJSX {
          */
         "color"?: Color;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonCardTitle {
         /**
@@ -5889,9 +6711,13 @@ declare namespace LocalJSX {
          */
         "color"?: Color;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonCheckbox {
         /**
@@ -5935,7 +6761,7 @@ declare namespace LocalJSX {
          */
         "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -5948,7 +6774,7 @@ declare namespace LocalJSX {
          */
         "onIonBlur"?: (event: IonCheckboxCustomEvent<void>) => void;
         /**
-          * Emitted when the checked property has changed as a result of a user action such as a click.  This event will not emit when programmatically setting the `checked` property.
+          * Emitted when the checked property has changed as a result of a user action such as a click. This event will not emit when programmatically setting the `checked` property.
          */
         "onIonChange"?: (event: IonCheckboxCustomEvent<CheckboxChangeEventDetail>) => void;
         /**
@@ -5960,6 +6786,19 @@ declare namespace LocalJSX {
           * @default false
          */
         "required"?: boolean;
+        /**
+          * Set to `"soft"` for a checkbox with more rounded corners. Only available when the theme is `"ionic"`.
+          * @default 'soft'
+         */
+        "shape"?: 'soft' | 'rectangular';
+        /**
+          * Set to `"small"` for a checkbox with less height and padding.
+         */
+        "size"?: 'small';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * 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'
@@ -5977,7 +6816,12 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * The mode determines which platform styles to use.
+          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Only applies to the `ionic` theme.
+          * @default 'subtle'
+         */
+        "hue"?: 'bold' | 'subtle';
+        /**
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -5985,8 +6829,24 @@ declare namespace LocalJSX {
           * @default false
          */
         "outline"?: boolean;
+        /**
+          * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners. Defaults to `"round"` for the `"ionic"` theme and `"soft"` for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"` for the ionic theme, and  undefined for all other themes.
+         */
+        "size"?: 'small' | 'large';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonCol {
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * The amount to offset the column, in terms of how many columns it should shift to the end of the total available.
          */
@@ -6011,52 +6871,88 @@ declare namespace LocalJSX {
           * The amount to offset the column for xs screens, in terms of how many columns it should shift to the end of the total available.
          */
         "offsetXs"?: string;
+        /**
+          * The order of the column, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "order"?: string;
+        /**
+          * The order of the column for lg screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderLg"?: string;
+        /**
+          * The order of the column for md screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderMd"?: string;
+        /**
+          * The order of the column for sm screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderSm"?: string;
+        /**
+          * The order of the column for xl screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderXl"?: string;
+        /**
+          * The order of the column for xs screens, in terms of where the column should position itself in the columns renderer. If no value is passed, the column order implicit value will be the order in the html structure.
+         */
+        "orderXs"?: string;
         /**
           * The amount to pull the column, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pull"?: string;
         /**
           * The amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullLg"?: string;
         /**
           * The amount to pull the column for md screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullMd"?: string;
         /**
           * The amount to pull the column for sm screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullSm"?: string;
         /**
           * The amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullXl"?: string;
         /**
           * The amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pullXs"?: string;
         /**
           * The amount to push the column, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "push"?: string;
         /**
           * The amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushLg"?: string;
         /**
           * The amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushMd"?: string;
         /**
           * The amount to push the column for sm screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushSm"?: string;
         /**
           * The amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushXl"?: string;
         /**
           * The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available.
+          * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
          */
         "pushXs"?: string;
         /**
@@ -6083,6 +6979,10 @@ declare namespace LocalJSX {
           * The size of the column for xs screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content.
          */
         "sizeXs"?: string;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonContent {
         /**
@@ -6103,6 +7003,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "fullscreen"?: boolean;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * Emitted while scrolling. This event is disabled by default. Set `scrollEvents` to `true` to enable.
          */
@@ -6130,6 +7034,10 @@ declare namespace LocalJSX {
           * @default true
          */
         "scrollY"?: boolean;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonDatetime {
         /**
@@ -6204,7 +7112,7 @@ declare namespace LocalJSX {
          */
         "minuteValues"?: number[] | number | string;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -6282,6 +7190,10 @@ declare namespace LocalJSX {
           * @default 'fixed'
          */
         "size"?: 'cover' | 'fixed';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
@@ -6311,9 +7223,25 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+    }
+    interface IonDivider {
+        /**
+          * If `true`, the divider will have horizontal margins By default, it's `false`
+          * @default false
+         */
+        "inset"?: boolean;
+        /**
+          * Set to `"xxsmall"` for the smallest spacing. Set to "xsmall" for very small spacing. Set to `"small"` for small spacing. Set to "medium" for medium spacing. Set to "large" for large spacing. Set to `"xlarge"` for the largest spacing.  Defaults to `"medium"`.
+          * @default 'medium'
+         */
+        "spacing"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
     }
     interface IonFab {
         /**
@@ -6330,6 +7258,14 @@ declare namespace LocalJSX {
           * Where to align the fab horizontally in the viewport.
          */
         "horizontal"?: 'start' | 'end' | 'center';
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * Where to align the fab vertically in the viewport.
          */
@@ -6343,7 +7279,6 @@ declare namespace LocalJSX {
         "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;
         /**
@@ -6364,7 +7299,7 @@ declare namespace LocalJSX {
          */
         "href"?: string | undefined;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -6402,7 +7337,11 @@ 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).
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+        /**
+          * If `true`, the fab button will be translucent. Only applies when the theme 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;
@@ -6418,23 +7357,35 @@ declare namespace LocalJSX {
           * @default false
          */
         "activated"?: boolean;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * The side the fab list will show on relative to the main fab button.
           * @default 'bottom'
          */
         "side"?: 'start' | 'end' | 'top' | 'bottom';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonFooter {
         /**
-          * Describes the scroll effect that will be applied to the footer. Only applies in iOS mode.
+          * Describes the scroll effect that will be applied to the footer. Only applies when the theme is `"ios"`.
          */
         "collapse"?: 'fade';
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "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.
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+        /**
+          * If `true`, the footer will be translucent. Only applies when the theme 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;
@@ -6445,18 +7396,35 @@ declare namespace LocalJSX {
           * @default false
          */
         "fixed"?: boolean;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonHeader {
         /**
-          * Describes the scroll effect that will be applied to the header. Only applies in iOS mode.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
+          * Describes the scroll effect that will be applied to the header. Only applies when the theme is `"ios"`.  Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
          */
         "collapse"?: 'condense' | 'fade';
         /**
-          * The mode determines which platform styles to use.
+          * If `true`, the header will have a line at the bottom. TODO(ROU-10855): add support for this prop on ios/md themes
+          * @default false
+         */
+        "divider"?: boolean;
+        /**
+          * The mode determines the platform behaviors of the component.
          */
         "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.
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+        /**
+          * If `true`, the header will be translucent. Only applies when the theme is `"ios"` or `"ionic"` 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;
@@ -6466,6 +7434,10 @@ declare namespace LocalJSX {
           * This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded.
          */
         "alt"?: string;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * Emitted when the img fails to load
          */
@@ -6482,6 +7454,10 @@ declare namespace LocalJSX {
           * The image URL. This attribute is mandatory for the `<img>` element.
          */
         "src"?: string;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonInfiniteScroll {
         /**
@@ -6489,6 +7465,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * Emitted when the scroll reaches the threshold distance. From within your infinite handler, you must call the infinite scroll's `complete()` method when your async operation has completed.
          */
@@ -6498,6 +7478,15 @@ declare namespace LocalJSX {
           * @default 'bottom'
          */
         "position"?: 'top' | 'bottom';
+        /**
+          * If `true`, the infinite scroll will preserve the scroll position when the content is re-rendered. This is useful when the content is re-rendered with new keys, and the scroll position should be preserved.
+          * @default false
+         */
+        "preserveRerenderScrollPosition"?: boolean;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * 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%'
@@ -6513,6 +7502,14 @@ declare namespace LocalJSX {
           * Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  This property accepts custom HTML as a string. Content is parsed as plaintext by default. `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config before custom HTML can be used.
          */
         "loadingText"?: string | IonicSafeString;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonInput {
         /**
@@ -6579,7 +7576,7 @@ declare namespace LocalJSX {
          */
         "errorText"?: string;
         /**
-          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
+          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available when the theme is `"md"`.
          */
         "fill"?: 'outline' | 'solid';
         /**
@@ -6595,8 +7592,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'
+          * 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 ("...").  Defaults to "stacked" for the ionic theme, or "start" for all other themes.  In the ionic theme, only the values "stacked" and "floating" are supported.
          */
         "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
         /**
@@ -6616,7 +7612,7 @@ declare namespace LocalJSX {
          */
         "minlength"?: number;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -6663,9 +7659,14 @@ declare namespace LocalJSX {
          */
         "required"?: boolean;
         /**
-          * The shape of the input. If "round" it will have an increased border radius.
+          * Set to `"soft"` for an input with slightly rounded corners, `"round"` for an input with fully rounded corners, or `"rectangular"` for an input without rounded corners. Defaults to `"round"` for the ionic theme, and `undefined` for all other themes. Only applies when the fill is set to `"solid"` or `"outline"`.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * The size of the input. If "large", it will have an increased height. By default the size is medium. This property only applies to the `"ionic"` theme.
+          * @default 'medium'
          */
-        "shape"?: 'round';
+        "size"?: 'medium' | 'large' | 'xlarge';
         /**
           * If `true`, the element will have its spelling and grammar checked.
           * @default false
@@ -6675,6 +7676,10 @@ declare namespace LocalJSX {
           * Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number.
          */
         "step"?: string;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The type of control to display. The default type is text.
           * @default 'text'
@@ -6798,12 +7803,11 @@ declare namespace LocalJSX {
          */
         "color"?: Color;
         /**
-          * If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present.
+          * If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `theme` is `"ios"` and an `href` or `button` property is present.
          */
         "detail"?: boolean;
         /**
           * The icon to use when `detail` is set to `true`.
-          * @default chevronForward
          */
         "detailIcon"?: string;
         /**
@@ -6824,7 +7828,7 @@ declare namespace LocalJSX {
          */
         "lines"?: 'full' | 'inset' | 'none';
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -6844,6 +7848,10 @@ declare namespace LocalJSX {
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
         "target"?: string | undefined;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The type of the button. Only used when an `onclick` or `button` property is present.
           * @default 'button'
@@ -6856,7 +7864,7 @@ declare namespace LocalJSX {
          */
         "color"?: Color;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -6864,8 +7872,20 @@ declare namespace LocalJSX {
           * @default false
          */
         "sticky"?: boolean;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonItemGroup {
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonItemOption {
         /**
@@ -6891,17 +7911,30 @@ declare namespace LocalJSX {
          */
         "href"?: string | undefined;
         /**
-          * The mode determines which platform styles to use.
+          * Set to `"bold"` for an option with vibrant, bold colors or to `"subtle"` for an option with muted, subtle colors.  Only applies to the `ionic` theme.
+          * @default 'subtle'
+         */
+        "hue"?: 'bold' | 'subtle';
+        /**
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
           * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
          */
         "rel"?: string | undefined;
+        /**
+          * Set to `"rectangular"` for non-rounded corners. Set to `"soft"` for slightly rounded corners. Set to `"round"` for fully rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
         "target"?: string | undefined;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The type of the button.
           * @default 'button'
@@ -6909,6 +7942,10 @@ declare namespace LocalJSX {
         "type"?: 'submit' | 'reset' | 'button';
     }
     interface IonItemOptions {
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * Emitted when the item has been fully swiped.
          */
@@ -6918,6 +7955,10 @@ declare namespace LocalJSX {
           * @default 'end'
          */
         "side"?: Side;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonItemSliding {
         /**
@@ -6925,10 +7966,18 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * Emitted when the sliding position changes.
          */
         "onIonDrag"?: (event: IonItemSlidingCustomEvent<any>) => void;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonLabel {
         /**
@@ -6936,13 +7985,17 @@ declare namespace LocalJSX {
          */
         "color"?: Color;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
           * The position determines where and how the label behaves inside an item.
          */
         "position"?: 'fixed' | 'stacked' | 'floating';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonList {
         /**
@@ -6955,9 +8008,17 @@ declare namespace LocalJSX {
          */
         "lines"?: 'full' | 'inset' | 'none';
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * Set to `"soft"` for slightly rounded corners, `"round"` for fully rounded corners, or `"rectangular"` for no rounded corners.  Defaults to `"round"` for the `ionic` theme when inset is `true` defaults to `"rectangular"` for the `ionic` theme when inset is `false`, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonListHeader {
         /**
@@ -6969,9 +8030,13 @@ declare namespace LocalJSX {
          */
         "lines"?: 'full' | 'inset' | 'none';
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonLoading {
         /**
@@ -7020,7 +8085,7 @@ declare namespace LocalJSX {
          */
         "message"?: string | IonicSafeString;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -7065,7 +8130,11 @@ 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).
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+        /**
+          * If `true`, the loading indicator will be translucent. Only applies when the theme 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;
@@ -7093,6 +8162,10 @@ declare namespace LocalJSX {
           * An id for the menu.
          */
         "menuId"?: string;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * Emitted when the menu is closed.
          */
@@ -7119,6 +8192,10 @@ declare namespace LocalJSX {
           * @default true
          */
         "swipeGesture"?: boolean;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`.
          */
@@ -7144,9 +8221,13 @@ declare namespace LocalJSX {
          */
         "menu"?: string;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The type of the button.
           * @default 'button'
@@ -7163,6 +8244,14 @@ declare namespace LocalJSX {
           * Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle.  If this property is not used, `ion-menu-toggle` will toggle the first menu that is active.
          */
         "menu"?: string;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonModal {
         /**
@@ -7240,7 +8329,7 @@ declare namespace LocalJSX {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -7283,11 +8372,19 @@ declare namespace LocalJSX {
           * The element that presented the modal. This is used for card presentation effects and for stacking multiple modals on top of each other. Only applies in iOS mode.
          */
         "presentingElement"?: HTMLElement;
+        /**
+          * Set to `"soft"` for a modal with slightly rounded corners, `"round"` for a modal with fully rounded corners, or `"rectangular"` for a modal without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * 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;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * An ID corresponding to the trigger element that causes the modal to open when clicked.
          */
@@ -7300,9 +8397,13 @@ declare namespace LocalJSX {
          */
         "animated"?: boolean;
         /**
-          * By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimationBuilder` functions.
+          * By default `ion-nav` animates transition between pages based on the mode ("ios" or "md"). However, this property allows to create custom transition using `AnimationBuilder` functions.
          */
         "animation"?: AnimationBuilder;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * Event fired when the nav has changed components
          */
@@ -7323,6 +8424,10 @@ declare namespace LocalJSX {
           * If the nav component should allow for swipe-to-go-back.
          */
         "swipeGesture"?: boolean;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonNavLink {
         /**
@@ -7333,6 +8438,10 @@ declare namespace LocalJSX {
           * Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`.
          */
         "componentProps"?: ComponentProps;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * The transition animation when navigating to another page.
          */
@@ -7342,6 +8451,10 @@ declare namespace LocalJSX {
           * @default 'forward'
          */
         "routerDirection"?: RouterDirection;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonNote {
         /**
@@ -7349,15 +8462,23 @@ declare namespace LocalJSX {
          */
         "color"?: Color;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonPicker {
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonPickerColumn {
         /**
@@ -7371,13 +8492,17 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
           * Emitted when the value has changed.  This event will not emit when programmatically setting the `value` property.
          */
         "onIonChange"?: (event: IonPickerColumnCustomEvent<PickerColumnChangeEventDetail>) => void;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The selected option in the picker.
          */
@@ -7394,6 +8519,14 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The text value of the option.
          */
@@ -7452,7 +8585,7 @@ declare namespace LocalJSX {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -7492,6 +8625,10 @@ declare namespace LocalJSX {
           * @default true
          */
         "showBackdrop"?: boolean;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * An ID corresponding to the trigger element that causes the picker to open when clicked.
          */
@@ -7505,7 +8642,7 @@ declare namespace LocalJSX {
     }
     interface IonPopover {
         /**
-          * Describes how to align the popover content with the `reference` point. Defaults to `"center"` for `ios` mode, and `"start"` for `md` mode.
+          * Describes how to align the popover content with the `reference` point. Defaults to `"center"` for `"ios"` theme, and `"start"` for `"md"` theme.
          */
         "alignment"?: PositionAlign;
         /**
@@ -7514,7 +8651,7 @@ declare namespace LocalJSX {
          */
         "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.
+          * If `true`, the popover will display an arrow that points at the `reference` on `"ios"` theme.
           * @default true
          */
         "arrow"?: boolean;
@@ -7573,7 +8710,7 @@ declare namespace LocalJSX {
          */
         "leaveAnimation"?: AnimationBuilder;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -7629,7 +8766,11 @@ declare namespace LocalJSX {
          */
         "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).
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+        /**
+          * If `true`, the popover will be translucent. Only applies when the theme 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;
@@ -7654,7 +8795,7 @@ declare namespace LocalJSX {
          */
         "color"?: Color;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -7662,6 +8803,14 @@ declare namespace LocalJSX {
           * @default false
          */
         "reversed"?: boolean;
+        /**
+          * Set to `"round"` for a progress bar with rounded corners, or `"rectangular"` for a progress bar without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'round' | 'rectangular';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * 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'
@@ -7697,7 +8846,7 @@ declare namespace LocalJSX {
          */
         "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -7713,6 +8862,10 @@ declare namespace LocalJSX {
           * Emitted when the radio button has focus.
          */
         "onIonFocus"?: (event: IonRadioCustomEvent<void>) => void;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * the value of the radio.
          */
@@ -7736,6 +8889,10 @@ declare namespace LocalJSX {
           * The helper text to display at the top of the radio group.
          */
         "helperText"?: string;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * The name of the control, which is submitted with the form data.
           * @default this.inputId
@@ -7745,6 +8902,10 @@ declare namespace LocalJSX {
           * Emitted when the value has changed.  This event will not emit when programmatically setting the `value` property.
          */
         "onIonChange"?: (event: IonRadioGroupCustomEvent<RadioGroupChangeEventDetail>) => void;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * the value of the radio group.
          */
@@ -7793,7 +8954,7 @@ declare namespace LocalJSX {
          */
         "min"?: number;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -7845,6 +9006,10 @@ declare namespace LocalJSX {
           * @default 1
          */
         "step"?: number;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`.
           * @default true
@@ -7868,7 +9033,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -7903,8 +9068,16 @@ declare namespace LocalJSX {
           * @default '280ms'
          */
         "snapbackDuration"?: string;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonRefresherContent {
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * A static icon or a spinner to display when you begin to pull down. A spinner name can be provided to gradually show tick marks when pulling down on iOS devices.
          */
@@ -7921,8 +9094,20 @@ declare namespace LocalJSX {
           * The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;`  For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)  Content is parsed as plaintext by default. `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config before custom HTML can be used.
          */
         "refreshingText"?: string | IonicSafeString;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonReorder {
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonReorderGroup {
         /**
@@ -7930,6 +9115,10 @@ declare namespace LocalJSX {
           * @default true
          */
         "disabled"?: boolean;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * 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.
@@ -7947,8 +9136,20 @@ declare namespace LocalJSX {
           * Event that is emitted when the reorder gesture starts.
          */
         "onIonReorderStart"?: (event: IonReorderGroupCustomEvent<void>) => void;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonRippleEffect {
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * 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'
@@ -7972,10 +9173,18 @@ declare namespace LocalJSX {
           * A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed to the defined component when rendered.
          */
         "componentProps"?: { [key: string]: any };
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * Used internally by `ion-router` to know when this route did change.
          */
         "onIonRouteDataChanged"?: (event: IonRouteCustomEvent<any>) => void;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * 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 ''
@@ -7997,6 +9206,10 @@ declare namespace LocalJSX {
         "to": string | undefined | null;
     }
     interface IonRouter {
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * Emitted when the route had changed
          */
@@ -8010,6 +9223,10 @@ declare namespace LocalJSX {
           * @default '/'
          */
         "root"?: string;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * 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
@@ -8025,6 +9242,10 @@ declare namespace LocalJSX {
           * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
          */
         "href"?: string | undefined;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
          */
@@ -8042,6 +9263,10 @@ declare namespace LocalJSX {
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
         "target"?: string | undefined;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonRouterOutlet {
         /**
@@ -8054,12 +9279,24 @@ declare namespace LocalJSX {
          */
         "animation"?: AnimationBuilder;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
           * @default getIonMode(this)
          */
         "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonRow {
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonSearchbar {
         /**
@@ -8083,17 +9320,16 @@ declare namespace LocalJSX {
          */
         "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
+          * Set the cancel button icon. Only available when the theme is `"md"`. Defaults to `"arrow-back-sharp"`.
          */
         "cancelButtonIcon"?: string;
         /**
-          * Set the cancel button text. Only applies to `ios` mode.
+          * Set the cancel button text. Only available when the theme is `"ios"`.
           * @default 'Cancel'
          */
         "cancelButtonText"?: string;
         /**
-          * Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`.
+          * Set the clear icon. Defaults to `"close-circle"` for `"ios"` theme and `"close-sharp"` for `"md"` and `"ionic"` theme.
          */
         "clearIcon"?: string;
         /**
@@ -8126,7 +9362,7 @@ declare namespace LocalJSX {
          */
         "minlength"?: number;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -8164,9 +9400,13 @@ declare namespace LocalJSX {
          */
         "placeholder"?: string;
         /**
-          * The icon to use as the search icon. Defaults to `search-outline` in `ios` mode and `search-sharp` in `md` mode.
+          * The icon to use as the search icon. Defaults to `"search-outline"` in the `"ios"` theme and `"search-sharp"` in the `"md"` and `"ionic"` themes. If `false`, no search icon will be displayed.
+         */
+        "searchIcon"?: string | boolean;
+        /**
+          * Set to `"soft"` for a searchbar with slightly rounded corners, `"round"` for a searchbar with fully rounded corners, or `"rectangular"` for a searchbar without rounded corners.  Defaults to `"round"` for the ionic theme, and `undefined` for all other themes.
          */
-        "searchIcon"?: string;
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * 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'
@@ -8177,11 +9417,19 @@ declare namespace LocalJSX {
           * @default 'always'
          */
         "showClearButton"?: 'never' | 'focus' | 'always';
+        /**
+          * Set to `"large"` for a searchbar with an increase in height, while "small" and "medium" provide progressively smaller heights.  Defaults to `"medium"` for the ionic theme, and `undefined` for all other themes.
+         */
+        "size"?: 'small' | 'medium' | 'large';
         /**
           * If `true`, enable spellcheck on the input.
           * @default false
          */
         "spellcheck"?: boolean;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * Set the type of the input.
           * @default 'search'
@@ -8204,7 +9452,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -8226,6 +9474,10 @@ declare namespace LocalJSX {
           * @default true
          */
         "swipeGesture"?: boolean;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * the value of the segment.
          */
@@ -8247,9 +9499,13 @@ declare namespace LocalJSX {
          */
         "layout"?: SegmentButtonLayout;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The type of the button.
           * @default 'button'
@@ -8298,11 +9554,11 @@ declare namespace LocalJSX {
          */
         "errorText"?: string;
         /**
-          * The toggle icon to show when the select is open. If defined, the icon rotation behavior in `md` mode will be disabled. If undefined, `toggleIcon` will be used for when the select is both open and closed.
+          * The toggle icon to show when the select is open. If defined, the icon rotation behavior in `"md"` theme will be disabled. If undefined, `toggleIcon` will be used for when the select is both open and closed.
          */
         "expandedIcon"?: string;
         /**
-          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
+          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in the `"md"` theme.
          */
         "fill"?: 'outline' | 'solid';
         /**
@@ -8333,7 +9589,7 @@ declare namespace LocalJSX {
          */
         "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -8385,11 +9641,19 @@ declare namespace LocalJSX {
          */
         "selectedText"?: string | null;
         /**
-          * The shape of the select. If "round" it will have an increased border radius.
+          * Set to `"soft"` for a select with slightly rounded corners, `"round"` for a select with fully rounded corners, or `"rectangular"` for a select without rounded corners.  Defaults to `"round"` for the `"ionic"` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * The size of the select. If "large" it will increase the height of the select, while "small" and "medium" provide progressively smaller heights.  Defaults to `"medium"` for the ionic theme, and  undefined for all other themes.
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * The theme determines the visual appearance of the component.
          */
-        "shape"?: 'round';
+        "theme"?: "ios" | "md" | "ionic";
         /**
-          * The toggle icon to use. Defaults to `chevronExpand` for `ios` mode, or `caretDownSharp` for `md` mode.
+          * The toggle icon to use. Defaults to `"chevronExpand"` for the `"ios"` theme, or `"caretDownSharp"` for the `"md"` and `"ionic"` themes.
          */
         "toggleIcon"?: string;
         /**
@@ -8411,6 +9675,14 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The text value of the option.
          */
@@ -8425,6 +9697,10 @@ declare namespace LocalJSX {
           * The text content of the popover body
          */
         "message"?: string;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * If true, the select accepts multiple values
          */
@@ -8438,6 +9714,10 @@ declare namespace LocalJSX {
           * The subheader text of the popover
          */
         "subHeader"?: string;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonSkeletonText {
         /**
@@ -8445,6 +9725,14 @@ declare namespace LocalJSX {
           * @default false
          */
         "animated"?: boolean;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonSpinner {
         /**
@@ -8455,6 +9743,10 @@ declare namespace LocalJSX {
           * Duration of the spinner animation in milliseconds. The default varies based on the spinner.
          */
         "duration"?: number;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * The name of the SVG spinner to use. If a name is not provided, the platform's default spinner will be used.
          */
@@ -8464,6 +9756,14 @@ declare namespace LocalJSX {
           * @default false
          */
         "paused"?: boolean;
+        /**
+          * Set to `"xsmall"` for the smallest size. Set to `"small"` for a smaller size. Set to `"medium"` for a medium size. Set to `"large"` for a large size. Set to `"xlarge"` for the largest size.  Defaults to `"xsmall"` for the `ionic` theme, undefined for all other themes.
+         */
+        "size"?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonSplitPane {
         /**
@@ -8475,10 +9775,18 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * Expression to be called when the split-pane visibility has changed
          */
         "onIonSplitPaneVisible"?: (event: IonSplitPaneCustomEvent<{ visible: boolean }>) => void;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * 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']
@@ -8490,10 +9798,18 @@ declare namespace LocalJSX {
           * The component to display inside of the tab.
          */
         "component"?: ComponentRef;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.
          */
         "tab": string;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonTabBar {
         /**
@@ -8501,7 +9817,12 @@ declare namespace LocalJSX {
          */
         "color"?: Color;
         /**
-          * The mode determines which platform styles to use.
+          * Set to `"compact"` to display a width based on the items inside the tab bar. This value will only work for the `ionic` theme.  Set to `"full"` to display a full width tab bar.  Defaults to `"full"`.
+          * @default 'full'
+         */
+        "expand"?: 'compact' | 'full';
+        /**
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -8509,7 +9830,15 @@ 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).
+          * Set to `"soft"` for a tab bar with slightly rounded corners, `"round"` for a tab bar with fully rounded corners, or `"rectangular"` for a tab bar without rounded corners.  Defaults to `"round"` for the `"ionic"` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+        /**
+          * If `true`, the tab bar will be translucent. Only applies when the theme 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;
@@ -8533,7 +9862,7 @@ declare namespace LocalJSX {
          */
         "layout"?: TabButtonLayout;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -8545,6 +9874,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "selected"?: boolean;
+        /**
+          * Set to `"soft"` for a tab-button with slightly rounded corners, `"round"` for a tab-button with fully rounded corners, or `"rectangular"` for a tab-button without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.
          */
@@ -8553,8 +9886,16 @@ declare namespace LocalJSX {
           * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
          */
         "target"?: string | undefined;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonTabs {
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * Emitted when the navigation has finished transitioning to a new component.
          */
@@ -8563,6 +9904,10 @@ declare namespace LocalJSX {
           * Emitted when the navigation is about to transition to a new component.
          */
         "onIonTabsWillChange"?: (event: IonTabsCustomEvent<{ tab: string }>) => void;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonText {
         /**
@@ -8570,9 +9915,13 @@ declare namespace LocalJSX {
          */
         "color"?: Color;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonTextarea {
         /**
@@ -8630,7 +9979,7 @@ declare namespace LocalJSX {
          */
         "errorText"?: string;
         /**
-          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
+          * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available when the theme is `"md"`.
          */
         "fill"?: 'outline' | 'solid';
         /**
@@ -8659,7 +10008,7 @@ declare namespace LocalJSX {
          */
         "minlength"?: number;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -8702,14 +10051,23 @@ declare namespace LocalJSX {
          */
         "rows"?: number;
         /**
-          * The shape of the textarea. If "round" it will have an increased border radius.
+          * Set to `"soft"` for a textarea with slightly rounded corners, `"round"` for a textarea with fully rounded corners, or `"rectangular"` for a textarea without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
+        /**
+          * The size of the textarea. If "large" it will increase the height of the textarea, while "small" and "medium" provide progressively smaller heights. The default size is "medium". This property only applies to the `"ionic"` theme.
+          * @default 'medium'
          */
-        "shape"?: 'round';
+        "size"?: 'small' | 'medium' | 'large';
         /**
           * If `true`, the element will have its spelling and grammar checked.
           * @default false
          */
         "spellcheck"?: boolean;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * The value of the textarea.
           * @default ''
@@ -8721,16 +10079,32 @@ declare namespace LocalJSX {
         "wrap"?: 'hard' | 'soft' | 'off';
     }
     interface IonThumbnail {
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonTitle {
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
         /**
           * The size of the toolbar title.
          */
         "size"?: 'large' | 'small';
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonToast {
         /**
@@ -8767,6 +10141,11 @@ declare namespace LocalJSX {
           * Additional attributes to pass to the toast.
          */
         "htmlAttributes"?: { [key: string]: any };
+        /**
+          * Set to `"bold"` for a toast with vibrant, bold colors or to `"subtle"` for a toast with muted, subtle colors.  Only applies to the `ionic` theme.
+          * @default 'subtle'
+         */
+        "hue"?: 'bold' | 'subtle';
         /**
           * The name of the icon to display, or the path to a valid SVG file. See `ion-icon`. https://ionic.io/ionicons
          */
@@ -8795,7 +10174,7 @@ declare namespace LocalJSX {
          */
         "message"?: string | IonicSafeString;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -8839,12 +10218,20 @@ declare namespace LocalJSX {
           * The element to anchor the toast's position to. Can be set as a direct reference or the ID of the element. With `position="bottom"`, the toast will sit above the chosen element. With `position="top"`, the toast will sit below the chosen element. With `position="middle"`, the value of `positionAnchor` is ignored.
          */
         "positionAnchor"?: HTMLElement | string;
+        /**
+          * Set to `"soft"` for a toast with slightly rounded corners, `"round"` for a toast with fully rounded corners, or `"rectangular"` for a toast without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * If set to 'vertical', the Toast can be dismissed with a swipe gesture. The swipe direction is determined by the value of the `position` property: `top`: The Toast can be swiped up to dismiss. `bottom`: The Toast can be swiped down to dismiss. `middle`: The Toast can be swiped up or down to dismiss.
          */
         "swipeGesture"?: ToastSwipeGestureDirection;
         /**
-          * If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+        /**
+          * If `true`, the toast will be translucent. Only applies when the theme 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;
@@ -8895,7 +10282,7 @@ declare namespace LocalJSX {
          */
         "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
         /**
@@ -8920,6 +10307,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "required"?: boolean;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
         /**
           * 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'
@@ -8932,9 +10323,13 @@ declare namespace LocalJSX {
          */
         "color"?: Color;
         /**
-          * The mode determines which platform styles to use.
+          * The mode determines the platform behaviors of the component.
          */
         "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
     }
     interface IntrinsicElements {
         "ion-accordion": IonAccordion;
@@ -8961,6 +10356,7 @@ declare namespace LocalJSX {
         "ion-content": IonContent;
         "ion-datetime": IonDatetime;
         "ion-datetime-button": IonDatetimeButton;
+        "ion-divider": IonDivider;
         "ion-fab": IonFab;
         "ion-fab-button": IonFabButton;
         "ion-fab-list": IonFabList;
@@ -9064,6 +10460,7 @@ declare module "@stencil/core" {
             "ion-content": LocalJSX.IonContent & JSXBase.HTMLAttributes<HTMLIonContentElement>;
             "ion-datetime": LocalJSX.IonDatetime & JSXBase.HTMLAttributes<HTMLIonDatetimeElement>;
             "ion-datetime-button": LocalJSX.IonDatetimeButton & JSXBase.HTMLAttributes<HTMLIonDatetimeButtonElement>;
+            "ion-divider": LocalJSX.IonDivider & JSXBase.HTMLAttributes<HTMLIonDividerElement>;
             "ion-fab": LocalJSX.IonFab & JSXBase.HTMLAttributes<HTMLIonFabElement>;
             "ion-fab-button": LocalJSX.IonFabButton & JSXBase.HTMLAttributes<HTMLIonFabButtonElement>;
             "ion-fab-list": LocalJSX.IonFabList & JSXBase.HTMLAttributes<HTMLIonFabListElement>;