@ionic/core 8.8.19-dev.11786610762.137bbb21 → 8.8.19-dev.11786735826.1fad7c0a

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

@@ -2,8 +2,7 @@ import type { ComponentInterface, EventEmitter } from '../../stencil-public-runt
 import type { AutocompleteTypes, Color, TextFieldTypes } from '../../interface';
 import type { InputChangeEventDetail, InputInputEventDetail } from './input-interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot label - The label text to associate with the input. Use the `labelPlacement` property to control where the label is placed relative to the input. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)
  * @slot start - Content to display at the leading edge of the input. (EXPERIMENTAL)
@@ -20,6 +19,8 @@ export declare class Input implements ComponentInterface {
     private slotMutationController?;
     private notchController?;
     private notchSpacerEl;
+    private startContainerController?;
+    private startContainerEl;
     private originalIonInput?;
     /**
      * `true` if the input was cleared as a result of the user typing
@@ -45,9 +46,6 @@ export declare class Input implements ComponentInterface {
      * Track validation state for proper aria-live announcements
      */
     isInvalid: boolean;
-    /** Keeps the clear button visible for the duration of a press. */
-    isClearButtonPressed: boolean;
-    private readonly clearButtonPressController;
     el: HTMLIonInputElement;
     private validationObserver?;
     /**
@@ -68,7 +66,7 @@ export declare class Input implements ComponentInterface {
     /**
      * Whether auto correction should be enabled when the user is entering/editing the text value.
      */
-    autocorrect: 'on' | 'off';
+    autocorrect: boolean;
     /**
      * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.
      *
@@ -120,7 +118,7 @@ export declare class Input implements ComponentInterface {
     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 when the theme is `"md"`.
+     * `"outline"` the item will be transparent with a border. Only available in `md` mode.
      */
     fill?: 'outline' | 'solid';
     /**
@@ -148,12 +146,8 @@ export declare class Input implements ComponentInterface {
      * `"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.
      */
@@ -197,12 +191,9 @@ export declare class Input implements ComponentInterface {
      */
     required: boolean;
     /**
-     * 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"`.
+     * The shape of the input. If "round" it will have an increased border radius.
      */
-    shape?: 'soft' | 'round' | 'rectangular';
+    shape?: 'round';
     /**
      * If `true`, the element will have its spelling and grammar checked.
      */
@@ -212,11 +203,6 @@ export declare class Input implements ComponentInterface {
      * Possible values are: `"any"` or a positive floating point number.
      */
     step?: string;
-    /**
-     * 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.
-     */
-    size?: 'medium' | 'large' | 'xlarge';
     /**
      * The type of control to display. The default type is text.
      */
@@ -317,10 +303,6 @@ export declare class Input implements ComponentInterface {
     private emitInputChange;
     private shouldClearOnEdit;
     private getValue;
-    private getFill;
-    private getLabelPlacement;
-    private getSize;
-    private getShape;
     private onInput;
     private onChange;
     private onBlur;
@@ -367,23 +349,18 @@ export declare class Input implements ComponentInterface {
      */
     private get hasLabel();
     /**
-     * Stops propagation when the label is clicked,
-     * otherwise, two clicks will be triggered.
+     * Stops propagation for clicks on the input's own content (label text,
+     * input field) to prevent double-click events. Allows clicks on slotted
+     * content to propagate so event delegation works for parent handlers.
+     *
+     * Only slots belonging directly to this input should be considered.
+     * The input itself may have a slot attribute when placed in an item
+     * or toolbar, which does not make its content slotted content.
      */
     private onLabelClick;
     /**
-     * Renders the border container
-     * when fill="outline".
-     */
-    private renderLabelContainer;
-    /**
-     * Get the icon to use for the clear icon.
-     * If an icon is set on the component, use that.
-     * Otherwise, use the icon set in the config.
-     * If no icon is set in the config, use the default icon.
-     *
-     * @internal
+     * Renders the outline border with a notch for the label.
      */
-    get inputClearIcon(): string;
+    private renderOutlineContainer;
     render(): any;
 }

package/dist/types/components/input-otp/input-otp.d.ts

@@ -1,16 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import type { Color } from '../../interface';
 import type { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from './input-otp-interface';
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- *
- * @part group - The container element that wraps all input boxes.
- * @part container - The wrapper element for each individual input box.
- * @part native - The native input element.
- * @part separator - The separator element displayed between input boxes.
- * @part description - The container element for the description text.
- */
 export declare class InputOTP implements ComponentInterface {
     private inheritedAttributes;
     private inputRefs;
@@ -29,7 +19,6 @@ export declare class InputOTP implements ComponentInterface {
      */
     private isKeyboardNavigation;
     el: HTMLIonInputOtpElement;
-    internals: ElementInternals;
     private inputValues;
     hasFocus: boolean;
     private previousInputValues;
@@ -48,10 +37,6 @@ export declare class InputOTP implements ComponentInterface {
      * If `true`, the user cannot interact with the input.
      */
     disabled: boolean;
-    /**
-     * Update element internals when disabled prop changes
-     */
-    protected disabledChanged(): void;
     /**
      * The fill for the input boxes. If `"solid"` the input boxes will have a background. If
      * `"outline"` the input boxes will be transparent with a border.
@@ -195,28 +180,6 @@ export declare class InputOTP implements ComponentInterface {
      * If all of the input boxes are filled, it emits an `ionComplete` event.
      */
     private updateValue;
-    /**
-     * Gets the value of the input group as a string for form submission.
-     * Returns an empty string if the value is null or undefined.
-     */
-    private getValue;
-    /**
-     * Called when the form state is restored.
-     * Restores the component's value.
-     */
-    formStateRestoreCallback(value: string): void;
-    /**
-     * Called when the form is reset.
-     * Resets the component's value.
-     */
-    formResetCallback(): void;
-    /**
-     * Updates the form value and reports validity state to the browser via
-     * ElementInternals. This should be called when the component loads, when
-     * the disabled prop changes, and when the value changes to ensure the form
-     * value stays in sync and validation state is updated.
-     */
-    private updateElementInternals;
     /**
      * Emits an `ionChange` event.
      * This API should be called for user committed changes.

package/dist/types/components/input-password-toggle/input-password-toggle.d.ts

@@ -33,7 +33,5 @@ export declare class InputPasswordToggle implements ComponentInterface {
     connectedCallback(): void;
     disconnectedCallback(): void;
     private togglePasswordVisibility;
-    get inputPasswordHideIcon(): any;
-    get inputPasswordShowIcon(): any;
     render(): any;
 }

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

@@ -3,8 +3,7 @@ import type { AnchorInterface, ButtonInterface } from "../../utils/element-inter
 import type { AnimationBuilder, Color, StyleEventDetail } from '../../interface';
 import type { RouterDirection } from '../router/utils/interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot - Content is placed between the named slots if provided without a slot.
  * @slot start - Content is placed to the left of the item text in LTR, and to the right in RTL.
@@ -37,14 +36,14 @@ export declare class Item implements ComponentInterface, AnchorInterface, Button
      */
     button: boolean;
     /**
-     * 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.
+     * 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.
      */
     detail?: boolean;
     /**
      * The icon to use when `detail` is set to `true`.
      */
-    detailIcon?: string;
+    detailIcon: string;
     /**
      * If `true`, the user cannot interact with the item.
      */
@@ -122,11 +121,5 @@ export declare class Item implements ComponentInterface, AnchorInterface, Button
     private isFocusable;
     private hasStartEl;
     private getFirstInteractive;
-    get itemDetailIcon(): any;
-    /**
-     * The icon should be flipped when the app is RTL and
-     * the icon is a variation of chevron.
-     */
-    get shouldFlipIcon(): boolean;
     render(): any;
 }

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

@@ -1,8 +1,7 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { Color } from '../../interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot - Content is placed between the named slots if provided without a slot.
  * @slot start - Content is placed to the left of the divider text in LTR, and to the right in RTL.

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

@@ -1,8 +1,4 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
 export declare class ItemGroup implements ComponentInterface {
     render(): any;
 }

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

@@ -2,8 +2,7 @@ import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { AnchorInterface, ButtonInterface } from "../../utils/element-interface";
 import type { Color } from '../../interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot - Content is placed between the named slots if provided without a slot.
  * @slot start - Content is placed to the left of the option text in LTR, and to the right in RTL.
@@ -44,13 +43,6 @@ export declare class ItemOption implements ComponentInterface, AnchorInterface,
      * If this property is set, an anchor tag will be rendered.
      */
     href: string | undefined;
-    /**
-     * 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.
-     */
-    hue?: 'bold' | 'subtle';
     /**
      * 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).
@@ -66,15 +58,6 @@ export declare class ItemOption implements ComponentInterface, AnchorInterface,
      * The type of the button.
      */
     type: 'submit' | 'reset' | 'button';
-    /**
-     * 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';
     private onClick;
-    private getShape;
     render(): any;
 }

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

@@ -1,9 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import type { Side } from '../menu/menu-interface';
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
 export declare class ItemOptions implements ComponentInterface {
     el: HTMLElement;
     /**

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

@@ -6,13 +6,8 @@ declare const enum SlidingState {
     End = 8,
     Start = 16,
     SwipeEnd = 32,
-    SwipeStart = 64,
-    AnimatingFullSwipe = 128
+    SwipeStart = 64
 }
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- */
 export declare class ItemSliding implements ComponentInterface {
     private item;
     private openAmount;
@@ -21,7 +16,6 @@ export declare class ItemSliding implements ComponentInterface {
     private optsWidthLeftSide;
     private sides;
     private tmr?;
-    private animationAbortController?;
     private leftOptions?;
     private rightOptions?;
     private optsDirty;
@@ -29,9 +23,6 @@ export declare class ItemSliding implements ComponentInterface {
     private contentEl;
     private initialContentScrollY;
     private mutationObserver?;
-    private leftExpandableBaseWidth;
-    private rightExpandableBaseWidth;
-    private isIonicTheme;
     el: HTMLIonItemSlidingElement;
     state: SlidingState;
     /**
@@ -78,48 +69,11 @@ export declare class ItemSliding implements ComponentInterface {
      * return the first one available.
      */
     private getOptions;
-    /**
-     * Check if the given item options element contains at least one expandable, non-disabled option.
-     */
-    private hasExpandableOptions;
-    /**
-     * Returns a Promise that resolves after `ms` milliseconds, or rejects if the
-     * given AbortSignal is fired before the timer expires.
-     */
-    private delay;
-    /**
-     * Animate the item to a specific position using CSS transitions.
-     * Returns a Promise that resolves when the animation completes, or rejects if
-     * the given AbortSignal is fired.
-     */
-    private animateToPosition;
-    /**
-     * Calculate the swipe threshold distance required to trigger a full swipe animation.
-     * Returns the maximum options width plus a margin to ensure it's achievable.
-     */
-    private getSwipeThreshold;
-    /**
-     * Native (ios/md) full swipe: off-screen → fire swipe → return.
-     * Ionic theme uses `animateIonicFullSwipe` instead (see `onEndIonic`).
-     */
-    private animateFullSwipe;
-    private queryExpandableOption;
-    private getExpandableOption;
-    private getOpenDirectionFromAmount;
-    private getOptionsWidthForDirection;
-    private getExpandableBaseWidth;
-    private setIonicExpandableWidth;
-    private resetIonicExpandableOptions;
-    private updateIonicExpandableFromOpenAmount;
-    private animateIonicFullSwipe;
     private updateOptions;
     private canStart;
     private onStart;
     private onMove;
     private onEnd;
-    private restoreContentScrollAfterSlide;
-    private onEndNative;
-    private onEndIonic;
     private calculateOptsWidth;
     private setOpenAmount;
     private getSlidingRatioSync;

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

@@ -1,17 +1,4 @@
 import type { E2EPage, ScreenshotFn } from "../../../utils/test/playwright/index";
-/**
- * Drag distances that reveal options without crossing the full swipe
- * threshold (`optsWidth` + `SWIPE_MARGIN`). A narrower options panel
- * requires a shorter drag.
- */
-export declare const DRAG_DISTANCE_SINGLE_OPTION = 100;
-export declare const DRAG_DISTANCE_MULTIPLE_OPTIONS = 150;
-/**
- * The number of drag steps used when revealing options. A higher step
- * count slows the drag velocity, keeping it below the full swipe
- * threshold in WebKit. See `dragElementBy` for more details.
- */
-export declare const DRAG_STEPS_UNDER_FULL_SWIPE = 15;
 /**
  * Warning: This function will fail when in RTL mode.
  * TODO(FW-3711): Remove the `directions` config when this issue preventing

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

@@ -1,8 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import type { Color, StyleEventDetail } from '../../interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export declare class Label implements ComponentInterface {
     private inRange;

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

@@ -1,7 +1,6 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export declare class List implements ComponentInterface {
     el: HTMLElement;
@@ -13,18 +12,6 @@ export declare class List implements ComponentInterface {
      * If `true`, the list will have margin around it and rounded corners.
      */
     inset: boolean;
-    /**
-     * 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';
     /**
      * If `ion-item-sliding` are used inside the list, this method closes
      * any open sliding item.
@@ -32,6 +19,5 @@ export declare class List implements ComponentInterface {
      * Returns `true` if an actual `ion-item-sliding` is closed.
      */
     closeSlidingItems(): Promise<boolean>;
-    private getShape;
     render(): any;
 }

package/dist/types/components/list-header/list-header.d.ts

@@ -1,8 +1,7 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { Color } from '../../interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @part inner - The inner wrapper element that arranges the list header content.
  */

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

@@ -1,16 +1,21 @@
-import type { OverlayOptions } from "../../utils/overlays-interface";
+import type { AnimationBuilder, Mode } from '../../interface';
 import type { IonicSafeString } from '../../utils/sanitization';
 import type { SpinnerTypes } from '../spinner/spinner-configs';
-export interface LoadingOptions extends OverlayOptions {
+export interface LoadingOptions {
     spinner?: SpinnerTypes | null;
     message?: string | IonicSafeString;
     cssClass?: string | string[];
     showBackdrop?: boolean;
     duration?: number;
     translucent?: boolean;
+    animated?: boolean;
     backdropDismiss?: boolean;
+    mode?: Mode;
     keyboardClose?: boolean;
+    id?: string;
     htmlAttributes?: {
         [key: string]: any;
     };
+    enterAnimation?: AnimationBuilder;
+    leaveAnimation?: AnimationBuilder;
 }

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

@@ -4,8 +4,7 @@ import type { OverlayEventDetail } from '../../utils/overlays-interface';
 import type { IonicSafeString } from '../../utils/sanitization';
 import type { SpinnerTypes } from '../spinner/spinner-configs';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export declare class Loading implements ComponentInterface, OverlayInterface {
     private readonly delegateController;
@@ -66,7 +65,7 @@ export declare class Loading implements ComponentInterface, OverlayInterface {
     spinner?: SpinnerTypes | null;
     /**
      * If `true`, the loading indicator will be translucent.
-     * Only applies when the theme is `"ios"` and the device supports
+     * 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).
      */
     translucent: boolean;

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

@@ -1,9 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import type { MenuChangeEventDetail, MenuCloseEventDetail, MenuI, MenuType, Side } from './menu-interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- *
  * @part container - The container for the menu content.
  * @part backdrop - The backdrop that appears over the main content when the menu is open.
  */

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

@@ -2,8 +2,7 @@ import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { ButtonInterface } from "../../utils/element-interface";
 import type { Color } from '../../interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @part native - The native HTML button element that wraps all child elements.
  * @part icon - The menu button icon (uses ion-icon).
@@ -37,7 +36,6 @@ export declare class MenuButton implements ComponentInterface, ButtonInterface {
     componentWillLoad(): void;
     componentDidLoad(): void;
     visibilityChanged(): Promise<void>;
-    get menuIcon(): any;
     private onClick;
     render(): any;
 }

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

@@ -1,8 +1,5 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- *
  * @slot - Content is placed inside the toggle to act as the click target.
  */
 export declare class MenuToggle implements ComponentInterface {

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

@@ -29,7 +29,7 @@ export interface MoveSheetToBreakpointOptions {
      */
     animated: boolean;
 }
-export declare const createSheetGesture: (baseEl: HTMLIonModalElement, backdropEl: HTMLIonBackdropElement, wrapperEl: HTMLElement, initialBreakpoint: number, backdropBreakpoint: number, animation: Animation, breakpoints: number[] | undefined, expandToScroll: boolean, getCurrentBreakpoint: () => number, onDismiss: () => void, onBreakpointChange: (breakpoint: number) => void, usePhysicsBasedGesture: boolean, onDragStart: () => void, onDragMove: (detail: ModalDragEventDetail) => void, onDragEnd: (detail: ModalDragEventDetail) => void) => {
+export declare const createSheetGesture: (baseEl: HTMLIonModalElement, backdropEl: HTMLIonBackdropElement, wrapperEl: HTMLElement, initialBreakpoint: number, backdropBreakpoint: number, animation: Animation, breakpoints: number[] | undefined, expandToScroll: boolean, getCurrentBreakpoint: () => number, onDismiss: () => void, onBreakpointChange: (breakpoint: number) => void, onDragStart: () => void, onDragMove: (detail: ModalDragEventDetail) => void, onDragEnd: (detail: ModalDragEventDetail) => void) => {
     gesture: import("@utils/gesture").Gesture;
     moveSheetToBreakpoint: (options: MoveSheetToBreakpointOptions) => Promise<void>;
     resetContentScroll: () => void;

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

@@ -1,6 +1,5 @@
-import type { OverlayOptions } from "../../utils/overlays-interface";
-import type { ComponentProps, ComponentRef, FrameworkDelegate } from '../../interface';
-export interface ModalOptions<T extends ComponentRef = ComponentRef> extends OverlayOptions {
+import type { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Mode } from '../../interface';
+export interface ModalOptions<T extends ComponentRef = ComponentRef> {
     component: T;
     componentProps?: ComponentProps<T>;
     presentingElement?: HTMLElement;
@@ -8,12 +7,17 @@ export interface ModalOptions<T extends ComponentRef = ComponentRef> extends Ove
     backdropDismiss?: boolean;
     cssClass?: string | string[];
     delegate?: FrameworkDelegate;
+    animated?: boolean;
     canDismiss?: boolean | ((data?: any, role?: string) => Promise<boolean>);
     focusTrap?: boolean;
+    mode?: Mode;
     keyboardClose?: boolean;
+    id?: string;
     htmlAttributes?: {
         [key: string]: any;
     };
+    enterAnimation?: AnimationBuilder;
+    leaveAnimation?: AnimationBuilder;
     breakpoints?: number[];
     initialBreakpoint?: number;
     backdropBreakpoint?: number;
@@ -26,7 +30,6 @@ export interface ModalAnimationOptions {
     currentBreakpoint?: number;
     backdropBreakpoint?: number;
     expandToScroll: boolean;
-    staticBackdropOpacity?: boolean;
 }
 export interface ModalBreakpointChangeEventDetail {
     breakpoint: number;
@@ -62,4 +65,13 @@ export interface ModalDragEventDetail {
      * the gesture.
      */
     snapBreakpoint?: number;
+    /**
+     * Whether the modal is attempting to dismiss when the drag gesture
+     * ends. A `canDismiss` callback can still cancel the dismiss after
+     * this event is emitted, so use `ionModalDidDismiss` to confirm that
+     * the modal actually closed.
+     *
+     * This is only set on `ionDragEnd`.
+     */
+    isDismissing?: boolean;
 }