@ionic/core 8.5.5-dev.11744729748.174bf7e0 → 8.5.5-dev.11744821352.11e7a84f

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

@@ -2,7 +2,8 @@ import type { ComponentInterface, EventEmitter } from '../../stencil-public-runt
 import type { Color, StyleEventDetail } from '../../interface';
 import type { SelectChangeEventDetail, SelectInterface, SelectCompareFn } from './select-interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 label - The label text to associate with the select. Use the `labelPlacement` property to control where the label is placed relative to the select. Use this if you need to render a label with custom HTML.
  * @slot start - Content to display at the leading edge of the select.
@@ -55,7 +56,7 @@ export declare class Select implements ComponentInterface {
     disabled: boolean;
     /**
      * 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.
+     * `"outline"` the item will be transparent with a border. Only available in the `"md"` theme.
      */
     fill?: 'outline' | 'solid';
     /**
@@ -132,30 +133,41 @@ export declare class Select implements ComponentInterface {
      */
     selectedText?: string | null;
     /**
-     * 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;
     /**
      * 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`
+     * 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 shape of the select. If "round" it will have an increased border radius.
-     */
-    shape?: 'round';
-    /**
-     * The value of the select.
-     */
-    value?: any | null;
     /**
      * If true, screen readers will announce it as a required field. This property
      * works only for accessibility purposes, it will not prevent the form from
      * submitting if the value is invalid.
      */
     required: boolean;
+    /**
+     * 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 value of the select.
+     */
+    value?: any | null;
     /**
      * Emitted when the value has changed.
      *
@@ -226,6 +238,7 @@ export declare class Select implements ComponentInterface {
     private onClick;
     private onFocus;
     private onBlur;
+    private getSize;
     private renderLabel;
     componentDidRender(): void;
     /**
@@ -258,6 +271,21 @@ export declare class Select implements ComponentInterface {
     private renderSelectIcon;
     private get ariaLabel();
     private renderListbox;
+    private getShape;
+    /**
+     * Get the icon to use for the expand 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.
+     */
+    get selectExpandedIcon(): string;
+    /**
+     * Get the icon to use for the collapsed 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.
+     */
+    get selectCollapsedIcon(): string;
     private getHintTextID;
     /**
      * Renders the helper text or error text values

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

@@ -1,4 +1,8 @@
 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 SelectOption implements ComponentInterface {
     private inputId;
     el: HTMLElement;

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

@@ -1,6 +1,9 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { SelectPopoverOption } from './select-popover-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.
+ *
  * @internal
  */
 export declare class SelectPopover implements ComponentInterface {

package/dist/types/components/skeleton-text/skeleton-text.d.ts

@@ -1,5 +1,9 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import type { 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.
+ */
 export declare class SkeletonText implements ComponentInterface {
     el: HTMLElement;
     /**

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

@@ -1,6 +1,10 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { Color } from '../../interface';
 import type { SpinnerTypes } from './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.
+ */
 export declare class Spinner implements ComponentInterface {
     /**
      * The color to use from your application's color palette.
@@ -21,6 +25,17 @@ export declare class Spinner implements ComponentInterface {
      * If `true`, the spinner's animation will be paused.
      */
     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';
     private getName;
+    private getSize;
     render(): any;
 }

package/dist/types/components/split-pane/split-pane.d.ts

@@ -1,4 +1,8 @@
 import type { ComponentInterface, EventEmitter } 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 SplitPane implements ComponentInterface {
     private rmL?;
     el: HTMLElement;

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

@@ -1,5 +1,9 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { ComponentRef, FrameworkDelegate } 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.
+ */
 export declare class Tab implements ComponentInterface {
     private loaded;
     el: HTMLIonTabElement;

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

@@ -2,7 +2,8 @@ import type { ComponentInterface, EventEmitter } from '../../stencil-public-runt
 import type { Color } from '../../interface';
 import type { TabBarChangedEventDetail } from './tab-bar-interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 TabBar implements ComponentInterface {
     private keyboardCtrl;
@@ -21,10 +22,28 @@ export declare class TabBar implements ComponentInterface {
     selectedTabChanged(): void;
     /**
      * If `true`, the tab bar will be translucent.
-     * Only applies when the mode is `"ios"` and the device supports
+     * 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).
      */
     translucent: boolean;
+    /**
+     * 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"`.
+     */
+    expand: 'compact' | 'full';
+    /**
+     * 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';
     /** @internal */
     ionTabBarChanged: EventEmitter<TabBarChangedEventDetail>;
     /**
@@ -38,5 +57,6 @@ export declare class TabBar implements ComponentInterface {
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
     componentDidLoad(): void;
+    private getShape;
     render(): any;
 }

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

@@ -2,7 +2,8 @@ import type { ComponentInterface, EventEmitter } from '../../stencil-public-runt
 import type { AnchorInterface } from "../../utils/element-interface";
 import type { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from '../tab-bar/tab-bar-interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 native - The native HTML anchor element that wraps all child elements.
  */
@@ -39,6 +40,14 @@ export declare class TabButton implements ComponentInterface, AnchorInterface {
      * The selected tab component
      */
     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.
@@ -57,6 +66,7 @@ export declare class TabButton implements ComponentInterface, AnchorInterface {
     ionTabButtonClick: EventEmitter<TabButtonClickEventDetail>;
     onTabBarChanged(ev: CustomEvent<TabBarChangedEventDetail>): void;
     componentWillLoad(): void;
+    private getShape;
     private selectTab;
     private get hasLabel();
     private get hasIcon();

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

@@ -1,6 +1,9 @@
 import type { EventEmitter } from '../../stencil-public-runtime';
 import type { NavOutlet, RouteID, RouteWrite } 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.
+ *
  * @slot - Content is placed between the named slots if provided without a slot.
  * @slot top - Content is placed at the top of the screen.
  * @slot bottom - Content is placed at the bottom of the screen.

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

@@ -1,7 +1,8 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { Color } from '../../interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 Text implements ComponentInterface {
     /**

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

@@ -2,7 +2,8 @@ import type { ComponentInterface, EventEmitter } from '../../stencil-public-runt
 import type { Color } from '../../interface';
 import type { TextareaChangeEventDetail, TextareaInputEventDetail } from './textarea-interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 label - The label text to associate with the textarea. Use the `labelPlacement` property to control where the label is placed relative to the textarea. Use this if you need to render a label with custom HTML. (EXPERIMENTAL)
  * @slot start - Content to display at the leading edge of the textarea. (EXPERIMENTAL)
@@ -64,7 +65,7 @@ export declare class Textarea implements ComponentInterface {
     disabled: boolean;
     /**
      * 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.
+     * `"outline"` the item will be transparent with a border. Only available when the theme is `"md"`.
      */
     fill?: 'outline' | 'solid';
     /**
@@ -167,9 +168,19 @@ export declare class Textarea implements ComponentInterface {
      */
     labelPlacement: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
     /**
-     * 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.
      */
-    shape?: 'round';
+    size?: 'small' | 'medium' | 'large';
     /**
      * Update the native input element when the value changes
      */
@@ -259,6 +270,8 @@ export declare class Textarea implements ComponentInterface {
      * the `labelText` getter instead.
      */
     private get hasLabel();
+    private getFill;
+    private getShape;
     /**
      * Renders the border container when fill="outline".
      */

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

@@ -1,4 +1,8 @@
 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 Thumbnail implements ComponentInterface {
     render(): any;
 }

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

@@ -1,5 +1,9 @@
 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.
+ */
 export declare class ToolbarTitle implements ComponentInterface {
     el: HTMLElement;
     /**

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

@@ -1,4 +1,4 @@
-import type { Mode } from "../../../interface";
+import type { Mode } from '../../../interface';
 import type { ToastAnimationPosition, ToastPosition } from '../toast-interface';
 /**
  * Calculate the CSS top and bottom position of the toast, to be used
@@ -14,7 +14,7 @@ import type { ToastAnimationPosition, ToastPosition } from '../toast-interface';
  * @param position The value of the toast's position prop.
  * @param positionAnchor The element the toast should be anchored to,
  * if applicable.
- * @param mode The toast component's mode (md, ios, etc).
+ * @param mode The toast component's platform (md or ios).
  * @param toast A reference to the toast element itself.
  */
 export declare function getAnimationPosition(position: ToastPosition, positionAnchor: HTMLElement | undefined, mode: Mode, toast: HTMLElement): ToastAnimationPosition;

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

@@ -1,6 +1,7 @@
-import type { AnimationBuilder, Color, LiteralUnion, Mode } from '../../interface';
+import type { OverlayOptions } from "../../utils/overlays-interface";
+import type { Color, LiteralUnion } from '../../interface';
 import type { IonicSafeString } from '../../utils/sanitization';
-export interface ToastOptions {
+export interface ToastOptions extends OverlayOptions {
     header?: string;
     message?: string | IonicSafeString;
     cssClass?: string | string[];
@@ -10,18 +11,13 @@ export interface ToastOptions {
     positionAnchor?: HTMLElement | string;
     swipeGesture?: ToastSwipeGestureDirection;
     translucent?: boolean;
-    animated?: boolean;
     icon?: string;
     htmlAttributes?: {
         [key: string]: any;
     };
     layout?: ToastLayout;
     color?: Color;
-    mode?: Mode;
     keyboardClose?: boolean;
-    id?: string;
-    enterAnimation?: AnimationBuilder;
-    leaveAnimation?: AnimationBuilder;
 }
 export type ToastLayout = 'baseline' | 'stacked';
 export interface ToastButton {

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

@@ -4,7 +4,8 @@ import type { OverlayEventDetail } from '../../utils/overlays-interface';
 import type { IonicSafeString } from '../../utils/sanitization';
 import type { ToastButton, ToastPosition, ToastLayout, ToastSwipeGestureDirection } from './toast-interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 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.
@@ -70,6 +71,13 @@ export declare class Toast implements ComponentInterface, OverlayInterface {
      * Header to be shown in the toast.
      */
     header?: string;
+    /**
+     * 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.
+     */
+    hue?: 'bold' | 'subtle';
     /**
      * Defines how the message and buttons are laid out in the toast.
      * 'baseline': The message and the buttons will appear on the same line.
@@ -102,13 +110,21 @@ export declare class Toast implements ComponentInterface, OverlayInterface {
      * 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';
     /**
      * An array of buttons for the toast.
      */
     buttons?: (ToastButton | string)[];
     /**
      * If `true`, the toast will be translucent.
-     * Only applies when the mode is `"ios"` and the device supports
+     * 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).
      */
     translucent: boolean;
@@ -219,6 +235,7 @@ export declare class Toast implements ComponentInterface, OverlayInterface {
      */
     onWillDismiss<T = any>(): Promise<OverlayEventDetail<T>>;
     private getButtons;
+    private getShape;
     /**
      * Returns the element specified by the positionAnchor prop,
      * or undefined if prop's value is an ID string and the element

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

@@ -2,7 +2,8 @@ import type { ComponentInterface, EventEmitter } from '../../stencil-public-runt
 import type { Color } from '../../interface';
 import type { ToggleChangeEventDetail } from './toggle-interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 - The label text to associate with the toggle. Use the "labelPlacement" property to control where the label is placed relative to the toggle.
  *
@@ -15,6 +16,7 @@ import type { ToggleChangeEventDetail } from './toggle-interface';
  */
 export declare class Toggle implements ComponentInterface {
     private inputId;
+    private inputLabelId;
     private helperTextId;
     private errorTextId;
     private gesture?;
@@ -121,10 +123,24 @@ export declare class Toggle implements ComponentInterface {
     private onEnd;
     private getValue;
     private setFocus;
+    private onKeyDown;
     private onClick;
     private onFocus;
     private onBlur;
     private getSwitchLabelIcon;
+    get toggleDefaultCheckedIcon(): string;
+    /**
+     * Get the icon to use for the checked icon.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get toggleCheckedIcon(): string;
+    /**
+     * Get the icon to use for the unchecked icon.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get toggleUncheckedIcon(): string;
     private renderOnOffSwitchLabels;
     private renderToggleControl;
     private get hasLabel();

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

@@ -1,12 +1,13 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { Color, StyleEventDetail } from '../../interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 between the named slots if provided without a slot.
  * @slot start - Content is placed to the left of the toolbar text in LTR, and to the right in RTL.
- * @slot secondary - Content is placed to the left of the toolbar text in `ios` mode, and directly to the right in `md` mode.
- * @slot primary - Content is placed to the right of the toolbar text in `ios` mode, and to the far right in `md` mode.
+ * @slot secondary - Content is placed to the left of the toolbar text in the `"ios"` theme, and directly to the right in the `"md"` theme.
+ * @slot primary - Content is placed to the right of the toolbar text in the `"ios"` theme, and to the far right in the `"md"` theme.
  * @slot end - Content is placed to the right of the toolbar text in LTR, and to the left in RTL.
  *
  * @part background - The background of the toolbar, covering the entire area behind the toolbar content.