voyager-ionic-core 8.0.0-beta.2 → 8.0.0-rc.0

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

@@ -1,5 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import type { Color, StyleEventDetail } from '../../interface';
+import type { Color } from '../../interface';
 import type { TextareaChangeEventDetail, TextareaInputEventDetail } from './textarea-interface';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -187,11 +187,6 @@ export declare class Textarea implements ComponentInterface {
      * the user clears the textarea by performing a keydown event.
      */
     ionInput: EventEmitter<TextareaInputEventDetail>;
-    /**
-     * Emitted when the styles change.
-     * @internal
-     */
-    ionStyle: EventEmitter<StyleEventDetail>;
     /**
      * Emitted when the input loses focus.
      */

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

@@ -70,7 +70,7 @@ export declare class Toggle implements ComponentInterface {
     justify: 'start' | 'end' | 'space-between';
     /**
      * How to control the alignment of the toggle and label on the cross axis.
-     * ``"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.
+     * `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.
      * `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
      */
     alignment: 'start' | 'center';

package/dist/types/components.d.ts

@@ -1287,6 +1287,25 @@ export namespace Components {
          */
         "value"?: string | number | null;
     }
+    interface IonInputPasswordToggle {
+        /**
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+         */
+        "color"?: Color;
+        /**
+          * The icon that can be used to represent hiding a password. If not set, the "eyeOff" Ionicon will be used.
+         */
+        "hideIcon"?: string;
+        /**
+          * The mode determines which platform styles to use.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The icon that can be used to represent showing a password. If not set, the "eye" Ionicon will be used.
+         */
+        "showIcon"?: string;
+        "type": TextFieldTypes;
+    }
     interface IonItem {
         /**
           * If `true`, a button tag will be rendered and the item will be tappable.
@@ -3179,7 +3198,7 @@ export namespace Components {
     }
     interface IonToggle {
         /**
-          * How to control the alignment of the toggle and label on the cross axis. ``"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+          * How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
          */
         "alignment": 'start' | 'center';
         /**
@@ -3796,7 +3815,6 @@ declare global {
         "ionChange": InputChangeEventDetail;
         "ionBlur": FocusEvent;
         "ionFocus": FocusEvent;
-        "ionStyle": StyleEventDetail;
     }
     interface HTMLIonInputElement extends Components.IonInput, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIonInputElementEventMap>(type: K, listener: (this: HTMLIonInputElement, ev: IonInputCustomEvent<HTMLIonInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3812,6 +3830,12 @@ declare global {
         prototype: HTMLIonInputElement;
         new (): HTMLIonInputElement;
     };
+    interface HTMLIonInputPasswordToggleElement extends Components.IonInputPasswordToggle, HTMLStencilElement {
+    }
+    var HTMLIonInputPasswordToggleElement: {
+        prototype: HTMLIonInputPasswordToggleElement;
+        new (): HTMLIonInputPasswordToggleElement;
+    };
     interface HTMLIonItemElement extends Components.IonItem, HTMLStencilElement {
     }
     var HTMLIonItemElement: {
@@ -4512,7 +4536,6 @@ declare global {
     interface HTMLIonTextareaElementEventMap {
         "ionChange": TextareaChangeEventDetail;
         "ionInput": TextareaInputEventDetail;
-        "ionStyle": StyleEventDetail;
         "ionBlur": FocusEvent;
         "ionFocus": FocusEvent;
     }
@@ -4637,6 +4660,7 @@ declare global {
         "ion-infinite-scroll": HTMLIonInfiniteScrollElement;
         "ion-infinite-scroll-content": HTMLIonInfiniteScrollContentElement;
         "ion-input": HTMLIonInputElement;
+        "ion-input-password-toggle": HTMLIonInputPasswordToggleElement;
         "ion-item": HTMLIonItemElement;
         "ion-item-divider": HTMLIonItemDividerElement;
         "ion-item-group": HTMLIonItemGroupElement;
@@ -5966,6 +5990,24 @@ declare namespace LocalJSX {
          */
         "value"?: string | number | null;
     }
+    interface IonInputPasswordToggle {
+        /**
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+         */
+        "color"?: Color;
+        /**
+          * The icon that can be used to represent hiding a password. If not set, the "eyeOff" Ionicon will be used.
+         */
+        "hideIcon"?: string;
+        /**
+          * The mode determines which platform styles to use.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The icon that can be used to represent showing a password. If not set, the "eye" Ionicon will be used.
+         */
+        "showIcon"?: string;
+    }
     interface IonItem {
         /**
           * If `true`, a button tag will be rendered and the item will be tappable.
@@ -7114,7 +7156,7 @@ declare namespace LocalJSX {
         /**
           * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
          */
-        "autocapitalize": string;
+        "autocapitalize"?: string;
         /**
           * Set the input's autocomplete property.
          */
@@ -7804,7 +7846,7 @@ declare namespace LocalJSX {
     }
     interface IonToggle {
         /**
-          * How to control the alignment of the toggle and label on the cross axis. ``"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+          * How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
          */
         "alignment"?: 'start' | 'center';
         /**
@@ -7901,6 +7943,7 @@ declare namespace LocalJSX {
         "ion-infinite-scroll": IonInfiniteScroll;
         "ion-infinite-scroll-content": IonInfiniteScrollContent;
         "ion-input": IonInput;
+        "ion-input-password-toggle": IonInputPasswordToggle;
         "ion-item": IonItem;
         "ion-item-divider": IonItemDivider;
         "ion-item-group": IonItemGroup;
@@ -7999,6 +8042,7 @@ declare module "@stencil/core" {
             "ion-infinite-scroll": LocalJSX.IonInfiniteScroll & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollElement>;
             "ion-infinite-scroll-content": LocalJSX.IonInfiniteScrollContent & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollContentElement>;
             "ion-input": LocalJSX.IonInput & JSXBase.HTMLAttributes<HTMLIonInputElement>;
+            "ion-input-password-toggle": LocalJSX.IonInputPasswordToggle & JSXBase.HTMLAttributes<HTMLIonInputPasswordToggleElement>;
             "ion-item": LocalJSX.IonItem & JSXBase.HTMLAttributes<HTMLIonItemElement>;
             "ion-item-divider": LocalJSX.IonItemDivider & JSXBase.HTMLAttributes<HTMLIonItemDividerElement>;
             "ion-item-group": LocalJSX.IonItemGroup & JSXBase.HTMLAttributes<HTMLIonItemGroupElement>;

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

@@ -21,7 +21,7 @@ export declare const focusableQueryString = "[tabindex]:not([tabindex^=\"-\"]):n
  *
  * 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;
+export declare const focusFirstDescendant: <R extends HTMLElement, T extends HTMLElement>(ref: R, fallbackElement?: T) => void;
 /**
  * Focuses the last descendant in a context
  * that can receive focus. If none exists,
@@ -32,4 +32,4 @@ export declare const focusFirstDescendant: <R extends HTMLElement, T extends HTM
  *
  * 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;
+export declare const focusLastDescendant: <R extends HTMLElement, T extends HTMLElement>(ref: R, fallbackElement?: T) => void;

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

@@ -61,24 +61,6 @@ 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 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.d.ts

@@ -86,8 +86,8 @@ export declare const getPresentedOverlay: (doc: Document, overlayTag?: string, i
  * for main content.
  */
 export declare const setRootAriaHidden: (hidden?: boolean) => void;
-export declare const present: <OverlayPresentOptions>(overlay: OverlayInterface, name: keyof IonicConfig, iosEnterAnimation: AnimationBuilder, mdEnterAnimation: AnimationBuilder, opts?: OverlayPresentOptions | undefined) => Promise<void>;
-export declare const dismiss: <OverlayDismissOptions>(overlay: OverlayInterface, data: any | undefined, role: string | undefined, name: keyof IonicConfig, iosLeaveAnimation: AnimationBuilder, mdLeaveAnimation: AnimationBuilder, opts?: OverlayDismissOptions | undefined) => Promise<boolean>;
+export declare const present: <OverlayPresentOptions>(overlay: OverlayInterface, name: keyof IonicConfig, iosEnterAnimation: AnimationBuilder, mdEnterAnimation: 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;
 export declare const isCancel: (role: string | undefined) => boolean;

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

@@ -8,13 +8,13 @@ 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;
 }
 interface TestUtilities {
     title: TitleFn;
@@ -24,7 +24,7 @@ interface TestUtilities {
 interface TestConfigOption {
     modes?: Mode[];
     directions?: Direction[];
-    themes?: Theme[];
+    palettes?: Palette[];
 }
 /**
  * Given a config generate an array of test variants.