@ionic/core 9.0.2 → 9.0.3-dev.11788456135.1ab1d6cd

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

@@ -1,7 +1,8 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import type { RefresherEventDetail, RefresherPullEndEventDetail } from './refresher-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 Refresher implements ComponentInterface {
     private appliedStyles;

package/dist/types/components/refresher-content/refresher-content.d.ts

@@ -1,6 +1,10 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
 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.
+ */
 export declare class RefresherContent implements ComponentInterface {
     private customHTMLEnabled;
     el: HTMLIonRefresherContentElement;

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

@@ -1,9 +1,18 @@
 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.
+ *
  * @part icon - The icon of the reorder handle (uses ion-icon).
  */
 export declare class Reorder implements ComponentInterface {
     el: HTMLIonReorderElement;
     onClick(ev: Event): void;
+    /**
+     * Get the icon to use for the handle icon.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get reorderHandleIcon(): string;
     render(): any;
 }

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

@@ -6,6 +6,10 @@ declare const enum ReorderGroupState {
     Active = 1,
     Complete = 2
 }
+/**
+ * @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 ReorderGroup implements ComponentInterface {
     private selectedItemEl?;
     private selectedItemHeight;

package/dist/types/components/ripple-effect/ripple-effect.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 RippleEffect implements ComponentInterface {
     el: HTMLElement;
     /**

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

@@ -1,5 +1,9 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import type { NavigationHookCallback } from './route-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 Route implements ComponentInterface {
     /**
      * Relative path that needs to match in order for this route to apply.

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

@@ -2,6 +2,10 @@ import type { ComponentInterface, EventEmitter } from '../../stencil-public-runt
 import type { BackButtonEvent } from "../../utils/hardware-back-button";
 import type { AnimationBuilder } from '../../interface';
 import type { RouterDirection, RouterEventDetail } from './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.
+ */
 export declare class Router implements ComponentInterface {
     private previousPath;
     private busy;

package/dist/types/components/router-link/router-link.d.ts

@@ -1,6 +1,10 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { AnimationBuilder, Color } 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.
+ */
 export declare class RouterLink implements ComponentInterface {
     /**
      * The color to use from your application's color palette.

package/dist/types/components/router-outlet/router-outlet.d.ts

@@ -2,6 +2,9 @@ import type { ComponentInterface, EventEmitter } from '../../stencil-public-runt
 import type { AnimationBuilder, ComponentProps, FrameworkDelegate } from '../../interface';
 import type { RouterOutletOptions, SwipeGestureHandler } from '../nav/nav-interface';
 import type { RouteID, RouterDirection, RouteWrite, NavOutlet } from '../router/utils/interface';
+/**
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ */
 export declare class RouterOutlet implements ComponentInterface, NavOutlet {
     private readonly lockController;
     private activeEl;
@@ -12,7 +15,7 @@ export declare class RouterOutlet implements ComponentInterface, NavOutlet {
     private gestureOrAnimationInProgress;
     el: HTMLElement;
     /**
-     * The mode determines which platform styles to use.
+     * The mode determines the platform behaviors of the component.
      */
     mode: import("../../interface").Mode;
     /** @internal */

package/dist/types/components/row/row.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 Row implements ComponentInterface {
     render(): any;
 }

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

@@ -2,7 +2,8 @@ import type { ComponentInterface, EventEmitter } from '../../stencil-public-runt
 import type { AutocompleteTypes, Color, StyleEventDetail } from '../../interface';
 import type { SearchbarChangeEventDetail, SearchbarInputEventDetail } from './searchbar-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 Searchbar implements ComponentInterface {
     private nativeInput?;
@@ -21,6 +22,9 @@ export declare class Searchbar implements ComponentInterface {
     el: HTMLIonSearchbarElement;
     focused: boolean;
     noAnimate: boolean;
+    /** Keeps the clear button mounted for the duration of a press. */
+    isClearButtonPressed: boolean;
+    private readonly clearButtonPressController;
     /**
      * lang and dir are globally enumerated attributes.
      * As a result, creating these as properties
@@ -54,16 +58,16 @@ export declare class Searchbar implements ComponentInterface {
      */
     autocorrect: boolean;
     /**
-     * Set the cancel button icon. Only applies to `md` mode.
-     * Defaults to `arrow-back-sharp`.
+     * Set the cancel button icon. Only available when the theme is `"md"`.
+     * Defaults to `"arrow-back-sharp"`.
      */
-    cancelButtonIcon: string;
+    cancelButtonIcon?: string;
     /**
-     * Set the cancel button text. Only applies to `ios` mode.
+     * Set the cancel button text. Only available when the theme is `"ios"`.
      */
     cancelButtonText: string;
     /**
-     * Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`.
+     * Set the clear icon. Defaults to `"close-circle"` for `"ios"` theme and `"close-sharp"` for `"md"` and `"ionic"` theme.
      */
     clearIcon?: string;
     /**
@@ -110,10 +114,11 @@ export declare class Searchbar implements ComponentInterface {
      */
     placeholder: string;
     /**
-     * The icon to use as the search icon. Defaults to `search-outline` in
-     * `ios` mode and `search-sharp` in `md` mode.
+     * The icon to use as the search icon. Defaults to `"search-outline"` in
+     * the `"ios"` theme and `"search-sharp"` in the `"md"` and `"ionic"` themes.
+     * If `false`, no search icon will be displayed.
      */
-    searchIcon?: string;
+    searchIcon?: string | boolean;
     /**
      * Sets the behavior for the cancel button. Defaults to `"never"`.
      * Setting to `"focus"` shows the cancel button on focus.
@@ -143,6 +148,21 @@ export declare class Searchbar implements ComponentInterface {
      * the value of the searchbar.
      */
     value?: string | null;
+    /**
+     * Set to `"soft"` for a searchbar with slightly rounded corners,
+     * `"round"` for a searchbar with fully rounded corners,
+     * or `"rectangular"` for a searchbar without rounded corners.
+     *
+     * Defaults to `"round"` for the ionic theme, and `undefined` for all other themes.
+     */
+    shape?: 'soft' | 'round' | 'rectangular';
+    /**
+     * Set to `"large"` for a searchbar with an increase in height,
+     * while "small" and "medium" provide progressively smaller heights.
+     *
+     * Defaults to `"medium"` for the ionic theme, and `undefined` for all other themes.
+     */
+    size?: 'small' | 'medium' | 'large';
     /**
      * Emitted when the `value` of the `ion-searchbar` element has changed.
      */
@@ -253,6 +273,7 @@ export declare class Searchbar implements ComponentInterface {
     private positionCancelButton;
     private getValue;
     private hasValue;
+    private shouldShowSearchIcon;
     /**
      * Determines whether or not the cancel button should be visible onscreen.
      * Cancel button should be shown if one of two conditions applies:
@@ -264,8 +285,33 @@ export declare class Searchbar implements ComponentInterface {
      * Determines whether or not the clear button should be visible onscreen.
      * Clear button should be shown if one of two conditions applies:
      * 1. `showClearButton` is set to `always`.
-     * 2. `showClearButton` is set to `focus`, and the searchbar has been focused.
+     * 2. `showClearButton` is set to `focus`, and the searchbar has been
+     *    focused or a clear button press is still in flight.
+     * Unless the `theme` is `ionic` and the searchbar is disabled.
      */
     private shouldShowClearButton;
+    private getShape;
+    private getSize;
+    /**
+     * 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.
+     */
+    get searchbarClearIcon(): string;
+    /**
+     * Get the icon to use for the search 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 searchbarSearchIcon(): string;
+    /**
+     * Get the icon to use for the cancel 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 searchbarCancelIcon(): string;
     render(): any;
 }

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

@@ -4,7 +4,8 @@ import type { Color, StyleEventDetail } from '../../interface';
 import type { SegmentViewScrollEvent } from '../segment-view/segment-view-interface';
 import type { SegmentChangeEventDetail, SegmentValue } from './segment-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 Segment implements ComponentInterface {
     private gesture?;

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

@@ -3,7 +3,8 @@ import type { ButtonInterface } from "../../utils/element-interface";
 import type { SegmentValue } from '../segment/segment-interface';
 import type { SegmentButtonLayout } from './segment-button-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 button element that wraps all child elements.
  * @part indicator - The indicator displayed on the checked segment button.

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.
@@ -19,8 +20,9 @@ import type { SelectChangeEventDetail, SelectInterface, SelectCompareFn } from '
  * @part bottom - The container element for helper text, error text, and counter.
  * @part wrapper - The clickable label element that wraps the entire form field (label text, slots, selected values or placeholder, and toggle icons).
  * @part start - The wrapper element for the content in the start slot.
- * @part control - The wrapper element containing the label and native select control. When the label is not floating or stacked, this part also contains the dropdown icon.
- * @part end - The wrapper element for the content in the end slot. When the label is floating or stacked, this part also contains the dropdown icon.
+ * @part control - The wrapper element containing the native select control. In the `"ios"` and `"md"` themes it also contains the label, and the dropdown icon when the label is not floating or stacked.
+ * @part end - The wrapper element for the content in the end slot. In the `"ios"` and `"md"` themes it also contains the dropdown icon when the label is floating or stacked.
+ * @part inner - The wrapper element containing the start, control and end wrappers and the dropdown icon. Only rendered in the `"ionic"` theme.
  */
 export declare class Select implements ComponentInterface {
     private inputId;
@@ -58,6 +60,14 @@ export declare class Select implements ComponentInterface {
      * The text to display on the cancel button.
      */
     cancelText: string;
+    /**
+     * If `true`, the cancel button will display an icon instead of the `cancelText`.
+     * Only applies when `interface` is set to `"modal"`. Has no effect on `"action-sheet"`,
+     * `"alert"`, or `"popover"` interfaces.
+     * When `cancelIcon` is `true`, the `cancelText` property is ignored for display
+     * but is used as the accessible label for the icon button.
+     */
+    cancelIcon: boolean;
     /**
      * The color to use from your application's color palette.
      * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -79,7 +89,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';
     /**
@@ -156,30 +166,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.
      *
@@ -257,6 +278,7 @@ export declare class Select implements ComponentInterface {
     private onClick;
     private onFocus;
     private onBlur;
+    private getSize;
     private renderLabel;
     componentDidRender(): void;
     /**
@@ -282,6 +304,18 @@ export declare class Select implements ComponentInterface {
      * Renders the outline border with a notch for the label.
      */
     private renderOutlineContainer;
+    private renderStartContainer;
+    private renderNativeWrapper;
+    /**
+     * The ionic theme keeps the label above a field box that wraps the slots and
+     * the control, so the label can size independently of the slotted content.
+     */
+    private renderIonicField;
+    /**
+     * The ios and md themes nest the label alongside the control so a floating
+     * label can escape it and clear the start and end slots.
+     */
+    private renderNativeField;
     /**
      * Wraps text nodes in the select text with span elements
      * so spacing can be added between elements without
@@ -305,6 +339,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-modal/select-modal.d.ts

@@ -8,6 +8,12 @@ export declare class SelectModal implements ComponentInterface {
      * The text to display on the cancel button.
      */
     cancelText: string;
+    /**
+     * If `true`, the cancel button will display a close icon instead of the `cancelText`.
+     * When `cancelIcon` is `true`, `cancelText` is not displayed visually but is still used
+     * as the accessible label (`aria-label`) for the button.
+     */
+    cancelIcon: boolean;
     multiple?: boolean;
     options: SelectModalOption[];
     private closeModal;
@@ -15,6 +21,8 @@ export declare class SelectModal implements ComponentInterface {
     private getValues;
     private callOptionHandler;
     private setChecked;
+    private get cancelButtonIcon();
+    private getModalContextClasses;
     private renderRadioOptions;
     private renderCheckboxOptions;
     render(): any;

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

@@ -1,6 +1,7 @@
 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 between the named slots if provided without a slot.
  * @slot start - Content is placed to the left of the select option text in LTR, and to the right in RTL.
@@ -29,9 +30,10 @@ export declare class SelectOption implements ComponentInterface {
      * `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL.
      *
      * Applies to the `alert`, `popover`, and `modal` interfaces, but has no
-     * visible effect on radio options in `popover` or `modal` on `md` (the radio control is hidden there).
+     * visible effect on radio options in `popover` or `modal` on the `md`
+     * and `ionic` themes (the radio control is hidden there).
      *
-     * When unset, the interface picks a default based on mode and control
+     * When unset, the interface picks a default based on theme and control
      * type.
      */
     labelPlacement?: 'start' | 'end';
@@ -45,9 +47,10 @@ export declare class SelectOption implements ComponentInterface {
      * ends of the line with space between the two elements.
      *
      * Applies to the `alert`, `popover`, and `modal` interfaces, but has no
-     * visible effect on radio options in `popover` or `modal` on `md` (the radio control is hidden there).
+     * visible effect on radio options in `popover` or `modal` on the `md`
+     * and `ionic` themes (the radio control is hidden there).
      *
-     * When unset, the interface picks a default based on mode and control
+     * When unset, the interface picks a default based on theme and control
      * type.
      */
     justify?: 'start' | 'end' | 'space-between';

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 loadPromise?;
     el: HTMLIonTabElement;

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

@@ -1,4 +1,5 @@
 export type TabButtonLayout = 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'label-hide';
+export type TabBarScrollEffect = 'hide';
 export interface TabBarChangedEventDetail {
     tab?: string;
 }

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

@@ -1,13 +1,17 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import type { Color } from '../../interface';
-import type { TabBarChangedEventDetail } from './tab-bar-interface';
+import type { TabBarChangedEventDetail, TabBarScrollEffect } 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;
     private keyboardCtrlPromise;
     private didLoad;
+    private scrollHideCtrl?;
+    private scrollHideCtrlPromise;
+    private hasWarnedFooter;
     el: HTMLElement;
     keyboardVisible: boolean;
     /**
@@ -21,12 +25,42 @@ export declare class TabBar implements ComponentInterface {
      */
     selectedTab?: string;
     selectedTabChanged(): void;
+    /**
+     * Describes the scroll effect that will be applied to the tab bar.
+     * `"hide"` slides the tab bar out of view when scrolling down and back in
+     * when scrolling up.
+     *
+     * Note: `"hide"` is ignored when the tab bar is nested inside an
+     * `ion-footer` to avoid leaving an empty footer visible on screen.
+     * Set `scroll-effect="hide"` on the footer instead so the entire
+     * footer hides together.
+     */
+    scrollEffect?: TabBarScrollEffect;
+    scrollEffectChanged(): 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>;
     /**
@@ -37,7 +71,11 @@ export declare class TabBar implements ComponentInterface {
      */
     ionTabBarLoaded: EventEmitter<void>;
     componentDidLoad(): void;
+    private checkScrollEffect;
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
+    private setupScrollEffect;
+    private destroyScrollEffect;
+    private getShape;
     render(): any;
 }