@ionic/core 7.8.0 → 7.8.1-dev.11710449785.14ebd5a0

package/hydrate/index.js

@@ -17809,6 +17809,7 @@ class Datetime {
         this.initializeKeyboardListeners();
     }
     componentDidLoad() {
+        const { el, intersectionTrackerRef } = this;
         /**
          * If a scrollable element is hidden using `display: none`,
          * it will not have a scroll height meaning we cannot scroll elements
@@ -17834,14 +17835,14 @@ class Datetime {
                 this.el.classList.add('datetime-ready');
             });
         };
-        const visibleIO = new IntersectionObserver(visibleCallback, { threshold: 0.01 });
+        const visibleIO = new IntersectionObserver(visibleCallback, { threshold: 0.01, root: el });
         /**
          * Use raf to avoid a race condition between the component loading and
          * its display animation starting (such as when shown in a modal). This
          * could cause the datetime to start at a visibility of 0, erroneously
          * triggering the `hiddenIO` observer below.
          */
-        raf(() => visibleIO === null || visibleIO === void 0 ? void 0 : visibleIO.observe(this.el));
+        raf(() => visibleIO === null || visibleIO === void 0 ? void 0 : visibleIO.observe(intersectionTrackerRef));
         /**
          * We need to clean up listeners when the datetime is hidden
          * in a popover/modal so that we can properly scroll containers
@@ -17867,8 +17868,8 @@ class Datetime {
                 this.el.classList.remove('datetime-ready');
             });
         };
-        const hiddenIO = new IntersectionObserver(hiddenCallback, { threshold: 0 });
-        raf(() => hiddenIO === null || hiddenIO === void 0 ? void 0 : hiddenIO.observe(this.el));
+        const hiddenIO = new IntersectionObserver(hiddenCallback, { threshold: 0, root: el });
+        raf(() => hiddenIO === null || hiddenIO === void 0 ? void 0 : hiddenIO.observe(intersectionTrackerRef));
         /**
          * Datetime uses Ionic components that emit
          * ionFocus and ionBlur. These events are
@@ -18619,7 +18620,7 @@ class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (hAsync(Host, { key: 'b12b07aebad0a686f93f70dbe29bd039b4c4104f', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
+        return (hAsync(Host, { key: '064dc72b5494a687e93e7605f7e1ec2d00f523ad', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -18629,7 +18630,7 @@ class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, this.renderDatetime(mode)));
+            })) }, hAsync("div", { key: '258b34ca5d9bacfaa886a7de278f41a30be48c44', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -19033,7 +19034,7 @@ class DatetimeButton {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '861a08f4a239de771875aee9b505e06ac7064b32', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'a38773e24ea0a28315be89baf0ef97f564b5d74b', class: createColorClasses$1(color, {
                 [mode]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
@@ -19111,12 +19112,12 @@ class Fab {
     render() {
         const { horizontal, vertical, edge } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'eb7470763cfaadd229036fe4e04913cb4a0551c7', class: {
+        return (hAsync(Host, { key: '2960656845d8ab1d643e56870cfeefbceb44fb20', class: {
                 [mode]: true,
                 [`fab-horizontal-${horizontal}`]: horizontal !== undefined,
                 [`fab-vertical-${vertical}`]: vertical !== undefined,
                 'fab-edge': edge,
-            } }, hAsync("slot", { key: 'daf53f8c644db866f69d41401dba7a2791c37ac3' })));
+            } }, hAsync("slot", { key: 'eed164a50594167959905a90d678d417bc99098d' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -19206,7 +19207,7 @@ class FabButton {
                 rel: this.rel,
                 target: this.target,
             };
-        return (hAsync(Host, { key: '78f11aaac39bf0fcb25b64885ee61619223e4241', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'c6d1a3ea95ee1fb6c86447881ff8ed7d885b9fb5', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses$1(color, {
                 [mode]: true,
                 'fab-button-in-list': inList,
                 'fab-button-translucent-in-list': inList && translucent,
@@ -19217,7 +19218,7 @@ class FabButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 [`fab-button-${size}`]: size !== undefined,
-            }) }, hAsync(TagType, Object.assign({ key: 'a29b5eff122006d463ef3e10e1abe8378de07dc5' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), hAsync("ion-icon", { key: 'e554c978fd9825eec9ca958f5b481f662ed6daa4', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), hAsync("span", { key: 'd7dd93e93343767d223800899f0fd4c405845023', class: "button-inner" }, hAsync("slot", { key: 'dd5df0945385480e7551e24117d136cd6b231638' })), mode === 'md' && hAsync("ion-ripple-effect", null))));
+            }) }, hAsync(TagType, Object.assign({ key: 'd57e55e43e3e1fa7a255e25bfb9eb81a20200aa4' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), hAsync("ion-icon", { key: '561252585dc5f5ed260987fc8fef2558700b2700', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), hAsync("span", { key: 'd156660a55d4d849c24368ee79217e66c6423b37', class: "button-inner" }, hAsync("slot", { key: '35d4507eec7e4f646e1ef9206b8d6c9fd5a43c37' })), mode === 'md' && hAsync("ion-ripple-effect", null))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -19268,11 +19269,11 @@ class FabList {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'c786680f9868700913a182f908f25a612ec08498', class: {
+        return (hAsync(Host, { key: 'edbed7730aa2f177a6fb39a89af805b9699bc9ae', class: {
                 [mode]: true,
                 'fab-list-active': this.activated,
                 [`fab-list-side-${this.side}`]: true,
-            } }, hAsync("slot", { key: '547f8cb69ab2371095e3deeef1dc13fc1053bdf6' })));
+            } }, hAsync("slot", { key: '3ecb467b6d09dc02a1ab3cb76403f7c56e8ec6b2' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -19724,7 +19725,7 @@ class Footer {
         const mode = getIonMode$1(this);
         const tabs = this.el.closest('ion-tabs');
         const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
-        return (hAsync(Host, { key: '550b8b8fb614e541e1d369fc1ac5ba1f083913b4', role: "contentinfo", class: {
+        return (hAsync(Host, { key: '6f2827ba2e64d1a889c0631bc2a6d5df97b338ce', role: "contentinfo", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`footer-${mode}`]: true,
@@ -19732,7 +19733,7 @@ class Footer {
                 [`footer-translucent-${mode}`]: translucent,
                 ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
                 [`footer-collapse-${collapse}`]: collapse !== undefined,
-            } }, mode === 'ios' && translucent && hAsync("div", { class: "footer-background" }), hAsync("slot", { key: 'd25187ecc2ce7848ba882af078cb634e9d5e8814' })));
+            } }, mode === 'ios' && translucent && hAsync("div", { class: "footer-background" }), hAsync("slot", { key: 'b07574feb587a1089b001e7d158fd8d05e32304b' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -19763,10 +19764,10 @@ class Grid {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '03a8975bb9320192033219fc9e06fe7afa4fae4a', class: {
+        return (hAsync(Host, { key: '265ab989098511c0b7e7d99edc792081f3ac7dfe', class: {
                 [mode]: true,
                 'grid-fixed': this.fixed,
-            } }, hAsync("slot", { key: '8d95abb4614e73a46a274668c13fe7c7f011c537' })));
+            } }, hAsync("slot", { key: '83e3ea4d1a60d1a6dab6b592e70a98924c0cfd7c' })));
     }
     static get style() { return IonGridStyle0; }
     static get cmpMeta() { return {
@@ -20097,14 +20098,14 @@ class Header {
         const collapse = this.collapse || 'none';
         // banner role must be at top level, so remove role if inside a menu
         const roleType = hostContext('ion-menu', this.el) ? 'none' : 'banner';
-        return (hAsync(Host, Object.assign({ key: 'a33e7e1818cb4718ae36b8bcfa811c4138b85fac', role: roleType, class: {
+        return (hAsync(Host, Object.assign({ key: 'be4386a218c20dc4c18320dbbcfb25574d13d27e', role: roleType, class: {
                 [mode]: true,
                 // Used internally for styling
                 [`header-${mode}`]: true,
                 [`header-translucent`]: this.translucent,
                 [`header-collapse-${collapse}`]: true,
                 [`header-translucent-${mode}`]: this.translucent,
-            } }, inheritedAttributes), mode === 'ios' && translucent && hAsync("div", { class: "header-background" }), hAsync("slot", { key: '7e2fa75034f7422a3dc5691e9b3c25393e16c0ca' })));
+            } }, inheritedAttributes), mode === 'ios' && translucent && hAsync("div", { class: "header-background" }), hAsync("slot", { key: '74c401fb331aeb40c733605fd580949ad53989b8' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -20383,7 +20384,7 @@ class Img {
     render() {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
-        return (hAsync(Host, { key: '1983ddd575d8f870f249d37a3897dbcc110bf4d7', class: getIonMode$1(this) }, hAsync("img", { key: 'f2ba013804f6ed9e5dadb08c75e47c0f844e67f3', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        return (hAsync(Host, { key: '212cb19b83defa47a677e44659eccc5e7e1bc5a2', class: getIonMode$1(this) }, hAsync("img", { key: '975230d5ef5f262c8e5f040eb59cd1033241f3c8', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -20590,7 +20591,7 @@ class InfiniteScroll {
     render() {
         const mode = getIonMode$1(this);
         const disabled = this.disabled;
-        return (hAsync(Host, { key: '8b5da92c7a1c118cd6c6a6be8f21b11b79f166bd', class: {
+        return (hAsync(Host, { key: 'cf712b0f22fe89b41377402da44f5575118ed34f', class: {
                 [mode]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,
@@ -20646,11 +20647,11 @@ class InfiniteScrollContent {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '8ffd8ff4c951be0c2b1f48fd4be3a2d7765a989f', class: {
+        return (hAsync(Host, { key: '38c67d2c7ea4c304e71dacea64add0bffab69906', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`infinite-scroll-content-${mode}`]: true,
-            } }, hAsync("div", { key: 'd7d03485501b5e2fde7c132309bb6358818eb0cd', class: "infinite-loading" }, this.loadingSpinner && (hAsync("div", { class: "infinite-loading-spinner" }, hAsync("ion-spinner", { name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+            } }, hAsync("div", { key: 'a23484ccbaf65e0e3ecb59befea425cfdbc782fd', class: "infinite-loading" }, this.loadingSpinner && (hAsync("div", { class: "infinite-loading-spinner" }, hAsync("ion-spinner", { name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
     }
     static get style() { return {
         ios: IonInfiniteScrollContentIosStyle0,
@@ -21657,11 +21658,11 @@ class ItemDivider {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '8422b960dfcce4ff1370d9c185e285bb4a3688d5', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'd9d5993694639e8f1ed589f0e8c3f4920ce30e02', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'item-divider-sticky': this.sticky,
                 item: true,
-            }) }, hAsync("slot", { key: '240514b96ec48262040460775c8eb0a58d6acfa8', name: "start" }), hAsync("div", { key: 'ec18c092c81cb96f8c49ed7d4dede96c9a3e3f97', class: "item-divider-inner" }, hAsync("div", { key: '9c3f3dcb9b14fd1d37fb1104b3ba953dc9a3e894', class: "item-divider-wrapper" }, hAsync("slot", { key: '6b8e51eb86a5567b80a91034b26228105796a82d' })), hAsync("slot", { key: '7ccb661e1309c1ecca09a823f8e08b1cf90d95dd', name: "end" }))));
+            }) }, hAsync("slot", { key: '1da8c38cbf07ef591ceae94b0d70bf620990e568', name: "start" }), hAsync("div", { key: '349a581fd1688b01ce7c67da99ae22cb4a5a85f7', class: "item-divider-inner" }, hAsync("div", { key: '80e22ba4f5da2af40bb32a445b840baa59edfbcc', class: "item-divider-wrapper" }, hAsync("slot", { key: '6d3fb95c8eba128e56defccbcc5d4b1fa3ec4c4a' })), hAsync("slot", { key: '83a97c131348c8cf840c30ccbf83c78edc125c14', name: "end" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -21693,7 +21694,7 @@ class ItemGroup {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'b33f23544ddeeeb61847b146b1dcb7a9ba30af18', role: "group", class: {
+        return (hAsync(Host, { key: '1d7de42c40d5f37324342fa7be2420bf6499705e', role: "group", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-group-${mode}`]: true,
@@ -21761,12 +21762,12 @@ class ItemOption {
                 href: this.href,
                 target: this.target,
             };
-        return (hAsync(Host, { key: '8d8ef0455e0e46d31a84b6f9e83e377e0579f04b', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '7e208b463b2d36984791a7c9c1d24af88b468a03', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'item-option-disabled': disabled,
                 'item-option-expandable': expandable,
                 'ion-activatable': true,
-            }) }, hAsync(TagType, Object.assign({ key: '0d4833cefd206862a75fdef8744e659cff24a39f' }, attrs, { class: "button-native", part: "native", disabled: disabled }), hAsync("span", { key: 'bfbdab3ee6cfc884eb2bd60c92cf919f4b671c27', class: "button-inner" }, hAsync("slot", { key: '968ebecbd9e8ca5015106d79e5d29b4a1999d39b', name: "top" }), hAsync("div", { key: '38677cd72df6447a4e934695ab08857460be800d', class: "horizontal-wrapper" }, hAsync("slot", { key: 'e65131d2e3f12c3743c7229b0a7f381824a45281', name: "start" }), hAsync("slot", { key: 'c3a9bd83c455a79395574ff4d862299fd9340cd2', name: "icon-only" }), hAsync("slot", { key: '161ca1daed265e8990d28f74744476a37d555d85' }), hAsync("slot", { key: 'd5ecafceada1f8c3c16a2cb6511368828009081f', name: "end" })), hAsync("slot", { key: '39e6a9dffc2cb9e2e9a200f6c669ed47f9a485aa', name: "bottom" })), mode === 'md' && hAsync("ion-ripple-effect", null))));
+            }) }, hAsync(TagType, Object.assign({ key: '9f48210793e88f25b675add863453432e6d8be51' }, attrs, { class: "button-native", part: "native", disabled: disabled }), hAsync("span", { key: '3ebb5d9b7369f77ca49c8d700a95e4e2335a7f24', class: "button-inner" }, hAsync("slot", { key: '7df01a2c40554effe0e36e7fe29ac469a89ad395', name: "top" }), hAsync("div", { key: '1bdc411990a89a0523dd170bf4d61c2f28af3018', class: "horizontal-wrapper" }, hAsync("slot", { key: '967a0cc8ff611439fddf28c20c3f197be1a314a5', name: "start" }), hAsync("slot", { key: '7848ded44ce1b0e303f1c1a423fc1ae51e5997d4', name: "icon-only" }), hAsync("slot", { key: '6076bb1a50cebe374ecd8507133eaccd2ee2d08b' }), hAsync("slot", { key: '71505008df081744492fb22b41229ada64506834', name: "end" })), hAsync("slot", { key: 'c213321eafe801c1ace8573b4736c2f0ab585703', name: "bottom" })), mode === 'md' && hAsync("ion-ripple-effect", null))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -21813,7 +21814,7 @@ class ItemOptions {
     render() {
         const mode = getIonMode$1(this);
         const isEnd = isEndSide(this.side);
-        return (hAsync(Host, { key: '04d6baf62154da6ab9db5e679f982fe3fe276f89', class: {
+        return (hAsync(Host, { key: '42ec58a1a2a6a886309595103468d2c39e81f58b', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-options-${mode}`]: true,
@@ -22275,7 +22276,7 @@ class ItemSliding {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'f666dd119a72247feac11dcd704059fce7677325', class: {
+        return (hAsync(Host, { key: '83e1673fc5af892612deb9b49d5e792b8b0b6473', class: {
                 [mode]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
@@ -22384,7 +22385,7 @@ class Label {
     render() {
         const position = this.position;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '813192a6460057c6d1e42f50f3f257bee2f550d8', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'c80cc1b4dcd56f614efc1e63ca80bca2f20a7151', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 [`label-${position}`]: position !== undefined,
@@ -22446,7 +22447,7 @@ class List {
     render() {
         const mode = getIonMode$1(this);
         const { lines, inset } = this;
-        return (hAsync(Host, { key: '2cb1b689d9460d9576b471bb8b13d14fe34d1c2c', role: "list", class: {
+        return (hAsync(Host, { key: '7f259d2a107807065a440cca848ececa0da60458', role: "list", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`list-${mode}`]: true,
@@ -22492,10 +22493,10 @@ class ListHeader {
     render() {
         const { lines } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '1b832a6882307d40fe4afc9a95a5db4fbdff60a3', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '27a08e9dc880db9377608ea262e254b0856b0d5c', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, hAsync("div", { key: 'a53a3f05727b510d1b912c10c92a4aa58f4fe860', class: "list-header-inner" }, hAsync("slot", { key: '9377dee83f050b2cb2c5b7c5d106668cc81d8f90' }))));
+            }) }, hAsync("div", { key: 'edd68f126ee5d815e6ae13e9662e8cedbd2d46e5', class: "list-header-inner" }, hAsync("slot", { key: 'dae94a382ef09bb90d3ff3fbb2306515acfc2014' }))));
     }
     static get style() { return {
         ios: IonListHeaderIosStyle0,
@@ -22761,9 +22762,9 @@ class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (hAsync(Host, Object.assign({ key: '95123f54ba1db5e59563d79db075315b43ed20f7', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '7d4f3df4a869e66b59ce237b50b374cac4a296d3', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${40000 + this.overlayIndex}`,
-            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), hAsync("ion-backdrop", { key: 'e113bf123eaad38f2dafce8ea5d2ebef409d0c0f', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '1268c9480854383c7883a79d597350540ade93c2', tabindex: "0" }), hAsync("div", { key: 'e86fc71504ebd578117dea2232d9740a087d1249', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { class: "loading-spinner" }, hAsync("ion-spinner", { name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: '3b91e2492e06aa65ebe77ed2b6ffb9d2f84bdd9c', tabindex: "0" })));
+            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), hAsync("ion-backdrop", { key: '9d72026f73b56bc38a5317992caa17068f8402b5', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '67848b3058d4875b55cef88ccc0b5160cc9f5d9d', tabindex: "0" }), hAsync("div", { key: 'c275700b6cd77d7a0404b59e89ea97a75a4a22e9', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { class: "loading-spinner" }, hAsync("ion-spinner", { name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: '2333ff2f0d76bebe58cba85da0e5a38262ce33e7', tabindex: "0" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -23761,13 +23762,13 @@ class Menu {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (hAsync(Host, { key: 'c6bf01fd87e31cda09c0c35900cb01ea19d61781', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (hAsync(Host, { key: '6c63bd340b8e2fc19b638189af44eae3627f8c0a', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
-            } }, hAsync("div", { key: '6d818a470a74c11c10554d45d8586436a51f961e', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: '3512e444ec6c6bf2a719b1dd713be9a7652f77c9' })), hAsync("ion-backdrop", { key: '618a5316462406fa47929e4dcd5a8e8c9057a418', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, hAsync("div", { key: '8cad9e601c8ca1d1dca32681937362a55311e015', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: 'ce8ab737360c3a71ac6408d21fcb71485a189827' })), hAsync("ion-backdrop", { key: 'a7e5f9ebe98996c7f5ab0ef27223a2f24bf63646', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -23870,7 +23871,7 @@ class MenuButton {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (hAsync(Host, { key: '2fd7130b8d28695162f7efebbd2131e5e9e4f330', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '23364bf8eae83c3a422bacb0f43bf957551a7b7a', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses$1(color, {
                 [mode]: true,
                 button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
@@ -23879,7 +23880,7 @@ class MenuButton {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, hAsync("button", Object.assign({ key: 'fa6b1fb9291df812b04065b4b0ebdfd28e5217eb' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), hAsync("span", { key: '88106a08070ebff7457c581301efe649829aded2', class: "button-inner" }, hAsync("slot", { key: 'e3edfb89e5705b2c08c66f3d3452457667de3657' }, hAsync("ion-icon", { key: '24678e9c3bb2f1f3db113a2ae0ec93e407a7de0c', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && hAsync("ion-ripple-effect", { type: "unbounded" }))));
+            }) }, hAsync("button", Object.assign({ key: 'dacfa6f0881366385f3c3305fb656e5e8d4eaab8' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), hAsync("span", { key: '2a11edcf830bde847cca810af461f4bcffd6aa30', class: "button-inner" }, hAsync("slot", { key: 'f6b1299cf096abe6f25e1f60ce6be2bbdfddcc73' }, hAsync("ion-icon", { key: '32c900a4b75ab90b149227075df4598539d09b5f', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && hAsync("ion-ripple-effect", { type: "unbounded" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -23928,10 +23929,10 @@ class MenuToggle {
     render() {
         const mode = getIonMode$1(this);
         const hidden = this.autoHide && !this.visible;
-        return (hAsync(Host, { key: '5b75baade530bf9e7ed9165a5db3e513975e22f2', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+        return (hAsync(Host, { key: '981008b9e03870363f2eba75d9d22823ed79753e', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
                 [mode]: true,
                 'menu-toggle-hidden': hidden,
-            } }, hAsync("slot", { key: '65dea458274b685125c22af54aa153cf4977113c' })));
+            } }, hAsync("slot", { key: '1c88aec9c2ee7c67ee37be71814fed35144bbea7' })));
     }
     static get style() { return IonMenuToggleStyle0; }
     static get cmpMeta() { return {
@@ -25808,9 +25809,9 @@ class Modal {
         const mode = getIonMode$1(this);
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        return (hAsync(Host, Object.assign({ key: '856aa156d687382cbd4a7ee47f553b96105fcf7d', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '67ef0269a5e9b542d0c2acaa03a2f7f46b8cf0b5', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), hAsync("ion-backdrop", { key: '98205df704505f77c4878cd0b92598c1525b1a85', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { class: "modal-shadow" }), hAsync("div", Object.assign({ key: '412e76909a459f80bdd3c311d88407890c9aed4f',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), hAsync("ion-backdrop", { key: 'edd98375e98d887dbea232adb81b74f164fa058b', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { class: "modal-shadow" }), hAsync("div", Object.assign({ key: '40437670391544b57b8a9943ef3b49de7acbd873',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
@@ -25819,7 +25820,7 @@ class Modal {
             */
             role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), hAsync("slot", { key: '3e532328bc1eeb1d1213f9b3c098e89b77590620' }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), hAsync("slot", { key: 'dfe2095d9e1adb075dc09d1927ef24ea09ea5435' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -26764,7 +26765,7 @@ class Nav {
         }
     }
     render() {
-        return hAsync("slot", { key: '654286a8a7ef03d4a22497eb51e781a9a8979774' });
+        return hAsync("slot", { key: '8254ea10bef0575c13f8b0ddbe4643bec19f2366' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -26836,7 +26837,7 @@ class NavLink {
         this.routerAnimation = undefined;
     }
     render() {
-        return hAsync(Host, { key: 'a781794425ad0866705bc6691256184b93477a74', onClick: this.onClick });
+        return hAsync(Host, { key: 'dfbfc1a69c48248a8861463ed31c693be6543f32', onClick: this.onClick });
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -26870,9 +26871,9 @@ class Note {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'eebc0ea94483a248192408a1546739700281d2ae', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'de9f59a3e1700776780e61def3044901e1d1bef5', class: createColorClasses$1(this.color, {
                 [mode]: true,
-            }) }, hAsync("slot", { key: '33018e11967398327a0e7c20522547a4d9e8f55b' })));
+            }) }, hAsync("slot", { key: '30f98649d4d31a297ab71d23ed38fa021540a8f2' })));
     }
     static get style() { return {
         ios: IonNoteIosStyle0,
@@ -27124,11 +27125,11 @@ class Picker {
     render() {
         const { htmlAttributes } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, Object.assign({ key: 'c266cc072afaba2da22f70d8b62dc4bc6756d188', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'd2a0406625c8de0604a926a807f63c7f25bf4bab', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: Object.assign({ [mode]: true,
                 // Used internally for styling
-                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { key: '35ee3e5028028835580e28ac2c8db65a924d5d6a', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '8b454e6edbcfc45c57d3d8baf7c14b7905921a6e', tabindex: "0" }), hAsync("div", { key: 'e0fee78ec6d097bf0963190f748e5daad602e0f7', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { key: 'ce66bca18fc3e982ad7d6660f27cb1a03fb8247b', class: "picker-toolbar" }, this.buttons.map((b) => (hAsync("div", { class: buttonWrapperClass(b) }, hAsync("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass$1(b) }, b.text))))), hAsync("div", { key: 'a58b9523fe16f109dd6de0610717c5077fed964b', class: "picker-columns" }, hAsync("div", { key: 'acd54c0314cff51e8513a08dd9755c4b847c0617', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-column", { col: c })), hAsync("div", { key: '604730bd87582d048d850c6e0a0f29ba33258918', class: "picker-below-highlight" }))), hAsync("div", { key: '93baf5e6e57aec5f084d7d5b24af14e7d8126b5a', tabindex: "0" })));
+                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { key: '776a45c3df93ab4683727bb5c8ba0085f4336586', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'fc34d3838cfc5c38097dac9e749dbf7433e1a10a', tabindex: "0" }), hAsync("div", { key: '49bf9e92e301cbe12e2e683df110cccd6c9b8042', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { key: 'f2810a07ea067be31c169f36cbb44ca8a5dc219b', class: "picker-toolbar" }, this.buttons.map((b) => (hAsync("div", { class: buttonWrapperClass(b) }, hAsync("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass$1(b) }, b.text))))), hAsync("div", { key: 'f2d2a4652a8e368e40d4462d2b5e4c8095001b64', class: "picker-columns" }, hAsync("div", { key: '143ee78c8e0543f3a2f897097ff09e18f5b68016', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-column", { col: c })), hAsync("div", { key: '47716d2e923ca096a0bd48a07fee2deae1b1a567', class: "picker-below-highlight" }))), hAsync("div", { key: 'ecd3b459cae6492330c7c5847c2b4cd214c9c615', tabindex: "0" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -27519,9 +27520,9 @@ class PickerColumnCmp {
     render() {
         const col = this.col;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '06e2ae483a3bcf4fe721ad0c48cded6a1efdc6c0', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+        return (hAsync(Host, { key: 'b0d3c8b8315f130f1bcddcbc53ee9949676423bf', class: Object.assign({ [mode]: 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 && (hAsync("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), hAsync("div", { key: '14bea013788d899edf7155eb3cc10f79fe8e4690', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (hAsync("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (hAsync("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (hAsync("div", { class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), hAsync("div", { key: '2c0471c265bc3dfa2d415da77b8a70850e74458e', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (hAsync("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (hAsync("div", { class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -27792,7 +27793,11 @@ class PickerColumnInternal {
      */
     componentWillLoad() {
         const visibleCallback = (entries) => {
-            const ev = entries[0];
+            /**
+             * Browsers will sometimes group multiple IO events into a single callback.
+             * As a result, we want to grab the last/most recent event in case there are multiple events.
+             */
+            const ev = entries[entries.length - 1];
             if (ev.isIntersecting) {
                 const { activeItem, el } = this;
                 this.isColumnVisible = true;
@@ -27881,18 +27886,18 @@ class PickerColumnInternal {
          * the attribute can be moved to datetime.tsx and set on every
          * instance of ion-picker-column-internal there instead.
          */
-        return (hAsync(Host, { key: 'd0e3818aa4ab06aefd988d1b42ae754244727b8f', exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, disabled: pickerDisabled, tabindex: pickerDisabled ? null : 0, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'eeb70e31fca7bff943a2fc29a3da0383520fdd84', exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, disabled: pickerDisabled, tabindex: pickerDisabled ? null : 0, class: createColorClasses$1(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
-            }) }, hAsync("div", { key: 'ec3b16415db5f64e3fab37fda023560ebcdc9423', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '40c78c9a1277807572d73e23048c2730cab88f5a', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'c51fa817f6999356cf3568a46098e954936b45d5', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), items.map((item, index) => {
+            }) }, hAsync("div", { key: '08cffb51ab2ce1a4b83e35b25afd2880d6949d8e', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '88389ba5287ee5e251fa36a0e13a888c8dfbf8e8', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '2dc958f37a939a0fbbc35d92482e9c64741d8f5a', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), items.map((item, index) => {
             const isItemDisabled = pickerDisabled || item.disabled || false;
             return (hAsync("button", { tabindex: "-1", class: {
                     'picker-item': true,
                 }, "data-value": item.value, "data-index": index, onClick: (ev) => {
                     this.centerPickerItemInView(ev.target, true);
                 }, disabled: isItemDisabled, part: PICKER_ITEM_PART }, item.text));
-        }), hAsync("div", { key: '80a7461dfe571f46466219b05007b021711aed32', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'fed82263295f58c51e2b753d0c06c7d71872b8a7', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'e805dff4122cc4e5fb4d7dcb96054fee8ad3bd07', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0")));
+        }), hAsync("div", { key: 'd31f134aa67a10ad1b796a4e1ffbea439b2b3723', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '3015f7f774b44d349f445e585b73295814c76326', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'df165c76253e51bd6968bdcd8071ad69467bda4c', class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0")));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -28397,7 +28402,7 @@ class PickerInternal {
         this.emitInputModeChange();
     }
     render() {
-        return (hAsync(Host, { key: 'f6b301345583f5ccfc31cce536176af7aeefd193', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, hAsync("input", { key: 'e57fd191d49cc500b719d5b9ad35054d55e96c43', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
+        return (hAsync(Host, { key: '49581a3c11cd7808555c576c46b833ac9d60f71a', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, hAsync("input", { key: '92628e29f76914b955aa11d4e45797a941821159', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
                 var _a;
                 /**
                  * The "Enter" key represents
@@ -28412,7 +28417,7 @@ class PickerInternal {
                 if (ev.key === 'Enter') {
                     (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.blur();
                 }
-            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), hAsync("div", { key: '3360e7d913f87293844928e430acde69d399f68e', class: "picker-before" }), hAsync("div", { key: '4db89e681458d4eec5d60ff47d3e0ba9fd116682', class: "picker-after" }), hAsync("div", { key: 'a21b20d77dac8141623995b5a53f416d3d9fc1ef', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), hAsync("slot", { key: '86c7d926523b615b4769bd1a4e9713b351089369' })));
+            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), hAsync("div", { key: '455d7ef6dd1425e882d86f49e0d817883fe222b2', class: "picker-before" }), hAsync("div", { key: '0351296cf171d22840542eb178ec3fae1e90f5d5', class: "picker-after" }), hAsync("div", { key: 'b4ecaa88d0bbbd69e72b3d4f27ad3bd91f3da84d', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), hAsync("slot", { key: 'fac29c179707002861f39d2ba1ea53479d0d9b74' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -29718,9 +29723,9 @@ class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (hAsync(Host, Object.assign({ key: '104a5bf92a9bbd2efc71d499a8500e5d55f81711', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'b35e04a59d2feff922709efc5045e4e9f65db80d', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: 'ef0baa04c22444d4bc705220235a892308d67586', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '5cc5f5c353de614e484e9cfeacecfca9fbfde0e0', class: "popover-content", part: "content" }, hAsync("slot", { key: '2d85c591cdc85efa98afbf40f676525f1402efcf' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: '99d26b7ebd403061f4fe75c10b8106d5795cbbc0', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '6179601846f042b7b3be20c93845464ec8bef98a', class: "popover-content", part: "content" }, hAsync("slot", { key: '2ba4f3ba26adfd3d42fa78ca6b6561d4088be8a8' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29809,7 +29814,7 @@ class ProgressBar {
         const { color, type, reversed, value, buffer } = this;
         const paused = config.getBoolean('_testing');
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '384d09558f91dc8119e689c3a8923e67c54c7eb2', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '4dbdfe17c039ed9b2e0badec30655cb9e7dac768', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses$1(color, {
                 [mode]: true,
                 [`progress-bar-${type}`]: true,
                 'progress-paused': paused,
@@ -30232,7 +30237,7 @@ class RadioGroup {
         const { label, labelId, el, name, value } = this;
         const mode = getIonMode$1(this);
         renderHiddenInput(true, el, name, value, false);
-        return hAsync(Host, { key: 'd8e84feca8f4dbe7605bc4ad096b6e68b482ba68', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
+        return hAsync(Host, { key: 'c0784903ad0b3914f448cca4b91172ad3af3ed70', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -31813,7 +31818,7 @@ class Refresher {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '9cf8e306e367e0ffd99f8a242dce0c9d78f96317', slot: "fixed", class: {
+        return (hAsync(Host, { key: 'af60b9453ee4bbf61ed9651d509700fddd91f2c2', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,
@@ -32041,7 +32046,7 @@ class RefresherContent {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '537e4d601fd09804d072e9fed9b2c6ba8d890548', class: mode }, hAsync("div", { key: '67f46df746f7da2fc60c47da9216a2920c25166f', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (hAsync("div", { class: "refresher-pulling-icon" }, hAsync("div", { class: "spinner-arrow-container" }, hAsync("ion-spinner", { name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (hAsync("div", { class: "arrow-container" }, hAsync("ion-icon", { icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (hAsync("div", { class: "refresher-pulling-icon" }, hAsync("ion-icon", { icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), hAsync("div", { key: '216f96af452e1567df7906c4d9e6fbf8c397ad21', class: "refresher-refreshing" }, this.refreshingSpinner && (hAsync("div", { class: "refresher-refreshing-icon" }, hAsync("ion-spinner", { name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        return (hAsync(Host, { key: '85e47044192d174d82e0a8cc6171e862c395f385', class: mode }, hAsync("div", { key: 'e8ce4fc1cad510da18988cb8c1e095c62a7af418', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (hAsync("div", { class: "refresher-pulling-icon" }, hAsync("div", { class: "spinner-arrow-container" }, hAsync("ion-spinner", { name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (hAsync("div", { class: "arrow-container" }, hAsync("ion-icon", { icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (hAsync("div", { class: "refresher-pulling-icon" }, hAsync("ion-icon", { icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), hAsync("div", { key: 'a55e3bd94ae381d1502da2799472b6bd1402487c', class: "refresher-refreshing" }, this.refreshingSpinner && (hAsync("div", { class: "refresher-refreshing-icon" }, hAsync("ion-spinner", { name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -32084,7 +32089,7 @@ class Reorder {
     render() {
         const mode = getIonMode$1(this);
         const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
-        return (hAsync(Host, { key: 'e625707b1810f93f5c667e38b8e2904988a3cff0', class: mode }, hAsync("slot", { key: 'fd0c3167e8a7955a6f841b338345de0528535ff5' }, hAsync("ion-icon", { key: '3fc7bb1adb0dde839ec4898361e359c640e81067', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        return (hAsync(Host, { key: '811f71aa6f4b45ee8a597f504af6c43d34cc8c53', class: mode }, hAsync("slot", { key: '78e1898b412b322053fe924db7934d5840184bfc' }, hAsync("ion-icon", { key: '171f86c625d64ce3c5b5ebc54372a6573fc437ef', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -32338,7 +32343,7 @@ class ReorderGroup {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '067b8ff26887c4e458163f70f7308723c90a53f8', class: {
+        return (hAsync(Host, { key: '5a8c5c11fa48ff2cec319a1a07ba74427c2a42e5', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
@@ -32446,7 +32451,7 @@ class RippleEffect {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'a9ff1956627908ee4071002ca018eaa80f87cd59', role: "presentation", class: {
+        return (hAsync(Host, { key: '9f2578664e5ff8a0a7e27cd90b2339bd430e72b8', role: "presentation", class: {
                 [mode]: true,
                 unbounded: this.unbounded,
             } }));
@@ -33388,10 +33393,10 @@ class RouterLink {
             rel: this.rel,
             target: this.target,
         };
-        return (hAsync(Host, { key: '9944573e56abecc47afd2df03b386e38fc7ed2f3', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'ca8b357234ae511a20f6a47487bb86cbaaa5f5ef', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, hAsync("a", Object.assign({ key: '383de10c02eb9ab87e27890548ef681dccf2a765' }, attrs), hAsync("slot", { key: '584a5a52e2b116f3827596cc5869a3557d6bcb6b' }))));
+            }) }, hAsync("a", Object.assign({ key: 'f590738389776d480014f18f599d753c68840e49' }, attrs), hAsync("slot", { key: '525ff073d71ede310e9f790b49f7414bf5a0919b' }))));
     }
     static get style() { return IonRouterLinkStyle0; }
     static get cmpMeta() { return {
@@ -33586,7 +33591,7 @@ class RouterOutlet {
         return true;
     }
     render() {
-        return hAsync("slot", { key: '69b452a0dc0c10440bdd8700cf4843c43154c707' });
+        return hAsync("slot", { key: 'e4eaa40478f70742d0ff7602ed5f83879da9f1b4' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -33620,7 +33625,7 @@ class Row {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: 'de94b93c001a93b2a88bcb8e959f421fd5ad4a65', class: getIonMode$1(this) }, hAsync("slot", { key: '41fa951758d3644bb77d80002caf6e25a79393ce' })));
+        return (hAsync(Host, { key: '36d12784e6f8339a1d03ff6f03af5c7b3f437293', class: getIonMode$1(this) }, hAsync("slot", { key: '54cc627f95bb091d31a550aca00b14ab73d2f1bf' })));
     }
     static get style() { return IonRowStyle0; }
     static get cmpMeta() { return {
@@ -34014,8 +34019,8 @@ class Searchbar {
         const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
         const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '1a68689b5c14cde6e071c4095457146b9ac2e7ab', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, hAsync("div", { key: '25ae47914baa4b7e0281efb2b296d1799a56c764', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (hAsync(Host, { key: '2cf545c40874bc4a19b6af022f5ec41b3a913495', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '31e1551828be00d292dbccc68acd43a0df27839e', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, hAsync("div", { key: '925d1e54980c00c7e268d4bb1fb591d7c473f1e7', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (hAsync(Host, { key: 'c677626a8d9395063dd41dc4b1df8eeefde0fb4c', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -34025,14 +34030,14 @@ class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, hAsync("div", { key: '9cf49297278839bbe6e2ef9936de337daa53c08d', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: 'bae5db413a302e116012251746d599030f7158ce', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, hAsync("ion-icon", { key: '67c593ca842551d9e99e8239115cc7b43261b542', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: '6901c3f6c74cce2d3b7e46fbff85ee6e6399bdb1', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, hAsync("div", { key: '6752074931e6ce320a7f05844d471627bd896cf2', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: 'f74ba66f1eb9ec26ec3e8a0d149d11eadf106a67', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, hAsync("ion-icon", { key: '7817d383dab14abf89638ffdde796cf4412fde9e', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: 'edd2093966b8250cb158a053ebb8a2cd5525b589', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: 'abd45fb79ee807cf8352aa7bf5b0342f2d686227', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: 'a1deef96cfdeb19f28fc77fda63c04c7424348c7', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -34506,14 +34511,14 @@ class Segment {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '971e62fdaef3b6380aa1bf214605a5bfde662abf', role: "tablist", onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '0cf2e11e5599a0de2b0c7dc2a46917f4894ceb05', role: "tablist", onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'segment-activated': this.activated,
                 'segment-disabled': this.disabled,
                 'segment-scrollable': this.scrollable,
-            }) }, hAsync("slot", { key: 'eaa7a8a3d5237c8bbc03f57690fd0aa7e4c124e3' })));
+            }) }, hAsync("slot", { key: '913f2e4a823d3a58ea074dfb95314651c46739db' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -34623,7 +34628,7 @@ class SegmentButton {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = getIonMode$1(this);
         const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
-        return (hAsync(Host, { key: 'b50b375ed817b47720b743078202f38c737a4034', class: {
+        return (hAsync(Host, { key: '5fda697569eb875991bb948be553ee0716ac9aa2', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -34639,10 +34644,10 @@ class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, hAsync("button", Object.assign({ key: '402f6467ec9ce97aa1df2c72382d07242b51c114', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), hAsync("span", { key: '4f5a1988296c4e59e64255feff264bbbe2ccc312', class: "button-inner" }, hAsync("slot", { key: '35b2a26cca8c76a111e447fa8cae464c504fcb97' })), mode === 'md' && hAsync("ion-ripple-effect", null)), hAsync("div", { key: 'adca0f1e0efcf18b575013d4fb2f22814c81c147', part: "indicator", class: {
+            } }, hAsync("button", Object.assign({ key: '86686e25d3bb8f487869a4d34c1e99a5d04105ec', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), hAsync("span", { key: '5c22e853fd385e2b7825335113346537ecefed31', class: "button-inner" }, hAsync("slot", { key: 'cef944331f246a820747f98dff55e844281cb822' })), mode === 'md' && hAsync("ion-ripple-effect", null)), hAsync("div", { key: '737b4b08c122a7738d5a5ed7a44f544da4c67649', part: "indicator", class: {
                 'segment-button-indicator': true,
                 'segment-button-indicator-animated': true,
-            } }, hAsync("div", { key: '8a23ffe49dc115ee0603e298bb6a39834b910b67', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, hAsync("div", { key: 'e78696ff315d7e8ba76b97b82ea341379e9be7e5', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -35440,7 +35445,7 @@ class SelectOption {
         this.value = undefined;
     }
     render() {
-        return hAsync(Host, { key: 'fe62f2d62ede6866e20969a2e7ae25453648fcef', role: "option", id: this.inputId, class: getIonMode$1(this) });
+        return hAsync(Host, { key: '69bd6a2dbbc0ab32cc607a74df10f3fb3d6e3295', role: "option", id: this.inputId, class: getIonMode$1(this) });
     }
     get el() { return getElement(this); }
     static get style() { return IonSelectOptionStyle0; }
@@ -35560,7 +35565,7 @@ class SelectPopover {
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (hAsync(Host, { key: '9d3995131364d4f1d282e0a1fc34e778e94c9f98', class: getIonMode$1(this) }, hAsync("ion-list", { key: '14244dcd6375eb61d65f3a9450d42a5d7b2d6541' }, header !== undefined && hAsync("ion-list-header", null, header), hasSubHeaderOrMessage && (hAsync("ion-item", null, hAsync("ion-label", { class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", null, subHeader), message !== undefined && hAsync("p", null, message)))), this.renderOptions(options))));
+        return (hAsync(Host, { key: '46e495ce7001131eb8b54073018de89401a99b81', class: getIonMode$1(this) }, hAsync("ion-list", { key: 'afdb72359c3751c6b372af1a778398463d1da397' }, header !== undefined && hAsync("ion-list-header", null, header), hasSubHeaderOrMessage && (hAsync("ion-item", null, hAsync("ion-label", { class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", null, subHeader), message !== undefined && hAsync("p", null, message)))), this.renderOptions(options))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -35608,11 +35613,11 @@ class SkeletonText {
         const animated = this.animated && config.getBoolean('animated', true);
         const inMedia = hostContext('ion-avatar', this.el) || hostContext('ion-thumbnail', this.el);
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'ee3cd9a5448fb69c8ddfc88a993f9968e1a381ff', class: {
+        return (hAsync(Host, { key: '2d9e785d3026faf76d0e970e3bfe33258f29046b', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, hAsync("span", { key: '8aa792724a3b77877062e9aae838d9e1572b576f' }, "\u00A0")));
+            } }, hAsync("span", { key: 'd1800f5fd176a8daa216e8b889e427770bf64a05' }, "\u00A0")));
     }
     get el() { return getElement(this); }
     static get style() { return IonSkeletonTextStyle0; }
@@ -35665,7 +35670,7 @@ class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (hAsync(Host, { key: '47cd6cd98e36e5b99fbe263a6a102610cae240c3', class: createColorClasses$1(self.color, {
+        return (hAsync(Host, { key: 'cfd0e19ebf41412300d1ba80721c12b4b8d32263', class: createColorClasses$1(self.color, {
                 [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),
@@ -35758,12 +35763,12 @@ class SplitPane {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '3efe241375d23ae12c47927aa1fc1f3f4b4e5807', class: {
+        return (hAsync(Host, { key: '220208ab603f4f307672a73c4e9e8218aa5196dc', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, hAsync("slot", { key: 'd5c94319658e2291dcc356e6ed7a9abc1a48a8b9' })));
+            } }, hAsync("slot", { key: 'bbf9321d4728265a04bb969a74ffa574206b9060' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -35831,10 +35836,10 @@ class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (hAsync(Host, { key: '0f4b90f0b1027e89bd447ace17af31c8e155a827', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (hAsync(Host, { key: 'fa5c567bf59eb8bd46a7d2b85a560e43c43563fe', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, hAsync("slot", { key: 'ec3eaacf8b7085510e89273aa8373805ee98a381' })));
+            } }, hAsync("slot", { key: '133871ad0bafa16539dfec4a6bd640367c998039' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -35912,11 +35917,11 @@ class TabBar {
         const { color, translucent, keyboardVisible } = this;
         const mode = getIonMode$1(this);
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (hAsync(Host, { key: 'e2b4b50270f171ed251359df6c65c5e7e4d526a4', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '51e4bdbce8c7107c1114a39618b4a9a941876bb1', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, hAsync("slot", { key: '37495b2eddd01a758ceaeb36426abc9bd20bcca3' })));
+            }) }, hAsync("slot", { key: 'c11618f97e93deb0a56f33c904481b4811c685ec' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -36014,7 +36019,7 @@ class TabButton {
             rel,
             target,
         };
-        return (hAsync(Host, { key: '9926f9392e7910ff3159397e4f907e0d7d2cf5a0', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (hAsync(Host, { key: '32ec1fb183523dadaaed6689add4a042d0fdd69a', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [mode]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -36026,7 +36031,7 @@ class TabButton {
                 'ion-activatable': true,
                 'ion-selectable': true,
                 'ion-focusable': true,
-            } }, hAsync("a", Object.assign({ key: '4b3ace749583a5502e94462f9a70c5158fe0194a' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), hAsync("span", { key: 'a2a30c02fbd5052da12586a5ab00a45f3bf53b88', class: "button-inner" }, hAsync("slot", { key: '3fb22ffbb09000d99537b531220c029330ae6940' })), mode === 'md' && hAsync("ion-ripple-effect", { type: "unbounded" }))));
+            } }, hAsync("a", Object.assign({ key: '9e56304c52e30ae3a3dca434fa0b41eccc873faa' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), hAsync("span", { key: '34eae18c23584742a25d20b4038aa1742d9ab0d8', class: "button-inner" }, hAsync("slot", { key: '4bc9629861f5ce3f1ef87ac77bc027ba0dea694c' })), mode === 'md' && hAsync("ion-ripple-effect", { type: "unbounded" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -36192,7 +36197,7 @@ class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (hAsync(Host, { key: '9044f05f4716fd9c158864175290dfb044e63539', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: '178492f52f15a042e47531007a3564a935847818', name: "top" }), hAsync("div", { key: 'b3affaaeb7752194acde36d9de74dbe2b3280cd1', class: "tabs-inner" }, hAsync("slot", { key: '98f0f4e2903f1a6cec041e06b75073c57960a912' })), hAsync("slot", { key: '0899482561bdaf35e97e5a40860c40978daca03a', name: "bottom" })));
+        return (hAsync(Host, { key: '5c76b077d508b1379a985503618dade63a9db514', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: '357ba85e01de10d3c0e52adcb1977bbc0dbbf587', name: "top" }), hAsync("div", { key: 'c8c59aac4e1394a1a7505f201cbf609b9b0c6ea9', class: "tabs-inner" }, hAsync("slot", { key: '00951068088580ab408f9c24ede39144b212b0d6' })), hAsync("slot", { key: 'a1118402fbd5995b07f7676f216b2efbc6052f12', name: "bottom" })));
     }
     get el() { return getElement(this); }
     static get style() { return IonTabsStyle0; }
@@ -36234,9 +36239,9 @@ class Text {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '8922ebdd7486c9cb9f9b547a49e5be2261df4ba1', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '66ed5ea3af47d2a4bdaee79914a2f5ae2cb54a9d', class: createColorClasses$1(this.color, {
                 [mode]: true,
-            }) }, hAsync("slot", { key: '164cbd0f81a00adfac04f544524e905f721c121c' })));
+            }) }, hAsync("slot", { key: '61239138ae5e25c2cceb839f70c50069fc42338e' })));
     }
     static get style() { return IonTextStyle0; }
     static get cmpMeta() { return {
@@ -36735,7 +36740,7 @@ class Thumbnail {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '2b3d5139161f4b9075dce537c14b4087986b37c4', class: getIonMode$1(this) }, hAsync("slot", { key: '3c4838c43e1230f9413a3cb66584417fd11382b2' })));
+        return (hAsync(Host, { key: 'a12bfff6f372b19f6890a81f93ca6137701ee360', class: getIonMode$1(this) }, hAsync("slot", { key: 'f546320896fee05677cc30f13aa7fa7c0360d69d' })));
     }
     static get style() { return IonThumbnailStyle0; }
     static get cmpMeta() { return {
@@ -37568,9 +37573,9 @@ class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (hAsync(Host, Object.assign({ key: 'c8d7e7d2baa01d3ed5d65a845bc61acf087c0b18', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'f01e1dd2f7cc0680a24f6aa4ee3f677f86d255f4', tabindex: "-1" }, this.htmlAttributes, { style: {
                 zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: '27c0feeb89c4efb47c42623a4b036ed84338ed10', class: wrapperClass }, hAsync("div", { key: '41d5a3069f92e4a6acef2793fa4e236cdbdaae88', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: '176f497bc990ef2ecc14c7fa90dd3a54a912030a', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: '603468c5e6abfb284df3fcdfa33c4f45d899fb2a', class: wrapperClass }, hAsync("div", { key: '0eebff71a0caf3bece4d042199cbf9226251a1a0', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: 'a84a9b0c0b719f588aa1ace4ef822bb105578c29', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -37956,10 +37961,10 @@ class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (hAsync(Host, { key: 'afac0f08f3981483c072984ce047df5dc9cc1e99', class: Object.assign(Object.assign({}, childStyles), createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'fdd8621b4f69ce650b5aaf4fb6bffde29aa5ad65', class: Object.assign(Object.assign({}, childStyles), createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, hAsync("div", { key: '30d4f1d0ec01cc646398301b5f7d469391eb35d2', class: "toolbar-background" }), hAsync("div", { key: '175d1f283e670b57a9bf8fd2a8c5e7d0da749aa8', class: "toolbar-container" }, hAsync("slot", { key: '4853b18092737b32b5995457536fa5a7fc2816ef', name: "start" }), hAsync("slot", { key: '6eb4921200aad02d7977d134edad6cff2aad91ad', name: "secondary" }), hAsync("div", { key: '024e0339c74c4b9a886d49e96723243719643dc2', class: "toolbar-content" }, hAsync("slot", { key: 'b6452c84692fedd6efe33ac67907d01253b76f8f' })), hAsync("slot", { key: '636e56eeaa318ce45a9c3854a30b8eb2819a33e0', name: "primary" }), hAsync("slot", { key: 'a45c19b93dca3719d75bd4d99acc49de87137a7d', name: "end" }))));
+            })) }, hAsync("div", { key: 'c6ad5434546e2046a83574ea92a03a3f77d0a9e3', class: "toolbar-background" }), hAsync("div", { key: '3b79dd20c3e8252cacfd46a82428df9ba0b8b86e', class: "toolbar-container" }, hAsync("slot", { key: '514259a8b76db9f3a587a7667b5e37fd8ade9481', name: "start" }), hAsync("slot", { key: 'd9ab68f0626f4ac8b83d21663eb67a47b76d809b', name: "secondary" }), hAsync("div", { key: '2c21da88b67a7d7eef280e517bda9982264c7be4', class: "toolbar-content" }, hAsync("slot", { key: 'ac2b7c8f20c5ac755df9032809c73eab9e767e36' })), hAsync("slot", { key: '2ddd3b7e3803f2d56c32743dcfc114ddcb8684a2', name: "primary" }), hAsync("slot", { key: '27483847d4333b4492506da33185c9ba1aa824a7', name: "end" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -38009,11 +38014,11 @@ class ToolbarTitle {
     render() {
         const mode = getIonMode$1(this);
         const size = this.getSize();
-        return (hAsync(Host, { key: 'b68a272a33ec81d282629a569676f64d3215a0c7', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '2642d433ba678b67503b7f1e9d0ae0390250bec8', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, hAsync("div", { key: '9069816a14e6e358695c5bd465787cf297c761bc', class: "toolbar-title" }, hAsync("slot", { key: '8894bd04f2292b54050ee864abb5396deadf9874' }))));
+            }) }, hAsync("div", { key: '355184542e26b53296f7143d099cfebc3de7b569', class: "toolbar-title" }, hAsync("slot", { key: 'aed07a34c22e4b1f34cdf40fea35481674d8941f' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {