@ionic/core 8.7.6-dev.11759412372.1f332f62 → 8.7.6-dev.11759493293.13f81b9f

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

@@ -1,4 +1,29 @@
-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) => void;
+export declare const needInputShims: () => boolean;
 export declare const initialize: (userConfig?: IonicConfig) => void;
 export default initialize;

package/dist/types/interface.d.ts

@@ -140,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/stencil-public-runtime.d.ts

@@ -1,4 +1,5 @@
-declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
+type CustomMethodDecorator<T> = (target: object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
+type UnionToIntersection<U> = (U extends any ? (x: U) => void : never) extends (x: infer I) => void ? I : never;
 export interface ComponentDecorator {
     (opts?: ComponentOptions): ClassDecorator;
 }
@@ -151,7 +152,13 @@ export interface StateDecorator {
     (): PropertyDecorator;
 }
 export interface WatchDecorator {
-    (propName: string): CustomMethodDecorator<any>;
+    (propName: any): CustomMethodDecorator<(newValue?: any, oldValue?: any, propName?: any, ...args: any[]) => any | void>;
+}
+export interface PropSerializeDecorator {
+    (propName: any): CustomMethodDecorator<(newValue?: any, propName?: string, ...args: any[]) => string | null>;
+}
+export interface AttrDeserializeDecorator {
+    (propName: any): CustomMethodDecorator<(newValue?: any, propName?: string, ...args: any[]) => any>;
 }
 export interface UserBuildConditionals {
     isDev: boolean;
@@ -233,6 +240,14 @@ export declare const State: StateDecorator;
  * https://stenciljs.com/docs/reactive-data#watch-decorator
  */
 export declare const Watch: WatchDecorator;
+/**
+ * Decorator to serialize a property to an attribute string.
+ */
+export declare const PropSerialize: PropSerializeDecorator;
+/**
+ * Decorator to deserialize an attribute string to a property.
+ */
+export declare const AttrDeserialize: AttrDeserializeDecorator;
 export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
 export type ErrorHandler = (err: any, element?: HTMLElement) => void;
 /**
@@ -349,6 +364,28 @@ export declare function readTask(task: RafCallback): void;
  * Unhandled exception raised while rendering, during event handling, or lifecycles will trigger the custom event handler.
  */
 export declare const setErrorHandler: (handler: ErrorHandler) => void;
+export type MixinFactory = <TBase extends new (...args: any[]) => any>(base: TBase) => abstract new (...args: ConstructorParameters<TBase>) => any;
+/**
+ * Compose multiple mixin classes into a single constructor.
+ * The resulting class has the combined instance types of all mixed-in classes.
+ *
+ * Example:
+ * ```
+ * import { Mixin, MixinFactory } from '@stencil/core';
+ *
+ * const AWrap: MixinFactory = (Base) => {class A extends Base { propA = A }; return A;}
+ * const BWrap: MixinFactory = (Base) => {class B extends Base { propB = B }; return B;}
+ * const CWrap: MixinFactory = (Base) => {class C extends Base { propC = C }; return C;}
+ *
+ * class X extends Mixin(AWrap, BWrap, CWrap) {
+ *   render() { return <div>{this.propA} {this.propB} {this.propC}</div>; }
+ * }
+ * ```
+ *
+ * @param mixinFactories mixin factory functions that return a class which extends from the provided class.
+ * @returns a class that that is composed from extending each of the provided classes in the order they were provided.
+ */
+export declare function Mixin<TMixins extends readonly MixinFactory[]>(...mixinFactories: TMixins): abstract new (...args: any[]) => UnionToIntersection<InstanceType<ReturnType<TMixins[number]>>>;
 /**
  * This file gets copied to all distributions of stencil component collections.
  * - no imports

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.

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/helpers.d.ts

@@ -60,6 +60,17 @@ 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;
 /**
  * This method is used to add a hidden input to a host element that contains

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/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/hydrate/index.d.ts

@@ -7,12 +7,14 @@ export declare function createWindowFromHtml(templateHtml: string, uniqueId: str
  * Serialize a value to a string that can be deserialized later.
  * @param {unknown} value - The value to serialize.
  * @returns {string} A string that can be deserialized later.
+ * @deprecated will be removed in v5. Use `@PropSerialize()` decorator instead.
  */
 export declare function serializeProperty(value: unknown): string | number | boolean;
 /**
  * Deserialize a value from a string that was serialized earlier.
  * @param {string} value - The string to deserialize.
  * @returns {unknown} The deserialized value.
+ * @deprecated will be removed in v5. Use `@AttrDeserialize()` decorator instead.
  */
 export declare function deserializeProperty(value: string): any;
 export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;