@ionic/core 8.0.0-dev.11709632212.139b6f63 → 8.0.0-dev.11711408410.14d71406

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

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

package/dist/types/interface.d.ts

@@ -134,6 +134,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/animation/animation-utils.d.ts

@@ -1,15 +1,3 @@
-import type { AnimationKeyFrames } from './animation-interface';
-/**
- * Web Animations requires hyphenated CSS properties
- * to be written in camelCase when animating
- */
-export declare const processKeyframes: (keyframes: AnimationKeyFrames) => AnimationKeyFrames;
 export declare const getAnimationPrefix: (el: HTMLElement) => string;
 export declare const setStyleProperty: (element: HTMLElement, propertyName: string, value: string | null) => void;
-export declare const removeStyleProperty: (element: HTMLElement, propertyName: string) => void;
-export declare const animationEnd: (el: HTMLElement | null, callback: (ev?: TransitionEvent) => void) => () => void;
-export declare const generateKeyframeRules: (keyframes?: any[]) => string;
-export declare const generateKeyframeName: (keyframeRules: string) => string;
-export declare const getStyleContainer: (element: HTMLElement) => any;
-export declare const createKeyframeStylesheet: (keyframeName: string, keyframeRules: string, element: HTMLElement) => HTMLElement;
 export declare const addClassToArray: (classes: string[] | undefined, className: string | string[] | undefined) => string[];

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 { PlatformConfig } from './platform';
 export interface IonicConfig {
     /**
@@ -14,9 +14,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.

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

@@ -0,0 +1,35 @@
+/**
+ * This query string selects elements that
+ * are eligible to receive focus. We select
+ * interactive elements that meet the following
+ * criteria:
+ * 1. Element does not have a negative tabindex
+ * 2. Element does not have `hidden`
+ * 3. Element does not have `disabled` for non-Ionic components.
+ * 4. Element does not have `disabled` or `disabled="true"` for Ionic components.
+ * 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-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,
+ * a fallback element will be focused.
+ * This fallback is typically an ancestor
+ * container such as a menu or overlay so focus does not
+ * leave the container we are trying to trap focus in.
+ *
+ * If no fallback is specified then we focus the container itself.
+ */
+export declare const focusFirstDescendant: <R extends HTMLElement, T extends HTMLElement>(ref: R, fallbackElement?: T | undefined) => void;
+/**
+ * Focuses the last descendant in a context
+ * that can receive focus. If none exists,
+ * a fallback element will be focused.
+ * This fallback is typically an ancestor
+ * container such as a menu or overlay so focus does not
+ * leave the container we are trying to trap focus in.
+ *
+ * If no fallback is specified then we focus the container itself.
+ */
+export declare const focusLastDescendant: <R extends HTMLElement, T extends HTMLElement>(ref: R, fallbackElement?: T | undefined) => void;

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

@@ -1,3 +1,2 @@
-export * from './form-controller';
 export * from './notch-controller';
 export * from './compare-with-utils';

package/dist/types/utils/hardware-back-button.d.ts

@@ -14,7 +14,7 @@ export type BackButtonEvent = CustomEvent<BackButtonEventDetail>;
  * moment this file is evaluated which could be
  * before the config is set.
  */
-export declare const shoudUseCloseWatcher: () => any;
+export declare const shouldUseCloseWatcher: () => any;
 /**
  * When hardwareBackButton: false in config,
  * we need to make sure we also block the default

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

@@ -60,26 +60,7 @@ export declare const getElementRoot: (el: HTMLElement, fallback?: HTMLElement) =
  */
 export declare const raf: (h: FrameRequestCallback) => number;
 export declare const hasShadowDom: (el: HTMLElement) => boolean;
-export declare const findItemLabel: (componentEl: HTMLElement) => HTMLIonLabelElement | null;
 export declare const focusVisibleElement: (el: HTMLElement) => void;
-/**
- * This method is used for Ionic's input components that use Shadow DOM. In
- * order to properly label the inputs to work with screen readers, we need
- * to get the text content of the label outside of the shadow root and pass
- * it to the input inside of the shadow root.
- *
- * Referencing label elements by id from outside of the component is
- * impossible due to the shadow boundary, read more here:
- * https://developer.salesforce.com/blogs/2020/01/accessibility-for-web-components.html
- *
- * @param componentEl The shadow element that needs the aria label
- * @param inputId The unique identifier for the input
- */
-export declare const getAriaLabel: (componentEl: HTMLElement, inputId: string) => {
-    label: Element | null;
-    labelId: string;
-    labelText: string | null | undefined;
-};
 /**
  * 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/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

@@ -50,12 +50,6 @@ export declare const prepareOverlay: <T extends HTMLIonOverlayElement>(el: T) =>
  */
 export declare const setOverlayId: <T extends HTMLIonOverlayElement>(el: T) => string;
 export declare const createOverlay: <T extends HTMLIonOverlayElement>(tagName: string, opts: object | undefined) => Promise<T>;
-/**
- * Focuses the first descendant in an overlay
- * that can receive focus. If none exists,
- * the entire overlay will be focused.
- */
-export declare const focusFirstDescendant: (ref: Element, overlay: HTMLIonOverlayElement) => void;
 export declare const dismissOverlay: (doc: Document, data: any, role: string | undefined, overlayTag: string, id?: string) => Promise<boolean>;
 /**
  * Returns a list of all overlays in the DOM even if they are not presented.

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

@@ -1,5 +1,6 @@
 export type Mode = 'ios' | 'md';
 export type Direction = 'ltr' | 'rtl';
+export type Theme = 'ios' | 'md' | 'ionic';
 /**
  * The theme to use for the playwright test.
  *
@@ -8,13 +9,14 @@ export type Direction = 'ltr' | 'rtl';
  * - `high-contrast`: The high contrast light theme values.
  * - `high-contrast-dark`: The high contrast dark theme values.
  */
-export type Theme = 'light' | 'dark' | 'high-contrast' | 'high-contrast-dark';
+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;
     theme: Theme;
+    palette: Palette;
+    mode: Mode;
 }
 interface TestUtilities {
     title: TitleFn;
@@ -24,6 +26,11 @@ interface TestUtilities {
 interface TestConfigOption {
     modes?: Mode[];
     directions?: Direction[];
+    palettes?: Palette[];
+    /**
+     * The individual themes (iOS, Material Design and Ionic) to test
+     * against. If unspecified, defaults iOS and Material Design
+     */
     themes?: Theme[];
 }
 /**