@ionic/core 8.8.20-dev.11787158518.168a2fea → 8.8.20-dev.11788449221.155f9f1e

package/dist/types/global/ionic-global.d.ts

@@ -1,4 +1,30 @@
-import type { IonicConfig, Mode } from '../interface';
-export declare const getIonMode: (ref?: any) => Mode;
+import type { IonicConfig, Mode, Theme } from '../interface';
+/**
+ * Validates if a mode is accepted for a theme configuration.
+ * @param mode The mode to validate.
+ * @param theme The theme the mode is being used with.
+ * @returns `true` if the mode is valid for the theme, `false` if invalid.
+ */
+export declare const isModeValidForTheme: (mode: Mode, theme: Theme) => boolean;
+/**
+ * Returns the mode value of the element reference or the closest
+ * parent with a valid mode.
+ * @param ref The element reference to look up the mode for.
+ * @param theme Optionally can provide the theme to avoid an additional look-up.
+ * @returns The mode value for the element reference.
+ */
+export declare const getIonMode: (ref?: any, theme?: Theme) => Mode;
+/**
+ * Returns the theme value of the element reference or the closest
+ * parent with a valid theme.
+ *
+ * @param ref The element reference to look up the theme for.
+ * @returns The theme value for the element reference, defaults to
+ * the default theme if it cannot be determined.
+ */
+export declare const getIonTheme: (ref?: any) => Theme;
+export declare const rIC: (callback: () => void) => number;
+export declare const cIC: (id: number) => void;
+export declare const needInputShims: () => boolean;
 export declare const initialize: (userConfig?: IonicConfig) => void;
 export default initialize;

package/dist/types/index.d.ts

@@ -14,5 +14,5 @@ export { IonicConfig, getMode, setupConfig } from './utils/config';
 export { openURL } from './utils/theme';
 export { LIFECYCLE_WILL_ENTER, LIFECYCLE_DID_ENTER, LIFECYCLE_WILL_LEAVE, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_UNLOAD, } from './components/nav/constants';
 export { menuController } from './utils/menu-controller';
-export { alertController, actionSheetController, modalController, loadingController, popoverController, toastController, } from './utils/overlays';
+export { alertController, actionSheetController, modalController, loadingController, pickerController, popoverController, toastController, } from './utils/overlays';
 export { IonicSlides } from './components/slides/IonicSlides';

package/dist/types/interface.d.ts

@@ -19,6 +19,7 @@ export { LoadingOptions } from './components/loading/loading-interface';
 export { MenuCustomEvent, MenuI, MenuControllerI } from './components/menu/menu-interface';
 export { ModalOptions, ModalCustomEvent, ModalDragEventDetail } from './components/modal/modal-interface';
 export { NavDirection, NavCustomEvent } from './components/nav/nav-interface';
+export { PickerOptions, PickerColumnOption } from './components/picker-legacy/picker-interface';
 export { PopoverOptions } from './components/popover/popover-interface';
 export { RadioGroupCustomEvent } from './components/radio-group/radio-group-interface';
 export { RangeCustomEvent, PinFormatter } from './components/range/range-interface';
@@ -139,6 +140,9 @@ export type PredefinedColors =
 export type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
 
 export type Color = LiteralUnion<PredefinedColors, string>;
+
+export type Theme = 'ios' | 'md' | 'ionic';
+
 export type Mode = 'ios' | 'md';
 export type ComponentTags = string;
 // eslint-disable-next-line

package/dist/types/utils/config.d.ts

@@ -1,6 +1,6 @@
 import type { SpinnerTypes } from '../components/spinner/spinner-configs';
 import type { TabButtonLayout } from '../components/tab-bar/tab-bar-interface';
-import type { AnimationBuilder, Mode } from '../interface';
+import type { AnimationBuilder, Mode, Theme } from '../interface';
 import type { LogLevel } from './logging';
 import type { PlatformConfig } from './platform';
 export interface IonicConfig {
@@ -15,9 +15,24 @@ export interface IonicConfig {
      */
     rippleEffect?: boolean;
     /**
-     * The mode determines which platform styles to use for the whole application.
+     * The mode determines the platform behaviors to use for the entire application,
+     * such as rubber-band scrolling on iOS or Android page transitions.
+     *
+     * Possible values are: `"ios"` or `"md"`.
+     *
+     * Without a specified theme, the mode will be used to determine which platform
+     * styles to use throughout the application. This is legacy behavior to prevent
+     * breaking changes, but we recommend the use of a specific theme to opt in to
+     * the new styles.
      */
     mode?: Mode;
+    /**
+     * The theme determines the visual appearance of components.
+     * - `"ios"` - iOS components aligning to the Cupertino guidelines
+     * - `"md"` - Material Design components aligning to Material Design 2 guidelines
+     * - `"ionic"` - **EXPERIMENTAL** Ionic's upcoming new design system
+     */
+    theme?: Theme;
     /**
      * Wherever ionic will respond to hardware go back buttons in an Android device.
      * Defaults to `true` when ionic runs in a mobile device.
@@ -88,6 +103,95 @@ export interface IonicConfig {
      * Overrides the default `duration` for all `ion-toast` components.
      */
     toastDuration?: number;
+    /**
+     * The selector that will be used to query the root of the Ionic application.
+     * This element is used for things like injecting overlay elements into the DOM and managing focus.
+     *
+     * @default 'ion-app'
+     */
+    appRootSelector?: string;
+    /**
+     * Overrides the toggle icon for all `ion-accordion` components.
+     */
+    accordionToggleIcon?: string;
+    /**
+     * Overrides the separator icon for all `ion-breadcrumb` components,
+     * only when mode is set to `ios`.
+     */
+    breadcrumbSeparatorIcon?: string;
+    /**
+     * Overrides the collapsed icon for all `ion-breadcrumb` components.
+     */
+    breadcrumbCollapsedIcon?: string;
+    /**
+     * Overrides the next icon for all `ion-datetime` components.
+     */
+    datetimeNextIcon?: string;
+    /**
+     * Overrides the previous icon for all `ion-datetime` components.
+     */
+    datetimePreviousIcon?: string;
+    /**
+     * Overrides the expanded icon for all `ion-datetime` components.
+     */
+    datetimeExpandedIcon?: string;
+    /**
+     * Overrides the collapsed icon for all `ion-datetime` components.
+     */
+    datetimeCollapsedIcon?: string;
+    /**
+     * Overrides the close icon for all `ion-fab-button` components.
+     */
+    fabButtonCloseIcon?: string;
+    /**
+     * Overrides the clear icon for all `ion-input` components.
+     */
+    inputClearIcon?: string;
+    /**
+     * Overrides the show icon for all `ion-input-password` components.
+     */
+    inputPasswordShowIcon?: string;
+    /**
+     * Overrides the hide icon for all `ion-input-password` components.
+     */
+    inputPasswordHideIcon?: string;
+    /**
+     * Overrides the detail icon for all `ion-item` components.
+     */
+    itemDetailIcon?: string;
+    /**
+     * Overrides the handle icon for all `ion-reorder` components.
+     */
+    reorderHandleIcon?: string;
+    /**
+     * Overrides the cancel icon for all `ion-searchbar` components,
+     * only when mode is set to `md`.
+     */
+    searchbarCancelIcon?: string;
+    /**
+     * Overrides the clear icon for all `ion-searchbar` components.
+     */
+    searchbarClearIcon?: string;
+    /**
+     * Overrides the search icon for all `ion-searchbar` components.
+     */
+    searchbarSearchIcon?: string;
+    /**
+     * Overrides the expand icon for all `ion-select` components.
+     */
+    selectExpandedIcon?: string;
+    /**
+     * Overrides the collapsed icon for all `ion-select` components.
+     */
+    selectCollapsedIcon?: string;
+    /**
+     * Overrides the checked icon for all `ion-toggle` components.
+     */
+    toggleCheckedIcon?: string;
+    /**
+     * Overrides the unchecked icon for all `ion-toggle` components.
+     */
+    toggleUncheckedIcon?: string;
     /**
      * Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application.
      * This prop allows to replace the default transition and provide a custom one that applies to all navigation outlets.
@@ -117,6 +221,10 @@ export interface IonicConfig {
      * Provides a custom enter animation for all `ion-toast`, overriding the default "animation".
      */
     toastEnter?: AnimationBuilder;
+    /**
+     * Provides a custom enter animation for all `ion-picker-legacy`, overriding the default "animation".
+     */
+    pickerEnter?: AnimationBuilder;
     /**
      * Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation".
      */
@@ -141,6 +249,10 @@ export interface IonicConfig {
      * Provides a custom leave animation for all `ion-toast`, overriding the default "animation".
      */
     toastLeave?: AnimationBuilder;
+    /**
+     * Provides a custom leave animation for all `ion-picker-legacy`, overriding the default "animation".
+     */
+    pickerLeave?: AnimationBuilder;
     /**
      * If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML.
      */
@@ -178,7 +290,6 @@ export interface IonicConfig {
      * - `'OFF'`: No errors or warnings are logged.
      * - `'ERROR'`: Logs only errors.
      * - `'WARN'`: Logs errors and warnings.
-     * - `'DEBUG'`: Logs errors, warnings, and Ionic's internal diagnostics.
      */
     logLevel?: LogLevel;
     keyboardHeight?: number;

package/dist/types/utils/css-value-validation.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Helpers for validating user-supplied CSS values using regular expressions, without
+ * relying on browser CSS APIs.
+ */
+/**
+ * Returns whether `value` matches the [length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length-percentage)
+ * syntax. Accepts `<length>` (`<number>` + unit identifier) or `<percentage>` (`<number>%`).
+ * Also supports simple `calc` / `min` / `max` / `clamp(...)` functions.
+ *
+ * @param value String value to validate.
+ */
+export declare function isValidLengthPercentage(value: string): boolean;
+/**
+ * Returns whether `value` is a single [`var()`](https://developer.mozilla.org/en-US/docs/Web/CSS/var)
+ * reference, e.g. `var(--my-token)` or `var(--my-token, 16px)`. The referenced
+ * custom property is resolved by the browser, so the resolved value is not
+ * validated here.
+ *
+ * @param value String value to validate.
+ */
+export declare function isCssVariable(value: string): boolean;

package/dist/types/utils/focus-trap.d.ts

@@ -10,7 +10,7 @@
  * Note: We need this distinction because `disabled="false"` is
  * valid usage for the disabled property on ion-button.
  */
-export declare const focusableQueryString = "[tabindex]:not([tabindex^=\"-\"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^=\"-\"]):not([hidden]):not([disabled]), textarea:not([tabindex^=\"-\"]):not([hidden]):not([disabled]), button:not([tabindex^=\"-\"]):not([hidden]):not([disabled]), select:not([tabindex^=\"-\"]):not([hidden]):not([disabled]), ion-checkbox:not([tabindex^=\"-\"]):not([hidden]):not([disabled]), ion-radio:not([tabindex^=\"-\"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^=\"-\"]):not([hidden]):not([disabled]), .ion-focusable[disabled=\"false\"]:not([tabindex^=\"-\"]):not([hidden])";
+export declare const focusableQueryString = "[tabindex]:not([tabindex^=\"-\"]):not([hidden]):not([disabled]), input:not([type=hidden]):not([tabindex^=\"-\"]):not([hidden]):not([disabled]), textarea:not([tabindex^=\"-\"]):not([hidden]):not([disabled]), button:not([tabindex^=\"-\"]):not([hidden]):not([disabled]), select:not([tabindex^=\"-\"]):not([hidden]):not([disabled]), ion-checkbox:not([tabindex^=\"-\"]):not([hidden]):not([disabled]), ion-radio:not([tabindex^=\"-\"]):not([hidden]):not([disabled]), ion-textarea:not([tabindex^=\"-\"]):not([hidden]):not([disabled]), .ion-focusable:not([tabindex^=\"-\"]):not([hidden]):not([disabled]), .ion-focusable[disabled=\"false\"]:not([tabindex^=\"-\"]):not([hidden])";
 /**
  * Focuses the first descendant in a context
  * that can receive focus. If none exists,

package/dist/types/utils/focus-visible.d.ts

@@ -2,4 +2,17 @@ export interface FocusVisibleUtility {
     destroy: () => void;
     setFocus: (elements: Element[]) => void;
 }
+export declare const getOrInitFocusVisibleUtility: () => FocusVisibleUtility;
+/**
+ * Used to set focus on an element that uses `ion-focusable`.
+ * Do not use this if focusing the element as a result of a keyboard
+ * event as the focus utility should handle this for us. This method
+ * should be used when we want to programmatically focus an element as
+ * a result of another user action. (Ex: We focus the first element
+ * inside of a popover when the user presents it, but the popover is not always
+ * presented as a result of keyboard action.)
+ *
+ * @param elements - The elements to set focus on.
+ */
+export declare const focusElements: (elements: Element[]) => void;
 export declare const startFocusVisible: (rootEl?: HTMLElement) => FocusVisibleUtility;

package/dist/types/utils/forms/clear-button-press-controller.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Tracks an in-flight press on a clear button so a blur landing mid-press can't
+ * hide or unmount the button before the press produces its click.
+ *
+ * Calling `preventDefault()` on `pointerdown` is meant to stop the field
+ * blurring, but not every browser honors it (iOS Safari blurs anyway). The
+ * press is released on `click` rather than `pointerup` because touch
+ * dispatches the click after the finger lifts.
+ *
+ * @internal
+ * @param onPressChange Receives the press state.
+ */
+export declare const createClearButtonPressController: (onPressChange: (isPressed: boolean) => void) => ClearButtonPressController;
+export type ClearButtonPressController = {
+    onPointerDown: (ev: PointerEvent) => void;
+    /** Ends the press without waiting for a click. */
+    release: () => void;
+    /** Ends any in-flight press. The controller stays usable if the host reconnects. */
+    destroy: () => void;
+};

package/dist/types/utils/forms/index.d.ts

@@ -1,5 +1,5 @@
 export * from './notch-controller';
-export * from './start-container-controller';
 export * from './compare-with-utils';
 export * from './item-multiple-inputs';
 export * from './validity';
+export * from './clear-button-press-controller';

package/dist/types/utils/forms/validity.d.ts

@@ -7,4 +7,11 @@ type FormElement = HTMLIonInputElement | HTMLIonTextareaElement | HTMLIonSelectE
  * @returns `true` if the element is invalid, `false` otherwise.
  */
 export declare const checkInvalidState: (el: FormElement) => boolean;
+export declare const getValidityFlags: (validity: ValidityState) => ValidityStateFlags;
+/**
+ * Reports the validity state of a native form element to ElementInternals.
+ * This delegates to the native element's built-in validation, which automatically
+ * handles required, minlength, maxlength, and other constraints.
+ */
+export declare const reportValidityToElementInternals: (nativeElement: HTMLInputElement | HTMLTextAreaElement | null | undefined, internals: ElementInternals) => void;
 export {};

package/dist/types/utils/helpers.d.ts

@@ -60,7 +60,29 @@ export declare const getElementRoot: (el: HTMLElement, fallback?: HTMLElement) =
  */
 export declare const raf: (h: FrameRequestCallback) => number;
 export declare const hasShadowDom: (el: HTMLElement) => boolean;
+/**
+ * Focuses a given element while ensuring proper focus management
+ * within the Ionic framework. If the element is marked as `ion-focusable`,
+ * this function will delegate focus handling to `ion-app` or manually
+ * apply focus when a custom app root is used.
+ *
+ * This function helps maintain accessibility and expected focus behavior
+ * in both standard and custom root environments.
+ *
+ * @param el - The element to focus.
+ */
 export declare const focusVisibleElement: (el: HTMLElement) => void;
+/**
+ * Clears the keyboard focus ring (`ion-focused`) that the focus-visible
+ * utility may have applied to elements during a programmatic focus.
+ *
+ * Use this after moving DOM focus to an element for assistive technologies
+ * (e.g. when an overlay opens) where the option should be focused so screen
+ * readers announce it, but the focus ring should not be shown until the user
+ * navigates with the keyboard (Tab/Arrow). The focus-visible utility will add
+ * `ion-focused` again on the next keyboard-driven focus change.
+ */
+export declare const suppressFocusVisible: () => void;
 /**
  * This method is used to add a hidden input to a host element that contains
  * a Shadow DOM. It does not add the input inside of the Shadow root which

package/dist/types/utils/logging/index.d.ts

@@ -1,8 +1,7 @@
 export declare enum LogLevel {
     OFF = "OFF",
     ERROR = "ERROR",
-    WARN = "WARN",
-    DEBUG = "DEBUG"
+    WARN = "WARN"
 }
 /**
  * Logs a warning to the console with an Ionic prefix

package/dist/types/utils/overlay-control-label.d.ts

@@ -1,8 +1,9 @@
-import type { Mode } from '../interface';
+import type { Theme } from '../interface';
 /**
  * Returns the default `labelPlacement` for a radio or checkbox option
- * rendered inside an overlay. Defaults follow each mode's established
+ * rendered inside an overlay. Defaults follow each theme's established
  * option-row layout:
+ * - `ionic`: always `"start"`.
  * - `ios`: `"start"` for radio in `alert` and `popover`. The `modal`
  *   interface flips iOS radio back to `"end"`. Checkbox is always
  *   `"end"` on iOS.
@@ -11,13 +12,14 @@ import type { Mode } from '../interface';
  * `interfaceType` is optional; only `"modal"` changes the result, so
  * callers that aren't a modal can omit it.
  *
- * Used by `select-popover` and `select-modal` as the fallback when an
- * option doesn't explicitly set `labelPlacement`.
+ * Used by `alert`, `select-popover`, and `select-modal` as the fallback
+ * when an option doesn't explicitly set `labelPlacement`.
  */
-export declare const getOverlayLabelPlacement: (mode: Mode, control: "radio" | "checkbox", interfaceType?: "alert" | "popover" | "modal") => "start" | "end";
+export declare const getOverlayLabelPlacement: (theme: Theme, control: "radio" | "checkbox", interfaceType?: "alert" | "popover" | "modal") => "start" | "end";
 /**
  * Returns the default `justify` for a radio or checkbox option rendered
- * inside an overlay. Defaults follow each mode's option-row layout:
+ * inside an overlay. Defaults follow each theme's option-row layout:
+ * - `ionic`: always `"space-between"`.
  * - `ios`: `"space-between"` for radio in `alert` and `popover`. The
  *   `modal` interface falls back to `"start"`. Checkbox is always `"start"`
  *   on iOS.
@@ -26,7 +28,7 @@ export declare const getOverlayLabelPlacement: (mode: Mode, control: "radio" | "
  * `interfaceType` is optional; only `"modal"` changes the result, so
  * callers that aren't a modal can omit it.
  *
- * Used by `select-popover` and `select-modal` as the fallback when an
- * option doesn't explicitly set `justify`.
+ * Used by `alert`, `select-popover`, and `select-modal` as the fallback when
+ * an option doesn't explicitly set `justify`.
  */
-export declare const getOverlayLabelJustify: (mode: Mode, control: "radio" | "checkbox", interfaceType?: "alert" | "popover" | "modal") => "start" | "end" | "space-between";
+export declare const getOverlayLabelJustify: (theme: Theme, control: "radio" | "checkbox", interfaceType?: "alert" | "popover" | "modal") => "start" | "end" | "space-between";

package/dist/types/utils/overlays-interface.d.ts

@@ -1,9 +1,39 @@
 import type { EventEmitter } from '../stencil-public-runtime';
-import type { AnimationBuilder, HTMLStencilElement } from '../interface';
+import type { AnimationBuilder, HTMLStencilElement, Mode, Theme } from '../interface';
 export interface OverlayEventDetail<T = any> {
     data?: T;
     role?: string;
 }
+/**
+ * The shared configuration options for all overlays.
+ */
+export interface OverlayOptions {
+    /**
+     * To change the default appearance of the overlay, use the `theme` option.
+     * Mode is used to change the platform behavior of the component.
+     */
+    mode?: Mode;
+    /**
+     * The theme determines the visual appearance of components.
+     */
+    theme?: Theme;
+    /**
+     * If `true`, the overlay will be animated when it is presented and dismissed.
+     */
+    animated?: boolean;
+    /**
+     * The `id` of the overlay.
+     */
+    id?: string;
+    /**
+     * The custom enter animation to use for the overlay.
+     */
+    enterAnimation?: AnimationBuilder;
+    /**
+     * The custom leave animation to use for the overlay.
+     */
+    leaveAnimation?: AnimationBuilder;
+}
 export interface OverlayInterface {
     el: HTMLIonOverlayElement;
     animated: boolean;

package/dist/types/utils/overlays.d.ts

@@ -1,4 +1,4 @@
-import type { ActionSheetOptions, AlertOptions, Animation, AnimationBuilder, FrameworkDelegate, HTMLIonOverlayElement, IonicConfig, LoadingOptions, ModalOptions, OverlayInterface, PopoverOptions, ToastOptions } from '../interface';
+import type { ActionSheetOptions, AlertOptions, Animation, AnimationBuilder, FrameworkDelegate, HTMLIonOverlayElement, IonicConfig, LoadingOptions, ModalOptions, OverlayInterface, PickerOptions, PopoverOptions, ToastOptions } from '../interface';
 export declare const activeAnimations: WeakMap<OverlayInterface, Animation[]>;
 export declare const alertController: {
     create(options: AlertOptions): Promise<HTMLIonAlertElement>;
@@ -20,6 +20,14 @@ export declare const modalController: {
     dismiss(data?: any, role?: string, id?: string): Promise<boolean>;
     getTop(): Promise<HTMLIonModalElement | undefined>;
 };
+/**
+ * @deprecated Use the inline ion-picker component instead.
+ */
+export declare const pickerController: {
+    create(options: PickerOptions): Promise<HTMLIonPickerLegacyElement>;
+    dismiss(data?: any, role?: string, id?: string): Promise<boolean>;
+    getTop(): Promise<HTMLIonPickerLegacyElement | undefined>;
+};
 export declare const popoverController: {
     create(options: PopoverOptions<import("../interface").ComponentRef>): Promise<HTMLIonPopoverElement>;
     dismiss(data?: any, role?: string, id?: string): Promise<boolean>;
@@ -78,17 +86,7 @@ export declare const getPresentedOverlay: (doc: Document, overlayTag?: string, i
  * for main content.
  */
 export declare const setRootAriaHidden: (hidden?: boolean) => void;
-/**
- * Cleans up root `aria-hidden` and `backdrop-no-scroll` when
- * an overlay is removed from the DOM without going through
- * the `dismiss()` flow (e.g., when a framework unmounts the
- * overlay during a route change).
- *
- * Should be called from an overlay's `disconnectedCallback`
- * when the overlay was still presented at the time of removal.
- */
-export declare const cleanupRootFocusTrapAccessibility: () => void;
-export declare const present: <OverlayPresentOptions>(overlay: OverlayInterface, name: keyof IonicConfig, iosEnterAnimation: AnimationBuilder, mdEnterAnimation: AnimationBuilder, opts?: OverlayPresentOptions) => Promise<void>;
+export declare const present: <OverlayPresentOptions>(overlay: OverlayInterface, name: keyof IonicConfig, iosEnterAnimation: AnimationBuilder, mdEnterAnimation: AnimationBuilder, ionicEnterAnimation?: AnimationBuilder, opts?: OverlayPresentOptions) => Promise<void>;
 export declare const dismiss: <OverlayDismissOptions>(overlay: OverlayInterface, data: any | undefined, role: string | undefined, name: keyof IonicConfig, iosLeaveAnimation: AnimationBuilder, mdLeaveAnimation: AnimationBuilder, opts?: OverlayDismissOptions) => Promise<boolean>;
 export declare const eventMethod: <T>(element: HTMLElement, eventName: string) => Promise<T>;
 export declare const onceEvent: (element: HTMLElement, eventName: string, callback: (ev: Event) => void) => void;

package/dist/types/utils/scroll-hide-controller.d.ts

@@ -0,0 +1,56 @@
+export interface ScrollHideOptions {
+    /** The component's host element. */
+    el: HTMLElement;
+    /** CSS variable name for the hide height, e.g. `--internal-header-hide-height`. */
+    cssVar: string;
+    /** Class toggled on the component when hidden, e.g. `header-scroll-hidden`. */
+    hiddenClass: string;
+    /** Class added to content when the scroll-hide effect is active, e.g. `content-header-hide-scroll-partner`. */
+    contentPartnerClass: string;
+    /** Class toggled on content when hidden, e.g. `content-header-hide-scroll-hidden`. */
+    contentHiddenClass: string;
+    /**
+     * Optional guard called before removing aria-hidden on show.
+     * Return `true` to keep aria-hidden (e.g. when the keyboard is open).
+     */
+    shouldKeepAriaHidden?: () => boolean;
+}
+export type ScrollHideController = {
+    /** Whether the component is currently hidden by the scroll effect. */
+    isHidden: () => boolean;
+    /**
+     * Activate the controller by attaching listeners, observers, and
+     * content classes. Must be called only after the caller confirms this
+     * setup is still current (promise-identity guard). A controller that
+     * is never initialized has no side effects and can be discarded.
+     */
+    init: () => void;
+    /** Destroy all listeners, observers, and clean up DOM state. */
+    destroy: () => void;
+};
+/**
+ * Creates a controller that manages scroll-based hide/show behavior
+ * for headers, footers, and tab bars.
+ *
+ * Listens to both wheel and scroll events. Wheel events (desktop mice)
+ * give direction instantly via deltaY. Scroll events cover touch,
+ * trackpad, and programmatic scrolling where wheel doesn't fire.
+ * A short suppression window stops them from double-processing the
+ * same gesture.
+ *
+ * When the user reverses scroll direction, we save that position as
+ * an anchor. The bar only hides after scrolling 60px past that
+ * anchor, which prevents flickering on small or jittery movements.
+ * Showing is immediate on direction change.
+ *
+ * When `options` is provided, the controller also handles the DOM
+ * setup: ResizeObserver for height tracking, CSS variable read/write,
+ * content partner/hidden class toggling, inert/aria-hidden, and
+ * full teardown cleanup. This avoids duplicating the same setup
+ * across header, footer, and tab-bar.
+ *
+ * @internal
+ * @param contentEl The content element to resolve the scroll element from.
+ * @param options Configuration for DOM setup (classes, CSS vars, a11y).
+ */
+export declare const createScrollHideController: (contentEl: HTMLElement, options: ScrollHideOptions) => Promise<ScrollHideController>;

package/dist/types/utils/test/playwright/drag-element.d.ts

@@ -7,12 +7,25 @@
  */
 import type { ElementHandle, Locator } from '@playwright/test';
 import type { E2EPage } from './';
-export declare const dragElementBy: (el: Locator | ElementHandle<SVGElement | HTMLElement>, page: E2EPage, dragByX?: number, dragByY?: number, startXCoord?: number, startYCoord?: number, releaseDrag?: boolean) => Promise<void>;
+/**
+ * Drags an element by the given number of pixels on the X and Y axes.
+ *
+ * @param el The element to drag.
+ * @param page The E2E Page object.
+ * @param dragByX The number of pixels to drag on the X axis. Negative values drag left, positive values drag right.
+ * @param dragByY The number of pixels to drag on the Y axis. Negative values drag up, positive values drag down.
+ * @param startXCoord The X coordinate to start the drag from. Defaults to the center of the element.
+ * @param startYCoord The Y coordinate to start the drag from. Defaults to the center of the element.
+ * @param releaseDrag Whether to release the drag at the end of the gesture. Defaults to `true`.
+ * @param steps The number of steps to divide the drag into. More steps reduce velocity; fewer steps increase it. Use this to control whether velocity-based thresholds (e.g. full-swipe) are triggered, particularly in Safari where gesture velocity is calculated relative to animation frames. Defaults to `10`.
+ */
+export declare const dragElementBy: (el: Locator | ElementHandle<SVGElement | HTMLElement>, page: E2EPage, dragByX?: number, dragByY?: number, startXCoord?: number, startYCoord?: number, releaseDrag?: boolean, steps?: number) => Promise<void>;
 /**
  * Drags an element by the given amount of pixels on the Y axis.
+ *
  * @param el The element to drag.
  * @param page The E2E Page object.
- * @param dragByY The amount of pixels to drag the element by.
- * @param startYCoord The Y coordinate to start the drag gesture at. Defaults to the center of the element.
+ * @param dragByY The number of pixels to drag on the Y axis.
+ * @param startYCoord The Y coordinate to start the drag from. Defaults to the center of the element.
  */
 export declare const dragElementByYAxis: (el: Locator | ElementHandle<SVGElement | HTMLElement>, page: E2EPage, dragByY: number, startYCoord?: number) => Promise<void>;

package/dist/types/utils/test/playwright/generator.d.ts

@@ -1,5 +1,6 @@
-export type Mode = 'ios' | 'md';
+export type Mode = 'ios' | 'md' | 'ionic-ios' | 'ionic-md';
 export type Direction = 'ltr' | 'rtl';
+export type Theme = 'ios' | 'md' | 'ionic';
 /**
  * The theme to use for the playwright test.
  *
@@ -12,9 +13,10 @@ export type Palette = 'light' | 'dark' | 'high-contrast' | 'high-contrast-dark';
 export type TitleFn = (title: string) => string;
 export type ScreenshotFn = (fileName: string) => string;
 export interface TestConfig {
-    mode: Mode;
     direction: Direction;
     palette: Palette;
+    mode: Mode;
+    theme: Theme;
 }
 interface TestUtilities {
     title: TitleFn;
@@ -22,8 +24,35 @@ interface TestUtilities {
     config: TestConfig;
 }
 interface TestConfigOption {
+    /**
+     * The available options to test against.
+     * - "ios": Test against iOS theme on iOS mode.
+     * - "md": Test against Material Design theme on Material Design mode.
+     * - "ionic-ios": Test against Ionic theme on iOS mode.
+     * - "ionic-md": Test against Ionic theme on Material Design mode.
+     *
+     * If unspecified, tests will run against "ios" and "md".
+     */
     modes?: Mode[];
+    /**
+     * The text direction to test against.
+     *
+     * - "ltr": Test against left-to-right direction.
+     * - "rtl": Test against right-to-left direction.
+     *
+     * If unspecified, tests will run against both directions.
+     */
     directions?: Direction[];
+    /**
+     * The color palette to test against.
+     *
+     * - "light": Test against light palette.
+     * - "dark": Test against dark palette.
+     * - "high-contrast": Test against high contrast light palette.
+     * - "high-contrast-dark": Test against high contrast dark palette.
+     *
+     * If unspecified, tests will run against light theme.
+     */
     palettes?: Palette[];
 }
 /**

package/dist/types/utils/test/playwright/playwright-page.d.ts

@@ -13,5 +13,5 @@ type CustomFixtures = {
  * @returns The modified playwright page with extended functionality.
  */
 export declare function extendPageFixture(page: E2EPage, testInfo: TestInfo): Promise<E2EPage>;
-export declare const test: import("playwright/test").TestType<PlaywrightTestArgs & PlaywrightTestOptions & CustomFixtures, PlaywrightWorkerArgs & PlaywrightWorkerOptions>;
+export declare const test: import("@playwright/test").TestType<PlaywrightTestArgs & PlaywrightTestOptions & CustomFixtures, PlaywrightWorkerArgs & PlaywrightWorkerOptions>;
 export {};

package/dist/types/utils/test/playwright/testExpect.d.ts

@@ -16,6 +16,6 @@ interface CustomMatchers<R = unknown> {
 }
 
 declare namespace PlaywrightTest {
-  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
   interface Matchers<R> extends CustomMatchers<R> {}
 }