@ionic/core 8.8.7-dev.11779467048.1641d05e → 8.8.7-dev.11779921691.1777274a

package/dist/types/utils/badge-position.d.ts

@@ -0,0 +1,106 @@
+interface BadgePositionConfig {
+    /**
+     * The badge element to position.
+     */
+    badge: HTMLElement;
+    /**
+     * The host element. Used to determine text direction (RTL/LTR).
+     *
+     * If omitted and `target` is inside a shadow root, the shadow
+     * root's host is used automatically. If `target` is in the
+     * light DOM, `target` itself is used.
+     *
+     * Required only when the shadow host cannot be inferred from
+     * `target` (e.g. the host is a grandparent of the shadow root).
+     */
+    host?: HTMLElement;
+    /**
+     * The element the badge visually anchors to.
+     *
+     * Examples:
+     *   - Avatar: the host element (avatar itself)
+     *   - Button: `.button-native` within the button
+     *   - Tab button: the `ion-icon` or `ion-label` within the tab button
+     */
+    target: Element;
+    /**
+     * The element that the badge's `position: absolute` resolves
+     * against (its nearest positioned ancestor). Only needed when
+     * this differs from `target`.
+     *
+     * If omitted, the badge is assumed to resolve against `target`.
+     *
+     * Examples:
+     *   - Avatar: omitted (badge resolves against host)
+     *   - Button: .button-inner (has position: relative)
+     *   - Tab button: .button-inner (has position: relative)
+     */
+    relativeTo?: Element;
+    /**
+     * If `true`, clamps the badge's vertical position so it does
+     * not extend past the top or bottom edge of `target`.
+     *
+     * Defaults to `true`.
+     */
+    clamp?: boolean;
+    /**
+     * If `true`, the badge overlaps the target's inline-end edge by a fixed
+     * amount, with the top/bottom edge aligned to the target's top/bottom edge.
+     *
+     * If `false` (default), the badge is positioned at the corner of the target
+     * using arc-based math.
+     *
+     * Set to `true` for non-round targets like tab button icons.
+     * Omit (or `false`) for targets that use corner positioning, like avatars,
+     * buttons, and tab button labels.
+     */
+    anchorToEdge?: boolean;
+}
+/**
+ * Manages the lifecycle of a badge observer for a component.
+ * Handles setup, cleanup, and slot change detection so each
+ * component only needs to define how to build its config.
+ */
+interface BadgeManager {
+    init: () => void;
+    destroy: () => void;
+    onSlotChanged: () => void;
+}
+/**
+ * Positions a badge relative to a target element.
+ *
+ * Two modes are selected via `anchorToEdge`:
+ *
+ * - Arc-based (default, `anchorToEdge: false`): Places the badge at the
+ *   45 degree point on the target's corner arc using `borderRadius * 0.2929`.
+ *   Used for avatars, buttons, and tab button labels.
+ *
+ * - Fixed overlap (`anchorToEdge: true`): Positions the badge so it overlaps
+ *   the target's inline-end edge by `OVERLAP` pixels, with the top/bottom edge
+ *   aligned to the target's top/bottom edge. Used for tab button icons.
+ *
+ * If `relativeTo` is provided, the position accounts for the delta between
+ * the target and the badge's positioned ancestor.
+ *
+ * @param config The configuration for badge positioning
+ */
+export declare function positionBadge(config: BadgePositionConfig): void;
+export interface BadgeObserver {
+    disconnect: () => void;
+}
+/**
+ * Creates a ResizeObserver that repositions the badge whenever
+ * the target element changes size.
+ *
+ * @param config The configuration for badge positioning and observation
+ * @returns BadgeObserver
+ */
+export declare function createBadgeObserver(config: BadgePositionConfig): BadgeObserver;
+/**
+ * Creates a BadgeManager for a host element.
+ *
+ * @param host The element that has the slotted badge.
+ * @param getConfig A function that returns the config for the badge observer.
+ */
+export declare function createBadgeManager(host: HTMLElement, getConfig: () => Omit<BadgePositionConfig, 'badge'> | undefined): BadgeManager;
+export {};

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

