@ionic/core 8.8.5 → 8.8.6-dev.11777490150.1970e4f2

package/dist/types/components/card-header/card-header.d.ts

@@ -1,7 +1,8 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { Color } from '../../interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 CardHeader implements ComponentInterface {
     /**
@@ -12,7 +13,7 @@ export declare class CardHeader implements ComponentInterface {
     color?: Color;
     /**
      * If `true`, the card header will be translucent.
-     * Only applies when the mode is `"ios"` and the device supports
+     * Only applies when the theme is `"ios"` and the device supports
      * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
      */
     translucent: boolean;

package/dist/types/components/card-subtitle/card-subtitle.d.ts

@@ -1,7 +1,8 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { Color } from '../../interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 CardSubtitle implements ComponentInterface {
     /**

package/dist/types/components/card-title/card-title.d.ts

@@ -1,7 +1,8 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { Color } from '../../interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 CardTitle implements ComponentInterface {
     /**

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

@@ -2,7 +2,8 @@ import type { ComponentInterface, EventEmitter } from '../../stencil-public-runt
 import type { Color } from '../../interface';
 import type { CheckboxChangeEventDetail } from './checkbox-interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 - The label text to associate with the checkbox. Use the "labelPlacement" property to control where the label is placed relative to the checkbox.
  *
@@ -91,6 +92,14 @@ export declare class Checkbox implements ComponentInterface {
      * submitting if the value is invalid.
      */
     required: boolean;
+    /**
+     * Set to `"soft"` for a checkbox with more rounded corners. Only available when the theme is `"ionic"`.
+     */
+    shape?: 'soft' | 'rectangular';
+    /**
+     * Set to `"small"` for a checkbox with less height and padding.
+     */
+    size?: 'small';
     /**
      * Track validation state for proper aria-live announcements.
      */
@@ -98,9 +107,10 @@ export declare class Checkbox implements ComponentInterface {
     private hasLabelContent;
     private hintTextId?;
     /**
-     * Emitted when the checked property has changed as a result of a user action such as a click.
-     *
-     * This event will not emit when programmatically setting the `checked` property.
+     * Emitted when the checked property has changed
+     * as a result of a user action such as a click.
+     * This event will not emit when programmatically
+     * setting the `checked` property.
      */
     ionChange: EventEmitter<CheckboxChangeEventDetail>;
     /**

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

@@ -1,7 +1,8 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { Color } from '../../interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 {
     /**
@@ -18,5 +19,29 @@ export declare class Chip implements ComponentInterface {
      * If `true`, the user cannot interact with the chip.
      */
     disabled: boolean;
+    /**
+     * 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.
+     */
+    hue?: 'bold' | 'subtle';
+    /**
+     * 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.
+     */
+    shape?: 'soft' | 'round' | 'rectangular';
+    /**
+     * Set the shape based on the theme
+     */
+    private getShape;
+    /**
+     * Set to `"small"` for a chip with less height and padding.
+     *
+     * Defaults to `"large"` for the ionic theme, and  undefined for all other themes.
+     */
+    size?: 'small' | 'large';
+    private getSize;
     render(): any;
 }

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

@@ -1,5 +1,10 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
+/**
+ * @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 Col implements ComponentInterface {
+    el: HTMLIonColElement;
     /**
      * The amount to offset the column, in terms of how many columns it should shift to the end
      * of the total available.
@@ -30,64 +35,106 @@ export declare class Col implements ComponentInterface {
      * to the end of the total available.
      */
     offsetXl?: string;
