@ionic/core 8.0.0-dev.11711734184.18e3ccbf → 8.0.0-dev.11712072527.1dd97c66

package/hydrate/index.js

@@ -14179,6 +14179,7 @@ class Content {
         };
         this.color = undefined;
         this.fullscreen = false;
+        this.fixedSlotPlacement = 'after';
         this.forceOverscroll = undefined;
         this.scrollX = false;
         this.scrollY = true;
@@ -14442,13 +14443,13 @@ class Content {
         }
     }
     render() {
-        const { isMainContent, scrollX, scrollY, el } = this;
+        const { fixedSlotPlacement, isMainContent, scrollX, scrollY, el } = this;
         const rtl = isRTL$1(el) ? 'rtl' : 'ltr';
         const mode = getIonMode$1(this);
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
         this.resize();
-        return (hAsync(Host, { key: '133795359748c29c2f26f2c4b05315c1ee2ebf14', role: isMainContent ? 'main' : undefined, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'ff21c25f4ad5d668e04b45d4f5278c3f0bbdee4e', role: isMainContent ? 'main' : undefined, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
@@ -14456,12 +14457,12 @@ class Content {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, hAsync("div", { key: 'cec324eeb397b9947b48706a726a71c0a338c47b', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), hAsync("div", { key: 'da55ddf94fe7fba83e3625f08ce0561136911828', class: {
+            } }, hAsync("div", { key: 'a0781a593ec14977240318c1268971612f990edf', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? hAsync("slot", { name: "fixed" }) : null, hAsync("div", { key: '216bfc31280b7c3b4cbcd54edc4caab01f60b463', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, hAsync("slot", { key: '5277456fa0cca2680fbb3ae48f90100ba16bf90d' })), transitionShadow ? (hAsync("div", { class: "transition-effect" }, hAsync("div", { class: "transition-cover" }), hAsync("div", { class: "transition-shadow" }))) : null, hAsync("slot", { key: 'e3dfb4aa64d29e5cc24e8b0cd75a7eb1e0d6954c', name: "fixed" })));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, hAsync("slot", { key: 'ac6f8ce8da08a5a55e6f1cfc77b07d4f2e1e5dda' })), transitionShadow ? (hAsync("div", { class: "transition-effect" }, hAsync("div", { class: "transition-cover" }), hAsync("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? hAsync("slot", { name: "fixed" }) : null));
     }
     get el() { return getElement(this); }
     static get style() { return IonContentStyle0; }
@@ -14471,6 +14472,7 @@ class Content {
         "$members$": {
             "color": [513],
             "fullscreen": [4],
+            "fixedSlotPlacement": [1, "fixed-slot-placement"],
             "forceOverscroll": [1028, "force-overscroll"],
             "scrollX": [4, "scroll-x"],
             "scrollY": [4, "scroll-y"],
@@ -17980,7 +17982,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: '79357d753d003539aaadbc30aa0ca7e2ab97415d', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
+        return (hAsync(Host, { key: '89de4c9f54e7c11038c62ecaa2e90aea47948393', "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,
@@ -17990,7 +17992,7 @@ class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, hAsync("div", { key: '18b6631ffcf028c5062659e75be5d6712ac30402', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, hAsync("div", { key: 'b9de6cc68dc7b7773bb408fd55a7d1872460a5f9', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -18396,7 +18398,7 @@ class DatetimeButton {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'f0ee6b859ad193be78cfc49d4d66373adfdbd618', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '49854fc8a4b9875194c1537d0b3b59459e39606f', class: createColorClasses$1(color, {
                 [mode]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
@@ -18474,12 +18476,12 @@ class Fab {
     render() {
         const { horizontal, vertical, edge } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'a25aae31396546595b21a760ced22ee92d2379d6', class: {
+        return (hAsync(Host, { key: '8d10537e35f518b03a840de9a0fbe7973abc4290', class: {
                 [mode]: true,
                 [`fab-horizontal-${horizontal}`]: horizontal !== undefined,
                 [`fab-vertical-${vertical}`]: vertical !== undefined,
                 'fab-edge': edge,
-            } }, hAsync("slot", { key: 'b01cc2572213bfa6c12111e32e2f7702e6d93621' })));
+            } }, hAsync("slot", { key: '77331bf85f939b20ff14886f0a8b0f13c5ca392a' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -18569,7 +18571,7 @@ class FabButton {
                 rel: this.rel,
                 target: this.target,
             };
-        return (hAsync(Host, { key: 'f342fbd54263de388bc49e54af61ce4aaaef1f2e', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'bc00fdb39e41787a3b4c53aededfc32485ee9211', 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,
@@ -18580,7 +18582,7 @@ class FabButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 [`fab-button-${size}`]: size !== undefined,
-            }) }, hAsync(TagType, Object.assign({ key: 'cd29a22c7d8ea02ab3469ba8a5878fd1cb28286a' }, 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: '046a1254b728b43e2f4496ad96fff7bb8827df19', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), hAsync("span", { key: '9b5c11105d2b7c37c82f7eea2264e29c5f939262', class: "button-inner" }, hAsync("slot", { key: '283fe50749e5537bc7d21159c36c9eb3fbe45415' })), mode === 'md' && hAsync("ion-ripple-effect", null))));
+            }) }, hAsync(TagType, Object.assign({ key: 'fe13b3e19638177b516e6e530e6ff0b745856481' }, 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: '210e4a3cd39e0ff6fc300eeaafa3a9330a9dc73f', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), hAsync("span", { key: 'c6547612ff58a1e46bae2e91302b6b86a49d6429', class: "button-inner" }, hAsync("slot", { key: '48abc7e6a27391f2595eeddf9abd8d16c0a86630' })), mode === 'md' && hAsync("ion-ripple-effect", null))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -18631,11 +18633,11 @@ class FabList {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '62d22c1907677360d91fc0386ab05379bcc9de8a', class: {
+        return (hAsync(Host, { key: 'ccce297302fa14d6ce0646d4bb14a74e71d68cb9', class: {
                 [mode]: true,
                 'fab-list-active': this.activated,
                 [`fab-list-side-${this.side}`]: true,
-            } }, hAsync("slot", { key: '4f9b6b9620c0ec79006663c5981140184129b7ce' })));
+            } }, hAsync("slot", { key: '9007d178411ea80db29d2034473e3f9d61157fa1' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -19087,7 +19089,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: 'c6f57ef061d44a475dd2c3361e73199a1820e2ea', role: "contentinfo", class: {
+        return (hAsync(Host, { key: 'b8b57c6d3ffcb100330c0f19f1f567db89569efd', role: "contentinfo", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`footer-${mode}`]: true,
@@ -19095,7 +19097,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: '5f27edadd5c05c38d0ba9de0277bac675f5b36b3' })));
+            } }, mode === 'ios' && translucent && hAsync("div", { class: "footer-background" }), hAsync("slot", { key: 'a9f465cbd6100ba16fd1e02e382997ac87303bb7' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -19126,10 +19128,10 @@ class Grid {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'f16254ea58e52b57b2de5cb33a7e84ad544361af', class: {
+        return (hAsync(Host, { key: 'd240212314811650765ac22936da13b0a92680b8', class: {
                 [mode]: true,
                 'grid-fixed': this.fixed,
-            } }, hAsync("slot", { key: '42f4eff0d912dc0112fa74d7de69f3a6a8e04a2e' })));
+            } }, hAsync("slot", { key: 'd0b55fd347db2b2f92805975c61da093c762c26d' })));
     }
     static get style() { return IonGridStyle0; }
     static get cmpMeta() { return {
@@ -19460,14 +19462,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: '9f30ede40eaf89b3e0adbcd03e1d08d0d4ca762b', role: roleType, class: {
+        return (hAsync(Host, Object.assign({ key: '37ded46927283f6aa2c2b069510e37d427a908ad', 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: '029aa484210e8dd5c5404a84c134d64a9100ba6e' })));
+            } }, inheritedAttributes), mode === 'ios' && translucent && hAsync("div", { class: "header-background" }), hAsync("slot", { key: '3d25f5606e297ba9e0fea3c2fe0d7da542089075' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -19746,7 +19748,7 @@ class Img {
     render() {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
-        return (hAsync(Host, { key: 'fa0d0e73693f4d5454dde2397a333143ab00a145', class: getIonMode$1(this) }, hAsync("img", { key: '70198693643ab6a33816c6e1b0ed23b368208fbb', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        return (hAsync(Host, { key: '167143c9e996a0b2f78841e6c427c57a322189d7', class: getIonMode$1(this) }, hAsync("img", { key: 'e840d04e5d0a939cd4c2d19f915a3fee394419b5', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -19953,7 +19955,7 @@ class InfiniteScroll {
     render() {
         const mode = getIonMode$1(this);
         const disabled = this.disabled;
-        return (hAsync(Host, { key: 'be1a720fcf686dc48468de968d84ea58bfe0a06d', class: {
+        return (hAsync(Host, { key: '69e7741fd2eb2053ba1d59d00d307d2f662fcf13', class: {
                 [mode]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,
@@ -20009,11 +20011,11 @@ class InfiniteScrollContent {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '44b11681f802fb0d1c565810f71f7672453e16ca', class: {
+        return (hAsync(Host, { key: '7c32cbd526ef8a151df1c870bd3a4f0c9d764154', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`infinite-scroll-content-${mode}`]: true,
-            } }, hAsync("div", { key: 'd7e7d5beedf1e22a009e87790ca024b8f15c462b', 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: '6bd67f2c9f3f23edc2f81b6de16134b853bea716', 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,
@@ -20437,6 +20439,7 @@ class Input {
         this.autocorrect = 'off';
         this.autofocus = false;
         this.clearInput = false;
+        this.clearInputIcon = undefined;
         this.clearOnEdit = undefined;
         this.counter = false;
         this.counterFormatter = undefined;
@@ -20716,11 +20719,13 @@ class Input {
         return this.renderLabel();
     }
     render() {
-        const { disabled, fill, readonly, shape, inputId, labelPlacement, el, hasFocus } = this;
+        const { disabled, fill, readonly, shape, inputId, labelPlacement, el, hasFocus, clearInputIcon } = this;
         const mode = getIonMode$1(this);
         const value = this.getValue();
         const inItem = hostContext('ion-item', this.el);
         const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;
+        const defaultClearIcon = mode === 'ios' ? closeCircle : closeSharp;
+        const clearIconData = clearInputIcon !== null && clearInputIcon !== void 0 ? clearInputIcon : defaultClearIcon;
         const hasValue = this.hasValue();
         const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null;
         /**
@@ -20741,7 +20746,7 @@ class Input {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (hAsync(Host, { key: 'f1007469471c9610950749d87f1aa8165cea4dbb', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '12e9da8ff2d6ecce8e3ce1880ea46e71260c81fc', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -20752,14 +20757,14 @@ class Input {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, hAsync("label", { key: '12a5a2a2b942e4d7420b7e10b98dc3f5b15c6e28', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), hAsync("div", { key: '938381505753fbc842583215e32d74dd3a383742', class: "native-wrapper" }, hAsync("slot", { key: '0e835fd6b94f7407696d4ab097a02c6e4b742fc9', name: "start" }), hAsync("input", Object.assign({ key: '1835e2bbbdcaf8a80e3a7665536afb02d571bcb9', 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 }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (hAsync("button", { "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, hAsync("label", { key: 'c241838173e639eebad7d8067063999fc609320b', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), hAsync("div", { key: 'c392fcd8367aa3a05fac3a5774dad0525670d4d0', class: "native-wrapper" }, hAsync("slot", { key: '3f6bb21aab004dfc7957ca42d18acac73c240a0e', name: "start" }), hAsync("input", Object.assign({ key: '86720e7d2b4e2f5cfe7dfee4c9947f0998279e17', 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 }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (hAsync("button", { "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 }, hAsync("ion-icon", { "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), hAsync("slot", { key: 'bdcffc81c8d07c793a06d9880a02d7b94ddfff2e', name: "end" })), shouldRenderHighlight && hAsync("div", { class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, hAsync("ion-icon", { "aria-hidden": "true", icon: clearIconData }))), hAsync("slot", { key: '55cf54320c1555fd3501374d2c2b4e9c1dce046f', name: "end" })), shouldRenderHighlight && hAsync("div", { class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -20781,6 +20786,7 @@ class Input {
             "autocorrect": [1],
             "autofocus": [4],
             "clearInput": [4, "clear-input"],
+            "clearInputIcon": [1, "clear-input-icon"],
             "clearOnEdit": [4, "clear-on-edit"],
             "counter": [4],
             "counterFormatter": [16],
@@ -20880,16 +20886,16 @@ class InputPasswordToggle {
         const showPasswordIcon = (_a = this.showIcon) !== null && _a !== void 0 ? _a : eye;
         const hidePasswordIcon = (_b = this.hideIcon) !== null && _b !== void 0 ? _b : eyeOff;
         const isPasswordVisible = type === 'text';
-        return (hAsync(Host, { key: '1cb075999e41c2fde3a3d6cafe6f37c9b5429299', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '9dd0f6e44824961eb19de2af03ed0237551bc623', class: createColorClasses$1(color, {
                 [mode]: true,
-            }) }, hAsync("ion-button", { key: 'cfaaec221f530ecc475690b6508c2333e32ff609', mode: mode, color: color, fill: "clear", shape: "round", "aria-checked": isPasswordVisible ? 'true' : 'false', "aria-label": "show password", role: "switch", type: "button", onPointerDown: (ev) => {
+            }) }, hAsync("ion-button", { key: '72737f52a8a9767f14bde3851a28368c3420a408', mode: mode, color: color, fill: "clear", shape: "round", "aria-checked": isPasswordVisible ? 'true' : 'false', "aria-label": "show password", role: "switch", type: "button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the password toggle
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.togglePasswordVisibility }, hAsync("ion-icon", { key: 'dc0fc5fe8df4df4c145e29b30e589f159aab9cd9', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? hidePasswordIcon : showPasswordIcon }))));
+            }, onClick: this.togglePasswordVisibility }, hAsync("ion-icon", { key: '17a7d7681e8509aa6feab3d54ce6ca1c87b631b0', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? hidePasswordIcon : showPasswordIcon }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -21185,11 +21191,11 @@ class ItemDivider {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '18d1b78568247bfbf0b0274971b752ace7531f58', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '41b2a690aefd50a634401a985600b6eff9a68d2e', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'item-divider-sticky': this.sticky,
                 item: true,
-            }) }, hAsync("slot", { key: 'cbf5fe1a9f4233a303d2366d1fc032d7c445f5c7', name: "start" }), hAsync("div", { key: 'ca2608689325a350b23eb026053dd588ea3004e9', class: "item-divider-inner" }, hAsync("div", { key: '00af1d58d5fc7995754a5266534cdf989a3294eb', class: "item-divider-wrapper" }, hAsync("slot", { key: 'bfa2547fe8de49dcfbfccaeb46736182e514ffbc' })), hAsync("slot", { key: '650dd1153d211eb992e69ff7e98c381cf0555e25', name: "end" }))));
+            }) }, hAsync("slot", { key: 'b112bb29c21cfee950b6e5efb0dbb0abf0960546', name: "start" }), hAsync("div", { key: '4aa596db07830cd597e08d927a02a033b1d3cc63', class: "item-divider-inner" }, hAsync("div", { key: '23f288847d93c1ef4ad2e619f0eb88440240e9ea', class: "item-divider-wrapper" }, hAsync("slot", { key: '9e9b2cc3baa537e64ff45b373322a46fb3658878' })), hAsync("slot", { key: 'c7269f28307f00fccc47e1efb58984430ae13a5d', name: "end" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -21221,7 +21227,7 @@ class ItemGroup {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '2443d9e64c1867a9582a2965ed9ac78263965d70', role: "group", class: {
+        return (hAsync(Host, { key: 'd0ceadd6baf0735aa38607c2207309add77e2162', role: "group", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-group-${mode}`]: true,
@@ -21289,12 +21295,12 @@ class ItemOption {
                 href: this.href,
                 target: this.target,
             };
-        return (hAsync(Host, { key: '85fe8f529ab0673f1ddba299473690590a1bca88', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '8cae654786fadc2cfe864e495645715cb53a3e68', 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: 'cde9bca980cb5589204017d80483baab0996586e' }, attrs, { class: "button-native", part: "native", disabled: disabled }), hAsync("span", { key: 'e2b7886b53b0b85d81fbfd9209c2989673cdb863', class: "button-inner" }, hAsync("slot", { key: 'eaf089857ff0a22d3a9c12574596002e32a28c75', name: "top" }), hAsync("div", { key: '12f5d46fe5b8b5d2a5d2bd9e4782376c5af86f1c', class: "horizontal-wrapper" }, hAsync("slot", { key: 'ba6d89b7c7f9470f73e17808f90d578fbcceba48', name: "start" }), hAsync("slot", { key: '22ad963dd37ae40c03a5723c3e3b05970f40d871', name: "icon-only" }), hAsync("slot", { key: 'a1596a1961b5757828fafaa9edf9da3381482ff3' }), hAsync("slot", { key: 'ad0d2b50de279a712e18985ce9aceda7b5d45712', name: "end" })), hAsync("slot", { key: '2940933c947f7e2d9875f0fb980aff392d5ea7fa', name: "bottom" })), mode === 'md' && hAsync("ion-ripple-effect", null))));
+            }) }, hAsync(TagType, Object.assign({ key: '296e26957428fc701d52695cfbad83d507e02060' }, attrs, { class: "button-native", part: "native", disabled: disabled }), hAsync("span", { key: '51b3d2e3ce737c8034678dec4fcda4dfbc1438e6', class: "button-inner" }, hAsync("slot", { key: 'be0fbb128ef61a6deaa52eb1197c0f3481cc4ae3', name: "top" }), hAsync("div", { key: '7ba732ae5b8c94c0448df3c3500d9f6eac71d61c', class: "horizontal-wrapper" }, hAsync("slot", { key: '90bf045e30ae006aa7418fd25c1090de27164980', name: "start" }), hAsync("slot", { key: '6858e4a608a4ac9144de58ada851ae3497ae7f74', name: "icon-only" }), hAsync("slot", { key: 'a35037681327fd5753f6d3d7c9ad37b960885e96' }), hAsync("slot", { key: '834c710c88cead42fe3d9ce7f714b62df8a8a604', name: "end" })), hAsync("slot", { key: 'b574fe0f3655dfd9ef1e668983278b28951269e4', name: "bottom" })), mode === 'md' && hAsync("ion-ripple-effect", null))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -21341,7 +21347,7 @@ class ItemOptions {
     render() {
         const mode = getIonMode$1(this);
         const isEnd = isEndSide(this.side);
-        return (hAsync(Host, { key: 'ac0cec6a2ea83c9633c10bce379ffdcc99221b52', class: {
+        return (hAsync(Host, { key: '3d1b754bcc184044cd0213eab08fb22224abddfb', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-options-${mode}`]: true,
@@ -21803,7 +21809,7 @@ class ItemSliding {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'ae9da267d130e2875b2d854952b70daa739effd8', class: {
+        return (hAsync(Host, { key: '1c2d40968e7a306e4d63443571a7581e0511c9c4', class: {
                 [mode]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
@@ -21912,13 +21918,13 @@ class Label {
     render() {
         const position = this.position;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '6820fe45a0aa73dca665a43f588f952e94c194c7', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '567b47008af8b025a043b6e00d4333c3164c5247', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 [`label-${position}`]: position !== undefined,
                 [`label-no-animate`]: this.noAnimate,
                 'label-rtl': document.dir === 'rtl',
-            }) }, hAsync("slot", { key: '79815d03fbfc141573f69eb037592837ca3428ce' })));
+            }) }, hAsync("slot", { key: 'a3a8fa43fb1d74355dae8418f827ea13aa897640' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -21974,7 +21980,7 @@ class List {
     render() {
         const mode = getIonMode$1(this);
         const { lines, inset } = this;
-        return (hAsync(Host, { key: '9a0eab31e53ae22dbfa7aa58d779d3976797ea08', role: "list", class: {
+        return (hAsync(Host, { key: 'dd30ba8fb55bc55b570f6cd8babd4752d995c79b', role: "list", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`list-${mode}`]: true,
@@ -22020,10 +22026,10 @@ class ListHeader {
     render() {
         const { lines } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '8788351ca44861f264661da2412d6ce7906126bd', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '7b0de2d26ec09f11740ad55bba5e4d2f52623b58', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, hAsync("div", { key: '8801cb2fdddb2dab0c649aef1ffbac8f0ba9fbe0', class: "list-header-inner" }, hAsync("slot", { key: '7fc87318333b7ee0c3eee91abc64a9275ad43a26' }))));
+            }) }, hAsync("div", { key: '86cbae45e24ce7607b011cd3cd1ae82e741a111c', class: "list-header-inner" }, hAsync("slot", { key: 'a276c0540cd1bdd907b01620d5bfb9c996c08b90' }))));
     }
     static get style() { return {
         ios: IonListHeaderIosStyle0,
@@ -22289,9 +22295,9 @@ class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (hAsync(Host, Object.assign({ key: '255c2d52a0788769ca8ac027eababc903f525d0e', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '0b32f7915df1327934877cc71228aea71205266f', 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: 'd3a70d4e67a6578b01a82f97cb54f79342e7fd62', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '9641470dc2f759e674cd176662c12161bf22e078', tabindex: "0" }), hAsync("div", { key: 'a1b986633eff28e8da49eec08dfb27acab63a88e', 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: 'ab8a43e8d71756be287f92961ebdc0bbe2d1882b', 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: 'ca6c4c48b83457685a17c7a396e67cd7a6b06ab9', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'd76304807d988c02de44fc947124a15179ba2c6c', tabindex: "0" }), hAsync("div", { key: '79ec338787a709a668c8f170d75a271bad3c2488', 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: 'a8e3e70c79e1b359f821c6769b1f4b4bf90da992', tabindex: "0" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -23272,14 +23278,14 @@ class Menu {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (hAsync(Host, { key: 'f5f151ca5bf4963c0300656327bb9c38bc7869fb', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (hAsync(Host, { key: 'b1ad113462ad4df94e6cd66d2afb5a8464869909', 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,
                 'split-pane-side': hostContext('ion-split-pane', el),
-            } }, hAsync("div", { key: '39ddd64f884cc667e45f99a2922077d87f209205', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: '1ccce2c24ec0dfc81a34580c8be60c69c68d2d2d' })), hAsync("ion-backdrop", { key: 'cf2bdf7f4171a4ada3cb55dd15f6b921b626a347', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, hAsync("div", { key: '2aeb119aaf00a69b1cc0dedcafd8987286e1c2d1', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: '6f732c578b6ffceb06cd08725d056378f4dc5da2' })), hAsync("ion-backdrop", { key: 'f524bd70256beae5c9711eb32762294badb326cc', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -23382,7 +23388,7 @@ class MenuButton {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (hAsync(Host, { key: '1588897aeaefa91e13ed15927f2eeaebc01e8f18', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '3cdbc04925c8c62ac65763fe83efdfffda0a16fa', 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,
@@ -23391,7 +23397,7 @@ class MenuButton {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, hAsync("button", Object.assign({ key: 'cb4e5b3d2095e15a53fa24ac65209162ec635476' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), hAsync("span", { key: '1c2f499b40e8b9b18e3cb0ed28bbcca01e6d777f', class: "button-inner" }, hAsync("slot", { key: 'df2f969098b5779f54c2d51b4816c7b78b45c860' }, hAsync("ion-icon", { key: 'd093d7377c7f1a5a47b3cc319b36e5087421cf4c', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && hAsync("ion-ripple-effect", { type: "unbounded" }))));
+            }) }, hAsync("button", Object.assign({ key: '63db22c49359bf77fa344f5a13b733570ff088a4' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), hAsync("span", { key: '011af3fa930dd888f7f4aca24ba294d23b2ceba7', class: "button-inner" }, hAsync("slot", { key: 'dc75fd2f1f3d42eb30aefd9cd3ef137d6c8a515a' }, hAsync("ion-icon", { key: '55cfdc7df1eab0bdc386e2a5c90be87be56a000a', 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 {
@@ -23440,10 +23446,10 @@ class MenuToggle {
     render() {
         const mode = getIonMode$1(this);
         const hidden = this.autoHide && !this.visible;
-        return (hAsync(Host, { key: '63bcdda9e9917133893d92284b9a91dfe38596a9', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+        return (hAsync(Host, { key: 'fa7f54b6264dd2110f4cda34aaa6ea7ec4f5040f', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
                 [mode]: true,
                 'menu-toggle-hidden': hidden,
-            } }, hAsync("slot", { key: 'a3ecc57b11c04b2f9911e5703ea0c6f66515b2f2' })));
+            } }, hAsync("slot", { key: '6e1701d21f439cabd9f83607c500eb6111162447' })));
     }
     static get style() { return IonMenuToggleStyle0; }
     static get cmpMeta() { return {
@@ -25303,9 +25309,9 @@ class Modal {
         const mode = getIonMode$1(this);
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        return (hAsync(Host, Object.assign({ key: '18053756559601f785776196d9dd269f8250c813', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'dbd61751e4964ad81fc1dee19468b716d4f23c8a', "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: 'c080204fb09a67046d1986db28ccb7a1c8f0704d', 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: '1988ad86ef92108ad4c980ee6d98f280e368dee4',
+            }, 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: 'a7646a7a7aeef7eef1bb647373f509d4a26036ad', 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: 'bc6bc6ff7d2357206265240eaa76d730a0ecfd2c',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
@@ -25314,7 +25320,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: '321e79f29eba3faab323d17ae575300e25fc0c51' }))));
+            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: '0ce06b895deb1da5fbdefa65b079dbd1ada349f7' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -26262,7 +26268,7 @@ class Nav {
         }
     }
     render() {
-        return hAsync("slot", { key: '2cb1a430d8d29b0f54b1ec80f98e4b82b6c8cc0a' });
+        return hAsync("slot", { key: 'a86e551f86509bd65200393785e4000dbb37154a' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -26335,7 +26341,7 @@ class NavLink {
         this.routerAnimation = undefined;
     }
     render() {
-        return hAsync(Host, { key: 'e4aebea5eb131852acea407afb84597df71be4a4', onClick: this.onClick });
+        return hAsync(Host, { key: '7b6b746a0e945a48b308eec2dcd9893daf00bca1', onClick: this.onClick });
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -26369,9 +26375,9 @@ class Note {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '4064be8c5aceec02a25b8933338596b1720e19d9', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '83fbede35bbb772419d68f6ad398aab0e00b9f61', class: createColorClasses$1(this.color, {
                 [mode]: true,
-            }) }, hAsync("slot", { key: '9b4265b01387096a8a6aba34a1d8217733bb6f1f' })));
+            }) }, hAsync("slot", { key: 'c4060ce2439e96a5ac8763843579b7956a90032f' })));
     }
     static get style() { return {
         ios: IonNoteIosStyle0,
@@ -26868,7 +26874,7 @@ class Picker$1 {
         this.emitInputModeChange();
     }
     render() {
-        return (hAsync(Host, { key: '16c8d2d72dcbd64e2b2fb77200ead6a2107d24a6', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, hAsync("input", { key: 'f7f4c77bde934813a18f221308277580c45715e3', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
+        return (hAsync(Host, { key: '6d9d2f8427c722ac1e4ad401e3091f86b95af503', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, hAsync("input", { key: 'b885e06c95ad966d477d873154627766ecf5f5f9', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
                 var _a;
                 /**
                  * The "Enter" key represents
@@ -26883,7 +26889,7 @@ class Picker$1 {
                 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: '0eead52707acfa004c83fe0acfd4f9162b19f09b', class: "picker-before" }), hAsync("div", { key: '5b4b531e3ed4fd35f1380156cf5332a455433a19', class: "picker-after" }), hAsync("div", { key: '2b478202ac99703e4f72b30906915c7058ca9b9f', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), hAsync("slot", { key: '4a93ca36194ea1d2cec8bef8a0f402c14ee74576' })));
+            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), hAsync("div", { key: '91e060f4dd634ebaca072dbe7726a84f6f2c7040', class: "picker-before" }), hAsync("div", { key: '2e06c9db12040c5a7af48c79ce3e1c32ce7a6ae4', class: "picker-after" }), hAsync("div", { key: '791a934f6886ca89b370f71cd5c848ee6dac5b90', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), hAsync("slot", { key: 'aed4fe303f87b804ce00f2633b0af4905600670a' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -27133,11 +27139,11 @@ class Picker {
     render() {
         const { htmlAttributes } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, Object.assign({ key: '91d3d127c46d125a2a86222e3002d804ebd8bc84', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '1cf2f8a25a3eca7ac59eff969803c85540f102fc', "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: '63140c43f7a2e3000076adec0406197cb569f985', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '3e86ec5e61adf40983a1d33ef24f66f4f75307e8', tabindex: "0" }), hAsync("div", { key: '3c3844f369da33e35c9a498d88d1b7e4d686b8ce', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { key: 'e03200231976723409505b0c4070e7f596815e50', 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: 'd59de79e8c364376bc16d2edae3672b21443f3fe', class: "picker-columns" }, hAsync("div", { key: 'e79cb88c5397047bc8c7e71efb4f1a338773e744', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-legacy-column", { col: c })), hAsync("div", { key: '776de64da09485ad1dbf78d4d402e297b94348a6', class: "picker-below-highlight" }))), hAsync("div", { key: 'f0aa77e3b467c3fb4950389d27c13769dc913b14', tabindex: "0" })));
+                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { key: '3a70c7c6e0457afda2e9ef4619cb253b583b7805', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '4c90cf7dfeb9d2bdb5e947739864dbc2d1e327e0', tabindex: "0" }), hAsync("div", { key: '050098ced341fd86bfcd72595b1f7a52c3b01b46', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { key: 'b0d9420fb053d0c71af04c88224a38f804fd99ba', 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: '82cd2788c394079cb8843c240c17e3629eef0953', class: "picker-columns" }, hAsync("div", { key: '34d2ce59e88b5967e52fe8077ef3a151c6ce38e5', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-legacy-column", { col: c })), hAsync("div", { key: 'b604b101bc0006efc246aea9320d9f44419c531f', class: "picker-below-highlight" }))), hAsync("div", { key: '70437d735b009386b4f5ae250b555c039c366183', tabindex: "0" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -27570,14 +27576,14 @@ class PickerColumn {
     render() {
         const { color, disabled, isActive, numericInput } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '20de89f624d0fdbb4eadf912a6a8a8c1f3c374bc', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '36fba9b5a9938eb80facbd39ebf2227c0b8df96b', class: createColorClasses$1(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, hAsync("slot", { key: '39bd2171785e21aef935787d8222949a2d29a771', name: "prefix" }), hAsync("div", { key: '97217b758b65913db869f322b8f127f0da3a1c28', class: "picker-opts", tabindex: disabled ? undefined : 0, ref: (el) => {
+            }) }, hAsync("slot", { key: 'e872bd8ccecb45f2abfae0a17c99bd193c323fb7', name: "prefix" }), hAsync("div", { key: '3b8d9502fb428c99aa18e5396cd4f37a7cac222f', class: "picker-opts", tabindex: disabled ? undefined : 0, ref: (el) => {
                 this.scrollEl = el;
-            } }, hAsync("div", { key: '8cfd8f5de1c274f7b2b5b14c7f6f875d475edc5c', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'cfbf7e8abe54c4df98addb9a24e82dd803ba95c0', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '8049923186d8b5ce28da2ce90ad720c244395f9c', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("slot", { key: '180efa3b7874e2b4269fb150794eaeab9f648f2e' }), hAsync("div", { key: '9161cc3e344b92354276981813e1d55ef9979dea', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'ce703fb3ea07d5ea2abf526d64ca85d2beed15f1', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '6ce6cb5de80ac316a664e9cfcecf1897c8f90e58', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), hAsync("slot", { key: 'ecccfa6bd8f6d2d641109e74d0788081e3f29801', name: "suffix" })));
+            } }, hAsync("div", { key: 'b5f1bb3f63cc786fb5363b0c4a8e3c7de5336f5e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '9b19a3d7463dc4b0b1f85f29573f5ab09da9cfe4', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '981c7c7171318c5b5bc31ed2de35ffd1a7229760', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("slot", { key: '387695afab07d859ec22c3d8b096485c694eff1e' }), hAsync("div", { key: 'dca63e9f8945cf0a2010b552e79cc8c821e7d1ff', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '95e80d163c50f3112fbc36cb66502e07f87b2aa1', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'd29c471d7529b7eebb10b1fe1ac7d93be25aedb1', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), hAsync("slot", { key: 'bc3527c0dd2ec7775f3ae16feb06736308a996e5', name: "suffix" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -27942,9 +27948,9 @@ class PickerColumnCmp {
     render() {
         const col = this.col;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '90b9d07917c0643cf8a622f090abefcd2846ac96', 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: '0337ac8379be177501b8d61f0ac0f68ecbb8344d', 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: '4adca834de9295a18bdb355ebbfa49813f0f93f8', 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: '013ba8ea1c2fe4fe717386b9cc87484913c234f7', 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 {
@@ -28048,10 +28054,10 @@ class PickerColumnOption {
     render() {
         const { color, disabled, ariaLabel } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '9333d9ac8e9990fc840f31e00391177d9cd563b3', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '1d5358c019c01ca429ddb514b9f9b67a3c89f652', class: createColorClasses$1(color, {
                 [mode]: true,
                 ['option-disabled']: disabled,
-            }) }, hAsync("button", { key: '6ca92bc584587230135982106eab542589fc4c9d', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, hAsync("slot", { key: 'd9a68906017f77143a0691b9bbc59ae2142da6aa' }))));
+            }) }, hAsync("button", { key: 'c86794a15b61062a886c6f5113723ccd98238e9f', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, hAsync("slot", { key: 'ab7f80cacdd39b5aedf7d2cc8eddc6288093629a' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29363,9 +29369,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: '8e3ff2681dbd4d2a659633ba2d5419abb2646858', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'a4a6fb333562cb2ecc2ac2350541de9be61837af', "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: '9bdb7b263b7ecaee62fd091dbc55ea3b8cf02b45', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '03bf042a104e8d019bd815ce0cc63a1b503cd644', class: "popover-content", part: "content" }, hAsync("slot", { key: 'dd9e35e0af13da7b98d094cc1d5b1161afaf267b' })))));
+            }, 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: 'de9c7ad73f221e6e9a55e2bc7e1ffad7b936b0dd', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '1cb5abc9835c044e6d14d444283f34b65b0b134e', class: "popover-content", part: "content" }, hAsync("slot", { key: '0e4db95e6341e823f87877325bb1164193ae6676' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29456,7 +29462,7 @@ class ProgressBar {
         const mode = getIonMode$1(this);
         // If the progress is displayed as a solid bar.
         const progressSolid = buffer === 1;
-        return (hAsync(Host, { key: '63b306c91da12d1fa18d6f6c4726871ef727c9f3', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '78a32304c7164cb78145a91be7bb9b86ecd11b66', 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,
@@ -29613,7 +29619,7 @@ class Radio {
         const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
         const mode = getIonMode$1(this);
         const inItem = hostContext('ion-item', el);
-        return (hAsync(Host, { key: '46bb0202f75b6cc81df10de71fbe971dc4dcaa68', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'bc70e174a1ca756f073ca0a95d6a12597a6eb896', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -29624,10 +29630,10 @@ class Radio {
                 // Focus and active styling should not apply when the radio is in an item
                 'ion-activatable': !inItem,
                 'ion-focusable': !inItem,
-            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, hAsync("label", { key: '55061e8cc857752d963c9e4a65f46727f5c2cd9d', class: "radio-wrapper" }, hAsync("div", { key: '589fd41fccd0e6d007e7bc502067f3f2447e4b80', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, hAsync("label", { key: '04cab7d54338c7bf9b8986e0a7bc402d5c1713af', class: "radio-wrapper" }, hAsync("div", { key: '9cd2e6ff53313c175a4a9804739f3e468d123c0b', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, hAsync("slot", { key: '0076f1f3b64c1a0cf2bc511424956a63d6cf2db9' })), hAsync("div", { key: '1505a84e6dc8715f8fcb19ce94fab79e624a0622', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, hAsync("slot", { key: 'f1c3120b4df240e690bf9b0a7d9e893c4a546476' })), hAsync("div", { key: 'ab89f05be8b93adb22851856d3e570065d594dae', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29812,7 +29818,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: '3d43aa6696c5293b49fc44cf91e3e41c4f4d12df', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
+        return hAsync(Host, { key: '1e33ffa21aa6589ecd2dcea2f98d5f766ec358fc', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -30441,7 +30447,7 @@ class Range {
         const needsEndAdjustment = inItem && !hasEndContent;
         const mode = getIonMode$1(this);
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (hAsync(Host, { key: '201677b1146738b96d74081e59d3e13a8472326e', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '4dfc3e08ccd8f39b1de8a977171c196334840717', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -30450,10 +30456,10 @@ class Range {
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
-            }) }, hAsync("label", { key: '055dda4f2673432e639b7efdbb01b2794c91e705', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: '3efe1eda1f68810a739a42b7655f2dd71beccf1e', class: {
+            }) }, hAsync("label", { key: '3d85cca6ea4add6e338a91c1736d493363c15dc9', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: '0bfabf13ea0b8c1ddd1ad3933f8ba3b60e0f14f9', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { key: '31458b02c2973f4ecf4a10de4c0ae1c4befda37a', class: "native-wrapper" }, hAsync("slot", { key: '21c78b192f312396bd86bf52a0888312ffefea8a', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: '843193879728ccfec62b4becb1b57d64b6d96804', name: "end" })))));
+            }, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { key: 'e916e52fe78eed340ce9102de19e53069271bf8f', class: "native-wrapper" }, hAsync("slot", { key: 'de52a20642a3df5e19a8888069a1460dbcf28e0c', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: '2791d30423b44a6c65bd151559bcba5402ed3835', name: "end" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -31327,7 +31333,7 @@ class Refresher {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '8e4a99ce208ea3162186e91ba0d1e289b4f247a0', slot: "fixed", class: {
+        return (hAsync(Host, { key: '460d903daa65f5549f4f75de63d185d82b9df1bc', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,
@@ -31555,7 +31561,7 @@ class RefresherContent {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'c84cb333293a4b8f749505268d019698f9df431c', class: mode }, hAsync("div", { key: 'fb3c0cd2ca4636762060b6615fc2da3ce93da20c', 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: '4a099f6a15854d9432d5e7ee8ade1023a6051965', 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: 'bd4122ec149c1ea6c43d5b6dfd7932569bfd8d7e', class: mode }, hAsync("div", { key: '492113883e1ed465fd6b35a8e700b29a8bbb2baf', 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: '402b0e02cfee42358c4fd690b60c8eb39386569f', 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 {
@@ -31598,7 +31604,7 @@ class Reorder {
     render() {
         const mode = getIonMode$1(this);
         const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
-        return (hAsync(Host, { key: '4e02357926b0208480a043ee3fe0617633daca76', class: mode }, hAsync("slot", { key: 'cedcbcdcc9702af91d00ee20664cb8be634f62d1' }, hAsync("ion-icon", { key: 'd78d7035eae7a235f428132c2a80c8e0538c4441', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        return (hAsync(Host, { key: '268c3575bdc5ca591e11442a744119028f17ae85', class: mode }, hAsync("slot", { key: '4767aef1d57921060541cd38b0a62ef2d8b3267b' }, hAsync("ion-icon", { key: 'ad5f972dc2449cdd7aba92b06e7f0d2539e9a202', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -31852,7 +31858,7 @@ class ReorderGroup {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'b3a4a278423a196c0980ab8d03062175d8b1f52a', class: {
+        return (hAsync(Host, { key: '3131c13e939242f1a4e10b4fcee028440b1a04c3', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
@@ -31960,7 +31966,7 @@ class RippleEffect {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'ca0ab0deaa7902cbc95e62d4b0c5baeac4387b41', role: "presentation", class: {
+        return (hAsync(Host, { key: '42d95cc2382286e3bc5d68603f8292eb57ba10f5', role: "presentation", class: {
                 [mode]: true,
                 unbounded: this.unbounded,
             } }));
@@ -32902,10 +32908,10 @@ class RouterLink {
             rel: this.rel,
             target: this.target,
         };
-        return (hAsync(Host, { key: '3affa4bc9806eaef4e1985c9ef7bb298342cbe95', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '64a8781a0e92ddc14e03a60ac3da7f21dd59a2af', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, hAsync("a", Object.assign({ key: 'b957040fd9f8bdc1cd1fd338734c9734522c2fc3' }, attrs), hAsync("slot", { key: 'cbf39dbce40865418fc9cd7e09a32d6c6b8f9f69' }))));
+            }) }, hAsync("a", Object.assign({ key: 'e2da87e62410c9ada5810f95ab1b9d6c489703a0' }, attrs), hAsync("slot", { key: '201854747f5c867c8f6fadea20ef29b1d221f9db' }))));
     }
     static get style() { return IonRouterLinkStyle0; }
     static get cmpMeta() { return {
@@ -33100,7 +33106,7 @@ class RouterOutlet {
         return true;
     }
     render() {
-        return hAsync("slot", { key: '42ee7dad5f8ae08d8204c56fbe9970b938ce5746' });
+        return hAsync("slot", { key: 'b90c776f7924a88b1b36befe7e6f8943fc20dfe3' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -33134,7 +33140,7 @@ class Row {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '99e5562cd37159634f14d351e5a09233c9da9611', class: getIonMode$1(this) }, hAsync("slot", { key: '07beb06113ae641d7b3d6c24307861d74c31a8d5' })));
+        return (hAsync(Host, { key: 'e52c499804f7bebc1c4ab8fb69ef1b452eae58c1', class: getIonMode$1(this) }, hAsync("slot", { key: '7808e8156601912e0192fe0b74bdedda2c359e1c' })));
     }
     static get style() { return IonRowStyle0; }
     static get cmpMeta() { return {
@@ -33528,8 +33534,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: '988915b91dd135bb3a4ba5ff31b2765f78cc05a0', "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: '239b7d21a29a527f515dcdf7ec1fc87f1aa1cc54', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (hAsync(Host, { key: '78cb90f96e83e11b158baf600af907ee7512abba', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '13b8d57952cbd2841d2355c378731f4dd043b226', "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: '4af4c84a95912ea4933fb335010c0c25f9d11312', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (hAsync(Host, { key: 'f652dd69ed63b5482b2e82de21301812742f295f', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -33539,14 +33545,14 @@ class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, hAsync("div", { key: '50660dbb27cc15bc69d22fa61e7be643fc6a75c2', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: 'b84654d68aa77e4f30b9009d7e2e04dfee96717e', "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: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, hAsync("ion-icon", { key: '7b1ddb05941fd0ada3b256bdeaf4e29153917546', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: '3219fff5d78ee3fe0ae092e5218b1ab0b1ba2766', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, hAsync("div", { key: 'd377f99e2dc60f97dee8bc5523a30f763102456c', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: '2a4c4f4cc6225f24c236c6c8767d6ab444023b8f', "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: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, hAsync("ion-icon", { key: '1475bac6d41f92697a25b56b02bde397009803ee', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: 'cbc0a72871bd243f44395eb3f580c3b713718565', "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: '859e781c418d1a03992c12f4466f77ac042266e8', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: '1b9765deba3adf1da731e0f5075fa393b6945f76', "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 {
@@ -34020,14 +34026,14 @@ class Segment {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'c11b46ad7311cf015402f3a6d4d58316d8d48faa', role: "tablist", onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'a0b1480e0f95ed9647871c749dbd93ef7ce5b28e', 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: '47ef8ff809cc11ea27fda5116cae25540b0a6f92' })));
+            }) }, hAsync("slot", { key: '01b9559e574b1b194e6010295cd9bea4b6aeab1b' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -34137,7 +34143,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: '67fab48aa470e71df51854a12d9fc3d744435c8f', class: {
+        return (hAsync(Host, { key: 'fc2262b4b1cb0c3e38b3de672910543211779b98', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -34153,10 +34159,10 @@ class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, hAsync("button", Object.assign({ key: 'dcc61cd35f1ff3535241c21630ae5f36166f6a7e', "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: '8ea97d13b245a0ac3a37d2452180e8638565f0c7', class: "button-inner" }, hAsync("slot", { key: 'b6abce60c1fa41db06b7af8a4de026f7d940f8d4' })), mode === 'md' && hAsync("ion-ripple-effect", null)), hAsync("div", { key: '2ce136fd46ca6a8b8f2c3a681672a08c6d6c3657', part: "indicator", class: {
+            } }, hAsync("button", Object.assign({ key: 'd73ffb0e52b86e41fff7aafac8bd77073b494b28', "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: 'a3d76c3191a508f47782f17602d814920dc26694', class: "button-inner" }, hAsync("slot", { key: 'ae6479c5eec1e0f4077066a6b0ca06c13af0847f' })), mode === 'md' && hAsync("ion-ripple-effect", null)), hAsync("div", { key: '593a4ec0d186520485073dc2fcdf23899924399b', part: "indicator", class: {
                 'segment-button-indicator': true,
                 'segment-button-indicator-animated': true,
-            } }, hAsync("div", { key: 'eac73d7b71edeecb92b6cdfc5a489ce6413bfb60', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, hAsync("div", { key: 'cfbd0d89a928cce0130da46b2be406c03ab3cddb', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -34755,7 +34761,7 @@ class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (hAsync(Host, { key: '34a8ad246debbd7f1220ba1816d6cf427a24df8f', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'a8819204f43c4ccce5016eae63287cd55d65076d', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -34771,7 +34777,7 @@ class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, hAsync("label", { key: 'b4deb5c56fd7d97d8d09850e9b2758cecc59160a', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), hAsync("div", { key: '5608f30189b941e8d737480308633376d7c554ec', class: "select-wrapper-inner" }, hAsync("slot", { key: '5448dcd362880effebec59b84ca81b140bf078b7', name: "start" }), hAsync("div", { key: 'ee140365597d0857621b4c4cd0577e0c51355f85', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '0aff40616a2ffaae06dfbb1282072d48435b220f', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { class: "select-highlight" }))));
+            }) }, hAsync("label", { key: 'd4e8d6ccf78ae7ce75c4bd2359e1539525f00271', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), hAsync("div", { key: '42c7bfe9587f82f62301a637eb19574218993b1f', class: "select-wrapper-inner" }, hAsync("slot", { key: '8eb09a67c455ebfad19028927426204adcb24fb5', name: "start" }), hAsync("div", { key: '85c1800dbf58436b9ae1574ee927911c9ee3a56e', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: 'aca7ddd389716406b04825ba324e17a5a965d795', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { class: "select-highlight" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -34862,7 +34868,7 @@ class SelectOption {
         this.value = undefined;
     }
     render() {
-        return hAsync(Host, { key: '7830b6152ba185b327d02fe96fd415cdcd16f48d', role: "option", id: this.inputId, class: getIonMode$1(this) });
+        return hAsync(Host, { key: 'e46b062b71c143792bb74527ba4980e02edc14b3', role: "option", id: this.inputId, class: getIonMode$1(this) });
     }
     get el() { return getElement(this); }
     static get style() { return IonSelectOptionStyle0; }
@@ -34982,7 +34988,7 @@ class SelectPopover {
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (hAsync(Host, { key: '81e4df60ad6dab49bdde30f4c3e460ba425f0c89', class: getIonMode$1(this) }, hAsync("ion-list", { key: '940f13aab8c6cebbeb7d4b6d4d64b3c67d4c953d' }, 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: '07c094ea0b8ba353f6147a912eedc3c75719fd4e', class: getIonMode$1(this) }, hAsync("ion-list", { key: '4d110e3e036bbfecc418d0e37fc9bc4ec0c18674' }, 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 {
@@ -35030,11 +35036,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: 'a093b75e3cac98eed870a682f55a6a305d6ba0ba', class: {
+        return (hAsync(Host, { key: 'e0a84e5017cde072087d5580dd370bbd36106f99', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, hAsync("span", { key: 'e73bb72ba6e57b4e5ddbe03acdb844b0ba63a0b9' }, "\u00A0")));
+            } }, hAsync("span", { key: '3274a42e3fd4f1b9fb285f4b982416e1f68ac766' }, "\u00A0")));
     }
     get el() { return getElement(this); }
     static get style() { return IonSkeletonTextStyle0; }
@@ -35087,7 +35093,7 @@ class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (hAsync(Host, { key: '68452be6b1ad1699bb8167dfaf235328cb7f5358', class: createColorClasses$1(self.color, {
+        return (hAsync(Host, { key: 'bfb8b93a58da60686f6a1e6b8a5e0d1b7dea1f5d', class: createColorClasses$1(self.color, {
                 [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),
@@ -35187,12 +35193,12 @@ class SplitPane {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'a8dd60d8f80847cd406bf1776c89209192a424b9', class: {
+        return (hAsync(Host, { key: 'ea58eb10f1e0040f8b193684085dcf0b6fb70736', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, hAsync("slot", { key: '85c037c53bf8447724aac28260a0d8dab3102525' })));
+            } }, hAsync("slot", { key: '568992064ae695fb4de01aef59d6f6e3359e1e0f' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -35261,10 +35267,10 @@ class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (hAsync(Host, { key: '1a58c58f3d721e840fc2bb09a4f93c47ff0ce1dc', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (hAsync(Host, { key: 'e67484767fa4aab6bc90db390a90eb5e24e51f14', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, hAsync("slot", { key: '0189bc368d456b93c376c363216d6535f45a8822' })));
+            } }, hAsync("slot", { key: 'ad6523d5a128d457d09e88739f8218cdf16152de' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -35342,11 +35348,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: '1a8f53e428102e3433006244351fd45616d469f3', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '2d30e75e19d86a1eb65cff8ddab0cb059f59b224', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, hAsync("slot", { key: 'f7b344751801feeada1e1fbd3e35442b9cce578e' })));
+            }) }, hAsync("slot", { key: '5b739f1bbe21c887b7810383edd2f67143ac086e' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -35444,7 +35450,7 @@ class TabButton {
             rel,
             target,
         };
-        return (hAsync(Host, { key: '2311364c7e028b9e6658f78405983e895c5f30ed', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (hAsync(Host, { key: 'b37743b20b93c27ffb0094b35545292533f9d30f', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [mode]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -35456,7 +35462,7 @@ class TabButton {
                 'ion-activatable': true,
                 'ion-selectable': true,
                 'ion-focusable': true,
-            } }, hAsync("a", Object.assign({ key: 'a5835459b16a4c2db298de8cb75c78a88b349dcc' }, 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: 'e19e23bbb63f8ceb9e047fc4e3b518f824645398', class: "button-inner" }, hAsync("slot", { key: 'f6cbfa231dde5f46147bccd99c40ab974be549b2' })), mode === 'md' && hAsync("ion-ripple-effect", { type: "unbounded" }))));
+            } }, hAsync("a", Object.assign({ key: '7dd2b3aaa96f64a8b7411730ed8b201466a97162' }, 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: 'cb328541793b6aa469d5d3bff662d2efa56dc977', class: "button-inner" }, hAsync("slot", { key: '904a1b063f481ac86d5bea967a375addc9c96471' })), mode === 'md' && hAsync("ion-ripple-effect", { type: "unbounded" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -35622,7 +35628,7 @@ class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (hAsync(Host, { key: '05f1607d092d5bef9f1f42dd46d4bec6caa58f15', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: '8e175dbf3afeb76c0b3a794b3064a2191b1b5fbc', name: "top" }), hAsync("div", { key: 'd7120d2f0dc58cca23c0854e042a4d4b8fde4db6', class: "tabs-inner" }, hAsync("slot", { key: 'a3651076ad9ab1c6cf56a7b82172ff59930d1963' })), hAsync("slot", { key: 'a719a23f813740dc2c03d21af0c2fe28f1b4f8bb', name: "bottom" })));
+        return (hAsync(Host, { key: 'e2cac6a2e54514f31cfe65692e34e88d530b204f', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: '53bc64f37aebb9a68c6e2db2c89ec6d39cd64bbd', name: "top" }), hAsync("div", { key: '72f4f0ae53518631d6c1b6276da3f63147c28cfc', class: "tabs-inner" }, hAsync("slot", { key: '79f1eece652cf00a3dd8359b68e68059816ff704' })), hAsync("slot", { key: '3fbaf52447720ee14c7db06f2bf71a92093847f4', name: "bottom" })));
     }
     get el() { return getElement(this); }
     static get style() { return IonTabsStyle0; }
@@ -35664,9 +35670,9 @@ class Text {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '7481d3ae97e8623e9cdbf7702b16465f9aaa13bf', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '9b5decc6dfca4fbaf0fe42696a9833ffee269a7d', class: createColorClasses$1(this.color, {
                 [mode]: true,
-            }) }, hAsync("slot", { key: 'ae2ed8d29d2e52914f0d38b804e1cdc8941c9c64' })));
+            }) }, hAsync("slot", { key: '5b822dcc0f6255819cec7626d0c0f7f9873aaab9' })));
     }
     static get style() { return IonTextStyle0; }
     static get cmpMeta() { return {
@@ -36033,7 +36039,7 @@ class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (hAsync(Host, { key: 'bb02bfa6a2f0f80d98df5a556941dfe4e6167f1a', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '25c93a03ddc64c24ce09f329a4dac89c3778dfbc', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -36042,7 +36048,7 @@ class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, hAsync("label", { key: '1b94ad5bc71dd4441fe6d35690ba2d8e19e4f59c', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), hAsync("div", { key: 'cd3143f63bf715782f849a4d29549473d5ee9a80', class: "textarea-wrapper-inner" }, hAsync("div", { key: 'bebcda4eed228f9742fb3446e5b5d27daf2d2dd4', class: "start-slot-wrapper" }, hAsync("slot", { key: '4cc32fbeae35ae04914183abc4e300aa21863ec6', name: "start" })), hAsync("div", { key: '6f43f54dd8e0a548bc8b376025fb8f914d705130', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, hAsync("textarea", Object.assign({ key: '11b30015d9b5daf6781651a1d0111d2be893f4c6', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), hAsync("div", { key: '7dc55f082b3268b78b1f8230ce81c9b870d945a8', class: "end-slot-wrapper" }, hAsync("slot", { key: '054c0a7e052a301c00f8fe3cb975e61e7a7b4d3c', name: "end" }))), shouldRenderHighlight && hAsync("div", { class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, hAsync("label", { key: 'e04e24784f1da17eaf7b8777729ad8afe28ec420', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), hAsync("div", { key: '8298c4d29ae35bc55ff122e634546cfde9ba7230', class: "textarea-wrapper-inner" }, hAsync("div", { key: '37700dcb609fa7c1d90546a0213e21fb40eecc1c', class: "start-slot-wrapper" }, hAsync("slot", { key: '76fef32fa9d0951edcb5c6298937ac1222cc3509', name: "start" })), hAsync("div", { key: '7525a144ae19f64a19e6ff9727ca5db27c2a87e9', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, hAsync("textarea", Object.assign({ key: '4dbcc754f428921859d0a0528525c4417a216e4e', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), hAsync("div", { key: '65845f7b39b4821786024938550e6597c8fa5de2', class: "end-slot-wrapper" }, hAsync("slot", { key: 'ba63b2e34630c7485d7cc6ba3a2275b2dcbcd4de', name: "end" }))), shouldRenderHighlight && hAsync("div", { class: "textarea-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -36104,7 +36110,7 @@ class Thumbnail {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: 'b1fe245cf42f0462336519d07afd6c91eef388cf', class: getIonMode$1(this) }, hAsync("slot", { key: '5e0f575864fcd9ae03ec8f5f7eb915efcf568337' })));
+        return (hAsync(Host, { key: '68bac4e80f5d27131690fd20dfabff2618743206', class: getIonMode$1(this) }, hAsync("slot", { key: '89f46a686288428391cdfaef3384824751ae3d05' })));
     }
     static get style() { return IonThumbnailStyle0; }
     static get cmpMeta() { return {
@@ -36937,9 +36943,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: 'ebab697ab245b8ffe7163c59ee059d143242845a', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '45b52c210cc3e9ac130f695f29b03d771959f64f', 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: '94d1bcbb17cb4ed81ec67d63ccf61822fedbed94', class: wrapperClass }, hAsync("div", { key: 'd10a99dcdf94d70003b70dea7d965c05baefa934', 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: '6475020a6890eb79bb37638c0ad0267f1cbf89fb', 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: '10f25e094028f4855828ba2e04e71445b05198eb', class: wrapperClass }, hAsync("div", { key: 'a1312a8878dd8a02798de0a1f136d03c287a34a8', 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: '0f19c24f130c04ff41a3098bf6d9b17e2c8a2d12', 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 {
@@ -37159,7 +37165,7 @@ class Toggle {
         const value = this.getValue();
         const rtl = isRTL$1(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (hAsync(Host, { key: '9ea705862e0a6c8c3250d19d6487ba5a312557f4', onClick: this.onClick, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'f90c95348f1251c077187f0d30f6f4a5198cde68', onClick: this.onClick, class: createColorClasses$1(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -37169,10 +37175,10 @@ class Toggle {
                 [`toggle-alignment-${alignment}`]: true,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, hAsync("label", { key: '6347141bd48c42c10f358bdf95ee5c3e9719f7e7', class: "toggle-wrapper" }, hAsync("input", Object.assign({ key: 'a81935c322ccdec55723986bc69556833e057b7b', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), hAsync("div", { key: '0ab294895807335c63c9a31685d861a9f75f0129', class: {
+            }) }, hAsync("label", { key: '3b86ca8cc4a19b6bc17784cd01fcb7697c58d108', class: "toggle-wrapper" }, hAsync("input", Object.assign({ key: '3773acdfdfe5263517980f19a698bdbb572a68eb', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), hAsync("div", { key: 'bb10a95f701d5f9c343c7d46a5bb690ee42eaa1d', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, hAsync("slot", { key: '918de14911b5c1453ac1b817a92614d80fe81082' })), hAsync("div", { key: 'f7f8b23c1de4eacdf912034286d51d88dde09699', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, hAsync("slot", { key: '7ff69b1184f0abbefdb9642400885baf3b2abd38' })), hAsync("div", { key: '3df2f297d9c0b53e7997841b822845af7ad6a058', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -37276,10 +37282,10 @@ class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (hAsync(Host, { key: 'f11da98ce3398f95930cd6f5b95783a5b658e206', class: Object.assign(Object.assign({}, childStyles), createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'f72d6a7ed20c88ba15d64050acfc20f320569862', class: Object.assign(Object.assign({}, childStyles), createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, hAsync("div", { key: '2e473c8bebf448f411ec1a579f0c81eb05310c56', class: "toolbar-background" }), hAsync("div", { key: 'cf2d7c69bc028410338942aaea37527c570ccec5', class: "toolbar-container" }, hAsync("slot", { key: '445cbd5299188eef4761c605b4a8d20a61079590', name: "start" }), hAsync("slot", { key: '77675b5c0c0afffe5251ba271f5db23f87339859', name: "secondary" }), hAsync("div", { key: '7d5967c4ad6c0fca7573aa48da707c8b0dfcd052', class: "toolbar-content" }, hAsync("slot", { key: 'ad5530d63df9ca101760fb9f71e3641c66e95b6c' })), hAsync("slot", { key: '35837ac1b7a4a59f000149d480900bc19015b258', name: "primary" }), hAsync("slot", { key: '504904cf46e2190dd0a3aa5b7855b5fc54f73726', name: "end" }))));
+            })) }, hAsync("div", { key: 'ccf18eea9756ca56ca828b05bd3f86cf8a32e24c', class: "toolbar-background" }), hAsync("div", { key: '1fa699d8e17f57b42a52d47a1bdb793f2cbbfe5d', class: "toolbar-container" }, hAsync("slot", { key: 'ef4d877bad0918eefdc67fa7aa258024a58d26ef', name: "start" }), hAsync("slot", { key: '41858db7a8d58c9165952c9336731d621ec3c2b8', name: "secondary" }), hAsync("div", { key: '577770b9346b48a0fa1412cbdbd9393d553d2286', class: "toolbar-content" }, hAsync("slot", { key: 'ae47b29e1f7d2c3dde7a170c9737b48f075139c2' })), hAsync("slot", { key: 'cfbf7879daf1a38fee434335abff936d8f3690e0', name: "primary" }), hAsync("slot", { key: 'ed3a66248f43e0749f6aef9fb78ea4f5034c0774', name: "end" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -37329,11 +37335,11 @@ class ToolbarTitle {
     render() {
         const mode = getIonMode$1(this);
         const size = this.getSize();
-        return (hAsync(Host, { key: '4e7a269caceb9cf7a71c3ba5dc15903a72203132', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'af95e7123b3d39110425c16cb4f7f8efb1ee1536', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, hAsync("div", { key: 'e42d43e85a57a2ac16579021df43ade524f1d9bf', class: "toolbar-title" }, hAsync("slot", { key: '2319bcfdb2b79eec9c03db84bea2a9f133cc8576' }))));
+            }) }, hAsync("div", { key: '54efce3d5769fb3de297a6d534dc87d57f365004', class: "toolbar-title" }, hAsync("slot", { key: 'f7ed25c6b178cad1840e35e81e3eeeca3aacea3f' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {