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

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

@@ -1,10 +1,11 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { Color } from '../../interface';
+import type { IonChipFill, IonChipHue, IonChipSize, IonChipShape } from './chip.interfaces';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 export declare class Chip implements ComponentInterface {
+    el: HTMLElement;
     /**
      * The color to use from your application's color palette.
      * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -13,8 +14,19 @@ export declare class Chip implements ComponentInterface {
     color?: Color;
     /**
      * Display an outline style button.
+     *
+     * @deprecated - Use fill="outline" instead
      */
     outline: boolean;
+    /**
+     * The fill for the chip.
+     *
+     * Set to `"outline"` for a chip with a border and background.
+     * Set to `"solid"` for a chip with a background.
+     *
+     * Defaults to `"solid"` if both the fill property and theme config are unset.
+     */
+    fill?: IonChipFill;
     /**
      * If `true`, the user cannot interact with the chip.
      */
@@ -23,25 +35,44 @@ export declare class Chip implements ComponentInterface {
      * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for
      * a chip with muted, subtle colors.
      *
-     * Only applies to the `ionic` theme.
+     * Defaults to `"subtle"` if both the hue property and theme config are unset.
+     */
+    hue?: IonChipHue;
+    /**
+     * Set to `"soft"` for a chip with slightly rounded corners,
+     * `"round"` for a chip with fully rounded corners,
+     * or `"rectangular"` for a chip without rounded corners.
+     *
+     * Defaults to `"round"` if both the shape property and theme config are unset.
      */
-    hue?: 'bold' | 'subtle';
+    shape?: IonChipShape;
     /**
-     * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully
-     * rounded corners, or `"rectangular"` for a chip without rounded corners.
-     * Defaults to `"round"` for the `"ionic"` theme and `"soft"` for all other themes.
+     * Set to `"small"` for a chip with less height and padding,
+     * or `"large"` for a chip with more height and padding.
+     *
+     * Defaults to `"large"` if both the size property and theme config are unset.
      */
-    shape?: 'soft' | 'round' | 'rectangular';
+    size?: IonChipSize;
+    componentDidLoad(): void;
     /**
-     * Set the shape based on the theme
+     * Gets the chip fill. Uses the `fill` property if set, otherwise
+     * checks the theme config. Defaults to `solid` if neither is set.
      */
-    private getShape;
+    get fillValue(): IonChipFill;
     /**
-     * Set to `"small"` for a chip with less height and padding.
-     *
-     * Defaults to `"large"` for the ionic theme, and  undefined for all other themes.
+     * Gets the chip hue. Uses the `hue` property if set, otherwise
+     * checks the theme config. Defaults to `subtle` if neither is set.
+     */
+    get hueValue(): IonChipHue;
+    /**
+     * Gets the chip shape. Uses the `shape` property if set, otherwise
+     * checks the theme config. Defaults to `round` if neither is set.
+     */
+    get shapeValue(): IonChipShape;
+    /**
+     * Gets the chip size. Uses the `size` property if set, otherwise
+     * checks the theme config. Defaults to `large` if neither is set.
      */
-    size?: 'small' | 'large';
-    private getSize;
+    get sizeValue(): IonChipSize;
     render(): any;
 }

package/dist/types/components/chip/chip.interfaces.d.ts

@@ -0,0 +1,97 @@
+import type { IonPadding, IonMargin } from '../../themes/themes.interfaces';
+export type IonChipRecipe = {
+    letterSpacing?: string | number;
+    lineHeight?: string | number;
+    margin?: IonMargin;
+    padding?: IonPadding;
+    gap?: string | number;
+    font?: {
+        weight?: string | number;
+    };
+    hue?: {
+        [K in IonChipHue]?: IonChipFillDefinition;
+    };
+    size?: {
+        [K in IonChipSize]?: IonChipSizeDefinition;
+    };
+    shape?: {
+        [K in IonChipShape]?: IonChipShapeDefinition;
+    };
+    state?: {
+        disabled?: {
+            opacity?: string | number;
+        };
+        focus?: {
+            ring?: {
+                color?: string;
+                style?: string;
+                width?: string | number;
+            };
+        };
+    };
+    icon?: IonChipIconDefinition;
+    avatar?: IonChipAvatarDefinition;
+};
+type IonChipFillDefinition = {
+    [K in IonChipFill]?: IonChipStateDefinition & {
+        semantic?: IonChipStateDefinition;
+    };
+};
+type IonChipStateDefinition = {
+    default?: IonChipColorDefinition;
+    hover?: IonChipColorDefinition;
+    focus?: IonChipColorDefinition;
+    activated?: IonChipColorDefinition;
+    disabled?: IonChipColorDefinition;
+};
+type IonChipColorDefinition = {
+    background?: string;
+    color?: string;
+    border?: {
+        color?: string;
+        style?: string;
+        width?: string | number;
+    };
+};
+type IonChipSizeDefinition = {
+    minHeight?: string | number;
+    font?: {
+        size?: string | number;
+    };
+};
+type IonChipShapeDefinition = {
+    border?: {
+        radius?: string | number;
+    };
+};
+type IonChipMediaDefinition = {
+    /** Targets `:first-child` */
+    leading?: {
+        margin?: IonMargin;
+    };
+    /** Targets `:last-child` */
+    trailing?: {
+        margin?: IonMargin;
+    };
+};
+type IonChipIconDefinition = IonChipMediaDefinition & {
+    color?: string;
+    font?: {
+        size?: string | number;
+    };
+};
+type IonChipAvatarDefinition = IonChipMediaDefinition & {
+    height?: string | number;
+    width?: string | number;
+};
+export type IonChipConfig = {
+    fill?: IonChipFill;
+    hue?: IonChipHue;
+    size?: IonChipSize;
+    shape?: IonChipShape;
+};
+export type IonChipFill = 'outline' | 'solid';
+export type IonChipHue = 'bold' | 'subtle';
+export type IonChipSize = 'small' | 'large';
+export type IonChipShape = 'soft' | 'round' | 'rectangular';
+export {};

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

@@ -1,9 +1,8 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import type { Color } from '../../interface';
-import type { ScrollBaseDetail, ScrollDetail } from './content-interface';
+import type { ScrollBaseDetail, ScrollDetail } from './content.interfaces';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @slot - Content is placed in the scrollable area if provided without a slot.
  * @slot fixed - Should be used for fixed content that should not scroll.

package/dist/types/components/content/{content-interface.d.ts → content.interfaces.d.ts}

@@ -1,4 +1,5 @@
 import type { GestureDetail } from '../../interface';
+import type { IonPadding } from '../../themes/themes.interfaces';
 export interface ScrollBaseDetail {
     isScrolling: boolean;
 }
@@ -14,3 +15,20 @@ export interface ScrollBaseCustomEvent extends CustomEvent {
 export interface ScrollCustomEvent extends ScrollBaseCustomEvent {
     detail: ScrollDetail;
 }
+export interface IonContentRecipe {
+    default: {
+        background?: string;
+        color?: string;
+    };
+    semantic: {
+        default: {
+            background?: string;
+            color?: string;
+        };
+    };
+    font?: {
+        family?: string;
+    };
+    overflow?: string;
+    padding?: IonPadding;
+}

package/dist/types/components/item-divider/item-divider.d.ts

@@ -2,7 +2,6 @@ import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { Color } from '../../interface';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @slot - Content is placed between the named slots if provided without a slot.
  * @slot start - Content is placed to the left of the divider text in LTR, and to the right in RTL.

package/dist/types/components/item-divider/item-divider.interfaces.d.ts

@@ -0,0 +1,132 @@
+import type { IonPadding, IonMargin } from '../../themes/themes.interfaces';
+export type IonItemDividerRecipe = {
+    background?: string;
+    color?: string;
+    minHeight?: string;
+    padding?: IonPadding;
+    inner?: {
+        padding?: IonPadding;
+    };
+    border?: {
+        bottom?: string;
+    };
+    font?: {
+        size?: string;
+        weight?: string;
+    };
+    /** Targets `[slot="start"]` */
+    start?: {
+        /** Targets `::slotted([slot="start"])` */
+        slotted?: {
+            margin?: IonMargin;
+        };
+    };
+    /** Targets `[slot="end"]` */
+    end?: {
+        /** Targets `::slotted([slot="end"])` */
+        slotted?: {
+            margin?: IonMargin;
+        };
+    };
+    /** Targets `::slotted(ion-label)` */
+    label?: {
+        margin?: IonMargin;
+    };
+    /** Targets `::slotted(ion-icon)` */
+    icon?: {
+        font?: {
+            size?: string;
+        };
+        /** Targets `[slot="start"]` */
+        start?: {
+            /** Targets `::slotted(ion-icon[slot="start"])` */
+            slotted?: {
+                margin?: IonMargin;
+            };
+        };
+        /** Targets `[slot="end"]` */
+        end?: {
+            /** Targets `::slotted(ion-icon[slot="end"])` */
+            slotted?: {
+                margin?: IonMargin;
+            };
+        };
+        /** Default non-semantic states */
+        default?: {
+            color?: string;
+        };
+        /** Any of the semantic colors like primary, secondary, etc. */
+        semantic?: {
+            default?: {
+                color?: string;
+            };
+        };
+    };
+    /** Targets `::slotted(ion-note)` */
+    note?: {
+        align?: {
+            self?: string;
+        };
+        font?: {
+            size?: string;
+        };
+        margin?: IonMargin;
+        padding?: IonPadding;
+    };
+    /** Targets `::slotted(ion-avatar)` */
+    avatar?: {
+        height?: string;
+        width?: string;
+        margin?: IonMargin;
+        /** Targets `[slot="start"]` */
+        start?: {
+            /** Targets `::slotted(ion-avatar[slot="start"])` */
+            slotted?: {
+                margin?: IonMargin;
+            };
+        };
+        /** Targets `[slot="end"]` */
+        end?: {
+            /** Targets `::slotted(ion-avatar[slot="end"])` */
+            slotted?: {
+                margin?: IonMargin;
+            };
+        };
+    };
+    /** Targets `::slotted(ion-thumbnail)` */
+    thumbnail?: {
+        height?: string;
+        width?: string;
+        margin?: IonMargin;
+        /** Targets `[slot="start"]` */
+        start?: {
+            /** Targets `::slotted(ion-thumbnail[slot="start"])` */
+            slotted?: {
+                margin?: IonMargin;
+            };
+        };
+        /** Targets `[slot="end"]` */
+        end?: {
+            /** Targets `::slotted(ion-thumbnail[slot="end"])` */
+            slotted?: {
+                margin?: IonMargin;
+            };
+        };
+    };
+    /** Targets `::slotted(p)` */
+    paragraph?: {
+        color?: string;
+        overflow?: string;
+        margin?: IonMargin;
+        font?: {
+            size?: string;
+        };
+        text?: {
+            overflow?: string;
+        };
+        /** Targets `::slotted(p:last-child)` */
+        trailing?: {
+            margin?: IonMargin;
+        };
+    };
+};

package/dist/types/components/item-sliding/item-sliding.d.ts

@@ -29,9 +29,6 @@ export declare class ItemSliding implements ComponentInterface {
     private contentEl;
     private initialContentScrollY;
     private mutationObserver?;
-    private leftExpandableBaseWidth;
-    private rightExpandableBaseWidth;
-    private isIonicTheme;
     el: HTMLIonItemSlidingElement;
     state: SlidingState;
     /**
@@ -99,27 +96,15 @@ export declare class ItemSliding implements ComponentInterface {
      */
     private getSwipeThreshold;
     /**
-     * Native (ios/md) full swipe: off-screen → fire swipe → return.
-     * Ionic theme uses `animateIonicFullSwipe` instead (see `onEndIonic`).
+     * Animate the item through a full swipe sequence: off-screen → trigger action → return.
+     * This is used when an expandable option is swiped beyond the threshold.
      */
     private animateFullSwipe;
-    private queryExpandableOption;
-    private getExpandableOption;
-    private getOpenDirectionFromAmount;
-    private getOptionsWidthForDirection;
-    private getExpandableBaseWidth;
-    private setIonicExpandableWidth;
-    private resetIonicExpandableOptions;
-    private updateIonicExpandableFromOpenAmount;
-    private animateIonicFullSwipe;
     private updateOptions;
     private canStart;
     private onStart;
     private onMove;
     private onEnd;
-    private restoreContentScrollAfterSlide;
-    private onEndNative;
-    private onEndIonic;
     private calculateOptsWidth;
     private setOpenAmount;
     private getSlidingRatioSync;

package/dist/types/components/progress-bar/progress-bar.d.ts

@@ -1,8 +1,8 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { Color } from '../../interface';
+import type { IonProgressBarShape } from './progress-bar.interfaces';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  *
  * @part progress - The progress bar that shows the current value when `type` is `"determinate"` and slides back and forth when `type` is `"indeterminate"`.
  * @part stream - The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `"determinate"`.
@@ -40,9 +40,14 @@ export declare class ProgressBar implements ComponentInterface {
      * Set to `"round"` for a progress bar with rounded corners, or `"rectangular"`
      * for a progress bar without rounded corners.
      *
-     * Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+     * Defaults to `"round"` if both the shape property and theme config are unset.
      */
-    shape?: 'round' | 'rectangular';
-    private getShape;
+    shape?: IonProgressBarShape;
+    /**
+     * Gets the progress bar shape. Uses the `shape` property if set,
+     * otherwise checks the theme config. Defaults to `round` if
+     * neither is set.
+     */
+    get shapeValue(): IonProgressBarShape;
     render(): any;
 }

package/dist/types/components/progress-bar/progress-bar.interfaces.d.ts

@@ -0,0 +1,90 @@
+export type IonProgressBarRecipe = {
+    height?: string | number;
+    indeterminate?: {
+        progress?: {
+            default?: {
+                background?: string;
+            };
+            /** Any of the semantic colors like primary, secondary, etc. */
+            semantic?: {
+                default?: {
+                    background?: string;
+                };
+            };
+        };
+        buffer?: {
+            bar?: {
+                default?: {
+                    background?: string;
+                };
+                /** Any of the semantic colors like primary, secondary, etc. */
+                semantic?: {
+                    default?: {
+                        background?: string;
+                    };
+                };
+                solid?: {
+                    default?: {
+                        background?: string;
+                    };
+                };
+            };
+        };
+    };
+    determinate?: {
+        progress?: {
+            default?: {
+                background?: string;
+            };
+            /** Any of the semantic colors like primary, secondary, etc. */
+            semantic?: {
+                default?: {
+                    background?: string;
+                };
+            };
+        };
+        buffer?: {
+            bar?: {
+                default?: {
+                    background?: string;
+                };
+                /** Any of the semantic colors like primary, secondary, etc. */
+                semantic?: {
+                    default?: {
+                        background?: string;
+                    };
+                };
+                solid?: {
+                    default?: {
+                        background?: string;
+                    };
+                };
+            };
+            circles?: {
+                default?: {
+                    background?: string;
+                };
+                /** Any of the semantic colors like primary, secondary, etc. */
+                semantic?: {
+                    default?: {
+                        background?: string;
+                    };
+                };
+            };
+        };
+    };
+    shape?: {
+        [K in IonProgressBarShape]?: IonProgressBarShapeDefinition;
+    };
+};
+type IonProgressBarShapeDefinition = {
+    border?: {
+        radius?: string | number;
+    };
+};
+export type IonProgressBarConfig = {
+    shape?: IonProgressBarShape;
+};
+export declare const ION_PROGRESS_BAR_SHAPES: readonly ["round", "rectangular"];
+export type IonProgressBarShape = (typeof ION_PROGRESS_BAR_SHAPES)[number];
+export {};

package/dist/types/components/spinner/spinner-configs.d.ts

@@ -1,4 +1,4 @@
-import type { SpinnerConfigs } from './spinner-interface';
+import type { SpinnerDefinitions } from './spinner.interfaces';
 declare const spinners: {
     bubbles: {
         dur: number;
@@ -106,6 +106,6 @@ declare const spinners: {
         };
     };
 };
-export declare const SPINNERS: SpinnerConfigs;
+export declare const SPINNERS: SpinnerDefinitions;
 export type SpinnerTypes = keyof typeof spinners;
 export {};

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

@@ -1,9 +1,9 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { Color } from '../../interface';
 import type { SpinnerTypes } from './spinner-configs';
+import type { SpinnerSize } from './spinner.interfaces';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 export declare class Spinner implements ComponentInterface {
     /**
@@ -32,10 +32,14 @@ export declare class Spinner implements ComponentInterface {
      * Set to `"large"` for a large size.
      * Set to `"xlarge"` for the largest size.
      *
-     * Defaults to `"xsmall"` for the `ionic` theme, undefined for all other themes.
+     * Defaults to `"medium"` if both the size property and theme config are unset.
      */
-    size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+    size?: SpinnerSize;
     private getName;
-    private getSize;
+    /**
+     * Gets the spinner size. Uses the `size` property if set, otherwise
+     * checks the theme config. Defaults to `medium` if neither is set.
+     */
+    get sizeValue(): SpinnerSize;
     render(): any;
 }

package/dist/types/components/spinner/spinner.interfaces.d.ts

@@ -0,0 +1,72 @@
+export interface SpinnerDefinitions {
+    [spinnerName: string]: SpinnerDefinition;
+}
+export interface SpinnerDefinition {
+    dur: number;
+    circles?: number;
+    lines?: number;
+    elmDuration?: boolean;
+    fn: (dur: number, index: number, total: number) => SpinnerData;
+}
+interface SpinnerData {
+    r?: number;
+    y1?: number;
+    y2?: number;
+    cx?: number;
+    cy?: number;
+    style: {
+        [key: string]: string | undefined;
+    };
+    viewBox?: string;
+    transform?: string;
+}
+export type IonSpinnerRecipe = {
+    color?: string;
+    lines?: {
+        stroke?: {
+            width?: string;
+        };
+        small?: {
+            stroke?: {
+                width?: string;
+            };
+        };
+        sharp?: {
+            stroke?: {
+                width?: string;
+            };
+            small?: {
+                stroke?: {
+                    width?: string;
+                };
+            };
+        };
+    };
+    circular?: {
+        stroke?: {
+            width?: string;
+        };
+    };
+    crescent?: {
+        stroke?: {
+            width?: string;
+        };
+    };
+    dots?: {
+        stroke?: {
+            width?: string;
+        };
+    };
+    size?: {
+        [K in SpinnerSize]?: IonSpinnerSizeDefinition;
+    };
+};
+type IonSpinnerSizeDefinition = {
+    width?: string;
+    height?: string;
+};
+export type IonSpinnerConfig = {
+    size?: SpinnerSize;
+};
+export type SpinnerSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export {};

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

@@ -2,7 +2,6 @@ import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { ComponentRef, FrameworkDelegate } from '../../interface';
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 export declare class Tab implements ComponentInterface {
     private loaded;

package/dist/types/components/tab-button/tab-button.d.ts

@@ -8,8 +8,10 @@ import type { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayo
  * @part native - The native HTML anchor element that wraps all child elements.
  */
 export declare class TabButton implements ComponentInterface, AnchorInterface {
+    private hasLoaded;
     private inheritedAttributes;
     el: HTMLElement;
+    private badgeManager;
     /**
      * If `true`, the user cannot interact with the tab button.
      */
@@ -66,6 +68,10 @@ export declare class TabButton implements ComponentInterface, AnchorInterface {
     ionTabButtonClick: EventEmitter<TabButtonClickEventDetail>;
     onTabBarChanged(ev: CustomEvent<TabBarChangedEventDetail>): void;
     componentWillLoad(): void;
+    onLayoutChanged(): void;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
     private getShape;
     private selectTab;
     private get hasLabel();
@@ -73,5 +79,6 @@ export declare class TabButton implements ComponentInterface, AnchorInterface {
     private onKeyUp;
     private onClick;
     private canActivate;
+    private onSlotChanged;
     render(): any;
 }