+    /**
+     * The order of the column, in terms of where the column should position itself in the columns renderer.
+     * If no value is passed, the column order implicit value will be the order in the html structure.
+     */
+    order?: string;
+    /**
+     * The order of the column for xs screens, in terms of where the column should position itself in the columns renderer.
+     * If no value is passed, the column order implicit value will be the order in the html structure.
+     */
+    orderXs?: string;
+    /**
+     * The order of the column for sm screens, in terms of where the column should position itself in the columns renderer.
+     * If no value is passed, the column order implicit value will be the order in the html structure.
+     */
+    orderSm?: string;
+    /**
+     * The order of the column for md screens, in terms of where the column should position itself in the columns renderer.
+     * If no value is passed, the column order implicit value will be the order in the html structure.
+     */
+    orderMd?: string;
+    /**
+     * The order of the column for lg screens, in terms of where the column should position itself in the columns renderer.
+     * If no value is passed, the column order implicit value will be the order in the html structure.
+     */
+    orderLg?: string;
+    /**
+     * The order of the column for xl screens, in terms of where the column should position itself in the columns renderer.
+     * If no value is passed, the column order implicit value will be the order in the html structure.
+     */
+    orderXl?: string;
     /**
      * The amount to pull the column, in terms of how many columns it should shift to the start of
      * the total available.
+     * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
      */
     pull?: string;
     /**
      * The amount to pull the column for xs screens, in terms of how many columns it should shift
      * to the start of the total available.
+     * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
      */
     pullXs?: string;
     /**
      * The amount to pull the column for sm screens, in terms of how many columns it should shift
      * to the start of the total available.
+     * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
      */
     pullSm?: string;
     /**
      * The amount to pull the column for md screens, in terms of how many columns it should shift
      * to the start of the total available.
+     * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
      */
     pullMd?: string;
     /**
      * The amount to pull the column for lg screens, in terms of how many columns it should shift
      * to the start of the total available.
+     * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
      */
     pullLg?: string;
     /**
      * The amount to pull the column for xl screens, in terms of how many columns it should shift
      * to the start of the total available.
+     * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
      */
     pullXl?: string;
     /**
      * The amount to push the column, in terms of how many columns it should shift to the end
      * of the total available.
+     * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
      */
     push?: string;
     /**
      * The amount to push the column for xs screens, in terms of how many columns it should shift
      * to the end of the total available.
+     * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
      */
     pushXs?: string;
     /**
      * The amount to push the column for sm screens, in terms of how many columns it should shift
      * to the end of the total available.
+     * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
      */
     pushSm?: string;
     /**
      * The amount to push the column for md screens, in terms of how many columns it should shift
      * to the end of the total available.
+     * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
      */
     pushMd?: string;
     /**
      * The amount to push the column for lg screens, in terms of how many columns it should shift
      * to the end of the total available.
+     * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
      */
     pushLg?: string;
     /**
      * The amount to push the column for xl screens, in terms of how many columns it should shift
      * to the end of the total available.
+     * @deprecated Use the combination of `size` and `order` properties to achieve the same effect.
      */
     pushXl?: string;
     /**
@@ -122,10 +169,10 @@ export declare class Col implements ComponentInterface {
     sizeXl?: string;
     onResize(): void;
     private getColumns;
-    private calculateSize;
-    private calculatePosition;
-    private calculateOffset;
-    private calculatePull;
-    private calculatePush;
+    private getStyleClass;
+    private getSizeClass;
+    private getOrderClass;
+    private getOffsetClass;
+    componentDidLoad(): void;
     render(): any;
 }

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

@@ -2,6 +2,9 @@ import type { ComponentInterface, EventEmitter } from '../../stencil-public-runt
 import type { Color } from '../../interface';
 import type { ScrollBaseDetail, ScrollDetail } from './content-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 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/datetime/datetime.d.ts

@@ -2,7 +2,8 @@ import type { ComponentInterface, EventEmitter } from '../../stencil-public-runt
 import type { Color, StyleEventDetail } from '../../interface';
 import type { DatetimePresentation, DatetimeChangeEventDetail, DatetimeParts, TitleSelectedDatesFormatter, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, FormatOptions } from './datetime-interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 title - The title of the datetime.
  * @slot buttons - The buttons in the datetime.
@@ -479,5 +480,29 @@ export declare class Datetime implements ComponentInterface {
      * All presentation types are rendered from here.
      */
     private renderDatetime;
+    /**
+     * Get the icon to use for the next icon.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get datetimeNextIcon(): string;
+    /**
+     * Get the icon to use for the previous icon.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get datetimePreviousIcon(): string;
+    /**
+     * Get the icon to use for the show month and year icon.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get datetimeCollapsedIcon(): string | undefined;
+    /**
+     * Get the icon to use for the hide month and year icon.
+     * Otherwise, use the icon set in the config.
+     * If no icon is set in the config, use the default icon.
+     */
+    get datetimeExpandedIcon(): string | undefined;
     render(): any;
 }

