voyager-ionic-core 7.2.3 → 7.4.3

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

@@ -18,6 +18,12 @@ import type { DatetimePresentation, DatetimeChangeEventDetail, DatetimeParts, Ti
  *
  * @part month-year-button - The button that opens the month/year picker when
  * using a grid style layout.
+ *
+ * @part calendar-day - The individual buttons that display a day inside of the datetime
+ * calendar.
+ * @part calendar-day active - The currently selected calendar day.
+ * @part calendar-day today - The calendar day that contains the current day.
+ * @part calendar-day disabled - The calendar day that is disabled.
  */
 export declare class Datetime implements ComponentInterface {
   private inputId;
@@ -37,16 +43,22 @@ export declare class Datetime implements ComponentInterface {
   private todayParts;
   private defaultParts;
   private prevPresentation;
-  /**
-   * Duplicate reference to `activeParts` that does not trigger a re-render of the component.
-   * Allows caching an instance of the `activeParts` in between render cycles.
-   */
-  private activePartsClone;
+  private resolveForceDateScrolling?;
   showMonthAndYear: boolean;
   activeParts: DatetimeParts | DatetimeParts[];
   workingParts: DatetimeParts;
   el: HTMLIonDatetimeElement;
   isTimePopoverOpen: boolean;
+  /**
+   * When defined, will force the datetime to render the month
+   * containing the specified date. Currently, this should only
+   * be used to enable immediately auto-scrolling to the new month,
+   * and should then be reset to undefined once the transition is
+   * finished and the forced month is now in view.
+   *
+   * Applies to grid-style datetimes only.
+   */
+  forceRenderDate?: DatetimeParts;
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -108,6 +120,7 @@ export declare class Datetime implements ComponentInterface {
    * `"time-date"` will show the time picker first and date picker second.
    */
   presentation: DatetimePresentation;
+  private get isGridStyle();
   /**
    * The text to display on the picker's cancel button.
    */
@@ -166,7 +179,6 @@ export declare class Datetime implements ComponentInterface {
    */
   minuteValues?: number[] | number | string;
   protected minuteValuesChanged(): void;
-  protected activePartsChanged(): void;
   /**
    * The locale to use for `ion-datetime`. This
    * impacts month and day name formatting.
@@ -209,7 +221,7 @@ export declare class Datetime implements ComponentInterface {
   /**
    * Update the datetime value when the value changes
    */
-  protected valueChanged(): void;
+  protected valueChanged(): Promise<void>;
   /**
    * If `true`, a header will be shown above the calendar
    * picker. This will include both the slotted title, and
@@ -326,9 +338,9 @@ export declare class Datetime implements ComponentInterface {
    * data. This should be used when rendering an
    * interface in an environment where the `value`
    * may not be set. This function works
-   * by returning the first selected date in
-   * "activePartsClone" and then falling back to
-   * defaultParts if no active date is selected.
+   * by returning the first selected date and then
+   * falling back to defaultParts if no active date
+   * is selected.
    */
   private getActivePartsWithFallback;
   private getActivePart;
@@ -357,6 +369,7 @@ export declare class Datetime implements ComponentInterface {
    */
   componentDidRender(): void;
   private processValue;
+  private animateToDate;
   componentWillLoad(): void;
   private emitStyle;
   private onFocus;

package/dist/types/components/datetime/utils/data.d.ts

@@ -45,7 +45,7 @@ export declare const generateTime: (refParts: DatetimeParts, hourCycle?: 'h12' |
  * Given DatetimeParts, generate the previous,
  * current, and and next months.
  */
-export declare const generateMonths: (refParts: DatetimeParts) => DatetimeParts[];
+export declare const generateMonths: (refParts: DatetimeParts, forcedDate?: DatetimeParts) => DatetimeParts[];
 export declare const getMonthColumnData: (locale: string, refParts: DatetimeParts, minParts?: DatetimeParts, maxParts?: DatetimeParts, monthValues?: number[], formatOptions?: Intl.DateTimeFormatOptions) => PickerColumnItem[];
 /**
  * Returns information regarding

package/dist/types/components/datetime/utils/parse.d.ts

@@ -15,10 +15,10 @@ export declare const getPartsFromCalendarDay: (el: HTMLElement) => DatetimeParts
  * We do not use the JS Date object here because
  * it adjusts the date for the current timezone.
  */
-export declare function parseDate(val: string): DatetimeParts;
-export declare function parseDate(val: string[]): DatetimeParts[];
+export declare function parseDate(val: string): DatetimeParts | undefined;
+export declare function parseDate(val: string[]): DatetimeParts[] | undefined;
 export declare function parseDate(val: undefined | null): undefined;
-export declare function parseDate(val: string | string[]): DatetimeParts | DatetimeParts[];
+export declare function parseDate(val: string | string[]): DatetimeParts | DatetimeParts[] | undefined;
 export declare function parseDate(val: string | string[] | undefined | null): DatetimeParts | DatetimeParts[] | undefined;
 export declare const clampDate: (dateParts: DatetimeParts, minParts?: DatetimeParts, maxParts?: DatetimeParts) => DatetimeParts;
 /**
@@ -33,11 +33,11 @@ export declare const parseAmPm: (hour: number) => "am" | "pm";
  * For example, max="2012" would fill in the missing
  * month, day, hour, and minute information.
  */
-export declare const parseMaxParts: (max: string, todayParts: DatetimeParts) => DatetimeParts;
+export declare const parseMaxParts: (max: string, todayParts: DatetimeParts) => DatetimeParts | undefined;
 /**
  * Takes a min date string and creates a DatetimeParts
  * object, filling in any missing information.
  * For example, min="2012" would fill in the missing
  * month, day, hour, and minute information.
  */
-export declare const parseMinParts: (min: string, todayParts: DatetimeParts) => DatetimeParts;
+export declare const parseMinParts: (min: string, todayParts: DatetimeParts) => DatetimeParts | undefined;

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

@@ -56,6 +56,7 @@ export declare class Item implements ComponentInterface, AnchorInterface, Button
   /**
    * 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.
+   * @deprecated Use the `fill` property on `ion-input` or `ion-textarea` instead.
    */
   fill?: 'outline' | 'solid';
   /**
@@ -125,5 +126,6 @@ export declare class Item implements ComponentInterface, AnchorInterface, Button
   private updateCounterOutput;
   private defaultCounterFormatter;
   private hasStartEl;
+  private getFirstInteractive;
   render(): any;
 }

package/dist/types/components/item-sliding/test/test.utils.d.ts

@@ -1,2 +1,7 @@
 import type { E2EPage, ScreenshotFn } from "../../../utils/test/playwright/index";
+/**
+ * Warning: This function will fail when in RTL mode.
+ * TODO(FW-3711): Remove the `directions` config when this issue preventing
+ * tests from passing in RTL mode is resolved.
+ */
 export declare const testSlidingItem: (page: E2EPage, itemID: string, screenshotNameSuffix: string, screenshot: ScreenshotFn, openStart?: boolean) => Promise<void>;

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

@@ -8,10 +8,10 @@ import type { SpinnerTypes } from '../spinner/spinner-configs';
  */
 export declare class Loading implements ComponentInterface, OverlayInterface {
   private readonly delegateController;
+  private readonly lockController;
   private readonly triggerController;
   private customHTMLEnabled;
   private durationTimeout?;
-  private currentTransition?;
   presented: boolean;
   lastFocus?: HTMLElement;
   el: HTMLIonLoadingElement;

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

@@ -9,6 +9,7 @@ export declare class Menu implements ComponentInterface, MenuI {
   private lastOnEnd;
   private gesture?;
   private blocker;
+  private didLoad;
   isAnimating: boolean;
   width: number;
   _isOpen: boolean;
@@ -83,6 +84,7 @@ export declare class Menu implements ComponentInterface, MenuI {
   connectedCallback(): Promise<void>;
   componentWillLoad(): void;
   componentDidLoad(): Promise<void>;
+  private menuChanged;
   disconnectedCallback(): Promise<void>;
   onSplitPaneChanged(ev: CustomEvent): void;
   onBackdropClick(ev: any): void;

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

@@ -12,10 +12,10 @@ import type { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from './mo
  * @part handle - The handle that is displayed at the top of the sheet modal when `handle="true"`.
  */
 export declare class Modal implements ComponentInterface, OverlayInterface {
+  private readonly lockController;
   private readonly triggerController;
   private gesture?;
   private coreDelegate;
-  private currentTransition?;
   private sheetTransition?;
   private isSheetModal;
   private currentBreakpoint?;

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

@@ -24,6 +24,9 @@ export interface PickerButton {
 export interface PickerColumn {
   name: string;
   align?: string;
+  /**
+   * Changing this value allows the initial value of a picker column to be set.
+   */
   selectedIndex?: number;
   prevSelected?: number;
   prefix?: string;

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

@@ -7,9 +7,9 @@ import type { PickerButton, PickerColumn } from './picker-interface';
  */
 export declare class Picker implements ComponentInterface, OverlayInterface {
   private readonly delegateController;
+  private readonly lockController;
   private readonly triggerController;
   private durationTimeout?;
-  private currentTransition?;
   lastFocus?: HTMLElement;
   el: HTMLIonPickerElement;
   presented: boolean;

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

@@ -16,7 +16,7 @@ export declare class Popover implements ComponentInterface, PopoverInterface {
   private triggerEl?;
   private parentPopover;
   private coreDelegate;
-  private currentTransition?;
+  private readonly lockController;
   private destroyTriggerInteraction?;
   private destroyKeyboardInteraction?;
   private destroyDismissInteraction?;

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

@@ -48,8 +48,9 @@ export declare class Radio implements ComponentInterface {
    * `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL.
    * `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL.
    * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+   * `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
    */
-  labelPlacement: 'start' | 'end' | 'fixed';
+  labelPlacement: 'start' | 'end' | 'fixed' | 'stacked';
   /**
    * Set the `legacy` property to `true` to forcibly use the legacy form control markup.
    * Ionic will only opt components in to the modern form markup when they are
@@ -70,6 +71,12 @@ export declare class Radio implements ComponentInterface {
    * ends of the line with space between the two elements.
    */
   justify: 'start' | 'end' | 'space-between';
+  /**
+   * How to control the alignment of the radio and label on the cross axis.
+   * `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.
+   * `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+   */
+  alignment: 'start' | 'center';
   /**
    * Emitted when the styles change.
    * @internal

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

@@ -116,8 +116,9 @@ export declare class Range implements ComponentInterface {
    * `"start"`: The label will appear to the left of the range in LTR and to the right in RTL.
    * `"end"`: The label will appear to the right of the range in LTR and to the left in RTL.
    * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+   * `"stacked"`: The label will appear above the range regardless of the direction.
    */
-  labelPlacement: 'start' | 'end' | 'fixed';
+  labelPlacement: 'start' | 'end' | 'fixed' | 'stacked';
   /**
    * Set the `legacy` property to `true` to forcibly use the legacy form control markup.
    * Ionic will only opt components in to the modern form markup when they are
@@ -195,6 +196,14 @@ export declare class Range implements ComponentInterface {
   private onBlur;
   private onFocus;
   private renderLegacyRange;
+  /**
+   * Returns true if content was passed to the "start" slot
+   */
+  private get hasStartSlotContent();
+  /**
+   * Returns true if content was passed to the "end" slot
+   */
+  private get hasEndSlotContent();
   private renderRange;
   private get hasLabel();
   private renderRangeSlider;

package/dist/types/components/router-outlet/{route-outlet.d.ts → router-outlet.d.ts}

@@ -3,10 +3,10 @@ import type { AnimationBuilder, ComponentProps, FrameworkDelegate } from '../../
 import type { RouterOutletOptions, SwipeGestureHandler } from '../nav/nav-interface';
 import type { RouteID, RouterDirection, RouteWrite, NavOutlet } from '../router/utils/interface';
 export declare class RouterOutlet implements ComponentInterface, NavOutlet {
+  private readonly lockController;
   private activeEl;
   private activeComponent;
   private activeParams;
-  private waitPromise?;
   private gesture?;
   private ani?;
   private gestureOrAnimationInProgress;
@@ -43,6 +43,5 @@ export declare class RouterOutlet implements ComponentInterface, NavOutlet {
   getRouteId(): Promise<RouteID | undefined>;
   private setRoot;
   private transition;
-  private lock;
   render(): any;
 }

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

@@ -81,6 +81,7 @@ export declare class Segment implements ComponentInterface {
   private getIndicator;
   private checkButton;
   private setCheckedClasses;
+  private scrollActiveButtonIntoView;
   private setNextIndex;
   private emitStyle;
   private onClick;

package/dist/types/components/tab-bar/tab-bar.d.ts

@@ -27,8 +27,16 @@ export declare class TabBar implements ComponentInterface {
   translucent: boolean;
   /** @internal */
   ionTabBarChanged: EventEmitter<TabBarChangedEventDetail>;
+  /**
+   * @internal
+   * This event is used in IonContent to correctly
+   * calculate the fullscreen content offsets
+   * when IonTabBar is used.
+   */
+  ionTabBarLoaded: EventEmitter<void>;
   componentWillLoad(): void;
   connectedCallback(): Promise<void>;
   disconnectedCallback(): void;
+  componentDidLoad(): void;
   render(): any;
 }

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

@@ -27,7 +27,13 @@ export interface ToastButton {
   icon?: string;
   side?: 'start' | 'end';
   role?: 'cancel' | string;
+  /**
+   * @deprecated Use the toast button's CSS Shadow Parts instead.
+   */
   cssClass?: string | string[];
+  htmlAttributes?: {
+    [key: string]: any;
+  };
   handler?: () => boolean | void | Promise<boolean | void>;
 }
 export type ToastPosition = 'top' | 'bottom' | 'middle';

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

@@ -7,6 +7,7 @@ import type { ToastButton, ToastPosition, ToastLayout } from './toast-interface'
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @part button - Any button element that is displayed inside of the toast.
+ * @part button cancel - Any button element with role "cancel" that is displayed inside of the toast.
  * @part container - The element that wraps all child elements.
  * @part header - The header text of the toast.
  * @part message - The body text of the toast.
@@ -14,8 +15,8 @@ import type { ToastButton, ToastPosition, ToastLayout } from './toast-interface'
  */
 export declare class Toast implements ComponentInterface, OverlayInterface {
   private readonly delegateController;
+  private readonly lockController;
   private readonly triggerController;
-  private currentTransition?;
   private customHTMLEnabled;
   private durationTimeout?;
   presented: boolean;

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

@@ -56,8 +56,9 @@ export declare class Toggle implements ComponentInterface {
    * `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL.
    * `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL.
    * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+   * `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
    */
-  labelPlacement: 'start' | 'end' | 'fixed';
+  labelPlacement: 'start' | 'end' | 'fixed' | 'stacked';
   /**
    * Set the `legacy` property to `true` to forcibly use the legacy form control markup.
    * Ionic will only opt components in to the modern form markup when they are
@@ -78,6 +79,12 @@ export declare class Toggle implements ComponentInterface {
    * ends of the line with space between the two elements.
    */
   justify: 'start' | 'end' | 'space-between';
+  /**
+   * How to control the alignment of the toggle and label on the cross axis.
+   * ``"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.
+   * `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+   */
+  alignment: 'start' | 'center';
   /**
    * Emitted when the user switches the toggle on or off. Does not emit
    * when programmatically changing the value of the `checked` property.

package/dist/types/components.d.ts

@@ -602,6 +602,10 @@ export namespace Components {
         "mode"?: "ios" | "md";
     }
     interface IonCheckbox {
+        /**
+          * How to control the alignment of the checkbox and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+         */
+        "alignment": 'start' | 'center';
         /**
           * If `true`, the checkbox is selected.
          */
@@ -623,9 +627,9 @@ export namespace Components {
          */
         "justify": 'start' | 'end' | 'space-between';
         /**
-          * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          */
-        "labelPlacement": 'start' | 'end' | 'fixed';
+        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt checkboxes in to the modern form markup when they are using either the `aria-label` attribute or have text in the default slot. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior.  Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
          */
@@ -1332,6 +1336,7 @@ export namespace Components {
         "download": string | undefined;
         /**
           * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
+          * @deprecated Use the `fill` property on `ion-input` or `ion-textarea` instead.
          */
         "fill"?: 'outline' | 'solid';
         /**
@@ -2216,6 +2221,10 @@ export namespace Components {
         "value": number;
     }
     interface IonRadio {
+        /**
+          * How to control the alignment of the radio and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+         */
+        "alignment": 'start' | 'center';
         /**
           * 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).
          */
@@ -2229,9 +2238,9 @@ export namespace Components {
          */
         "justify": 'start' | 'end' | 'space-between';
         /**
-          * Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          */
-        "labelPlacement": 'start' | 'end' | 'fixed';
+        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
          */
@@ -2291,9 +2300,9 @@ export namespace Components {
          */
         "label"?: string;
         /**
-          * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the range regardless of the direction.
          */
-        "labelPlacement": 'start' | 'end' | 'fixed';
+        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the `label` property. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
          */
@@ -3165,6 +3174,10 @@ export namespace Components {
         "trigger": string | undefined;
     }
     interface IonToggle {
+        /**
+          * How to control the alignment of the toggle and label on the cross axis. ``"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+         */
+        "alignment": 'start' | 'center';
         /**
           * If `true`, the toggle is selected.
          */
@@ -3186,9 +3199,9 @@ export namespace Components {
          */
         "justify": 'start' | 'end' | 'space-between';
         /**
-          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          */
-        "labelPlacement": 'start' | 'end' | 'fixed';
+        "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
          */
@@ -4608,6 +4621,10 @@ declare namespace LocalJSX {
         "mode"?: "ios" | "md";
     }
     interface IonCheckbox {
+        /**
+          * How to control the alignment of the checkbox and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+         */
+        "alignment"?: 'start' | 'center';
         /**
           * If `true`, the checkbox is selected.
          */
@@ -4629,9 +4646,9 @@ declare namespace LocalJSX {
          */
         "justify"?: 'start' | 'end' | 'space-between';
         /**
-          * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          */
-        "labelPlacement"?: 'start' | 'end' | 'fixed';
+        "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt checkboxes in to the modern form markup when they are using either the `aria-label` attribute or have text in the default slot. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior.  Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
          */
@@ -5354,6 +5371,7 @@ declare namespace LocalJSX {
         "download"?: string | undefined;
         /**
           * The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
+          * @deprecated Use the `fill` property on `ion-input` or `ion-textarea` instead.
          */
         "fill"?: 'outline' | 'solid';
         /**
@@ -6127,6 +6145,10 @@ declare namespace LocalJSX {
         "value"?: number;
     }
     interface IonRadio {
+        /**
+          * How to control the alignment of the radio and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+         */
+        "alignment"?: 'start' | 'center';
         /**
           * 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).
          */
@@ -6140,9 +6162,9 @@ declare namespace LocalJSX {
          */
         "justify"?: 'start' | 'end' | 'space-between';
         /**
-          * Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the radio. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the radio regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          */
-        "labelPlacement"?: 'start' | 'end' | 'fixed';
+        "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
          */
@@ -6212,9 +6234,9 @@ declare namespace LocalJSX {
          */
         "label"?: string;
         /**
-          * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the range regardless of the direction.
          */
-        "labelPlacement"?: 'start' | 'end' | 'fixed';
+        "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the `label` property. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
          */
@@ -7143,6 +7165,10 @@ declare namespace LocalJSX {
         "trigger"?: string | undefined;
     }
     interface IonToggle {
+        /**
+          * How to control the alignment of the toggle and label on the cross axis. ``"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+         */
+        "alignment"?: 'start' | 'center';
         /**
           * If `true`, the toggle is selected.
          */
@@ -7164,9 +7190,9 @@ declare namespace LocalJSX {
          */
         "justify"?: 'start' | 'end' | 'space-between';
         /**
-          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+          * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          */
-        "labelPlacement"?: 'start' | 'end' | 'fixed';
+        "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
         /**
           * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the default slot that contains the label text. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
          */

package/dist/types/index.d.ts

@@ -1,5 +1,6 @@
 import 'ionicons';
 export { createAnimation } from './utils/animation/animation';
+export { getIonPageElement } from './utils/transition';
 export { iosTransitionAnimation } from './utils/transition/ios.transition';
 export { mdTransitionAnimation } from './utils/transition/md.transition';
 export { getTimeGivenProgression } from './utils/animation/cubic-bezier';

package/dist/types/interface.d.ts

@@ -43,6 +43,7 @@ export {
   AnimationKeyFrames,
   AnimationLifecycle,
 } from './utils/animation/animation-interface';
+export { TransitionOptions } from './utils/transition';
 export { HTMLIonOverlayElement, OverlayController, OverlayInterface } from './utils/overlays-interface';
 export { Config, config } from './global/config';
 export { Gesture, GestureConfig, GestureDetail } from './utils/gesture';