@ionic/core 8.8.9-dev.11781024903.1e4268e5 → 8.8.9-dev.11781201980.1b6e8398

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

@@ -4,7 +4,8 @@ import type { GalleryColumns, GalleryGap } 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.
+ * @slot - One or more `ion-gallery-item` components, placed in a responsive
+ * gallery layout.
  */
 export declare class Gallery implements ComponentInterface {
     el: HTMLIonGalleryElement;
@@ -14,6 +15,7 @@ export declare class Gallery implements ComponentInterface {
     private hasWarnedInvalidColumns;
     private hasWarnedInvalidGap;
     private hasWarnedUnusedOrder;
+    private hasWarnedInvalidItems;
     /**
      * 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,
@@ -46,8 +48,21 @@ export declare class Gallery implements ComponentInterface {
     gap: GalleryGap;
     protected onColumnsOrGapChanged(): void;
     protected onLayoutOrOrderChanged(): void;
+    /**
+     * Sync the current layout with each item when the gallery's `layout`
+     * changes.
+     */
+    private syncItemLayout;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    /**
+     * Observe the host and each item for size changes. Items are observed in
+     * addition to the host so masonry placement is recomputed when an item's
+     * rendered height changes — most importantly when a dynamically added
+     * `ion-gallery-item` finishes hydrating, which (unlike an `<img>`) emits no
+     * `load` event and does not change the host's measured size while collapsed.
+     */
+    private observeResizes;
     /**
      * Listen for the load event on child elements.
      * When the layout is `masonry`, this listener is used to schedule a resize
@@ -56,10 +71,9 @@ export declare class Gallery implements ComponentInterface {
      */
     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.
+     * Listen for the slotchange event on the slot. When the gallery's items are
+     * added or removed, re-collapse wrappers, re-observe items for size changes,
+     * and recompute the masonry grid.
      */
     private onSlotChange;
     /**
@@ -142,10 +156,24 @@ export declare class Gallery implements ComponentInterface {
      */
     private updateResponsiveStyles;
     /**
-     * Return all directly slotted children of the gallery that can be grid items
-     * with inline placement styles (HTML elements and SVG elements).
+     * Return the `ion-gallery-item` elements to place in the grid. Each item is a
+     * direct grid cell, whether a direct child or nested inside a pass-through
+     * wrapper (e.g. a layout `<div>`). Items belonging to a nested `ion-gallery`
+     * are excluded.
      */
     private getItems;
+    /**
+     * Collapse each pass-through wrapper's box with `display: contents` so its
+     * items participate in the gallery grid. Restore the box of a wrapper that
+     * no longer contains items, and warn about children that contain none.
+     */
+    private collapseWrappers;
+    /**
+     * Warn when the gallery has content that is not wrapped in an
+     * `ion-gallery-item` component. Items belonging to a nested
+     * gallery are considered invalid content for the parent gallery.
+     */
+    private warnInvalidItems;
     /**
      * Clear the item styles for the given item element.
      * This is used to switch between uniform and masonry layouts.
@@ -155,9 +183,14 @@ export declare class Gallery implements ComponentInterface {
      * Clear placement styles for all items when leaving masonry mode.
      */
     private clearMasonryStyles;
+    /**
+     * Whether the item contains any images that have not finished loading.
+     * Used to defer masonry placement until the rendered height is final.
+     */
+    private hasUnloadedImages;
     /**
      * Convert a rendered item height to the number of grid rows it should span.
-     * Returns undefined for images that are not fully loaded yet.
+     * Returns undefined when the item has images that are not fully loaded yet.
      */
     private calculateRowSpan;
     /**

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

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

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

@@ -0,0 +1,33 @@
+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.
+ *
+ * @slot - The content placed inside of the gallery item. This is typically an
+ * `img`, but can be any element (e.g. a `figure` wrapping an image and caption).
+ */
+export declare class GalleryItem implements ComponentInterface {
+    private hasWarnedInvalidParent;
+    el: HTMLIonGalleryItemElement;
+    /**
+     * The layout of the parent `ion-gallery`, mirrored as a class so the item
+     * can apply layout-specific styles (e.g. a square aspect ratio in the
+     * `uniform` layout, a bottom margin in the `masonry` layout).
+     */
+    galleryLayout?: 'uniform' | 'masonry';
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    connectedCallback(): void;
+    /**
+     * Resolve the layout from the parent `ion-gallery`. Called internally on
+     * load and connect, and by the gallery when its layout changes.
+     * @internal
+     */
+    syncGalleryLayout(): Promise<void>;
+    private onSlotChange;
+    /**
+     * Warn when the item is not a descendant of an `ion-gallery`.
+     */
+    private warnInvalidParent;
+    render(): any;
+}

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

@@ -17,18 +17,10 @@ export interface SelectActionSheetButton extends Omit<ActionSheetButton, 'text'>
 export interface SelectAlertInput extends Omit<AlertInput, 'label'>, RichContentOption {
     /** The main label for the option as a string or an HTMLElement. */
     label?: string | HTMLElement;
-    /** Where the label sits relative to the option's selection control. */
-    labelPlacement?: 'start' | 'end';
-    /** How to pack the label and the option's selection control within a line. */
-    justify?: 'start' | 'end' | 'space-between';
 }
 export interface SelectOverlayOption extends Omit<SelectPopoverOption, 'text'>, RichContentOption {
     /** The main text for the option as a string or an HTMLElement. */
     text?: string | HTMLElement;
-    /** Where the label sits relative to the option's selection control. */
-    labelPlacement?: 'start' | 'end';
-    /** How to pack the label and the option's selection control within a line. */
-    justify?: 'start' | 'end' | 'space-between';
 }
 export interface RichContentOption {
     /** Content to display at the start of the option. */

package/dist/types/components/select-option/select-option.d.ts

@@ -22,37 +22,5 @@ export declare class SelectOption implements ComponentInterface {
      * Text that is placed underneath the option text to provide additional details about the option.
      */
     description?: string;
-    /**
-     * Where the label is placed relative to the option's selection control
-     * (radio circle or checkbox box) when the option is rendered in an
-     * `alert`, `popover`, or `modal` interface.
-     * `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL.
-     * `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL.
-     *
-     * Applies to the `alert`, `popover`, and `modal` interfaces, but has no
-     * visible effect on radio options in `popover` or `modal` on the `md`
-     * and `ionic` themes (the radio control is hidden there).
-     *
-     * When unset, the interface picks a default based on theme and control
-     * type.
-     */
-    labelPlacement?: 'start' | 'end';
-    /**
-     * How to pack the label and the option's selection control within a line.
-     * `"start"`: The label and radio will appear on the left in LTR and
-     * on the right in RTL.
-     * `"end"`: The label and radio will appear on the right in LTR and
-     * on the left in RTL.
-     * `"space-between"`: The label and radio will appear on opposite
-     * ends of the line with space between the two elements.
-     *
-     * Applies to the `alert`, `popover`, and `modal` interfaces, but has no
-     * visible effect on radio options in `popover` or `modal` on the `md`
-     * and `ionic` themes (the radio control is hidden there).
-     *
-     * When unset, the interface picks a default based on theme and control
-     * type.
-     */
-    justify?: 'start' | 'end' | 'space-between';
     render(): any;
 }

package/dist/types/components.d.ts

@@ -1500,6 +1500,20 @@ export namespace Components {
          */
         "theme"?: "ios" | "md" | "ionic";
     }
+    interface IonGalleryItem {
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * Resolve the layout from the parent `ion-gallery`. Called internally on load and connect, and by the gallery when its layout changes.
+         */
+        "syncGalleryLayout": () => Promise<void>;
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+    }
     interface IonGrid {
         /**
           * If `true`, the grid will have a fixed width based on the screen size.
@@ -3863,14 +3877,6 @@ export namespace Components {
           * @default false
          */
         "disabled": boolean;
-        /**
-          * How to pack the label and the option's selection control within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements.  Applies to the `alert`, `popover`, and `modal` interfaces, but has no visible effect on radio options in `popover` or `modal` on the `md` and `ionic` themes (the radio control is hidden there).  When unset, the interface picks a default based on theme and control type.
-         */
-        "justify"?: 'start' | 'end' | 'space-between';
-        /**
-          * Where the label is placed relative to the option's selection control (radio circle or checkbox box) when the option is rendered in an `alert`, `popover`, or `modal` interface. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL.  Applies to the `alert`, `popover`, and `modal` interfaces, but has no visible effect on radio options in `popover` or `modal` on the `md` and `ionic` themes (the radio control is hidden there).  When unset, the interface picks a default based on theme and control type.
-         */
-        "labelPlacement"?: 'start' | 'end';
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -5054,6 +5060,12 @@ declare global {
         prototype: HTMLIonGalleryElement;
         new (): HTMLIonGalleryElement;
     };
+    interface HTMLIonGalleryItemElement extends Components.IonGalleryItem, HTMLStencilElement {
+    }
+    var HTMLIonGalleryItemElement: {
+        prototype: HTMLIonGalleryItemElement;
+        new (): HTMLIonGalleryItemElement;
+    };
     interface HTMLIonGridElement extends Components.IonGrid, HTMLStencilElement {
     }
     var HTMLIonGridElement: {
@@ -6012,6 +6024,7 @@ declare global {
         "ion-fab-list": HTMLIonFabListElement;
         "ion-footer": HTMLIonFooterElement;
         "ion-gallery": HTMLIonGalleryElement;
+        "ion-gallery-item": HTMLIonGalleryItemElement;
         "ion-grid": HTMLIonGridElement;
         "ion-header": HTMLIonHeaderElement;
         "ion-img": HTMLIonImgElement;
@@ -7518,6 +7531,16 @@ declare namespace LocalJSX {
          */
         "theme"?: "ios" | "md" | "ionic";
     }
+    interface IonGalleryItem {
+        /**
+          * The mode determines the platform behaviors of the component.
+         */
+        "mode"?: "ios" | "md";
+        /**
+          * The theme determines the visual appearance of the component.
+         */
+        "theme"?: "ios" | "md" | "ionic";
+    }
     interface IonGrid {
         /**
           * If `true`, the grid will have a fixed width based on the screen size.
@@ -9864,14 +9887,6 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
-        /**
-          * How to pack the label and the option's selection control within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements.  Applies to the `alert`, `popover`, and `modal` interfaces, but has no visible effect on radio options in `popover` or `modal` on the `md` and `ionic` themes (the radio control is hidden there).  When unset, the interface picks a default based on theme and control type.
-         */
-        "justify"?: 'start' | 'end' | 'space-between';
-        /**
-          * Where the label is placed relative to the option's selection control (radio circle or checkbox box) when the option is rendered in an `alert`, `popover`, or `modal` interface. `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL. `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL.  Applies to the `alert`, `popover`, and `modal` interfaces, but has no visible effect on radio options in `popover` or `modal` on the `md` and `ionic` themes (the radio control is hidden there).  When unset, the interface picks a default based on theme and control type.
-         */
-        "labelPlacement"?: 'start' | 'end';
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -11198,8 +11213,6 @@ declare namespace LocalJSX {
         "disabled": boolean;
         "value": string;
         "description": string;
-        "labelPlacement": 'start' | 'end';
-        "justify": 'start' | 'end' | 'space-between';
     }
     interface IonSelectPopoverAttributes {
         "header": string;
@@ -11354,6 +11367,7 @@ declare namespace LocalJSX {
         "ion-fab-list": Omit<IonFabList, keyof IonFabListAttributes> & { [K in keyof IonFabList & keyof IonFabListAttributes]?: IonFabList[K] } & { [K in keyof IonFabList & keyof IonFabListAttributes as `attr:${K}`]?: IonFabListAttributes[K] } & { [K in keyof IonFabList & keyof IonFabListAttributes as `prop:${K}`]?: IonFabList[K] };
         "ion-footer": Omit<IonFooter, keyof IonFooterAttributes> & { [K in keyof IonFooter & keyof IonFooterAttributes]?: IonFooter[K] } & { [K in keyof IonFooter & keyof IonFooterAttributes as `attr:${K}`]?: IonFooterAttributes[K] } & { [K in keyof IonFooter & keyof IonFooterAttributes as `prop:${K}`]?: IonFooter[K] };
         "ion-gallery": Omit<IonGallery, keyof IonGalleryAttributes> & { [K in keyof IonGallery & keyof IonGalleryAttributes]?: IonGallery[K] } & { [K in keyof IonGallery & keyof IonGalleryAttributes as `attr:${K}`]?: IonGalleryAttributes[K] } & { [K in keyof IonGallery & keyof IonGalleryAttributes as `prop:${K}`]?: IonGallery[K] };
+        "ion-gallery-item": IonGalleryItem;
         "ion-grid": Omit<IonGrid, keyof IonGridAttributes> & { [K in keyof IonGrid & keyof IonGridAttributes]?: IonGrid[K] } & { [K in keyof IonGrid & keyof IonGridAttributes as `attr:${K}`]?: IonGridAttributes[K] } & { [K in keyof IonGrid & keyof IonGridAttributes as `prop:${K}`]?: IonGrid[K] };
         "ion-header": Omit<IonHeader, keyof IonHeaderAttributes> & { [K in keyof IonHeader & keyof IonHeaderAttributes]?: IonHeader[K] } & { [K in keyof IonHeader & keyof IonHeaderAttributes as `attr:${K}`]?: IonHeaderAttributes[K] } & { [K in keyof IonHeader & keyof IonHeaderAttributes as `prop:${K}`]?: IonHeader[K] };
         "ion-img": Omit<IonImg, keyof IonImgAttributes> & { [K in keyof IonImg & keyof IonImgAttributes]?: IonImg[K] } & { [K in keyof IonImg & keyof IonImgAttributes as `attr:${K}`]?: IonImgAttributes[K] } & { [K in keyof IonImg & keyof IonImgAttributes as `prop:${K}`]?: IonImg[K] };
@@ -11459,6 +11473,7 @@ declare module "@stencil/core" {
             "ion-fab-list": LocalJSX.IntrinsicElements["ion-fab-list"] & JSXBase.HTMLAttributes<HTMLIonFabListElement>;
             "ion-footer": LocalJSX.IntrinsicElements["ion-footer"] & JSXBase.HTMLAttributes<HTMLIonFooterElement>;
             "ion-gallery": LocalJSX.IntrinsicElements["ion-gallery"] & JSXBase.HTMLAttributes<HTMLIonGalleryElement>;
+            "ion-gallery-item": LocalJSX.IntrinsicElements["ion-gallery-item"] & JSXBase.HTMLAttributes<HTMLIonGalleryItemElement>;
             "ion-grid": LocalJSX.IntrinsicElements["ion-grid"] & JSXBase.HTMLAttributes<HTMLIonGridElement>;
             "ion-header": LocalJSX.IntrinsicElements["ion-header"] & JSXBase.HTMLAttributes<HTMLIonHeaderElement>;
             "ion-img": LocalJSX.IntrinsicElements["ion-img"] & JSXBase.HTMLAttributes<HTMLIonImgElement>;

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

@@ -1,60 +1,8 @@
 /**
- * Sanitize an untrusted HTML string.
- *
- * Parses the string into a detached DOM, removes blocked tags, strips
- * attributes outside the `allowedAttributes` list (refer `sanitizeElement`),
- * and scrubs script-scheme URLs. Returns the sanitized HTML string.
- *
- * Use this when you have an HTML string from an unknown source and need to
- * render it via `innerHTML`. Use `sanitizeDOMTree` instead when you already
- * have a DOM tree and want to sanitize it in place without a string round
- * trip; both apply the same attribute policy.
- *
- * @param untrustedString - The HTML string to sanitize. Pass an
- * `IonicSafeString` to bypass sanitization, or `undefined` to short-circuit.
- * @returns The sanitized HTML string, or `undefined` if the input was
- * `undefined`. Returns `''` if sanitization fails or the input contains
- * an inline `onload=` handler.
+ * Does a simple sanitization of all elements
+ * in an untrusted string
  */
 export declare const sanitizeDOMString: (untrustedString: IonicSafeString | string | undefined) => string | undefined;
-/**
- * Sanitize an entire trusted DOM tree in place.
- *
- * Removes blocked tags (`script`, `iframe`, etc.) from the subtree and
- * then sanitizes attributes on every remaining element using the same
- * allowlist policy as `sanitizeDOMString` (refer `sanitizeElement`).
- * Component presentational attributes (`size`, `color`, `shape`, inline
- * SVG, `aria-*`, `data-*`) are preserved; `style`, event handlers (`on*`),
- * form/navigation-hijack attributes, script-scheme URLs, and non-image
- * `data:` URLs are stripped.
- *
- * Use this when you have a DOM tree the developer controls (e.g.
- * cloned slot content from a component) and you need to render it
- * elsewhere safely.
- *
- * @param root - The root element whose subtree will be sanitized in
- * place. No-op when the sanitizer is disabled via `Ionic.config`.
- */
-export declare const sanitizeDOMTree: (root: HTMLElement) => void;
-/**
- * Mirror known custom-element DOM properties onto attributes so they
- * survive `cloneNode`. Call this on a DOM subtree before cloning it for
- * rendering elsewhere (e.g. cloning slotted option content into an
- * overlay).
- *
- * Only sets the attribute when the property holds a non-empty string
- * and the attribute isn't already present, so existing attributes
- * take precedence.
- *
- * @param root - The root element whose subtree (and itself) will be
- * inspected.
- */
-export declare const reflectPropertiesToAttributes: (root: Element) => void;
-/**
- * Tags removed entirely (with their subtree) before attribute sanitization.
- * Exported so tests can assert the set without hardcoding it.
- */
-export declare const blockedTags: string[];
 export declare class IonicSafeString {
     value: string;
     constructor(value: string);

package/dist/types/utils/select-option-render.d.ts

@@ -1,4 +1,3 @@
-import type { VNode } from '../stencil-public-runtime';
 import type { RichContentOption as RichContentOpt } from '../components/select/select-interface';
 interface RichContentOption extends RichContentOpt {
     /** Unique identifier for stable virtual DOM keys across re-renders. */
@@ -6,36 +5,6 @@ interface RichContentOption extends RichContentOpt {
     /** The main label for the option as a string or an HTMLElement. */
     label?: string | HTMLElement;
 }
-/**
- * Converts a DOM node into a Stencil VNode (or text string) so the
- * resulting tree is rendered through the component's normal render
- * path. Rendering through Stencil ensures that scoped CSS classes
- * (e.g. `sc-ion-action-sheet-ionic`) are applied to every element.
- *
- * Highly recommended to pre-sanitize the source DOM (see
- * `getOptionContent` in select.tsx). This function performs pure
- * structural conversion — no security filtering.
- *
- * Preserves attributes only — properties set imperatively on the source
- * element (e.g. `input.value` after a user types) won't carry through.
- * In practice this isn't a concern: interactive controls shouldn't
- * appear in select-option rich content since they'd nest inside the
- * overlay's button/radio/checkbox wrapper, which is invalid HTML and
- * an accessibility issue.
- *
- * @param node - The DOM node to convert. Text nodes become strings,
- * element nodes become VNodes, and any other node types are skipped.
- * @param keyPrefix - String prefix used to build a stable VNode key,
- * so Stencil's diff can preserve elements across re-renders.
- * @param index - Position of this node among its siblings. Combined
- * with `keyPrefix` to form the final unique key.
- * @returns The converted VNode, a text string, or `null` if the node
- * type isn't supported.
- *
- * @internal Exported only so it can be unit tested; not part of the
- * public API.
- */
-export declare const cloneToVNode: (node: Node, keyPrefix: string, index: number) => VNode | string | null;
 /**
  * Renders the label content for a select option within an overlay
  * interface based on the presence of rich content.