package/dist/types/components/datetime/utils/data.d.ts

@@ -1,4 +1,4 @@
-import type { Mode } from '../../../interface';
+import type { Theme } from '../../../interface';
 import type { DatetimeParts, DatetimeHourCycle } from '../datetime-interface';
 export interface WheelColumnOption {
     text: string;
@@ -12,14 +12,14 @@ export interface WheelColumnOption {
  */
 export declare const getToday: () => string;
 /**
- * Given a locale and a mode,
+ * Given a locale and a theme,
  * return an array with formatted days
- * of the week. iOS should display days
- * such as "Mon" or "Tue".
+ * of the week. iOS and Ionic themes should
+ * display days such as "Mon" or "Tue".
  * MD should display days such as "M"
  * or "T".
  */
-export declare const getDaysOfWeek: (locale: string, mode: Mode, firstDayOfWeek?: number) => string[];
+export declare const getDaysOfWeek: (locale: string, theme: Theme, firstDayOfWeek?: number) => string[];
 /**
  * Returns an array containing all of the
  * days in a month for a given year. Values are

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

@@ -2,7 +2,8 @@ import type { ComponentInterface } from '../../stencil-public-runtime';
 import type { Color } from '../../interface';
 import type { DatetimePresentation } from '../datetime/datetime-interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 date-target - Content displayed inside of the date button.
  * @slot time-target - Content displayed inside of the time button.

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

@@ -0,0 +1,20 @@
+import type { ComponentInterface } from '../../stencil-public-runtime';
+export declare class Divider implements ComponentInterface {
+    /**
+     * Set to `"xxsmall"` for the smallest spacing.
+     * Set to "xsmall" for very small spacing.
+     * Set to `"small"` for small spacing.
+     * Set to "medium" for medium spacing.
+     * Set to "large" for large spacing.
+     * Set to `"xlarge"` for the largest spacing.
+     *
+     * Defaults to `"medium"`.
+     */
+    spacing?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+    /**
+     * If `true`, the divider will have horizontal margins
+     * By default, it's `false`
+     */
+    inset: boolean;
+    render(): any;
+}

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

@@ -1,4 +1,8 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
+/**
+ * @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 Fab implements ComponentInterface {
     el: HTMLElement;
     /**

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

@@ -3,7 +3,8 @@ import type { AnchorInterface, ButtonInterface } from "../../utils/element-inter
 import type { AnimationBuilder, Color } from '../../interface';
 import type { RouterDirection } from '../router/utils/interface';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 native - The native HTML button or anchor element that wraps all child elements.
  * @part close-icon - The close icon that is displayed when a fab list opens (uses ion-icon).
@@ -65,7 +66,7 @@ export declare class FabButton implements ComponentInterface, AnchorInterface, B
     show: boolean;
     /**
      * If `true`, the fab button will be translucent.
-     * Only applies when the mode is `"ios"` and the device supports
+     * Only applies when the theme is `"ios"` and the device supports
      * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
      */
     translucent: boolean;
@@ -82,7 +83,7 @@ export declare class FabButton implements ComponentInterface, AnchorInterface, B
      * is pressed. Only applies if it is the main button inside of a fab containing a
      * fab list.
      */
-    closeIcon: string;
+    closeIcon?: string;
     /**
      * Emitted when the button has focus.
      */
@@ -96,5 +97,6 @@ export declare class FabButton implements ComponentInterface, AnchorInterface, B
     private onBlur;
     private onClick;
     componentWillLoad(): void;
+    get fabButtonCloseIcon(): any;
     render(): any;
 }

package/dist/types/components/fab-list/fab-list.d.ts

