@ionic/core 8.8.6-dev.11777668103.132817bd → 8.8.6-dev.11777928681.1e4919af

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-05-01T20:44:02",
+  "timestamp": "2026-05-04T21:07:03",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.0",
@@ -14224,212 +14224,6 @@
       "dependencies": [],
       "dependencyGraph": {}
     },
-    {
-      "filePath": "src/components/gallery/gallery.tsx",
-      "encapsulation": "shadow",
-      "tag": "ion-gallery",
-      "docs": "",
-      "docsTags": [
-        {
-          "name": "virtualProp",
-          "text": "{\"ios\" | \"md\"} mode - The mode determines the platform behaviors of the component."
-        },
-        {
-          "name": "virtualProp",
-          "text": "{\"ios\" | \"md\" | \"ionic\"} theme - The theme determines the visual appearance of the component."
-        },
-        {
-          "name": "slot",
-          "text": "- Content is placed in a responsive gallery layout."
-        }
-      ],
-      "usage": {},
-      "props": [
-        {
-          "name": "columns",
-          "type": "GalleryBreakpointColumns | number | string",
-          "complexType": {
-            "original": "GalleryColumns",
-            "resolved": "GalleryBreakpointColumns | number | string",
-            "references": {
-              "GalleryColumns": {
-                "location": "import",
-                "path": "./gallery-interface",
-                "id": "src/components/gallery/gallery-interface.ts::GalleryColumns",
-                "referenceLocation": "GalleryColumns"
-              }
-            }
-          },
-          "mutable": false,
-          "attr": "columns",
-          "reflectToAttr": false,
-          "docs": "The number of columns to display. Can be set as a number or an object of\nbreakpoint values (e.g. `{ xs: 2, sm: 3, md: 4 }`).",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "DEFAULT_COLUMNS"
-            }
-          ],
-          "default": "DEFAULT_COLUMNS",
-          "values": [
-            {
-              "type": "GalleryBreakpointColumns"
-            },
-            {
-              "type": "number"
-            },
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "layout",
-          "type": "\"masonry\" | \"uniform\"",
-          "complexType": {
-            "original": "'uniform' | 'masonry'",
-            "resolved": "\"masonry\" | \"uniform\"",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "layout",
-          "reflectToAttr": true,
-          "docs": "The visual layout of the gallery. When `uniform`, rows take up the height\nof the tallest item and are spaced evenly across the gallery. Additionally,\nitems will have an aspect ratio of 1/1, forcing them to be square unless a\nheight is explicitly set. When `masonry`, items will be positioned under each\nother with only the specified gap between them.",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "'uniform'"
-            }
-          ],
-          "default": "'uniform'",
-          "values": [
-            {
-              "value": "masonry",
-              "type": "string"
-            },
-            {
-              "value": "uniform",
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "mode",
-          "type": "\"ios\" | \"md\"",
-          "mutable": false,
-          "attr": "mode",
-          "reflectToAttr": false,
-          "docs": "The mode determines the platform behaviors of the component.",
-          "docsTags": [],
-          "values": [
-            {
-              "value": "ios",
-              "type": "string"
-            },
-            {
-              "value": "md",
-              "type": "string"
-            }
-          ],
-          "optional": true,
-          "required": false
-        },
-        {
-          "name": "order",
-          "type": "\"best-fit\" | \"sequential\"",
-          "complexType": {
-            "original": "'sequential' | 'best-fit'",
-            "resolved": "\"best-fit\" | \"sequential\"",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "order",
-          "reflectToAttr": true,
-          "docs": "The order in which items are positioned. Only applies when layout is\n`masonry`. When `sequential`, items are positioned in the order they are\nplaced in the DOM. When `best-fit`, items are positioned under the column\nwith the most available space.",
-          "docsTags": [
-            {
-              "name": "default",
-              "text": "'sequential'"
-            }
-          ],
-          "default": "'sequential'",
-          "values": [
-            {
-              "value": "best-fit",
-              "type": "string"
-            },
-            {
-              "value": "sequential",
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false,
-          "getter": false,
-          "setter": false
-        },
-        {
-          "name": "theme",
-          "type": "\"ios\" | \"md\" | \"ionic\"",
-          "mutable": false,
-          "attr": "theme",
-          "reflectToAttr": false,
-          "docs": "The theme determines the visual appearance of the component.",
-          "docsTags": [],
-          "values": [
-            {
-              "value": "ios",
-              "type": "string"
-            },
-            {
-              "value": "md",
-              "type": "string"
-            },
-            {
-              "value": "ionic",
-              "type": "string"
-            }
-          ],
-          "optional": true,
-          "required": false
-        }
-      ],
-      "methods": [],
-      "events": [],
-      "listeners": [
-        {
-          "event": "load",
-          "capture": true,
-          "passive": false
-        }
-      ],
-      "styles": [
-        {
-          "name": "--ion-gallery-gap",
-          "annotation": "prop",
-          "docs": "Space between gallery items"
-        }
-      ],
-      "slots": [
-        {
-          "name": "",
-          "docs": "Content is placed in a responsive gallery layout."
-        }
-      ],
-      "parts": [],
-      "states": [],
-      "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {}
-    },
     {
       "filePath": "src/components/grid/grid.tsx",
       "encapsulation": "shadow",
@@ -46652,11 +46446,6 @@
       "docstring": "",
       "path": "src/components/picker/picker-interfaces.ts"
     },
-    "src/components/gallery/gallery-interface.ts::GalleryColumns": {
-      "declaration": "export type GalleryColumns = GalleryBreakpointColumns | string | number;",
-      "docstring": "",
-      "path": "src/components/gallery/gallery-interface.ts"
-    },
     "src/components/spinner/spinner-configs.ts::SpinnerTypes": {
       "declaration": "\"lines\" | \"bubbles\" | \"circles\" | \"circular\" | \"crescent\" | \"dots\" | \"lines-small\" | \"lines-sharp\" | \"lines-sharp-small\"",
       "docstring": "",

package/dist/esm/ion-app_8.entry.js

@@ -1066,7 +1066,7 @@ const Header = class {
         const isCondensed = collapse === 'condense';
         // banner role must be at top level, so remove role if inside a menu
         const roleType = getRoleType(hostContext('ion-menu', this.el), isCondensed, theme);
-        return (h(Host, Object.assign({ key: 'b43e5f542bdcec5e94c299556183cf6d9d673438', role: roleType, class: {
+        return (h(Host, Object.assign({ key: '658d5746920c349cc9fe85666c7215f2edc3c794', role: roleType, class: {
                 [theme]: true,
                 // Used internally for styling
                 [`header-${theme}`]: true,
@@ -1074,7 +1074,7 @@ const Header = class {
                 [`header-collapse-${collapse}`]: true,
                 [`header-translucent-${theme}`]: this.translucent,
                 ['header-divider']: divider,
-            } }, inheritedAttributes), theme !== 'md' && translucent && h("div", { key: 'fd9938f02edd38e1afc83025373ec0aec5633711', class: "header-background" }), h("slot", { key: '900aaa7da5d6f08e6f94b128fa065348d595159e' })));
+            } }, inheritedAttributes), theme !== 'md' && translucent && h("div", { key: '4a1470d86e1aac6f8d545fe01e75b4dce665fb70', class: "header-background" }), h("slot", { key: '3b02661242bda5834c4e13e4eb61bf79b53ba33e' })));
     }
     get el() { return getElement(this); }
 };
@@ -1261,7 +1261,7 @@ const RouterOutlet = class {
         return true;
     }
     render() {
-        return h("slot", { key: 'f59dfdc11831ed91f5f7d8147cdc14f3c07bc289' });
+        return h("slot", { key: '3f107f085a977b4d27c7266771a9564e3219f736' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1301,11 +1301,11 @@ const ToolbarTitle = class {
     render() {
         const theme = getIonTheme(this);
         const size = this.getSize();
-        return (h(Host, { key: '87bb5264f4c13d0d6eeef874ed114539d0b59062', class: createColorClasses(this.color, {
+        return (h(Host, { key: '8db3e5f9dbd8b1762a9919eaeef29c98649dfb25', class: createColorClasses(this.color, {
                 [theme]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, h("div", { key: '75f2ddfaf693ffdec13d909eefdb09b441d76e80', class: "toolbar-title" }, h("slot", { key: '00539af5e250bee78fdd1c55f2ecdc8e53bc18b0' }))));
+            }) }, h("div", { key: 'a31ebae2c494a51d2145eec69d0b1bc635108a01', class: "toolbar-title" }, h("slot", { key: 'f5975b44b3e3afbf98dcbdb53fc78447b49407b3' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1551,11 +1551,11 @@ const Toolbar = class {
             Object.assign(childStyles, style);
         });
         const titlePlacement = this.getTitlePlacement();
-        return (h(Host, { key: '069913e9241b8e9a2dee8e7d088d181b6faeab5e', class: Object.assign(Object.assign({}, createColorClasses(this.color, {
+        return (h(Host, { key: 'a2103857ffb26f517b4190bb01a8fa170a042e45', class: Object.assign(Object.assign({}, createColorClasses(this.color, {
                 [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 [`toolbar-title-placement-${titlePlacement}`]: true,
-            })), childStyles) }, h("div", { key: '3255531be492b9afa7b47476a805f923beea09db', class: "toolbar-background", part: "background" }), h("div", { key: '8758189374c0a12f293c30ca7f8f049b732d2cab', class: "toolbar-container", part: "container" }, h("slot", { key: '74c3705f717968893bf94ea95c99cae313ce68f3', name: "start", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: '298c78f93291442f140f8c52983871215f20ea87', name: "secondary", onSlotchange: () => this.updateSlotClasses }), h("div", { key: 'f7376320b704b8ce375fe2223ae30d51bfc05acb', class: "toolbar-content", part: "content" }, h("slot", { key: 'ddaec08b1fbd13384d834ba4c3b4441c4d749faf' })), h("slot", { key: '6d5bce85159859bb548e4d3fb6b22208dcb48987', name: "primary", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: 'd1d21752ed3bcc7bf15c20de1c0a6fd956373450', name: "end", onSlotchange: () => this.updateSlotClasses }))));
+            })), childStyles) }, h("div", { key: '288b74048d260c9279d6e60c8733e26105ee0098', class: "toolbar-background", part: "background" }), h("div", { key: 'fa4b8cfb32f3bfb84f451cf3a2420b37fc75533c', class: "toolbar-container", part: "container" }, h("slot", { key: 'fe9414ab3fa2ca84d424a400ba91ec8239d700ff', name: "start", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: 'c633cd1b6eef87adbfccfa61857518dcf62ac550', name: "secondary", onSlotchange: () => this.updateSlotClasses }), h("div", { key: 'aff3a3d8acbc480e9daec864aeb85d168ab2c447', class: "toolbar-content", part: "content" }, h("slot", { key: '52b45c5abbfe695e862c857163e7aa00c1c2af9a' })), h("slot", { key: '3157c16fcfe428230998f218c6233d114b550a6f', name: "primary", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: '4b74dff5b832ea0f3030efa319c63c876c3e90e2', name: "end", onSlotchange: () => this.updateSlotClasses }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-avatar_3.entry.js

@@ -159,9 +159,9 @@ const Thumbnail = class {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '2fb4e6f9f650badf2bc492fc4b1c43cad64141c0', class: {
+        return (h(Host, { key: '6053cf163155d4268dad4fc81ffc6bbc70d75659', class: {
                 [theme]: true,
-            } }, h("slot", { key: 'ea18f4572b2b019af3470c6bdb7915d4a5dd84bb' })));
+            } }, h("slot", { key: 'b7afb5835bce7c7ed9e5cf44758bbe2d802e1271' })));
     }
 };
 Thumbnail.style = thumbnailCss();

package/dist/esm/ion-col_3.entry.js

@@ -4,7 +4,6 @@
 import { r as registerInstance, i as forceUpdate, f as printIonWarning, h, d as Host, g as getElement } from './index-Omi_TcwW.js';
 import { c as getIonTheme } from './ionic-global-CAZb-5i-.js';
 
-// TODO(FW-7285): Replace with global breakpoints
 const SIZE_TO_MEDIA = {
     xs: '(min-width: 0px)',
     sm: '(min-width: 576px)',
@@ -28,7 +27,6 @@ const matchBreakpoint = (breakpoint) => {
 
 const colCss = () => `:host{--col-unit-size:calc(     (100% - (var(--ion-grid-columns, 12) - 1) * var(--ion-grid-gap, 0px)) / var(--ion-grid-columns, 12)   );-webkit-padding-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;-ms-flex:1;flex:1;min-height:1px;overflow:auto}@media (min-width: 576px){:host{-webkit-padding-start:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px))}}@media (min-width: 768px){:host{-webkit-padding-start:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px))}}@media (min-width: 992px){:host{-webkit-padding-start:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px))}}@media (min-width: 1200px){:host{-webkit-padding-start:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px))}}:host(.ion-grid-col-auto){-ms-flex:0 0 auto;flex:0 0 auto}:host([class^=ion-grid-col--]),:host([class*=" ion-grid-col--"]){-ms-flex:0 0 calc(var(--ion-grid-col-span) * var(--col-unit-size) + (var(--ion-grid-col-span) - 1) * var(--ion-grid-gap, 0px));flex:0 0 calc(var(--ion-grid-col-span) * var(--col-unit-size) + (var(--ion-grid-col-span) - 1) * var(--ion-grid-gap, 0px));max-width:calc(var(--ion-grid-col-span) * var(--col-unit-size) + (var(--ion-grid-col-span) - 1) * var(--ion-grid-gap, 0px))}:host([class^=ion-grid-offset-col--]),:host([class*=" ion-grid-offset-col--"]){--margin-calc:calc(     var(--col-unit-size) * var(--ion-grid-col-margin) + (var(--ion-grid-gap, 0px) * var(--ion-grid-col-margin))   );-webkit-margin-start:var(--margin-calc);margin-inline-start:var(--margin-calc);-webkit-margin-end:0;margin-inline-end:0}:host(.ion-grid-col--1){--ion-grid-col-span:1}:host(.ion-grid-order-col--1){-ms-flex-order:1;order:1}:host(.ion-grid-offset-col--1){--ion-grid-col-margin:1}:host(.ion-grid-col--2){--ion-grid-col-span:2}:host(.ion-grid-order-col--2){-ms-flex-order:2;order:2}:host(.ion-grid-offset-col--2){--ion-grid-col-margin:2}:host(.ion-grid-col--3){--ion-grid-col-span:3}:host(.ion-grid-order-col--3){-ms-flex-order:3;order:3}:host(.ion-grid-offset-col--3){--ion-grid-col-margin:3}:host(.ion-grid-col--4){--ion-grid-col-span:4}:host(.ion-grid-order-col--4){-ms-flex-order:4;order:4}:host(.ion-grid-offset-col--4){--ion-grid-col-margin:4}:host(.ion-grid-col--5){--ion-grid-col-span:5}:host(.ion-grid-order-col--5){-ms-flex-order:5;order:5}:host(.ion-grid-offset-col--5){--ion-grid-col-margin:5}:host(.ion-grid-col--6){--ion-grid-col-span:6}:host(.ion-grid-order-col--6){-ms-flex-order:6;order:6}:host(.ion-grid-offset-col--6){--ion-grid-col-margin:6}:host(.ion-grid-col--7){--ion-grid-col-span:7}:host(.ion-grid-order-col--7){-ms-flex-order:7;order:7}:host(.ion-grid-offset-col--7){--ion-grid-col-margin:7}:host(.ion-grid-col--8){--ion-grid-col-span:8}:host(.ion-grid-order-col--8){-ms-flex-order:8;order:8}:host(.ion-grid-offset-col--8){--ion-grid-col-margin:8}:host(.ion-grid-col--9){--ion-grid-col-span:9}:host(.ion-grid-order-col--9){-ms-flex-order:9;order:9}:host(.ion-grid-offset-col--9){--ion-grid-col-margin:9}:host(.ion-grid-col--10){--ion-grid-col-span:10}:host(.ion-grid-order-col--10){-ms-flex-order:10;order:10}:host(.ion-grid-offset-col--10){--ion-grid-col-margin:10}:host(.ion-grid-col--11){--ion-grid-col-span:11}:host(.ion-grid-order-col--11){-ms-flex-order:11;order:11}:host(.ion-grid-offset-col--11){--ion-grid-col-margin:11}:host(.ion-grid-col--12){--ion-grid-col-span:12}:host(.ion-grid-order-col--12){-ms-flex-order:12;order:12}:host(.ion-grid-offset-col--12){--ion-grid-col-margin:12}`;
 
-// TODO(FW-7285): Replace with global breakpoints
 // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
 const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
 const Col = class {
@@ -103,12 +101,12 @@ const Col = class {
         const colSize = this.getSizeClass();
         const colOrder = this.getOrderClass();
         const colOffset = this.getOffsetClass();
-        return (h(Host, { key: '7fc98e15bd75e9c22fe7eaf71f2f49f5d987613a', class: {
+        return (h(Host, { key: '4620a4eb3c94f744d6169ae9d4cc43e86a271a52', class: {
                 [theme]: true,
                 [`${colSize}`]: colSize !== undefined,
                 [`${colOrder}`]: colOrder !== undefined,
                 [`${colOffset}`]: colOffset !== undefined,
-            } }, h("slot", { key: '6ed04a2c2bcdb0400354368c568e58414a60fc39' })));
+            } }, h("slot", { key: '5c3be98deed2050634396339b7787f2770a05d35' })));
     }
     get el() { return getElement(this); }
 };
@@ -126,10 +124,10 @@ const Grid = class {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '43b4e05ef076160d901c70dc37e177f19b524349', class: {
+        return (h(Host, { key: 'cd55886cabaeab57e3b13193381b196bec2f07f8', class: {
                 [theme]: true,
                 'grid-fixed': this.fixed,
-            } }, h("slot", { key: 'f3805936034708e6783223ded72c0ecfd40e5fb0' })));
+            } }, h("slot", { key: 'c9b95999e6a274a8a0c997451c0be45b1304d77b' })));
     }
 };
 Grid.style = gridCss();
@@ -142,9 +140,9 @@ const Row = class {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '64ff6346d95be8d99d6500a6263067081f3fe254', class: {
+        return (h(Host, { key: '6f5dd5032485a69ddf9510e2e539a7ba90afda47', class: {
                 [theme]: true,
-            } }, h("slot", { key: 'e9b4c111f3a49515a721bf679ef2f1a039c9822a' })));
+            } }, h("slot", { key: '994dcbbc871d606b61ff5993fb29aa1fa349c483' })));
     }
 };
 Row.style = rowCss();

package/dist/esm/ion-datetime_3.entry.js

@@ -2293,11 +2293,11 @@ const Picker = class {
     render() {
         const { htmlAttributes } = this;
         const theme = getIonTheme(this);
-        return (h(Host, Object.assign({ key: 'b0c1fc8eee284f03c696f0c8aaa29f4a6d7be0be', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (h(Host, Object.assign({ key: 'efcc823fad9cb37c1379bef4f4b84c6461f3a3a6', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: Object.assign({ [theme]: true,
                 // Used internally for styling
-                [`picker-${theme}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: 'b56a9f94c7a95efc047d7be95e76ba3a2284801d', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'f134d49a3afcfd2a809147b55949cea43fc34462', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '9ae98dc10164e182a13eaef2105894a717a03cc4', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '96acad60c1214e13098282182fa855b19f0a386c', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: 'af26cd644ed9bb50c22f06624da3726e7e60426f', class: "picker-columns" }, h("div", { key: 'c0d8bf724f7dc081c314bef61fa08894a75c657b', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '7315333742b5b0c9533f30e5ce3dfc6ec9112dc1', class: "picker-below-highlight" }))), h("div", { key: '454546aaf27319ae7973e74063c0a026cfc88834', tabindex: "0", "aria-hidden": "true" })));
+                [`picker-${theme}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: '3f44bf34e039210ae149c590c393ee9f7fb85da0', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'c2a51a89c525b1a22cbc8583cd30f41c3c356d4f', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '23837ffe309d0aad9b8ea09d7ac94d21040ef0d7', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: '91ba7e553d570768142715ded4bcc27fceedbce4', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: '22661cafeb555f1435ec1e0a122404a48136095b', class: "picker-columns" }, h("div", { key: '5f3db32468b8c60f63c70d81a27b18cce6f2e259', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '1bae6b170125b1671a480506ba73636b42b65909', class: "picker-below-highlight" }))), h("div", { key: '91beb94ce537122fbd6cd0c2bd3c00f908d0fefe', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -2655,9 +2655,9 @@ const PickerColumnCmp = class {
     render() {
         const col = this.col;
         const theme = getIonTheme(this);
-        return (h(Host, { key: '5751788e3b7ecd2fe269c096db883b0681646270', class: Object.assign({ [theme]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+        return (h(Host, { key: '66a5b7f51aa1ee343dbad3830e03933dbdab27ed', class: Object.assign({ [theme]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (h("div", { key: '833f3309c8c77e1faa773f7eaa066516dfd51067', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: 'a39f38e60938e70425e4d7674f5e481885b6b548', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: 'a2f1e0eab834c85e84cee0a716eb1083aa6c7741', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (h("div", { key: '19a170752bacdabd50c719f6d1aa9e58a2bd830b', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), h("div", { key: '871671f796aa6a1f78e07ab2599d94b5fd8cd0bf', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (h("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (h("div", { key: '89792e1dc75a4359a4706a8fd1846fe29b866173', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-img.entry.js

@@ -82,9 +82,9 @@ const Img = class {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
         const theme = getIonTheme(this);
-        return (h(Host, { key: '91de170493b31d6260e975b440beceb6906b6d5a', class: {
+        return (h(Host, { key: '840d5b29d81222b061ac72168ef6551b5a061e3a', class: {
                 [theme]: true,
-            } }, h("img", { key: 'ac1f41afbece34a3e38e656733f3e55cce385b4c', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+            } }, h("img", { key: 'e22e66ee4bb3a648b21c6080674e68eebf4a3feb', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-infinite-scroll_2.entry.js

@@ -269,7 +269,7 @@ const InfiniteScroll = class {
     render() {
         const theme = getIonTheme(this);
         const disabled = this.disabled;
-        return (h(Host, { key: '02beca21d668e4e605532ad5ca5a67a08c71eebb', class: {
+        return (h(Host, { key: '22d99824cb589d9024666a3c1ed205f781858eed', class: {
                 [theme]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,
@@ -313,11 +313,11 @@ const InfiniteScrollContent = class {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'b51954f829eeafd5ec304b3e66e330776485ffc8', class: {
+        return (h(Host, { key: 'e94d19f17ef9d4d77786716152e3206366feb546', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`infinite-scroll-content-${theme}`]: true,
-            } }, h("div", { key: '047da7f15fe38deed592dd66d1c97e12da4545bb', class: "infinite-loading" }, this.loadingSpinner && (h("div", { key: '1c05820f091052b8ee9e9ca20054495a676c21aa', class: "infinite-loading-spinner" }, h("ion-spinner", { key: 'ff801e3486f3c1a4605d2a2de9b47bd7bd536698', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+            } }, h("div", { key: '35fcc0572ad27a683aa55a704bd11b19fcdfd29c', class: "infinite-loading" }, this.loadingSpinner && (h("div", { key: 'fec3c13dbb2fa98699401147ce442b73e97e8bd8', class: "infinite-loading-spinner" }, h("ion-spinner", { key: '6cd6083255dacc891b4d201477e6bffccb1084bc', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
     }
 };
 InfiniteScrollContent.style = {

package/dist/esm/ion-input-otp.entry.js

@@ -690,7 +690,7 @@ const InputOTP = class {
         const tabbableIndex = this.getTabbableIndex();
         const pattern = this.getPattern();
         const hasDescription = ((_b = (_a = el.querySelector('.input-otp-description')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) !== '';
-        return (h(Host, { key: '7a5c5dbb7e1880bd94d4b00e579af941366b1cb2', class: createColorClasses(color, {
+        return (h(Host, { key: 'aee59cdba3f3c3783519cf114c668ae92f74fcef', class: createColorClasses(color, {
                 [mode]: true,
                 'has-focus': hasFocus,
                 [`input-otp-size-${size}`]: true,
@@ -698,10 +698,10 @@ const InputOTP = class {
                 [`input-otp-fill-${fill}`]: true,
                 'input-otp-disabled': disabled,
                 'input-otp-readonly': readonly,
-            }) }, h("div", Object.assign({ key: 'a4427602ea1894d53e4d0f502dbb972c93a86bff', role: "group", "aria-label": "One-time password input", class: "input-otp-group", part: "group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper", part: "container" }, h("input", { class: "native-input", part: "native", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator", part: "separator" }))))), h("div", { key: '7ee9d8dfd2e52875f1bfe3e3dea0494c18c12f4a', class: {
+            }) }, h("div", Object.assign({ key: 'a0b26b833a20807019114a78e4512a639b82a61f', role: "group", "aria-label": "One-time password input", class: "input-otp-group", part: "group" }, inheritedAttributes), Array.from({ length }).map((_, index) => (h(Fragment, null, h("div", { class: "native-wrapper", part: "container" }, h("input", { class: "native-input", part: "native", id: `${inputId}-${index}`, "aria-label": `Input ${index + 1} of ${length}`, type: "text", autoCapitalize: autocapitalize, inputmode: inputmode, pattern: pattern, disabled: disabled, readOnly: readonly, tabIndex: index === tabbableIndex ? 0 : -1, value: inputValues[index] || '', autocomplete: "one-time-code", ref: (el) => (inputRefs[index] = el), onInput: this.onInput(index), onBlur: this.onBlur, onFocus: this.onFocus(index), onKeyDown: this.onKeyDown(index), onPaste: this.onPaste })), this.showSeparator(index) && h("div", { class: "input-otp-separator", part: "separator" }))))), h("div", { key: 'e525d1841bab5378b165ec1cca9fc45274c2c0ec', class: {
                 'input-otp-description': true,
                 'input-otp-description-hidden': !hasDescription,
-            }, part: "description" }, h("slot", { key: '163c374e7ae5dbdb1dc12483161e5aca919a50d5' }))));
+            }, part: "description" }, h("slot", { key: '9fd331ceff04ab93f8d4aec251565cc201f19294' }))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

package/dist/esm/ion-input-password-toggle.entry.js

@@ -99,16 +99,16 @@ const InputPasswordToggle = class {
         const { color, inputPasswordHideIcon, inputPasswordShowIcon, type } = this;
         const mode = getIonMode(this);
         const isPasswordVisible = type === 'text';
-        return (h(Host, { key: 'c7f0805958b284005806a0cb3ed0b5cba42cecd1', class: createColorClasses(color, {
+        return (h(Host, { key: 'e3c21d5bedebeadb57c0c9b7f065d15ab0d49e4a', class: createColorClasses(color, {
                 [mode]: true,
-            }) }, h("ion-button", { key: 'dee2bdeb169d1fa4943c9a8b0164b8fbb4cdfe06', mode: mode, color: color, fill: "clear", shape: "round", "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', "aria-pressed": isPasswordVisible ? 'true' : 'false', type: "button", onPointerDown: (ev) => {
+            }) }, h("ion-button", { key: '0a83d58e059bc3b7ef604270e92351d7fa5d129c', mode: mode, color: color, fill: "clear", shape: "round", "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', "aria-pressed": isPasswordVisible ? 'true' : 'false', type: "button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the password toggle
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: 'be752db7186a7cd6fc033c7002fcb1683d93c162', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
+            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: 'af9a7e202fe0b3f75f10b3e13bf1e5fb653194d1', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-input.entry.js

@@ -620,7 +620,7 @@ const Input = class {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'beeeca9939e7e416783425f67d3c9e2be6bbae99', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'd62741432c3e1421d69fdf2ed2e8058a1ce3544f', class: createColorClasses(this.color, {
                 [theme]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -633,7 +633,7 @@ const Input = class {
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
                 'input-readonly': readonly,
-            }) }, h("label", { key: 'f227df52a6ad60344f16261a82c0d0566bb8cd5b', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'ae6da554ce21f805361a7704139b776a9344dcb2', class: "native-wrapper", onClick: this.onLabelClick }, 
+            }) }, h("label", { key: '9707227d9eb977e0983c78757af20219eb1651c6', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '8bc5197ecb665e268668137844f122b74f69cc2d', class: "native-wrapper", onClick: this.onLabelClick }, 
         /**
          * For the ionic theme, we render the outline container here
          * instead of higher up, so it can be positioned relative to
@@ -643,14 +643,14 @@ const Input = class {
          * <label> element, ensuring that clicking the label text
          * focuses the input.
          */
-        theme === 'ionic' && h("div", { key: '83aa5e7ad97b0c964e31966c1d2b8771d1ecfc53', class: "input-outline" }), h("slot", { key: '1931003f2b0d19508acaaffab58fee644d1f6158', name: "start" }), h("input", Object.assign({ key: '33a06efb4ce0b6e67c12e77f131effb113fba73f', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.getLabelledById() }, this.inheritedAttributes)), clearInput && !readonly && !disabled && (h("button", { key: 'd350f26cf6927ee089373ea8903db2479a0a404c', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+        theme === 'ionic' && h("div", { key: '65383eeb6a876dbf103dd5358f041f45856e6e9d', class: "input-outline" }), h("slot", { key: '7d333894f2be13a4033a515ce3c8a4489cc4bfc3', name: "start" }), h("input", Object.assign({ key: '8221d445e4ee9e1d2946205893cbb6de93604c86', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.getLabelledById() }, this.inheritedAttributes)), clearInput && !readonly && !disabled && (h("button", { key: '2fb77a78ecb32b46dc9641580c2c2f6125e9715d', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.clearTextInput }, h("ion-icon", { key: '972a2d94dcf599e63aac1d73e34873a9c3d0bf94', "aria-hidden": "true", icon: inputClearIcon }))), h("slot", { key: 'fac4dcaabb02f647e46276e92e3f341557170aec', name: "end" })), shouldRenderHighlight && h("div", { key: 'a10e519d8d1f0dcd81ffc43b8e4086797476f753', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: 'a349dfb263a011fc10f01350f917c4020809f512', "aria-hidden": "true", icon: inputClearIcon }))), h("slot", { key: '6e02025608bd54cf36e21ed3bef00353921a7fb9', name: "end" })), shouldRenderHighlight && h("div", { key: '8bf1e516962d232a96a2fa701e10c8c909318f62', class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-item-option_3.entry.js

@@ -68,14 +68,14 @@ const ItemOption = class {
                 href: this.href,
                 target: this.target,
             };
-        return (h(Host, { key: 'bfade0042108ff525077dfbdfd45169ccfd6b920', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '810fe351aa83d6e88cb0e2ebee307b3050e65b45', onClick: this.onClick, class: createColorClasses(this.color, {
                 [theme]: true,
                 [`item-option-${shape}`]: shape !== undefined,
                 [`item-option-${hue}`]: hue !== undefined,
                 'item-option-disabled': disabled,
                 'item-option-expandable': expandable,
                 'ion-activatable': true,
-            }) }, h(TagType, Object.assign({ key: '38466b511f4a20a3728f37dbf6779b852eba531a' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: 'bb8f1b332afa2f575bcc69b340bd8f1faa5ca925', class: "button-inner", part: "inner" }, h("slot", { key: '41d627511e1615283956712e1b9519bae92460f6', name: "top" }), h("div", { key: 'bb949a43a586a8996933ee7528e5491beb647aa5', class: "horizontal-wrapper", part: "container" }, h("slot", { key: 'c0d6a73ef49082bfbdf0f542f7465d044ccb6521', name: "start" }), h("slot", { key: '79c6103e680983b2c1a17f1f11dbc41224cd4016', name: "icon-only" }), h("slot", { key: '6c7f17723544d3f6e8b9689b84ddf6196f1897a5' }), h("slot", { key: 'e15d0e02fde71bad8ff7bab0eded7d49508a926e', name: "end" })), h("slot", { key: 'c509d54d44ce33f5a34597b9d0ec29960bbcff62', name: "bottom" })), theme === 'md' && h("ion-ripple-effect", { key: '412d4dc645c941d0b4356cf982be3d5bc2686f13' }))));
+            }) }, h(TagType, Object.assign({ key: '6eb95c4f815e774d1b579a1fb2ddcad891966ca0' }, attrs, { class: "button-native", part: "native", disabled: disabled }), h("span", { key: '5630c1bd31910f46b0a08017a98f7935f17385bf', class: "button-inner", part: "inner" }, h("slot", { key: '081375e3b9683347008d08817ded21c61a374d93', name: "top" }), h("div", { key: '99d7dff311268ab4677397ab5a29b068f1cdf79b', class: "horizontal-wrapper", part: "container" }, h("slot", { key: 'b88858db83d847e3d49a84b75eb277500cb66fb3', name: "start" }), h("slot", { key: '8ca5149591a5e3285eff5078e1eb03554fb0713b', name: "icon-only" }), h("slot", { key: 'a8229a5e11bf41926745ab71f6dcd2d2ca63806c' }), h("slot", { key: '9a497c0cb92fe14ad6b9063fa0946fcd75fb8c08', name: "end" })), h("slot", { key: 'cae262fd2b7fad9e4bc9c02541fa17a6480ecf7f', name: "bottom" })), theme === 'md' && h("ion-ripple-effect", { key: '7114b927480e6a9261c7568e036ecf38ec1680ab' }))));
     }
     get el() { return getElement(this); }
 };
@@ -110,7 +110,7 @@ const ItemOptions = class {
     render() {
         const theme = getIonTheme(this);
         const isEnd = isEndSide(this.side);
-        return (h(Host, { key: 'f3bb726a28c571101791d33d946df9017f47e5ec', class: {
+        return (h(Host, { key: 'cc55282505679d51fb90ebf30869e930c71afbd4', class: {
                 [theme]: true,
                 // Used internally for styling
                 [`item-options-${theme}`]: true,
@@ -658,7 +658,7 @@ const ItemSliding = class {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: '321925e5582cc08b14031231603b1f1c49828b0a', class: {
+        return (h(Host, { key: 'c945f30d9f7deb90d22064d4059e2b08f35614be', class: {
                 [theme]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,