@@ -9,6 +9,11 @@ export interface IonicConfig {
      * Can be useful to make ionic smoother in slow devices, when animations can't run smoothly.
      */
     animated?: boolean;
+    /**
+     * When it's set to `false`, it disables the form highlight effect across the app.
+     * Defaults to `false`.
+     */
+    formHighlight?: boolean;
     /**
      * When it's set to `false`, it disables all material-design ripple-effects across the app.
      * Defaults to `true`.
@@ -298,6 +303,7 @@ export interface IonicConfig {
     inputBlurring?: boolean;
     scrollAssist?: boolean;
     hideCaretOnScroll?: boolean;
+    customTheme?: any;
     persistConfig?: boolean;
     _forceStatusbarPadding?: boolean;
     _testing?: boolean;

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

@@ -1,5 +1,7 @@
 import type { EventEmitter } from '../stencil-public-runtime';
 import type { Side } from '../components/menu/menu-interface';
+import type { RouterDirection } from '../components/router/utils/interface';
+import type { AnimationBuilder } from '../interface';
 export declare const transitionEndAsync: (el: HTMLElement | null, expectedDuration?: number) => Promise<unknown>;
 /**
  * Waits for a component to be ready for
@@ -14,6 +16,12 @@ export declare const transitionEndAsync: (el: HTMLElement | null, expectedDurati
  * el.componentOnReady yourself.
  */
 export declare const componentOnReady: (el: any, callback: any) => void;
+/**
+ * Promise-based wrapper around componentOnReady. Use when you need to await
+ * component readiness before accessing internal refs (e.g. in early lifecycle
+ * hooks like Vue onMounted with the custom elements build).
+ */
+export declare const waitForComponentReady: <T extends Element>(el: T) => Promise<T>;
 /**
  * This functions checks if a Stencil component is using
  * the lazy loaded build of Stencil. Returns `true` if
@@ -119,3 +127,11 @@ export declare const shallowEqualStringMap: (map1: {
  * Checks input for usable number. Not NaN and not Infinite.
  */
 export declare const isSafeNumber: (input: unknown) => input is number;
+export declare const openURL: (url: string | undefined | null, ev: Event | undefined | null, direction: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>;
+/**
+ * Deep merges two objects, with source properties overriding target properties
+ * @param target The target object to merge into
+ * @param source The source object to merge from
+ * @returns The merged object
+ */
+export declare const deepMerge: (target: any, source: any) => any;

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

@@ -3,9 +3,9 @@ interface IsPlatformSignature {
     (plt: Platforms): boolean;
     (win: Window, plt: Platforms): boolean;
 }
-export declare const getPlatforms: (win?: any) => ("ios" | "ipad" | "iphone" | "android" | "phablet" | "tablet" | "cordova" | "capacitor" | "electron" | "pwa" | "mobile" | "mobileweb" | "desktop" | "hybrid")[];
+export declare const getPlatforms: (win?: any) => ("ipad" | "iphone" | "ios" | "android" | "phablet" | "tablet" | "cordova" | "capacitor" | "electron" | "pwa" | "mobile" | "mobileweb" | "desktop" | "hybrid")[];
 export declare const isPlatform: IsPlatformSignature;
-export declare const setupPlatforms: (win?: any) => ("ios" | "ipad" | "iphone" | "android" | "phablet" | "tablet" | "cordova" | "capacitor" | "electron" | "pwa" | "mobile" | "mobileweb" | "desktop" | "hybrid")[];
+export declare const setupPlatforms: (win?: any) => ("ipad" | "iphone" | "ios" | "android" | "phablet" | "tablet" | "cordova" | "capacitor" | "electron" | "pwa" | "mobile" | "mobileweb" | "desktop" | "hybrid")[];
 export declare const testUserAgent: (win: Window, expr: RegExp) => boolean;
 export type PlatformConfig = Partial<typeof PLATFORMS_MAP>;
 declare const PLATFORMS_MAP: {

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

@@ -1,5 +1,7 @@
-import type { RouterDirection } from '../components/router/utils/interface';
-import type { AnimationBuilder, Color, CssClassMap } from '../interface';
+import type { Color, CssClassMap } from '../interface';
+import type { NumberStringKeys } from '../themes/themes.interfaces';
+export declare const CSS_PROPS_PREFIX = "--ion-";
+export declare const CSS_ROOT_SELECTOR = ":root";
 /**
  * Checks if an element has a parent matching the specified selector.
  * This handles an element in both light DOM and shadow DOM contexts.
@@ -16,4 +18,197 @@ export declare const hostContext: (selector: string, el: HTMLElement) => boolean
 export declare const createColorClasses: (color: Color | undefined | null, cssClassMap: CssClassMap) => CssClassMap;
 export declare const getClassList: (classes: string | (string | null | undefined)[] | undefined) => string[];
 export declare const getClassMap: (classes: string | string[] | undefined) => CssClassMap;
-export declare const openURL: (url: string | undefined | null, ev: Event | undefined | null, direction: RouterDirection, animation?: AnimationBuilder) => Promise<boolean>;
+/**
+ * Gets and merges custom themes based on mode
+ * @param customTheme The custom theme
+ * @param mode The current mode (ios | md)
+ * @returns The merged custom theme
+ */
+export declare const getCustomTheme: (customTheme: any, mode: string) => any;
+/**
+ * Flattens the theme object into CSS custom properties
+ * @param theme The theme object to flatten
+ * @param prefix The CSS prefix to use (e.g., '--ion-')
+ * @returns CSS string with custom properties
+ */
+export declare const generateCSSVars: (theme: any, prefix?: string) => string | undefined;
+/**
+ * Generates a CSS class containing the CSS variables for each color
+ * in the theme. Each color has generic bold and subtle variables that are mapped
+ * to the specific color's bold and subtle variables. The bold colors will temporarily
+ * include a fallback to remove the bold prefix. For example, the primary
+ * color will return the following CSS class:
+ *
+ * ```css
+ * :root .ion-color-primary {
+ *   --ion-color-base: var(--ion-color-primary, var(--ion-color-primary-bold));
+ *   --ion-color-base-rgb: var(--ion-color-primary-rgb, var(--ion-color-primary-bold-rgb));
+ *   --ion-color-contrast: var(--ion-color-primary-contrast, var(--ion-color-primary-bold-contrast));
+ *   --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, var(--ion-color-primary-bold-contrast-rgb));
+ *   --ion-color-shade: var(--ion-color-primary-shade, var(--ion-color-primary-bold-shade));
+ *   --ion-color-tint: var(--ion-color-primary-tint, var(--ion-color-primary-bold-tint));
+ *   --ion-color-foreground: var(--ion-color-primary, var(--ion-color-primary-foreground, var(--ion-color-primary-bold-foreground)));
+ *
+ *   --ion-color-subtle-base: var(--ion-color-primary-subtle);
+ *   --ion-color-subtle-base-rgb: var(--ion-color-primary-subtle-rgb);
+ *   --ion-color-subtle-contrast: var(--ion-color-primary-subtle-contrast);
+ *   --ion-color-subtle-contrast-rgb: var(--ion-color-primary-subtle-contrast-rgb);
+ *   --ion-color-subtle-shade: var(--ion-color-primary-subtle-shade);
+ *   --ion-color-subtle-tint: var(--ion-color-primary-subtle-tint);
+ *   --ion-color-subtle-foreground: var(--ion-color-primary-subtle-foreground);
+ * }
+ * ```
+ *
+ * @param theme The theme object containing color definitions
+ * @returns CSS string with .ion-color-{colorName} utility classes
+ */
+export declare const generateColorClasses: (theme: any) => string;
+/**
+ * Creates a style element and injects its CSS into a target element
+ * @param css The CSS string to inject
+ * @param target The target element to inject into
+ */
+export declare const injectCSS: (css: string, target?: Element | ShadowRoot) => void;
+/**
+ * Generates global CSS variables from a theme object
+ * @param theme The theme object to generate CSS for
+ * @returns The generated CSS string
+ */
+export declare const generateGlobalThemeCSS: (theme: any) => string;
+/**
+ * Applies the global theme from the provided base theme and user theme
+ * @param baseTheme The default theme
+ * @param userTheme The user's custom theme (optional)
+ * @returns The combined theme object (or base theme if no user theme was provided)
+ */
+export declare const applyGlobalTheme: (baseTheme: any, userTheme?: any) => any;
+/**
+ * Generates component's themed CSS class with CSS variables
+ * from its theme object
+ * @param componentTheme The component's object to generate CSS for (e.g., IonChip { })
+ * @param components An object mapping component names (e.g. `IonChip`) to a nested
+ * design-token configuration. Each configuration can contain arbitrary levels of
+ * token groups (such as `size`, `state`, `shape`, `variant`, etc.), where leaf values
+ * are CSS-compatible values. The structure is recursively flattened into CSS custom
+ * properties using kebab-case keys and an `--ion-<component>-` prefix.
+ *
+ * Example:
+ * ```json
+ * {
+ *   IonChip: {
+ *     size: { small: { height: "24px" } },
+ *     state: { disabled: { opacity: "0.4" } }
+ *   }
+ * }
+ * ```
+ *
+ * Becomes:
+ * ```css
+ * ion-chip {
+ *   --ion-chip-size-small-height: 24px;
+ *   --ion-chip-state-disabled-opacity: 0.4;
+ * }
+ * ```
+ * @returns string containing the component's themed CSS variables
+ */
+export declare const generateComponentsThemeCSS: (components: any) => string;
+/**
+ * Applies a component theme to an element if it exists in the custom theme
+ * @param element The element to apply the theme to
+ * @returns true if theme was applied, false otherwise
+ */
+export declare const applyComponentsTheme: (theme: any) => any;
+/**
+ * Converts a hex color to a string of RGB comma-separated values.
+ *
+ * @param hex Hex color (e.g. `'#ffffff'` or `'#fff'`)
+ *
+ * @returns RGB string (e.g. `'255, 255, 255'`)
+ */
+export declare const hexToRgb: (hex: string) => string;
+/**
+ * Mixes two hex colors by a given weight percentage and returns
+ * it as a hex color.
+ *
+ * @param baseColor Base color (e.g. `'#0054e9'`)
+ * @param mixColor Color to mix in (e.g. `'#000000'` or `'#fff'`)
+ * @param weight Weight percentage as string - how much of mixColor to mix into baseColor (e.g. `'12%'`)
+ *
+ * @returns Mixed hex color (e.g. `'#004acd'`)
+ */
+export declare const mix: (baseColor: string, mixColor: string, weight: string) => string;
+/**
+ * Mimics the Sass `rgba` function logic to construct CSS rgba() values.
+ *
+ * @internal
+ * @param colorRgb The RGB color components as a string (e.g., '255, 0, 0').
+ * @param alpha The opacity value (0 to 1).
+ * @returns A string containing the CSS rgba() function call.
+ */
+export declare function rgba(colorRgb: string, alpha: number | string): string;
+interface ColorOptions {
+    alpha?: number | string | null;
+    subtle?: boolean;
+}
+/**
+ * Mimics the Ionic Framework `current-color` function logic to construct CSS color values.
+ *
+ * @internal
+ * @param variation The color variation (e.g., 'primary', 'secondary', 'base').
+ * @param alpha The opacity value (0 to 1). If null, returns the full color variable.
+ * @param subtle If true, uses the '--ion-color-subtle-' prefix.
+ * @returns A string containing the CSS value (e.g., 'var(--ion-color-primary)' or 'rgba(var(--ion-color-primary-rgb), 0.16)').
+ */
+export declare function currentColor(variation: string, options?: ColorOptions): string;
+export declare function ionColor(name: string, variation: string, options?: ColorOptions): string;
+/**
+ * Mimics the CSS `clamp` function logic.
+ *
+ * @internal
+ * @param min The minimum value
+ * @param val The preferred value
+ * @param max The maximum value
+ * @returns A string containing the CSS clamp() function call (e.g., 'clamp(1rem, 2vw, 3rem)').
+ */
+export declare function clamp(min: number | string, val: number | string, max: number | string): string;
+/**
+ * Generates a series of color steps between a base color and a mix color.
+ *
+ * @param baseColor Base color (e.g. `'#0054e9'`)
+ * @param mixColor Color to mix in (e.g. `'#000000'` or `'#fff'`)
+ *
+ * @internal
+ * @returns An object containing the generated color steps
+ */
+export declare const generateColorSteps: (baseColor: string, mixColor: string) => NumberStringKeys;
+/**
+ * Converts a pixel value to a dynamic unit (defaulting to rem).
+ *
+ * Examples based on a root font size of 16px:
+ * - `dynamicFont('16px', 16)` returns `'1rem'`
+ * - `dynamicFont('16px', 20, 'em')` returns `'1.25em'`
+ *
+ * @internal
+ * @param configRootFontSize - The root font size from the theme config.
+ * @param size - The numeric pixel value.
+ * @param unit - The CSS unit string.
+ * @returns The calculated CSS value string.
+ */
+export declare const dynamicFont: (configRootFontSize: string | number, size: number, unit?: string | undefined) => string;
+/**
+ * Converts a pixel value to a dynamic unit (defaulting to rem)
+ * but imposes a minimum font size using CSS max().
+ *
+ * Examples based on a root font size of 16px:
+ * - `dynamicFontMin('16px', 0.8, 11)` returns `'max(8.8px, 0.6875rem)'`
+ * - A minimum of 80% of 11px = 8.8px, but the rem value scales with root font size
+ *
+ * @internal
+ * @param configRootFontSize - The root font size from the theme config.
+ * @param minScale - The minimum scale of the font (e.g. 0.8 for 80%).
+ * @param size - The numeric pixel value.
+ * @param unit - The CSS unit string.
+ * @returns A string containing the CSS max() function with the minimum pixel value and the dynamic font value (e.g., 'max(8.8px, 0.6875rem)').
+ */
+export declare const dynamicFontMin: (configRootFontSize: string | number, minScale: number, size: number, unit?: string | undefined) => string;
+export {};