@@ -1,4 +1,8 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
+/**
+ * @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 FabList implements ComponentInterface {
     el: HTMLIonFabElement;
     private activateTimeouts;

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

@@ -1,6 +1,7 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 Footer implements ComponentInterface {
     private scrollEl?;
@@ -11,12 +12,12 @@ export declare class Footer implements ComponentInterface {
     el: HTMLIonFooterElement;
     /**
      * Describes the scroll effect that will be applied to the footer.
-     * Only applies in iOS mode.
+     * Only applies when the theme is `"ios"`.
      */
     collapse?: 'fade';
     /**
      * If `true`, the footer will be translucent.
-     * Only applies when the mode is `"ios"` and the device supports
+     * Only applies when the theme is `"ios"` and the device supports
      * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
      *
      * Note: In order to scroll content behind the footer, the `fullscreen`

package/dist/types/components/gallery/gallery-interface.d.ts

@@ -0,0 +1,9 @@
+export interface GalleryBreakpointColumns {
+    xs?: string | number;
+    sm?: string | number;
+    md?: string | number;
+    lg?: string | number;
+    xl?: string | number;
+    xxl?: string | number;
+}
+export type GalleryColumns = GalleryBreakpointColumns | string | number;

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

@@ -0,0 +1,125 @@
+import type { ComponentInterface } from '../../stencil-public-runtime';
+import type { GalleryColumns } from './gallery-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 in a responsive gallery layout.
+ */
+export declare class Gallery implements ComponentInterface {
+    el: HTMLIonGalleryElement;
+    private masonryRaf?;
+    private resizeObserver?;
+    private lastWidth?;
+    private hasWarnedInvalidColumns;
+    /**
+     * The visual layout of the gallery. When `uniform`, rows take up the height
+     * of the tallest item and are spaced evenly across the gallery. Additionally,
+     * items will have an aspect ratio of 1/1, forcing them to be square unless a
+     * height is explicitly set. When `masonry`, items will be positioned under each
+     * other with only the specified gap between them.
+     */
+    layout: 'uniform' | 'masonry';
+    /**
+     * The order in which items are positioned. Only applies when layout is
+     * `masonry`. When `sequential`, items are positioned in the order they are
+     * placed in the DOM. When `best-fit`, items are positioned under the column
+     * with the most available space.
+     */
+    order: 'sequential' | 'best-fit';
+    /**
+     * The number of columns to display. Can be set as a number or an object of
+     * breakpoint values (e.g. `{ xs: 2, sm: 3, md: 4 }`).
+     */
+    columns: GalleryColumns;
+    protected layoutChanged(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /**
+     * Listen for the load event on child elements.
+     * When the layout is `masonry`, this listener is used to schedule a resize
+     * of the masonry grid when the child elements load. This is useful for when
+     * images take time to load.
+     */
+    protected onChildLoad(ev: Event): void;
+    /**
+     * Listen for the slotchange event on the slot.
+     * When the layout is `masonry`, this listener is used to schedule a resize
+     * of the masonry grid when the slot changes. This is useful for when items
+     * are added or removed from the gallery.
+     */
+    private onSlotChange;
+    /**
+     * Batch masonry measurements to a single animation frame.
+     * This avoids repeated sync layouts during rapid resize/load/slot changes.
+     */
+    private scheduleMasonryResize;
+    /**
+     * Normalize a columns value to a positive integer.
+     * Returns undefined when the input cannot be interpreted as a finite number.
+     */
+    private sanitizeColumns;
+    /**
+     * Check if the value is a breakpoint columns object.
+     */
+    private isBreakpointColumns;
+    /**
+     * Check if the breakpoint columns object has any invalid values.
+     * Returns true if any value is undefined or not a positive integer.
+     */
+    private hasInvalidBreakpointColumns;
+    /**
+     * Get the columns from a responsive breakpoint map.
+     * Returns the columns for the last matching breakpoint.
+     */
+    private getColumnsFromBreakpointColumns;
+    /**
+     * Warn about an invalid columns value when it is set to a non-positive
+     * integer or a breakpoint map object with invalid values.
+     */
+    private warnInvalidColumns;
+    /**
+     * Resolve the active columns value for the current width. Falls back to
+     * the default responsive columns when the provided prop is invalid.
+     */
+    private getColumnsForWidth;
+    /**
+     * Update the responsive columns for the gallery.
+     * This is used to update the columns when the component width changes.
+     */
+    private updateResponsiveColumns;
+    /**
+     * Return all directly slotted HTMLElement children of the gallery.
+     */
+    private getItems;
+    /**
+     * Clear the item styles for the given item element.
+     * This is used to switch between uniform and masonry layouts.
+     */
+    private clearItemStyles;
+    /**
+     * Clear placement styles for all items when leaving masonry mode.
+     */
+    private clearMasonryStyles;
+    /**
+     * Convert a rendered item height to the number of grid rows it should span.
+     * Returns undefined for images that are not fully loaded yet.
+     */
+    private calculateRowSpan;
+    /**
+     * Get the index of the column to position the item in.
+     * When the order is `best-fit`, the column with the shortest height is
+     * returned. Otherwise, items are placed in the column that matches their
+     * natural DOM order.
+     */
+    private getColumnIndex;
+    /**
+     * Apply masonry placement by assigning each item a column and row span.
+     */
+    private layoutMasonry;
+    /**
+     * Measure the host and children, then compute masonry placement.
+     */
+    private resizeMasonryGrid;
+    render(): any;
+}

package/dist/types/components/gallery/test/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const sharedStyles = "\n  ion-gallery {\n    width: 343px;\n  }\n\n  div {\n    color: #fff;\n    height: 150px;\n  }\n\n  div:nth-child(1) {\n    background: #ff6b6b;\n  }\n\n  div:nth-child(2) {\n    background: #4ecdc4;\n  }\n\n  div:nth-child(3) {\n    background: #ffe66d;\n    color: #333;\n  }\n\n  div:nth-child(4) {\n    background: #5f27cd;\n  }\n\n  div:nth-child(5) {\n    background: #7f8c8d;\n  }\n\n  div:nth-child(6) {\n    background: #ff9f43;\n  }\n\n  div:nth-child(7) {\n    background: #ff3f34;\n  }\n\n  div:nth-child(8) {\n    background: #2ecc71;\n  }\n\n  div:nth-child(9) {\n    background: #34495e;\n  }\n\n  div:nth-child(10) {\n    background: #1abc9c;\n  }\n\n  div:nth-child(11) {\n    background: #e67e22;\n  }\n\n  div:nth-child(12) {\n    background: #9b59b6;\n  }\n";
+export declare const numberToWords: (value: number) => string;

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

@@ -1,4 +1,8 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
+/**
+ * @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 Grid implements ComponentInterface {
     /**
      * If `true`, the grid will have a fixed width based on the screen size.

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

@@ -1,6 +1,7 @@
 import type { ComponentInterface } from '../../stencil-public-runtime';
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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 Header implements ComponentInterface {
     private scrollEl?;
@@ -11,14 +12,19 @@ export declare class Header implements ComponentInterface {
     el: HTMLElement;
     /**
      * Describes the scroll effect that will be applied to the header.
-     * Only applies in iOS mode.
+     * Only applies when the theme is `"ios"`.
      *
      * Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
      */
     collapse?: 'condense' | 'fade';
+    /**
+     * If `true`, the header will have a line at the bottom.
+     * TODO(ROU-10855): add support for this prop on ios/md themes
+     */
+    divider: boolean;
     /**
      * If `true`, the header will be translucent.
-     * Only applies when the mode is `"ios"` and the device supports
+     * Only applies when the theme is `"ios"` or `"ionic"` and the device supports
      * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
      *
      * Note: In order to scroll content behind the header, the `fullscreen`

package/dist/types/components/header/header.utils.d.ts

@@ -28,9 +28,9 @@ export declare const handleHeaderFade: (scrollEl: HTMLElement, baseEl: HTMLEleme
  *
  * @param isInsideMenu If ion-header is inside ion-menu.
  * @param isCondensed If ion-header has collapse="condense".
- * @param mode The current mode.
+ * @param theme The current theme.
  * @returns 'none' if inside ion-menu or if condensed in md
- * mode, otherwise 'banner'.
+ * theme, otherwise 'banner'.
  */
-export declare const getRoleType: (isInsideMenu: boolean, isCondensed: boolean, mode: "ios" | "md") => "none" | "banner";
+export declare const getRoleType: (isInsideMenu: boolean, isCondensed: boolean, theme: "ios" | "md" | "ionic") => "none" | "banner";
 export {};

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

@@ -1,5 +1,8 @@
 import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 /**
+ * @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 image - The inner `img` element.
  */
 export declare class Img implements ComponentInterface {