@ionic/core 8.0.2 → 8.1.0

package/hydrate/index.js

@@ -4628,7 +4628,7 @@ const trapKeyboardFocus = (ev, doc) => {
      * behind the sheet should be focusable until
      * the backdrop is enabled.
      */
-    if (lastOverlay.classList.contains('ion-disable-focus-trap')) {
+    if (lastOverlay.classList.contains(FOCUS_TRAP_DISABLE_CLASS)) {
         return;
     }
     const trapScopedFocus = () => {
@@ -5303,6 +5303,7 @@ const revealOverlaysToScreenReaders = () => {
         }
     }
 };
+const FOCUS_TRAP_DISABLE_CLASS = 'ion-disable-focus-trap';
 
 const hostContext = (selector, el) => {
     return el.closest(selector) !== null;
@@ -8639,6 +8640,7 @@ class Content {
         };
         this.color = undefined;
         this.fullscreen = false;
+        this.fixedSlotPlacement = 'after';
         this.forceOverscroll = undefined;
         this.scrollX = false;
         this.scrollY = true;
@@ -8902,13 +8904,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: '98e9658e69c0bbe0113e4c1b89dd7b240334c039', role: isMainContent ? 'main' : undefined, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'f599a7da14969df38c20a6f650179d2a319fb58b', role: isMainContent ? 'main' : undefined, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
@@ -8916,12 +8918,12 @@ class Content {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, hAsync("div", { key: 'e89aa6ea09625846db52d63bdbf06c3c279a5ba4', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), hAsync("div", { key: '37925cf9d898ede58d5ac7b5a650c648033602a3', class: {
+            } }, hAsync("div", { key: '7c545c3c95ea05abd036d0462936ac153d2a8fc6', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? hAsync("slot", { name: "fixed" }) : null, hAsync("div", { key: 'a67ab7438466c99f74b7ba59964802c3ba86ac5b', 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: 'a40f964cacf0c2e2bdcf962791aaadb386d44323' })), transitionShadow ? (hAsync("div", { class: "transition-effect" }, hAsync("div", { class: "transition-cover" }), hAsync("div", { class: "transition-shadow" }))) : null, hAsync("slot", { key: 'd21886cff0bc417e1f5e3a436dddc079e967579b', name: "fixed" })));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, hAsync("slot", { key: '6d10fcac2e40b4dd6c20d91a8957ac07251d2fa7' })), 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; }
@@ -8931,6 +8933,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"],
@@ -10969,10 +10972,10 @@ class Datetime {
             const { activeParts } = this;
             return Array.isArray(activeParts) ? activeParts[0] : activeParts;
         };
-        this.closeParentOverlay = () => {
+        this.closeParentOverlay = (role) => {
             const popoverOrModal = this.el.closest('ion-modal, ion-popover');
             if (popoverOrModal) {
-                popoverOrModal.dismiss();
+                popoverOrModal.dismiss(undefined, role);
             }
         };
         this.setWorkingParts = (parts) => {
@@ -11643,7 +11646,7 @@ class Datetime {
             }
         }
         if (closeOverlay) {
-            this.closeParentOverlay();
+            this.closeParentOverlay(CONFIRM_ROLE);
         }
     }
     /**
@@ -11663,7 +11666,7 @@ class Datetime {
     async cancel(closeOverlay = false) {
         this.ionCancel.emit();
         if (closeOverlay) {
-            this.closeParentOverlay();
+            this.closeParentOverlay(CANCEL_ROLE);
         }
     }
     get isCalendarPicker() {
@@ -11975,7 +11978,7 @@ class Datetime {
         const todayString = workingParts.day !== null
             ? `${workingParts.year}-${workingParts.month}-${workingParts.day}`
             : `${defaultParts.year}-${defaultParts.month}-${defaultParts.day}`;
-        return (hAsync("ion-picker-column", { class: "date-column", color: this.color, disabled: disabled, value: todayString, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { "aria-label": "Select a date", class: "date-column", color: this.color, disabled: disabled, value: todayString, onIonChange: (ev) => {
                 const { value } = ev.detail;
                 const findPart = parts.find(({ month, day, year }) => value === `${year}-${month}-${day}`);
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), findPart));
@@ -12050,7 +12053,7 @@ class Datetime {
         const { disabled, workingParts } = this;
         const activePart = this.getActivePartsWithFallback();
         const pickerColumnValue = (_a = (workingParts.day !== null ? workingParts.day : this.defaultParts.day)) !== null && _a !== void 0 ? _a : undefined;
-        return (hAsync("ion-picker-column", { class: "day-column", color: this.color, disabled: disabled, value: pickerColumnValue, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { "aria-label": "Select a day", class: "day-column", color: this.color, disabled: disabled, value: pickerColumnValue, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { day: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { day: ev.detail.value }));
                 ev.stopPropagation();
@@ -12062,7 +12065,7 @@ class Datetime {
         }
         const { disabled, workingParts } = this;
         const activePart = this.getActivePartsWithFallback();
-        return (hAsync("ion-picker-column", { class: "month-column", color: this.color, disabled: disabled, value: workingParts.month, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { "aria-label": "Select a month", class: "month-column", color: this.color, disabled: disabled, value: workingParts.month, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { month: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { month: ev.detail.value }));
                 ev.stopPropagation();
@@ -12074,7 +12077,7 @@ class Datetime {
         }
         const { disabled, workingParts } = this;
         const activePart = this.getActivePartsWithFallback();
-        return (hAsync("ion-picker-column", { class: "year-column", color: this.color, disabled: disabled, value: workingParts.year, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { "aria-label": "Select a year", class: "year-column", color: this.color, disabled: disabled, value: workingParts.year, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { year: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { year: ev.detail.value }));
                 ev.stopPropagation();
@@ -12107,7 +12110,7 @@ class Datetime {
         if (hoursData.length === 0)
             return [];
         const activePart = this.getActivePartsWithFallback();
-        return (hAsync("ion-picker-column", { color: this.color, disabled: disabled, value: activePart.hour, numericInput: true, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { "aria-label": "Select an hour", color: this.color, disabled: disabled, value: activePart.hour, numericInput: true, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { hour: ev.detail.value }));
                 ev.stopPropagation();
@@ -12118,7 +12121,7 @@ class Datetime {
         if (minutesData.length === 0)
             return [];
         const activePart = this.getActivePartsWithFallback();
-        return (hAsync("ion-picker-column", { color: this.color, disabled: disabled, value: activePart.minute, numericInput: true, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { "aria-label": "Select a minute", color: this.color, disabled: disabled, value: activePart.minute, numericInput: true, onIonChange: (ev) => {
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { minute: ev.detail.value }));
                 ev.stopPropagation();
@@ -12131,7 +12134,7 @@ class Datetime {
         }
         const activePart = this.getActivePartsWithFallback();
         const isDayPeriodRTL = isLocaleDayPeriodRTL(this.locale);
-        return (hAsync("ion-picker-column", { style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
+        return (hAsync("ion-picker-column", { "aria-label": "Select a day period", style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
                 const hour = calculateHourFromAMPM(workingParts, ev.detail.value);
                 this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
                 this.setActiveParts(Object.assign(Object.assign({}, activePart), { ampm: ev.detail.value, hour }));
@@ -12441,7 +12444,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: '11508a20af9da98e21eb92d2b882bb7cf8370da6', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
+        return (hAsync(Host, { key: '48313af4ec8e2a2666cd8c89932c5131dfa7b556', "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,
@@ -12451,7 +12454,7 @@ class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, hAsync("div", { key: 'e35a98de33fa67c8b20c1d40620c1c75dee07512', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, hAsync("div", { key: 'b72570048236415aed915488305046d987d51dcf', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -12520,6 +12523,8 @@ class Datetime {
     }; }
 }
 let datetimeIds = 0;
+const CANCEL_ROLE = 'datetime-cancel';
+const CONFIRM_ROLE = 'datetime-confirm';
 const WHEEL_ITEM_PART = 'wheel-item';
 const WHEEL_ITEM_ACTIVE_PART = `active`;
 
@@ -12857,11 +12862,11 @@ class DatetimeButton {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '26e606af6f067a5774db37ed41387ffebb941777', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '0be955404133adbb31ae16a6599014bb29765f19', class: createColorClasses$1(color, {
                 [mode]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
-            }) }, dateText && (hAsync("button", { key: '6b7aa66a15b4a6d89d411e40586de28a2ac9f343', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, hAsync("slot", { key: 'd42f34fd167be34386319e7ea788c2ab03c90b87', name: "date-target" }, dateText), mode === 'md' && hAsync("ion-ripple-effect", { key: '47dd34f3c2799064cac7a5fe25440ecc043950f0' }))), timeText && (hAsync("button", { key: 'd77424a20fae320654774c7bfc8a8e2369d3afe3', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, hAsync("slot", { key: 'ac088a78141bb53f2efd48dd7745f8954c92378b', name: "time-target" }, timeText), mode === 'md' && hAsync("ion-ripple-effect", { key: 'b3a58ddfd28b9396e2518ffd62a045ec13d8b9d0' })))));
+            }) }, dateText && (hAsync("button", { key: '812dcb50b17768cc13a5cfa0bcce8b113cee0f09', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, hAsync("slot", { key: '46930c740a32a78502df9e651f9bd5914d6a9fea', name: "date-target" }, dateText), mode === 'md' && hAsync("ion-ripple-effect", { key: '0602999cc8435dc37aa22da7f5531bc8cb71e1b4' }))), timeText && (hAsync("button", { key: 'ecdd21da5181ecbdce03209f9f6673b7dcbc1f78', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, hAsync("slot", { key: 'b5b093b5166d12d11e27360788edaac916d44390', name: "time-target" }, timeText), mode === 'md' && hAsync("ion-ripple-effect", { key: '70bb3a04f4748d13233eeb257503968dbd1161a9' })))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -12935,12 +12940,12 @@ class Fab {
     render() {
         const { horizontal, vertical, edge } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '8a310806d0e748d7ebb0ed3d9a2652038e0f2960', class: {
+        return (hAsync(Host, { key: 'cb44cf6486b0a6439b99da87c065b0b52e2514f4', class: {
                 [mode]: true,
                 [`fab-horizontal-${horizontal}`]: horizontal !== undefined,
                 [`fab-vertical-${vertical}`]: vertical !== undefined,
                 'fab-edge': edge,
-            } }, hAsync("slot", { key: '9394ef6d6e5b0410fa6ba212171f687fb178ce2d' })));
+            } }, hAsync("slot", { key: '1ed484c7ecb10cd81fbca9a4f5c4049bf82f9f8a' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -13030,7 +13035,7 @@ class FabButton {
                 rel: this.rel,
                 target: this.target,
             };
-        return (hAsync(Host, { key: '4eee204d20b0e2ffed49a88f6cb3e04b6697965c', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'eb347f7d6749c40637540d84778eb8d1b667a947', 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,
@@ -13041,7 +13046,7 @@ class FabButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 [`fab-button-${size}`]: size !== undefined,
-            }) }, hAsync(TagType, Object.assign({ key: '914561622c0c6bd41453e828a7d8a39f924875ac' }, 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: '2c8090742a64c62a79243667027a195cca9d5912', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), hAsync("span", { key: 'c3e55291e4c4d306d34a4b95dd2e727e87bdf39c', class: "button-inner" }, hAsync("slot", { key: 'f8e57f71d8f8878d9746cfece82f57f19ef9e988' })), mode === 'md' && hAsync("ion-ripple-effect", { key: 'a5e94fa0bb9836072300617245ed0c1b4887bac6' }))));
+            }) }, hAsync(TagType, Object.assign({ key: '83e853c8815f41543c848eb2e05ec2bb1716110a' }, 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: '798deede94de658e4345acf7c2aafe2ab2567b0b', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), hAsync("span", { key: '99252fde6de1aca73fc240a6da7e29acac9acb18', class: "button-inner" }, hAsync("slot", { key: 'dc73e9b41bf1f0e385e5784f975dfb81e37c8dfb' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '8413e162f44a0350f54dff06cff7aad101de3549' }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -13092,11 +13097,11 @@ class FabList {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '64b33366447f66c7f979cfac56307fbb1a6fac1c', class: {
+        return (hAsync(Host, { key: 'fa1d195b9950654ba0e984bf61d981c977d05275', class: {
                 [mode]: true,
                 'fab-list-active': this.activated,
                 [`fab-list-side-${this.side}`]: true,
-            } }, hAsync("slot", { key: 'd9f474f7f20fd7e813db358fddc720534ca05bb6' })));
+            } }, hAsync("slot", { key: '2ec738c66c05112e1e2521155d6adfc36d2fd1db' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -13548,7 +13553,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: 'ddc228f1a1e7fa4f707dccf74db2490ca3241137', role: "contentinfo", class: {
+        return (hAsync(Host, { key: '5da19dc38ba73e1ddfd1bef3ebd485105d77c751', role: "contentinfo", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`footer-${mode}`]: true,
@@ -13556,7 +13561,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", { key: 'e16ed4963ff94e06de77eb8038201820af73937c', class: "footer-background" }), hAsync("slot", { key: 'f186934febf85d37133d9351a96c1a64b0a4b203' })));
+            } }, mode === 'ios' && translucent && hAsync("div", { key: 'fafad08090a33d8c4e8a5b63d61929dcb89aab47', class: "footer-background" }), hAsync("slot", { key: 'e0a443d346afa55e4317c0bc1263fdbe3c619559' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -13587,10 +13592,10 @@ class Grid {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '617127ecfabf9bf615bef1dda1be3fed5a065949', class: {
+        return (hAsync(Host, { key: '930ce78b02f8360fbca08a35d364d2c09128c6c8', class: {
                 [mode]: true,
                 'grid-fixed': this.fixed,
-            } }, hAsync("slot", { key: 'c781fff853b093d8f44bdb7943bbc4f17c903803' })));
+            } }, hAsync("slot", { key: 'c47bf7ef2197f5ebc42d3e2c55044276fb0db393' })));
     }
     static get style() { return IonGridStyle0; }
     static get cmpMeta() { return {
@@ -13921,14 +13926,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: 'b6cc27f0b08afc9fcc889683525da765d80ba672', role: roleType, class: {
+        return (hAsync(Host, Object.assign({ key: 'c687314ef290793a9d633ad20cfc5eeb47621e31', 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", { key: '395766d4dcee3398bc91960db21f922095292f14', class: "header-background" }), hAsync("slot", { key: '09a67ece27b258ff1248805d43d92a49b2c6859a' })));
+            } }, inheritedAttributes), mode === 'ios' && translucent && hAsync("div", { key: 'b429996046082405a91e7c23f95516db0b736f12', class: "header-background" }), hAsync("slot", { key: 'e17a8965f8d3a33c1bfcb056c153d8242e5229fa' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -14207,7 +14212,7 @@ class Img {
     render() {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
-        return (hAsync(Host, { key: 'da600442894427dee1974a28e545613afac69fca', class: getIonMode$1(this) }, hAsync("img", { key: '16df0c7069af86c0fa7ce5af598bc0f63b4eb71a', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        return (hAsync(Host, { key: '14d24d65ec8e5522192ca58035264971b1ab883b', class: getIonMode$1(this) }, hAsync("img", { key: '345ba155a5fdce5e66c397a599b7333d37d9cb1d', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -14414,7 +14419,7 @@ class InfiniteScroll {
     render() {
         const mode = getIonMode$1(this);
         const disabled = this.disabled;
-        return (hAsync(Host, { key: 'e844956795f69be33396ce4480aa7a54ad01b28c', class: {
+        return (hAsync(Host, { key: '1444429a86950c449953cbf578436cc8cabf40ec', class: {
                 [mode]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,
@@ -14470,11 +14475,11 @@ class InfiniteScrollContent {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '7c16060dcfe2a0b0fb3e2f8f4c449589a76f1baa', class: {
+        return (hAsync(Host, { key: '060278bf9cb0321e182352f9613be4ebbb028259', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`infinite-scroll-content-${mode}`]: true,
-            } }, hAsync("div", { key: 'a94f4d8746e053dc718f97520bd7e48cb316443a', class: "infinite-loading" }, this.loadingSpinner && (hAsync("div", { key: '10143d5d2a50a2a2bc5de1cee8e7ab51263bcf23', class: "infinite-loading-spinner" }, hAsync("ion-spinner", { key: '8846e88191690d9c61a0b462889ed56fbfed8b0d', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+            } }, hAsync("div", { key: '07d3cada920145f979ad315bd187fb878e0c3da3', class: "infinite-loading" }, this.loadingSpinner && (hAsync("div", { key: '6254f175d7543d09f3dd47cd0589a2809182cd8c', class: "infinite-loading-spinner" }, hAsync("ion-spinner", { key: 'a6a816d1c65b60b786333b209b63492aa716a283', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
     }
     static get style() { return {
         ios: IonInfiniteScrollContentIosStyle0,
@@ -14898,6 +14903,7 @@ class Input {
         this.autocorrect = 'off';
         this.autofocus = false;
         this.clearInput = false;
+        this.clearInputIcon = undefined;
         this.clearOnEdit = undefined;
         this.counter = false;
         this.counterFormatter = undefined;
@@ -15178,11 +15184,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;
         /**
@@ -15203,7 +15211,7 @@ class Input {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (hAsync(Host, { key: 'b0697cdbb71e680d904c11445a9bd7c28567b0e4', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '907ce98a82b5cfae5a08504cd79e00a2330b7444', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -15214,7 +15222,7 @@ class Input {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, hAsync("label", { key: 'eb9851f62c4aa62dd3b2ebe2e169182ea9fa12d8', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), hAsync("div", { key: 'e8cd537de25d25ed7fd3a6c3450643f0bfe10f82', class: "native-wrapper" }, hAsync("slot", { key: '00590a3d52896465102d0f9e75a9165f9a3f5936', name: "start" }), hAsync("input", Object.assign({ key: '26fd41169cbf5c5b7efc9989d6e9300c20db321a', 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", { key: '4dc7c673179fa5c0f84a251ceed2599f8b7e9b8b', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, hAsync("label", { key: '59d5bb45d2a5b828bba0ed8687a632a551e2f4d8', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), hAsync("div", { key: 'f93f129d08246d0e9a601c100d718534d6403853', class: "native-wrapper" }, hAsync("slot", { key: '54eeb1a6bace662b7eb0d7e27180ea3d7e3a3729', name: "start" }), hAsync("input", Object.assign({ key: 'b3e0be55bc1a4a539ae3b0fdcf7fc078723cca16', 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", { key: '5f6373504a6d0d074bfbf875c794d45ea2748175', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
@@ -15229,7 +15237,7 @@ class Input {
                  * for screen readers as it means users would be unable to swipe past the clear button.
                  */
                 ev.stopPropagation();
-            }, onClick: this.clearTextInput }, hAsync("ion-icon", { key: '22faa709020c08c3fbd44955c2cfa77c2117e47e', "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), hAsync("slot", { key: '6b2c0138fd1aa0e8f004e807d842856278960d8a', name: "end" })), shouldRenderHighlight && hAsync("div", { key: '2db65ebfa53b4490490d3f1dc4a1a21875e239a2', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, hAsync("ion-icon", { key: '230d77973aa83458ceb32bf52e3abe9bc322cfe6', "aria-hidden": "true", icon: clearIconData }))), hAsync("slot", { key: '9d69ac6e8a3c4b2b303dba2478f82695d5755ed2', name: "end" })), shouldRenderHighlight && hAsync("div", { key: 'ac61f16237ce731e0745ab72d0fc3f066252464a', class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -15251,6 +15259,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],
@@ -15350,16 +15359,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: 'd9811e25bfeb2aa197352bb9be852e9e420739d5', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'ed1c29726ce0c91548f0e2ada61e3f8b5c813d2d', class: createColorClasses$1(color, {
                 [mode]: true,
-            }) }, hAsync("ion-button", { key: '1eaea1442b248fb2b8d61538b27274e647a07804', 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: '9698eccdaedb86cf12d20acc53660371b3af3c55', 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: '9c88de8f4631d9bde222ce2edf6950d639e04773', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? hidePasswordIcon : showPasswordIcon }))));
+            }, onClick: this.togglePasswordVisibility }, hAsync("ion-icon", { key: '1f2119c30b56c800d9af44e6499445a0ebb466cf', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? hidePasswordIcon : showPasswordIcon }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -15655,11 +15664,11 @@ class ItemDivider {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '6cff318230a9b2a9db529df154285d3dd9822efe', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '60fda1dab7dbc0038ec7ff68a661896430f7d5c5', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'item-divider-sticky': this.sticky,
                 item: true,
-            }) }, hAsync("slot", { key: 'eb50dfab74ab0fd13697db17ecd60e8fa0bf1750', name: "start" }), hAsync("div", { key: '2806efd89d086f4fb844a479d9c095e1e0775713', class: "item-divider-inner" }, hAsync("div", { key: '77b7d5fa987e5f1c26d8023cd1f974a8a263a3de', class: "item-divider-wrapper" }, hAsync("slot", { key: 'dbafb0deb140a19a2a9748fd5b48760c39c6fd2e' })), hAsync("slot", { key: 'ef9a848fe21e84ef21cd273b8a4d9f95f558175b', name: "end" }))));
+            }) }, hAsync("slot", { key: '6ce072dfc2adfa699a2c34ffe25ed221c74d9eea', name: "start" }), hAsync("div", { key: '9a441be204ee2f0b567432722407c75e3cbbe942', class: "item-divider-inner" }, hAsync("div", { key: 'fd6f2969b345dba51400a290473e594d2d019dc5', class: "item-divider-wrapper" }, hAsync("slot", { key: 'ebf5601b21c4cf199c01bf142865b8da0c1ba4a6' })), hAsync("slot", { key: '249af8f30113f2c986976d518126661f65531121', name: "end" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -15691,7 +15700,7 @@ class ItemGroup {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'f9ffe0290d3fa546494fe55f952d8554f2a8abf8', role: "group", class: {
+        return (hAsync(Host, { key: '24ff047b7c45f963f0dad072c65d38a230c2bc97', role: "group", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-group-${mode}`]: true,
@@ -15759,12 +15768,12 @@ class ItemOption {
                 href: this.href,
                 target: this.target,
             };
-        return (hAsync(Host, { key: '89310624997821858c1abde60c0ffb142ca466e0', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '1900e015f593fefd710478a2088e052399c957eb', 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: 'e4dfbb3048eed03a7f7e84c6f75545e0ca9b45fb' }, attrs, { class: "button-native", part: "native", disabled: disabled }), hAsync("span", { key: 'dffcf437fbdc15f2e7a19e60a015e90c73c8377d', class: "button-inner" }, hAsync("slot", { key: '48a23512e0601e062118d8b2c46c8bb96f25509f', name: "top" }), hAsync("div", { key: '952a9a9aa3a476aa1f4408d7e208bf9e916b8c30', class: "horizontal-wrapper" }, hAsync("slot", { key: 'f8d18a61c1ecec4a22a55443cf72bbc51383b64f', name: "start" }), hAsync("slot", { key: '1f9f219e6f879d2e0bf6d80cf0d3f518eb14ce0e', name: "icon-only" }), hAsync("slot", { key: 'a55adcdbe68131e5b1855c2dd45dd9454ab544fb' }), hAsync("slot", { key: '3c4c85a4fbb7efc797d8bc5adf6d238da022ff9f', name: "end" })), hAsync("slot", { key: '503c7e4b306745c523f57f24399ea06ba9b1e21d', name: "bottom" })), mode === 'md' && hAsync("ion-ripple-effect", { key: 'b0e270b0c4f3ff9f9b6d74bad12a9278d7633226' }))));
+            }) }, hAsync(TagType, Object.assign({ key: '5db2bb9bc72b7b00c324e4189cd1b5f862680ebb' }, attrs, { class: "button-native", part: "native", disabled: disabled }), hAsync("span", { key: '6927e812ad001c5e7bd17f440d82c3830c58957b', class: "button-inner" }, hAsync("slot", { key: '0fde4333def94c55d1318868c2bc71e780d5876a', name: "top" }), hAsync("div", { key: '7ecc9ae8ddf66d7ed5d9f30becc9faf820e1c62e', class: "horizontal-wrapper" }, hAsync("slot", { key: 'a15567fd4bd91080e9fbb6bb0c9b0e67d8a67051', name: "start" }), hAsync("slot", { key: '7f86cdd28063e23f9d78997623333c5037c4f364', name: "icon-only" }), hAsync("slot", { key: '4abb69ce3ad6c4917dd87b7b1eb0fa1c69917d73' }), hAsync("slot", { key: '8b35a29f48722040465f182679ac17209937578d', name: "end" })), hAsync("slot", { key: 'fa15a00891b41d66a4ccb51575dec54b72d0059e', name: "bottom" })), mode === 'md' && hAsync("ion-ripple-effect", { key: '0c071910c90fafca8026f59d78f4d9d5224d150a' }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -15811,7 +15820,7 @@ class ItemOptions {
     render() {
         const mode = getIonMode$1(this);
         const isEnd = isEndSide(this.side);
-        return (hAsync(Host, { key: '6d91399d2aaaa81d514d0bbc8dffe53eeec25d36', class: {
+        return (hAsync(Host, { key: 'e28cd6a236323b5cc203c9b96782aa81024da924', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-options-${mode}`]: true,
@@ -16273,7 +16282,7 @@ class ItemSliding {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '47a3edd2ef2080ed9cfc2784277dea09785c7dc4', class: {
+        return (hAsync(Host, { key: '99f87c8bd794ae69830b407ba55013ac44793c26', class: {
                 [mode]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
@@ -16382,13 +16391,13 @@ class Label {
     render() {
         const position = this.position;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '6353a70565ef6fbbbf4042b000e536c61bcf99a9', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'c2c0f388dab910d294efb9fbb409ee4ef829c1ed', 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: '6ef9c2758c0168442aa84941af0a6cec1ef1ec21' })));
+            }) }, hAsync("slot", { key: '4de6b69950f417873a13c851018ec31ea2686f0a' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -16444,7 +16453,7 @@ class List {
     render() {
         const mode = getIonMode$1(this);
         const { lines, inset } = this;
-        return (hAsync(Host, { key: '5ff2b0b3989cc99ce17abb8bcd7ec1847940d1ec', role: "list", class: {
+        return (hAsync(Host, { key: '8bde220025a7eeca6da075379c6487c4c9bdddc1', role: "list", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`list-${mode}`]: true,
@@ -16490,10 +16499,10 @@ class ListHeader {
     render() {
         const { lines } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'fb78bd8601cbd7b90ec84a96e0c8325be1132b1e', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '7e2e050f13722f2b870a2415d99a9e631e9ca267', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, hAsync("div", { key: '2580ad49f3a54973e15f14d645a1e55a6fa066ac', class: "list-header-inner" }, hAsync("slot", { key: '677b2e2ec8eeb3ae6ad329e86c76451cf3ae6c2f' }))));
+            }) }, hAsync("div", { key: '6117bebc45800d874e9b75355476fbced5cc8398', class: "list-header-inner" }, hAsync("slot", { key: '9165fb274cd2c45a5a65c271d8b1f30e8a00c890' }))));
     }
     static get style() { return {
         ios: IonListHeaderIosStyle0,
@@ -16759,9 +16768,9 @@ class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (hAsync(Host, Object.assign({ key: 'f48fc35c38f3c200f39a44f3e741c1676057248e', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '4610b316b10a4df3416d0e83062935f3079baff2', 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: 'e46058f693235c8ce5474df167595f6a80e4559d', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '2ecd77581a2f130616033b8a78fb9da9d508b588', tabindex: "0" }), hAsync("div", { key: '0243f93c41684f30c81623a8fbb533fd8f17b679', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: '0643bc42b6e691580d29af27ea5a9fe395a6c5ce', class: "loading-spinner" }, hAsync("ion-spinner", { key: 'f0417802dfbcad6ab9903b84bad692eedd326c88', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: '3d3a256fe1074bda91cd09212460aa6460c4c723', 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: 'd07d0759ed13093c4c4fe06be442dde4bd9c2c31', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'ed3ec8b48f049b592fbea9767cc3d448dc037938', tabindex: "0" }), hAsync("div", { key: 'c515f3badf149d83c1d67374ef3507415fe51422', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: '265d1673c2deb751aeca285f5a18863bb629ca5e', class: "loading-spinner" }, hAsync("ion-spinner", { key: '155bf7c92f6d7afd8edbb39f2b47ad05b7d503f1', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: 'b0e21df5cf54f9b48a218a03543d8c86f5406522', tabindex: "0" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -17742,14 +17751,14 @@ class Menu {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (hAsync(Host, { key: '68ea0bdf902c1f6369db93d69cacc0f30e1df32b', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (hAsync(Host, { key: '30c0c9bfb8973e4a6feb658f8c4ee8e362f464ed', 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: '7f32097faa4dcf64a568c7cf4b8397bbffc9f7a4', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: '3d4fbc9142297708aa1b31eed875afe6ea79de04' })), hAsync("ion-backdrop", { key: 'f29f4615913da302212d54a43dce94ca5bfa86a5', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, hAsync("div", { key: '34b0e5840906862cf1bc27207e089004b0402c56', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: '2cd7e61a8c0987ca4b3f1f8b33cba7152f1275fe' })), hAsync("ion-backdrop", { key: 'd190b1f9b66c76e276f27bfe074d3aab796180fb', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -17852,7 +17861,7 @@ class MenuButton {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (hAsync(Host, { key: '7ec29715ce7926b7c2b08f3d9cac8aaa16b3dc28', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '95a8b9f09c7fae9713a8dc003ed277f6f31403da', 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,
@@ -17861,7 +17870,7 @@ class MenuButton {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, hAsync("button", Object.assign({ key: 'd4c5929264af3ba0328118bcc27d2ab7ef5d3809' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), hAsync("span", { key: '7bfa6e9a93105486623d044861e879ec79ff64f1', class: "button-inner" }, hAsync("slot", { key: '071ab58e285832fc188706166f5547d45d501ac5' }, hAsync("ion-icon", { key: '918ec5d791921de9821c347af4f65f97dd94aabf', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && hAsync("ion-ripple-effect", { key: '00ffdd53f635e706c1dbd01b8e7944498650fe81', type: "unbounded" }))));
+            }) }, hAsync("button", Object.assign({ key: '39f3ce20c400d2fac4890a042e8e44426709fca5' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), hAsync("span", { key: '310978dc1cdef668de6720cde2a2304253679176', class: "button-inner" }, hAsync("slot", { key: '2a2b9de524c1fc3c526fe9559cb077b976852725' }, hAsync("ion-icon", { key: '9c22d7ea9fc3d76c32ec1c1b4b13d982c60b8c2d', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && hAsync("ion-ripple-effect", { key: 'c58c9e29c763070383472f65a9d322a684bcb564', type: "unbounded" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -17910,10 +17919,10 @@ class MenuToggle {
     render() {
         const mode = getIonMode$1(this);
         const hidden = this.autoHide && !this.visible;
-        return (hAsync(Host, { key: '7c27ea5b0795676bf5cb33e1f83aa142c197f64e', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+        return (hAsync(Host, { key: '90e621f09792383f1badcc1b402b1ac7d08c5f98', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
                 [mode]: true,
                 'menu-toggle-hidden': hidden,
-            } }, hAsync("slot", { key: '69f187becedc0fe34603d41d279f043cf0fdf776' })));
+            } }, hAsync("slot", { key: 'c0abdd1d91e9d80ee3704e3e374ebe1f29078460' })));
     }
     static get style() { return IonMenuToggleStyle0; }
     static get cmpMeta() { return {
@@ -17967,8 +17976,117 @@ const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
 const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
 const LIFECYCLE_WILL_UNLOAD = 'ionViewWillUnload';
 
+/**
+ * Moves focus to a specified element. Note that we do not remove the tabindex
+ * because that can result in an unintentional blur. Non-focusables can't be
+ * focused, so the body will get focused again.
+ */
+const moveFocus = (el) => {
+    el.tabIndex = -1;
+    el.focus();
+};
+/**
+ * Elements that are hidden using `display: none` should not be focused even if
+ * they are present in the DOM.
+ */
+const isVisible = (el) => {
+    return el.offsetParent !== null;
+};
+/**
+ * The focus controller allows us to manage focus within a view so assistive
+ * technologies can inform users of changes to the navigation state. Traditional
+ * native apps have a way of informing assistive technology about a navigation
+ * state change. Mobile browsers have this too, but only when doing a full page
+ * load. In a single page app we do not do that, so we need to build this
+ * integration ourselves.
+ */
+const createFocusController = () => {
+    const saveViewFocus = (referenceEl) => {
+        const focusManagerEnabled = config.get('focusManagerPriority', false);
+        /**
+         * When going back to a previously visited page focus should typically be moved
+         * back to the element that was last focused when the user was on this view.
+         */
+        if (focusManagerEnabled) {
+            const activeEl = document.activeElement;
+            if (activeEl !== null && (referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.contains(activeEl))) {
+                activeEl.setAttribute(LAST_FOCUS, 'true');
+            }
+        }
+    };
+    const setViewFocus = (referenceEl) => {
+        const focusManagerPriorities = config.get('focusManagerPriority', false);
+        /**
+         * If the focused element is a descendant of the referenceEl then it's possible
+         * that the app developer manually moved focus, so we do not want to override that.
+         * This can happen with inputs the are focused when a view transitions in.
+         */
+        if (Array.isArray(focusManagerPriorities) && !referenceEl.contains(document.activeElement)) {
+            /**
+             * When going back to a previously visited view focus should always be moved back
+             * to the element that the user was last focused on when they were on this view.
+             */
+            const lastFocus = referenceEl.querySelector(`[${LAST_FOCUS}]`);
+            if (lastFocus && isVisible(lastFocus)) {
+                moveFocus(lastFocus);
+                return;
+            }
+            for (const priority of focusManagerPriorities) {
+                /**
+                 * For each recognized case (excluding the default case) make sure to return
+                 * so that the fallback focus behavior does not run.
+                 *
+                 * We intentionally query for specific roles/semantic elements so that the
+                 * transition manager can work with both Ionic and non-Ionic UI components.
+                 *
+                 * If new selectors are added, be sure to remove the outline ring by adding
+                 * new selectors to rule in core.scss.
+                 */
+                switch (priority) {
+                    case 'content':
+                        const content = referenceEl.querySelector('main, [role="main"]');
+                        if (content && isVisible(content)) {
+                            moveFocus(content);
+                            return;
+                        }
+                        break;
+                    case 'heading':
+                        const headingOne = referenceEl.querySelector('h1, [role="heading"][aria-level="1"]');
+                        if (headingOne && isVisible(headingOne)) {
+                            moveFocus(headingOne);
+                            return;
+                        }
+                        break;
+                    case 'banner':
+                        const header = referenceEl.querySelector('header, [role="banner"]');
+                        if (header && isVisible(header)) {
+                            moveFocus(header);
+                            return;
+                        }
+                        break;
+                    default:
+                        printIonWarning(`Unrecognized focus manager priority value ${priority}`);
+                        break;
+                }
+            }
+            /**
+             * If there is nothing to focus then focus the page so focus at least moves to
+             * the correct view. The browser will then determine where within the page to
+             * move focus to.
+             */
+            moveFocus(referenceEl);
+        }
+    };
+    return {
+        saveViewFocus,
+        setViewFocus,
+    };
+};
+const LAST_FOCUS = 'ion-last-focus';
+
 const iosTransitionAnimation$1 = () => Promise.resolve().then(function () { return ios_transition; });
 const mdTransitionAnimation$1 = () => Promise.resolve().then(function () { return md_transition; });
+const focusController = createFocusController();
 // TODO(FW-2832): types
 const transition = (opts) => {
     return new Promise((resolve, reject) => {
@@ -17990,6 +18108,7 @@ const transition = (opts) => {
 const beforeTransition = (opts) => {
     const enteringEl = opts.enteringEl;
     const leavingEl = opts.leavingEl;
+    focusController.saveViewFocus(leavingEl);
     setZIndex(enteringEl, leavingEl, opts.direction);
     if (opts.showGoBack) {
         enteringEl.classList.add('can-go-back');
@@ -18024,6 +18143,7 @@ const afterTransition = (opts) => {
         leavingEl.classList.remove('ion-page-invisible');
         leavingEl.style.removeProperty('pointer-events');
     }
+    focusController.setViewFocus(enteringEl);
 };
 const getAnimationBuilder = async (opts) => {
     if (!opts.leavingEl || !opts.animated || opts.duration === 0) {
@@ -18056,7 +18176,12 @@ const animation = async (animationBuilder, opts) => {
 const noAnimation = async (opts) => {
     const enteringEl = opts.enteringEl;
     const leavingEl = opts.leavingEl;
-    await waitForReady(opts, false);
+    const focusManagerEnabled = config.get('focusManagerPriority', false);
+    /**
+     * If the focus manager is enabled then we need to wait for Ionic components to be
+     * rendered otherwise the component to focus may not be focused because it is hidden.
+     */
+    await waitForReady(opts, focusManagerEnabled);
     fireWillEvents(enteringEl, leavingEl);
     fireDidEvents(enteringEl, leavingEl);
     return {
@@ -18949,7 +19074,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
          * as inputs should not be focusable outside
          * the sheet.
          */
-        baseEl.classList.remove('ion-disable-focus-trap');
+        baseEl.classList.remove(FOCUS_TRAP_DISABLE_CLASS);
     };
     const disableBackdrop = () => {
         baseEl.style.setProperty('pointer-events', 'none');
@@ -18961,7 +19086,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
          * Adding this class disables focus trapping
          * for the sheet temporarily.
          */
-        baseEl.classList.add('ion-disable-focus-trap');
+        baseEl.classList.add(FOCUS_TRAP_DISABLE_CLASS);
     };
     /**
      * After the entering animation completes,
@@ -19336,6 +19461,7 @@ class Modal {
         this.isOpen = false;
         this.trigger = undefined;
         this.keepContentsMounted = false;
+        this.focusTrap = true;
         this.canDismiss = true;
     }
     onIsOpenChange(newValue, oldValue) {
@@ -19792,23 +19918,23 @@ class Modal {
         return true;
     }
     render() {
-        const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes } = this;
+        const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap } = this;
         const showHandle = handle !== false && isSheetModal;
         const mode = getIonMode$1(this);
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        return (hAsync(Host, Object.assign({ key: 'bb00efb8cbbdb2d1bbcc5e9c638586e2904882a8', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'fe6fd17cf857127f89d652b9aa3e9473d28c55db', "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: 'd2d50f736fdc34b933c00309fe0b67e4aff7ee63', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: '5d3523a04da9350ae435a4f3247198095b71f206', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '09b3c4b629155f8c32f5c896cf689ffbe7004de8',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), hAsync("ion-backdrop", { key: '0f3a31363c2717e5483bc0412c25804897d4aff8', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: '0e5ed59162ff08fe0a9f757e06bdacc75f65c0ed', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '35cdbe2238765e5f346ad7be64f7eefa8c78f0c0',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: 'e47d90068927f3a518e4144e17f18ac326126712', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '7a4031eaebf9a098f4c4220a5fe9d1c25cc0ec92', 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: '5733e94b3ecc4ed9bfb6aec5cd254cd0e43ee8f7' }))));
+            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: '534adc8e5bd850199fe2e9e16f0e7c19217d8486' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -19845,6 +19971,7 @@ class Modal {
             "isOpen": [4, "is-open"],
             "trigger": [1],
             "keepContentsMounted": [4, "keep-contents-mounted"],
+            "focusTrap": [4, "focus-trap"],
             "canDismiss": [4, "can-dismiss"],
             "presented": [32],
             "present": [64],
@@ -20756,7 +20883,7 @@ class Nav {
         }
     }
     render() {
-        return hAsync("slot", { key: 'dfe98cb6604a2015a49f41beffebdd2da957dfff' });
+        return hAsync("slot", { key: 'e9d99a8a0b84f02f9964d8143cd5e647e43334f9' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -20829,7 +20956,7 @@ class NavLink {
         this.routerAnimation = undefined;
     }
     render() {
-        return hAsync(Host, { key: 'd2f8545b4fbd5aa25ef36eb01dffbc5d35ccfbb9', onClick: this.onClick });
+        return hAsync(Host, { key: '42c23dcdec5fdb25defebaf6e8a9fa75754ff8eb', onClick: this.onClick });
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -20863,9 +20990,9 @@ class Note {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '10a3495bc21166176986441479f8f7539029d161', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '90ec2fe8c9487608ed8c0bdc32c2e80a6a0890b3', class: createColorClasses$1(this.color, {
                 [mode]: true,
-            }) }, hAsync("slot", { key: 'b6a9459e1b85f608fafd060a4bfeb11637ebe873' })));
+            }) }, hAsync("slot", { key: '115ee3f79e6c526b0644443aad468e99385d0eda' })));
     }
     static get style() { return {
         ios: IonNoteIosStyle0,
@@ -21362,7 +21489,7 @@ class Picker$1 {
         this.emitInputModeChange();
     }
     render() {
-        return (hAsync(Host, { key: 'f92214a09dc85b65873676f40fde2b802960e704', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, hAsync("input", { key: '6da37f75aca4ea1c9cb3bc733ebda2116279f313', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
+        return (hAsync(Host, { key: '02b0687b1f80ba295a965dfba76dd59e2d1de5d3', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, hAsync("input", { key: 'f83ed84bcf9e02539c00d8a4e63e6a0d7fc4ac71', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
                 var _a;
                 /**
                  * The "Enter" key represents
@@ -21377,7 +21504,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: '298e99d83dd3f5bf2798150bab0bb4024af472fa', class: "picker-before" }), hAsync("div", { key: 'ea578f04eb562a4dc6d6cc92de133dcb9fb7f42a', class: "picker-after" }), hAsync("div", { key: '84567824956dfe967992a629904836ba8b75b3ec', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), hAsync("slot", { key: 'df81f8fb90e1f649b608328034528f5c31c70c3b' })));
+            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), hAsync("div", { key: '45b07fb0617d8e006712776bf78302288edb3ff4', class: "picker-before" }), hAsync("div", { key: '73009229368e0d62b09c913aacade26f068a7aa9', class: "picker-after" }), hAsync("div", { key: 'b73da00e446cd1cfd511c39212e14a00d355752e', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), hAsync("slot", { key: 'd969f5efc5ddb9eda6c4828702efd1ceeb69f767' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -21627,11 +21754,11 @@ class Picker {
     render() {
         const { htmlAttributes } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, Object.assign({ key: 'cb1495acc8842c00e9f51ae792a01f769e36b0c6', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '26e3144adcdf01605271d01e468bb4a75ce854b1', "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: 'eecbcdfd474f5ab2f9962a030b1dcbf7714fe938', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '262e1d3bc916b30068f7be1edbc73283a815fc0f', tabindex: "0" }), hAsync("div", { key: 'a036cf789ab768428aae26a19dbd0c5cb696188c', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { key: '6be7a8986976ead39611ce398ed6ad71f3b7427e', 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: '66a1d99aebf48219cab4177d06d893fe1d458a1f', class: "picker-columns" }, hAsync("div", { key: 'ed7fd940c5f54453587e13ab52cbfd4122a397c6', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-legacy-column", { col: c })), hAsync("div", { key: '21c491c08bce126dde03196b21e28d903e157e1f', class: "picker-below-highlight" }))), hAsync("div", { key: 'bd892f74b886ae1bfd010d687a2b9741213b246c', tabindex: "0" })));
+                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { key: 'fa212d21406606186cd95f8c7a4f119696ac8d4a', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '19ea889f65cb6a68a9db26cf9f83c6587cfcf07e', tabindex: "0" }), hAsync("div", { key: '5fc0f5d26915ba353b9f0335946f94b6fda95e1e', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { key: '3fa5bff4ac0013ef31845482a27a14caebbdcd2f', 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: '2ff6376956d01dcd9ec01b8d6972dd4b37ffb1a1', class: "picker-columns" }, hAsync("div", { key: '4adcef77429f10a3faa50b41d1eaf3404387997c', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-legacy-column", { col: c })), hAsync("div", { key: 'e0f37d3e9896eb2bc0f0aef4762a897130851963', class: "picker-below-highlight" }))), hAsync("div", { key: '671bb7d0f487b0d7c7fa70388f8fa1de77448b9f', tabindex: "0" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -21684,7 +21811,7 @@ const buttonClass$1 = (button) => {
     return Object.assign({ 'picker-button': true, 'ion-activatable': true }, getClassMap(button.cssClass));
 };
 
-const pickerColumnCss = "/*!@:host*/.sc-ion-picker-column-h{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;max-width:100%;height:200px;font-size:22px;text-align:center}/*!@.picker-opts*/.picker-opts.sc-ion-picker-column{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-width:26px;max-height:200px;outline:none;text-align:inherit;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none}/*!@.picker-item-empty*/.picker-item-empty.sc-ion-picker-column{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@.picker-opts::-webkit-scrollbar*/.picker-opts.sc-ion-picker-column::-webkit-scrollbar{display:none}/*!@::slotted(ion-picker-column-option)*/.sc-ion-picker-column-s>ion-picker-column-option{display:block;scroll-snap-align:center}/*!@.picker-item-empty,\n:host(:not([disabled])) ::slotted(ion-picker-column-option.option-disabled)*/.picker-item-empty.sc-ion-picker-column,.sc-ion-picker-column-h:not([disabled]).sc-ion-picker-column-s>ion-picker-column-option.option-disabled,.sc-ion-picker-column-h:not([disabled]) .sc-ion-picker-column-s>ion-picker-column-option.option-disabled{scroll-snap-align:none}/*!@::slotted([slot=prefix]), ::slotted([slot=suffix])*/.sc-ion-picker-column-s>[slot=prefix],.sc-ion-picker-column-s>[slot=suffix]{max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@::slotted([slot=prefix])*/.sc-ion-picker-column-s>[slot=prefix]{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:end;justify-content:end}/*!@::slotted([slot=suffix])*/.sc-ion-picker-column-s>[slot=suffix]{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:start;justify-content:start}/*!@:host(.picker-column-disabled) .picker-opts*/.picker-column-disabled.sc-ion-picker-column-h .picker-opts.sc-ion-picker-column{overflow-y:hidden}/*!@:host(.picker-column-disabled) ::slotted(ion-picker-column-option)*/.sc-ion-picker-column-h.picker-column-disabled .sc-ion-picker-column-s>ion-picker-column-option{cursor:default;opacity:0.4;pointer-events:none}@media (any-hover: hover){/*!@:host(:focus) .picker-opts*/.sc-ion-picker-column-h:focus .picker-opts.sc-ion-picker-column{outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}";
+const pickerColumnCss = "/*!@:host*/.sc-ion-picker-column-h{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;max-width:100%;height:200px;font-size:22px;text-align:center}/*!@.assistive-focusable*/.assistive-focusable.sc-ion-picker-column{left:0;right:0;top:0;bottom:0;position:absolute;z-index:1;pointer-events:none}/*!@.assistive-focusable:focus*/.assistive-focusable.sc-ion-picker-column:focus{outline:none}/*!@.picker-opts*/.picker-opts.sc-ion-picker-column{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0px;padding-bottom:0px;min-width:26px;max-height:200px;outline:none;text-align:inherit;-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory;overflow-x:hidden;overflow-y:scroll;scrollbar-width:none}/*!@.picker-item-empty*/.picker-item-empty.sc-ion-picker-column{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@.picker-opts::-webkit-scrollbar*/.picker-opts.sc-ion-picker-column::-webkit-scrollbar{display:none}/*!@::slotted(ion-picker-column-option)*/.sc-ion-picker-column-s>ion-picker-column-option{display:block;scroll-snap-align:center}/*!@.picker-item-empty,\n:host(:not([disabled])) ::slotted(ion-picker-column-option.option-disabled)*/.picker-item-empty.sc-ion-picker-column,.sc-ion-picker-column-h:not([disabled]).sc-ion-picker-column-s>ion-picker-column-option.option-disabled,.sc-ion-picker-column-h:not([disabled]) .sc-ion-picker-column-s>ion-picker-column-option.option-disabled{scroll-snap-align:none}/*!@::slotted([slot=prefix]), ::slotted([slot=suffix])*/.sc-ion-picker-column-s>[slot=prefix],.sc-ion-picker-column-s>[slot=suffix]{max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}/*!@::slotted([slot=prefix])*/.sc-ion-picker-column-s>[slot=prefix]{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:end;justify-content:end}/*!@::slotted([slot=suffix])*/.sc-ion-picker-column-s>[slot=suffix]{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:0;padding-bottom:0;-ms-flex-pack:start;justify-content:start}/*!@:host(.picker-column-disabled) .picker-opts*/.picker-column-disabled.sc-ion-picker-column-h .picker-opts.sc-ion-picker-column{overflow-y:hidden}/*!@:host(.picker-column-disabled) ::slotted(ion-picker-column-option)*/.sc-ion-picker-column-h.picker-column-disabled .sc-ion-picker-column-s>ion-picker-column-option{cursor:default;opacity:0.4;pointer-events:none}@media (any-hover: hover){/*!@:host(:focus) .picker-opts*/.sc-ion-picker-column-h:focus .picker-opts.sc-ion-picker-column{outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}";
 var IonPickerColumnStyle0 = pickerColumnCss;
 
 /**
@@ -21700,6 +21827,7 @@ class PickerColumn {
         this.isScrolling = false;
         this.isColumnVisible = false;
         this.canExitInputMode = true;
+        this.updateValueTextOnScroll = false;
         this.centerPickerItemInView = (target, smooth = true, canExitInputMode = true) => {
             const { isColumnVisible, scrollEl } = this;
             if (isColumnVisible && scrollEl) {
@@ -21714,6 +21842,7 @@ class PickerColumn {
                      * of these can cause a scroll to occur.
                      */
                     this.canExitInputMode = canExitInputMode;
+                    this.updateValueTextOnScroll = false;
                     scrollEl.scroll({
                         top,
                         left: 0,
@@ -21786,6 +21915,7 @@ class PickerColumn {
             let activeEl = this.activeItem;
             const scrollCallback = () => {
                 raf(() => {
+                    var _a;
                     if (!scrollEl)
                         return;
                     if (timeout) {
@@ -21866,8 +21996,23 @@ class PickerColumn {
                     }
                     activeEl = newActiveElement;
                     this.setPickerItemActiveState(newActiveElement, true);
+                    /**
+                     * Set the aria-valuetext even though the value prop has not been updated yet.
+                     * This enables some screen readers to announce the value as the users drag
+                     * as opposed to when their release their pointer from the screen.
+                     *
+                     * When the value is programmatically updated, we will smoothly scroll
+                     * to the new option. However, we do not want to update aria-valuetext mid-scroll
+                     * as that can cause the old value to be briefly set before being set to the
+                     * correct option. This will cause some screen readers to announce the old value
+                     * again before announcing the new value. The correct valuetext will be set on render.
+                     */
+                    if (this.updateValueTextOnScroll) {
+                        (_a = this.assistiveFocusable) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-valuetext', this.getOptionValueText(newActiveElement));
+                    }
                     timeout = setTimeout(() => {
                         this.isScrolling = false;
+                        this.updateValueTextOnScroll = true;
                         enableHaptics && hapticSelectionEnd();
                         /**
                          * Certain tasks (such as those that
@@ -21926,12 +22071,139 @@ class PickerColumn {
              */
             this.el.classList.remove('picker-column-active');
         };
+        /**
+         * Find the next enabled option after the active option.
+         * @param stride - How many options to "jump" over in order to select the next option.
+         * This can be used to implement PageUp/PageDown behaviors where pressing these keys
+         * scrolls the picker by more than 1 option. For example, a stride of 5 means select
+         * the enabled option 5 options after the active one. Note that the actual option selected
+         * may be past the stride if the option at the stride is disabled.
+         */
+        this.findNextOption = (stride = 1) => {
+            const { activeItem } = this;
+            if (!activeItem)
+                return null;
+            let prevNode = activeItem;
+            let node = activeItem.nextElementSibling;
+            while (node != null) {
+                if (stride > 0) {
+                    stride--;
+                }
+                if (node.tagName === 'ION-PICKER-COLUMN-OPTION' && !node.disabled && stride === 0) {
+                    return node;
+                }
+                prevNode = node;
+                // Use nextElementSibling instead of nextSibling to avoid text/comment nodes
+                node = node.nextElementSibling;
+            }
+            return prevNode;
+        };
+        /**
+         * Find the next enabled option after the active option.
+         * @param stride - How many options to "jump" over in order to select the next option.
+         * This can be used to implement PageUp/PageDown behaviors where pressing these keys
+         * scrolls the picker by more than 1 option. For example, a stride of 5 means select
+         * the enabled option 5 options before the active one. Note that the actual option selected
+         *  may be past the stride if the option at the stride is disabled.
+         */
+        this.findPreviousOption = (stride = 1) => {
+            const { activeItem } = this;
+            if (!activeItem)
+                return null;
+            let nextNode = activeItem;
+            let node = activeItem.previousElementSibling;
+            while (node != null) {
+                if (stride > 0) {
+                    stride--;
+                }
+                if (node.tagName === 'ION-PICKER-COLUMN-OPTION' && !node.disabled && stride === 0) {
+                    return node;
+                }
+                nextNode = node;
+                // Use previousElementSibling instead of previousSibling to avoid text/comment nodes
+                node = node.previousElementSibling;
+            }
+            return nextNode;
+        };
+        this.onKeyDown = (ev) => {
+            /**
+             * The below operations should be inverted when running on a mobile device.
+             * For example, swiping up will dispatch an "ArrowUp" event. On desktop,
+             * this should cause the previous option to be selected. On mobile, swiping
+             * up causes a view to scroll down. As a result, swiping up on mobile should
+             * cause the next option to be selected. The Home/End operations remain
+             * unchanged because those always represent the first/last options, respectively.
+             */
+            const mobile = isPlatform('mobile');
+            let newOption = null;
+            switch (ev.key) {
+                case 'ArrowDown':
+                    newOption = mobile ? this.findPreviousOption() : this.findNextOption();
+                    break;
+                case 'ArrowUp':
+                    newOption = mobile ? this.findNextOption() : this.findPreviousOption();
+                    break;
+                case 'PageUp':
+                    newOption = mobile ? this.findNextOption(5) : this.findPreviousOption(5);
+                    break;
+                case 'PageDown':
+                    newOption = mobile ? this.findPreviousOption(5) : this.findNextOption(5);
+                    break;
+                case 'Home':
+                    /**
+                     * There is no guarantee that the first child will be an ion-picker-column-option,
+                     * so we do not use firstElementChild.
+                     */
+                    newOption = this.el.querySelector('ion-picker-column-option:first-of-type');
+                    break;
+                case 'End':
+                    /**
+                     * There is no guarantee that the last child will be an ion-picker-column-option,
+                     * so we do not use lastElementChild.
+                     */
+                    newOption = this.el.querySelector('ion-picker-column-option:last-of-type');
+                    break;
+            }
+            if (newOption !== null) {
+                this.value = newOption.value;
+                // This stops any default browser behavior such as scrolling
+                ev.preventDefault();
+            }
+        };
+        /**
+         * Utility to generate the correct text for aria-valuetext.
+         */
+        this.getOptionValueText = (el) => {
+            var _a;
+            return el ? (_a = el.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : el.innerText : '';
+        };
+        /**
+         * Render an element that overlays the column. This element is for assistive
+         * tech to allow users to navigate the column up/down. This element should receive
+         * focus as it listens for synthesized keyboard events as required by the
+         * slider role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role
+         */
+        this.renderAssistiveFocusable = () => {
+            const { activeItem } = this;
+            const valueText = this.getOptionValueText(activeItem);
+            /**
+             * When using the picker, the valuetext provides important context that valuenow
+             * does not. Additionally, using non-zero valuemin/valuemax values can cause
+             * WebKit to incorrectly announce numeric valuetext values (such as a year
+             * like "2024") as percentages: https://bugs.webkit.org/show_bug.cgi?id=273126
+             */
+            return (hAsync("div", { ref: (el) => (this.assistiveFocusable = el), class: "assistive-focusable", role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": valueText, "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }));
+        };
+        this.ariaLabel = null;
         this.isActive = false;
         this.disabled = false;
         this.value = undefined;
         this.color = 'primary';
         this.numericInput = false;
     }
+    ariaLabelChanged(newValue) {
+        this.ariaLabel = newValue;
+    }
     valueChange() {
         if (this.isColumnVisible) {
             /**
@@ -22047,6 +22319,10 @@ class PickerColumn {
             this.scrollEl.focus();
         }
     }
+    connectedCallback() {
+        var _a;
+        this.ariaLabel = (_a = this.el.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : 'Select a value';
+    }
     get activeItem() {
         const { value } = this;
         const options = Array.from(this.el.querySelectorAll('ion-picker-column-option'));
@@ -22064,17 +22340,18 @@ class PickerColumn {
     render() {
         const { color, disabled, isActive, numericInput } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '54d3ea9f92136ac446a6c0a2b1389d93c5ff31ee', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'ced35afc6326a20dbac68193921a807a9c10bb99', class: createColorClasses$1(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, hAsync("slot", { key: '969279123f09d37a28aa726936c9f484b0de33e4', name: "prefix" }), hAsync("div", { key: 'd4d09a561213c408cf1c42a28cdef37f14367724', class: "picker-opts", tabindex: disabled ? undefined : 0, ref: (el) => {
+            }) }, this.renderAssistiveFocusable(), hAsync("slot", { key: '41e290dcc44dacb4237eb674ce2dedc7db66eb7d', name: "prefix" }), hAsync("div", { key: '1fd869b063900103deadefc40929a1e8f02ec084', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
                 this.scrollEl = el;
-            } }, hAsync("div", { key: '3710d8980682c819be33eeb6611a5c707b0e6a29', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '65b7d8d523db669a2df107ae7aaacf62daf13232', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '694657e475edcdbc93561e826e0db016738f119d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("slot", { key: 'ecbbd8db6ffdd8d8506a16d94f001d434f4daf97' }), hAsync("div", { key: 'e19a7f7e5e4aeb7d52339e962314d68c31c6337b', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '103e6a5863efc526de3ea35c63230cc37e487594', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'c9e2313ae630ec0b39cbc92d5261fc194dc22a5f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), hAsync("slot", { key: '1537926d9ed8d4251ded95dcb249197491fc2616', name: "suffix" })));
+            } }, hAsync("div", { key: '0d2087f775b240c9b2534650eb27f3d99e7690a9', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '1245b2bb2b6314c3ec4e0ab3ece4e42beb360fc9', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '503b08f6bbe27fa7d34c165a93ec38ce7f1ad590', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("slot", { key: 'ec401a2b2d56546fb3f10239b71320ce7dc6a77d' }), hAsync("div", { key: '97a234018291c5a6ca7a56bb1a9a417cac0b3e6f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '0197711f71486a8fa3c184b593cebe1c1e54c585', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '961304f0a2a10afb3502ce4c5fbdceef0aa933cf', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), hAsync("slot", { key: 'f38b83d26c3c2ba8ef00da7caf7f0be518b2007d', name: "suffix" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "aria-label": ["ariaLabelChanged"],
         "value": ["valueChange"]
     }; }
     static get style() { return IonPickerColumnStyle0; }
@@ -22086,6 +22363,7 @@ class PickerColumn {
             "value": [1032],
             "color": [513],
             "numericInput": [4, "numeric-input"],
+            "ariaLabel": [32],
             "isActive": [32],
             "scrollActiveItemIntoView": [64],
             "setValue": [64],
@@ -22436,9 +22714,9 @@ class PickerColumnCmp {
     render() {
         const col = this.col;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'c015eb8bc01b3287cbd1d71af0aa311b6be89d36', 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: '56289a294e5c580f3e7fe5fc12777aa7f80ad19b', 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", { key: 'f9de3fe2f5c7ad3256d6e5f44b6d03a2b1f96ffb', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), hAsync("div", { key: '10f9c12aa174f96c7cf9adc30efbb26695c0aa64', 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", { key: '1d9c0892ce56e0da9044c79eb953827166f5190b', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (hAsync("div", { key: 'd21f44667b5df567d6879723fe643ea7c2c60bef', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), hAsync("div", { key: 'bb427e5f24fd832703926e0e847ad05567597262', 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", { key: '0413f7c074b6534b8967387ecb9957a79a267aff', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -22542,10 +22820,10 @@ class PickerColumnOption {
     render() {
         const { color, disabled, ariaLabel } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'c743c6ef44bb9f765cc15b3b5d2864de6520203a', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'cc4435a0ce0e55be1321bcabaf342ed68cf5ba1e', class: createColorClasses$1(color, {
                 [mode]: true,
                 ['option-disabled']: disabled,
-            }) }, hAsync("button", { key: '4c3d9eb245c52b2c007f727e145cfb55759bd7a9', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, hAsync("slot", { key: '4c907d2187cbe9d5941e27f2b12578e2b7271461' }))));
+            }) }, hAsync("button", { key: '0187fb967771e0787807a8538dce4e59f6a98565', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, hAsync("slot", { key: 'dbe52552f3f27332816748c12d929cc81060841d' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -23628,6 +23906,7 @@ class Popover {
         this.arrow = true;
         this.isOpen = false;
         this.keyboardEvents = false;
+        this.focusTrap = true;
         this.keepContentsMounted = false;
     }
     onTriggerChange() {
@@ -23854,12 +24133,12 @@ class Popover {
     }
     render() {
         const mode = getIonMode$1(this);
-        const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes } = this;
+        const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (hAsync(Host, Object.assign({ key: '4bccccf57df72e1196c6a28e803831c0520aef53', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '17e5e8b3e7ba5e251665fb9d0ade10c781f82f0e', "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", { key: 'e42f4f61150b7b41093d37d187d1b7bb4187a00e', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: '386ac3247b0f82566aae07b6dbf5e97d243ce367', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '28f0e5ea2fa099b808ffb77a9a0d78b8b46c1513', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '7ba2e3dee529015c4e07ce78ec10dc59985ec6a2', class: "popover-content", part: "content" }, hAsync("slot", { key: '915cdc8e389fda210f83aec8b7bbbfa6f830a884' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { key: 'c12fb94b375d7e88a0c5d715440c0f66ad7ee817', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: '478b388cc9a5a382003a2863e968e77a174914ab', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: 'f1c63a0079f197a8d4577e7c00a654871fb9d816', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '08b62a321c09ad4b0f90460468ecbc1d56320bf1', class: "popover-content", part: "content" }, hAsync("slot", { key: '55645ff597f64d434219caa28015cf2a4ceb0ee5' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -23900,6 +24179,7 @@ class Popover {
             "arrow": [4],
             "isOpen": [4, "is-open"],
             "keyboardEvents": [4, "keyboard-events"],
+            "focusTrap": [4, "focus-trap"],
             "keepContentsMounted": [4, "keep-contents-mounted"],
             "presented": [32],
             "presentFromTrigger": [64],
@@ -23950,7 +24230,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: '8d8ddf0b26fe33803d3a6168cbedd523d1a888e7', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'b293f4475bcdaa7851b41ebfda659037f0365120', 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,
@@ -24107,7 +24387,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: 'cb00934d052260e97462e97a1669045cbb0b963a', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'e44cade8aa8415bdc825f9d17fc8562487cf5d35', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -24118,10 +24398,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: '05613f89400469692442bf3c02c27f9299c5d6ef', class: "radio-wrapper" }, hAsync("div", { key: '89b5d7668c3856f417c318629086cf46a072efbe', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, hAsync("label", { key: '48a99aa80a7d7b4085ef26faf3167903c975517c', class: "radio-wrapper" }, hAsync("div", { key: 'a8d74e0603b41215ea3e867356a9be0dcf3722d8', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, hAsync("slot", { key: 'd5e43a8d0fe5a7fc323887d310fd64d6f87deef7' })), hAsync("div", { key: '7fd221189adcfccca1ed18dcd0a60cde6261120b', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, hAsync("slot", { key: '9e3cce6254e70b02d50381537438a70435b031cc' })), hAsync("div", { key: 'bfa3ee188d911e056a3e60178eac41362efb94b3', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -24306,7 +24586,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: '672d1df4a5d2fd22415e8772b054313907aba8f6', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
+        return hAsync(Host, { key: '7a8ad7eb6a05c6f96a348dcf30fd0c610a95688c', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -24935,7 +25215,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: 'f66f03965290003b8a2b74b6f16ebf5615291688', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '7ad5ca892fd46c64ce5583e91e6812410a869921', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -24944,10 +25224,10 @@ class Range {
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
-            }) }, hAsync("label", { key: '4b0035999693e241afb753f4c335ec386a2f5a2b', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: 'f03119f14a4c6bb2f6c529e885002df633cd1797', class: {
+            }) }, hAsync("label", { key: 'eb8d46a9572341b4cc3c91d8a5de0667bd166ca4', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: '21acd6ff6eba17bf6923bf723fea055b95fd29ca', 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: '72678b1d17ac2a6dfeee26d40a6a80bcc0e7e2fe', class: "native-wrapper" }, hAsync("slot", { key: 'c555ac9598427b81fddd5415ea673479c2247977', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: 'bf58ccc934a246b303c766d16df5eeb62c225b12', name: "end" })))));
+            }, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { key: '7644c86a6ad3edf2c27f02dd2a14795b3720ea0d', class: "native-wrapper" }, hAsync("slot", { key: '1bbeccee57addc126b36de395e28ba655248695b', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: '2963dd84e4116fc3956c304eb53deefd0d1291df', name: "end" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -25821,7 +26101,7 @@ class Refresher {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'e7f4f2f96de7e80430bf54967ebc12e7216b2ca9', slot: "fixed", class: {
+        return (hAsync(Host, { key: '1696f66f62d18c9075294f17cb24263325fcf35d', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,
@@ -26049,7 +26329,7 @@ class RefresherContent {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '19633bbcf02e3dba885d6bdcdaf2269bf4c8e2f5', class: mode }, hAsync("div", { key: '28922e434a55a6cac0476fe2bee56941ce0d1c02', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (hAsync("div", { key: 'fe575bf996021884677e9b23a3215d63caf894f5', class: "refresher-pulling-icon" }, hAsync("div", { key: '59fe12297fd95bc33b8df8cd35316e2a1c084d91', class: "spinner-arrow-container" }, hAsync("ion-spinner", { key: 'af9cc013ae04945c140b2865610ca73edb52ab48', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (hAsync("div", { key: '34df66ad1b0f706a0532957251aa2c20bf4587d8', class: "arrow-container" }, hAsync("ion-icon", { key: 'ffdb5c123e606b823491c6c51cc2b497f62581bb', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (hAsync("div", { key: 'ac3a2032bb969264d20fa057e9123441005d7a9d', class: "refresher-pulling-icon" }, hAsync("ion-icon", { key: 'd969d10915548e72aae289b52154366f3dd39b31', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), hAsync("div", { key: 'a8f854f81a94812d7bef8ce088331d94f49ff53d', class: "refresher-refreshing" }, this.refreshingSpinner && (hAsync("div", { key: 'a1f646945370e40c844d62bc0c647443ae9dfbe7', class: "refresher-refreshing-icon" }, hAsync("ion-spinner", { key: 'ab3ff4047769b6436e222b46d193c1e8b23e2fce', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        return (hAsync(Host, { key: '1bec5b4da221c69d856f3f5ddf40f2e03ebf2a4c', class: mode }, hAsync("div", { key: '4fcc526c4f1881e9368d9cd16bd7030919bd3841', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (hAsync("div", { key: 'a4e9e2e12c2d7faefc8303ec8c021f999ddf308e', class: "refresher-pulling-icon" }, hAsync("div", { key: '5a2d215feb7fb4b64d540d3a65c0f24b415a2433', class: "spinner-arrow-container" }, hAsync("ion-spinner", { key: 'abef2621d671ac6ff0abac43a702cbd825b7f127', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (hAsync("div", { key: '30087d672c3780672a05874cd93cd099b2855462', class: "arrow-container" }, hAsync("ion-icon", { key: '5e30333dee469aec0d8efc8c4e6dabb619c6f363', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (hAsync("div", { key: '48fe72b5ce8ded633c6ee799cebb520b9c8be528', class: "refresher-pulling-icon" }, hAsync("ion-icon", { key: 'd8dfd5d42056b1c0a436c5006affb255407816c0', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), hAsync("div", { key: 'c2cbfb94f157c82601ffe7bb815ff82ebc7c0a49', class: "refresher-refreshing" }, this.refreshingSpinner && (hAsync("div", { key: '17f3ebe6a31768d5e389f45a2c12f68600185db9', class: "refresher-refreshing-icon" }, hAsync("ion-spinner", { key: 'e8e61f8d7189c9939bba184201c9509d1d5b0fad', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -26092,7 +26372,7 @@ class Reorder {
     render() {
         const mode = getIonMode$1(this);
         const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
-        return (hAsync(Host, { key: '27266e30bcb7e10c57fb6d546399cfb1f1c93b23', class: mode }, hAsync("slot", { key: '8745cb9a31458e884c27eed1fb90d104fe9a79eb' }, hAsync("ion-icon", { key: '6c4b9631a2f5610f1e21b2db025b6702d0d593bf', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        return (hAsync(Host, { key: '663d74e231e3af56b6298ee2539fdac9c8465839', class: mode }, hAsync("slot", { key: 'c7c384ab8c9ca8abdc89cd984a39dfde70e342ca' }, hAsync("ion-icon", { key: 'c8b6052db03d4b9e33a90e600c20861c73ee73ce', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -26346,7 +26626,7 @@ class ReorderGroup {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'a38c7fbceb677201330a602273d5b55abb32da19', class: {
+        return (hAsync(Host, { key: '491f3e5843cf728ff4589e58bd86b8ce6709b293', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
@@ -26454,7 +26734,7 @@ class RippleEffect {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '7ae559bda5d2c1856a45bfa150c2cb4f83373f8e', role: "presentation", class: {
+        return (hAsync(Host, { key: '2302f087ab1c6755355736e4ca77309c5fdcf185', role: "presentation", class: {
                 [mode]: true,
                 unbounded: this.unbounded,
             } }));
@@ -27396,10 +27676,10 @@ class RouterLink {
             rel: this.rel,
             target: this.target,
         };
-        return (hAsync(Host, { key: '529ceed5beaf92d7b4cc315c82f449eac18310e8', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'f876442cab5b14b7e83c6d6ad2c2d878a9c57439', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, hAsync("a", Object.assign({ key: 'd5f1f8b256695d70bdafd20ff3d1b625963fa2da' }, attrs), hAsync("slot", { key: '613fcdb36a71e076f989551ea21f1d5c118b1cd2' }))));
+            }) }, hAsync("a", Object.assign({ key: 'c44b78ec1fd10a40c23bfe548860ac2b346646a8' }, attrs), hAsync("slot", { key: 'd32180a567613f79f89885135bd0d776ffc1eb8e' }))));
     }
     static get style() { return IonRouterLinkStyle0; }
     static get cmpMeta() { return {
@@ -27594,7 +27874,7 @@ class RouterOutlet {
         return true;
     }
     render() {
-        return hAsync("slot", { key: 'a70341f58d19df55de1dad00e3464388e446aa2a' });
+        return hAsync("slot", { key: '8279a453c66a766e6e383ff59842b4ae070c13a9' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -27628,7 +27908,7 @@ class Row {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: 'aea072a5005e3f1f309f0d1ae5be5ee19869b035', class: getIonMode$1(this) }, hAsync("slot", { key: '2a481c2126ac6ca65f0a1bbd07c2d3365409cb78' })));
+        return (hAsync(Host, { key: '813c9a7f6782d2cf8eb27f30d3ab28e6f3122868', class: getIonMode$1(this) }, hAsync("slot", { key: '356bec4d4d408ea63d6b431b06465d5b7bcbff71' })));
     }
     static get style() { return IonRowStyle0; }
     static get cmpMeta() { return {
@@ -28022,8 +28302,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: '2e53057ad0dcb8ea930fe4a4a03f08af5163d31e', "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: '10b06fdbb3ae51bf02bd094205d075e1f9b60ea3', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (hAsync(Host, { key: 'f1a07f9e2f27f5297581e66c80097cf7843c1a5a', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '8f3323145edfde317f2762e470f3ab2e27452b69', "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: 'a3ae5d8a6fe3a96b5aa7142f7a246876fdbe3ef3', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (hAsync(Host, { key: '543593e248261418ea75580e5fbed1c613e57d00', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -28033,14 +28313,14 @@ class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, hAsync("div", { key: '9b7dc9abf5b1925872c75f6c992aac465700b615', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: 'd0e11e98bfb8b9e9225de80c8f132f68c3466f13', "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: 'd475776f64b55d13d49f8193f3b84a4e669403c7', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: '9b5b681edfac608ed1c20175086ec40c652a7f07', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, hAsync("div", { key: '01351daea61933fedd1bd6289376183962096479', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: 'fae92d93e9c16c4b48116da9aa6b3e827d0f830a', "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: '4d20d2db6ce72e82f86fa140ebd2ad3b6bbf4bd6', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: '40102559fa7864a7545466cf1abc40131b5ace6c', "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: '44c85c0d3a1346c5e9306a65f6a7cf0fcdc1f149', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: '42eb950e72357bba1a1fe2dacfa982412c9d64db', "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 {
@@ -28514,14 +28794,14 @@ class Segment {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '107be9ad856d855db449d24cd75f9fb82746e9aa', role: "tablist", onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '7b0aeabf078ca075d0ea1d5e92d84b9e7f1cefef', 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: 'bdb223b18a62af921084301f01a728c421379646' })));
+            }) }, hAsync("slot", { key: 'ddecf3510bbc3cd37b2bbd7818b19f9919c767b5' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -28631,7 +28911,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: '9b54e4841be5d0f4f2ee230a649bfbe01066c7c7', class: {
+        return (hAsync(Host, { key: '70cf5c7a3ae2620222c5250c644faf3cfc3b3e4e', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -28647,10 +28927,10 @@ class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, hAsync("button", Object.assign({ key: 'b97b964b5f3f1bf53e41ad2a1ad4853d5f956fe5', "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: '0eeb2616f7c5a7a7fc1e2e3bd34ab461de6179f4', class: "button-inner" }, hAsync("slot", { key: '5ac8fafa2f23e30f8df63bfe236a9604cfb388ae' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '86032e9726e2b6437ffc34f59fcbe564616cc9ca' })), hAsync("div", { key: '536b1da58dd2521be290707d6b1726831340cf9f', part: "indicator", class: {
+            } }, hAsync("button", Object.assign({ key: 'a53c9f1e360934e8d2e90476642ba4507fc38ebd', "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: '7d8feda840d389941cc693f500b5eba0b39b41da', class: "button-inner" }, hAsync("slot", { key: 'd9ae1eec45db253cbf573d29cd545658dd595d87' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '49e6a16968709dc9b3fc77bc9fb99acb42fda88c' })), hAsync("div", { key: '4e3ea0989ed5205dbb03586e4facb439b05a92de', part: "indicator", class: {
                 'segment-button-indicator': true,
                 'segment-button-indicator-animated': true,
-            } }, hAsync("div", { key: 'b43124415ebd77c87285791522c5afc26a137f96', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, hAsync("div", { key: '65c72a151080998c1e548c87d4d4ebd5c7dda72f', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29249,7 +29529,7 @@ class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (hAsync(Host, { key: 'df8333e037d8cb9fd34af7f3525608d7bd0ec0f4', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '6e282b0b0bc7202c4a1601e5997933c62a7598fd', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -29265,7 +29545,7 @@ class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, hAsync("label", { key: '3b165b4c7512bcf750bac885aef67745db53a840', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), hAsync("div", { key: '1b0cac005aff58ba067efe7e1165b3375716c57e', class: "select-wrapper-inner" }, hAsync("slot", { key: '0552b33874ec305d3406876d5714a1dc4f0dc2c1', name: "start" }), hAsync("div", { key: '7d56e2610cc026f844373590f8229164baff2c62', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '79d8daef62fce370d804734390d8ba47dc611d36', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: 'be8b6f8c45b5062618ba50b2311f1143210bcc59', class: "select-highlight" }))));
+            }) }, hAsync("label", { key: 'f2624d200a6f185b4ecdb0df3ffabc4d258adec9', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), hAsync("div", { key: '71cdbfd064bd5f3c49ae390c09b05c0e1b9937ea', class: "select-wrapper-inner" }, hAsync("slot", { key: 'a85d652a91c09b71ea7c4ccf0c4ff9dea4000c8f', name: "start" }), hAsync("div", { key: 'd101e38fa9fb55612f98e8d82ac637647673abda', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '3d005f2281bef9e51311f76b845c8a6da8a71803', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: '87a7fe0f38b718cbd0b36d971e1eee7013e660a9', class: "select-highlight" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29356,7 +29636,7 @@ class SelectOption {
         this.value = undefined;
     }
     render() {
-        return hAsync(Host, { key: '6fa504ac5597098086050c0f517a03be8b8032c9', role: "option", id: this.inputId, class: getIonMode$1(this) });
+        return hAsync(Host, { key: 'ba5a9c695c53fe0802af11a49f4305a9b8f71773', role: "option", id: this.inputId, class: getIonMode$1(this) });
     }
     get el() { return getElement(this); }
     static get style() { return IonSelectOptionStyle0; }
@@ -29476,7 +29756,7 @@ class SelectPopover {
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (hAsync(Host, { key: '2ed838c17d47198c697164a0a750aafb6ca61a95', class: getIonMode$1(this) }, hAsync("ion-list", { key: '24fe7a6e9e45458c201b178ca236645d0f49ea8a' }, header !== undefined && hAsync("ion-list-header", { key: 'ebe64853dcd59c14a8f4dc9c2dc9e66d1e9767f6' }, header), hasSubHeaderOrMessage && (hAsync("ion-item", { key: 'ed7c6f2d7e1282b3048df0af8f1e3fd3b08297c6' }, hAsync("ion-label", { key: 'a81f6c4011a0dce47b80c98a45d80b1368d84a1e', class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", { key: '4fd72c62da896092d535580917bb8a5ad6609c05' }, subHeader), message !== undefined && hAsync("p", { key: '88aead29b35d69743abe4015f96a6fa9f199a0ff' }, message)))), this.renderOptions(options))));
+        return (hAsync(Host, { key: '302553a2eec4d1442751b8af28b7c9bd3487fd5d', class: getIonMode$1(this) }, hAsync("ion-list", { key: '39ae8579e6fe3bae2c7504147268ad5c82fd27e6' }, header !== undefined && hAsync("ion-list-header", { key: 'e0e6686380d188f46c593e1bb25287dcf08c75c2' }, header), hasSubHeaderOrMessage && (hAsync("ion-item", { key: '8a2d8652db269593c0ba7d767277e12c2b06144d' }, hAsync("ion-label", { key: 'a30cc0ecf95d5bdd6421ee1683922c1b853e98ea', class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", { key: 'c298459ca450123808a08d65660825b2c26d00e5' }, subHeader), message !== undefined && hAsync("p", { key: 'ed895fbaec020e809021138401341b6fd7675035' }, message)))), this.renderOptions(options))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -29524,11 +29804,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: '8a1b489e35564056b3babce548982e58fec74119', class: {
+        return (hAsync(Host, { key: '1a3e78e9a6f740d609d1f0b7a16cb6eff4a2d617', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, hAsync("span", { key: '71df251a41967dc4dab241f6fa906fa4d568dd9e' }, "\u00A0")));
+            } }, hAsync("span", { key: 'be3eabe196ec6e8ec19857375ba30f4c8aa58e7f' }, "\u00A0")));
     }
     get el() { return getElement(this); }
     static get style() { return IonSkeletonTextStyle0; }
@@ -29581,7 +29861,7 @@ class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (hAsync(Host, { key: '9422c25aadfdf08861e26bb1aa336c94391d10a3', class: createColorClasses$1(self.color, {
+        return (hAsync(Host, { key: '50cbaed55eeab15292447d106a80b93db4cb40de', class: createColorClasses$1(self.color, {
                 [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),
@@ -29681,12 +29961,12 @@ class SplitPane {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'd04ff97717268184725f25b39bb1416b2b423260', class: {
+        return (hAsync(Host, { key: 'd54c356cd4bff7e55325160882dea8249f47f388', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, hAsync("slot", { key: '4d355509ab6fcdac415184068ffe1241a5078db3' })));
+            } }, hAsync("slot", { key: 'af62690d0fd686cfbd29d888c79eda9001f13e2f' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29755,10 +30035,10 @@ class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (hAsync(Host, { key: 'f341d086cc626834d2ac83a9b6366fcaf71a72d5', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (hAsync(Host, { key: '46d5498418f5379861c3d7465e8021dec45f1200', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, hAsync("slot", { key: 'b665bb7a388f1a032685c9e7fe9b412ca742689e' })));
+            } }, hAsync("slot", { key: 'b45045dccb87dfe75e3f5a5a474bb48b6c98e922' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29836,11 +30116,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: '77fe8ff42b083bfdb5e01a9873ef45b6f3ce3744', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '3a8595dd83f89e8319471a7a7f9f64b2565b384c', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, hAsync("slot", { key: 'd479c80ff66f4cfc12ab4a583bd292ef8392895e' })));
+            }) }, hAsync("slot", { key: '8b65eceb922f6abfa15f41046261586fb94b981f' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29938,7 +30218,7 @@ class TabButton {
             rel,
             target,
         };
-        return (hAsync(Host, { key: '092250aa4c247411c4717bf3871bdd7a47b7177f', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (hAsync(Host, { key: '4b528ce31f67e10ad849e0c99bd034bba675c227', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [mode]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -29950,7 +30230,7 @@ class TabButton {
                 'ion-activatable': true,
                 'ion-selectable': true,
                 'ion-focusable': true,
-            } }, hAsync("a", Object.assign({ key: '0414e9284005ce34ad69c4858f1b30aff00beb86' }, 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: 'df97b6b56fb86507d40e68caa49f888ee29f8da4', class: "button-inner" }, hAsync("slot", { key: '715c209dd0cd61ac37b2813815014c685b7a92bc' })), mode === 'md' && hAsync("ion-ripple-effect", { key: 'e6894153a563f63f4f7d84f2703cef0f7522d435', type: "unbounded" }))));
+            } }, hAsync("a", Object.assign({ key: '0da8784b1b243ffaaaf04dd7adb55d6881ed0c08' }, 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: '2c628e8f1ebc129f84876c01530468cb97d8bf3a', class: "button-inner" }, hAsync("slot", { key: '8052a171d197a7de1a7eb12b091c35f73ae1ee21' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '4186bdb5ed045ec16f495a14fa30ac864c576227', type: "unbounded" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -30116,7 +30396,7 @@ class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (hAsync(Host, { key: '13d9b30a83eb565b635ec7c547bd99da8c96aaa0', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: 'd885dbf0134cd5d256f7e3e9fc4844636c2c6cbf', name: "top" }), hAsync("div", { key: '2f48887902d47c0e29afb8da450da22b874b0e76', class: "tabs-inner" }, hAsync("slot", { key: 'bcdb41418edc7d176e570c37bb6a6ba1dc123f7d' })), hAsync("slot", { key: '85101e7c57cf8cda04bd3a125f1207faf85110d2', name: "bottom" })));
+        return (hAsync(Host, { key: '239bdb2ff2ec5cfcc74c51812cf6240f48acc617', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: '2b266d0f87c7c82e992fe0d9b5c8f25569b118e3', name: "top" }), hAsync("div", { key: '4cbbd010f0b0b1cd82714db7d098d28fab6d5218', class: "tabs-inner" }, hAsync("slot", { key: '72b2a02cd29d5b30e47758f3d6daaa1021916256' })), hAsync("slot", { key: '25494076dbbf7606d477b44f1b969719e7b4a805', name: "bottom" })));
     }
     get el() { return getElement(this); }
     static get style() { return IonTabsStyle0; }
@@ -30158,9 +30438,9 @@ class Text {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '096d8ca01301500d61d9e92299e0cc78c2ad86e3', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '4b76333b1ea5cab134b9dc1f5670c0d5a253fc32', class: createColorClasses$1(this.color, {
                 [mode]: true,
-            }) }, hAsync("slot", { key: '9399d939ec4f134c24c29bda8857cd348259c666' })));
+            }) }, hAsync("slot", { key: '3dee5f16bc58b3d92547d910bd4f441a00ce2039' })));
     }
     static get style() { return IonTextStyle0; }
     static get cmpMeta() { return {
@@ -30527,7 +30807,7 @@ class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (hAsync(Host, { key: '16eeb87ea5dbac1b37f1a376cd74e6f41af1b5f6', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '37595a18d77dea1a337ac1c672e5f08a4128111d', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -30536,7 +30816,7 @@ class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, hAsync("label", { key: '5f7946957517614b937eb37533a87c124cf3eabb', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), hAsync("div", { key: '4e950025447d83f3ec77b515a2c5cd6511819b7e', class: "textarea-wrapper-inner" }, hAsync("div", { key: 'a508e5879a9f7b3f2a91d5b1851ab990302044fe', class: "start-slot-wrapper" }, hAsync("slot", { key: 'a2b18078c602896be5ae2da71519f534aa24bbc4', name: "start" })), hAsync("div", { key: '5a4d07c72794548d7f0945aebc5bc2c65118cac3', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, hAsync("textarea", Object.assign({ key: 'f13d0e8b96a798d3cec017b2b618e4979555c5ee', 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: '10b8792a1506b41928869a4460b6f780c39947b6', class: "end-slot-wrapper" }, hAsync("slot", { key: '26362017095ffdda6749a19e0152ef4da8759fba', name: "end" }))), shouldRenderHighlight && hAsync("div", { key: '06a6135b05848b3855192f162ec293d9eae6e171', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, hAsync("label", { key: '67342758743e5a40448a32ff695876d39778621f', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), hAsync("div", { key: 'a994be8264bf5652811cf816d79a04178954e83f', class: "textarea-wrapper-inner" }, hAsync("div", { key: 'e09c93ebcd5b3d227d51e682ca23dfc7fd7027ad', class: "start-slot-wrapper" }, hAsync("slot", { key: 'd39758f21f19ae70aea21e9a9a7b7c20991fe593', name: "start" })), hAsync("div", { key: '6a4e10e53de4bb235ee30def4c9ae5bdee888816', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, hAsync("textarea", Object.assign({ key: '9e254e551f124d972e9bc6b09ef0f2bb55890be5', 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: 'a66aa2d2bc4778a0bec56a8b9ec9052a832eb3b2', class: "end-slot-wrapper" }, hAsync("slot", { key: '8e6a90b4475de32e23afc593da4108610dcca663', name: "end" }))), shouldRenderHighlight && hAsync("div", { key: '6da03205a8daff45581b20f0af3938634a9d5f8c', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -30598,7 +30878,7 @@ class Thumbnail {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '29ed7678be93e55afad58bd37a61db3a289a5d76', class: getIonMode$1(this) }, hAsync("slot", { key: 'da1eb174d2544b9d452c98076f6e0abcda60099d' })));
+        return (hAsync(Host, { key: 'ea55000055f941b0c79561e8934be6242ec8e114', class: getIonMode$1(this) }, hAsync("slot", { key: 'a4f934f442797f5c66a77e0ef8920fdd07c204f2' })));
     }
     static get style() { return IonThumbnailStyle0; }
     static get cmpMeta() { return {
@@ -31431,9 +31711,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: 'f3555e5e093ce5dc5114df2e7ed298afa79eee02', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'da148788489146a20b42023fdc6401e53c044767', 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: '3a98853e3b9c4c015a0e4035ad34f7fe02ec3b1c', class: wrapperClass }, hAsync("div", { key: '3c3447ce2a1fd4aecc3f7da1c1bb0c504fb6fcf7', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: '40bb8c55ac8bf7ce283bf2cdeb5902e76ad911ca', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: 'bfe843cce24b0205cdce48a544b294dcb0946eb4', 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: 'ab0a4d783aa43ba961492b3eb8beb60a38153057', class: wrapperClass }, hAsync("div", { key: '83e49027fd1ca6553d6910ff91befeea43576f3c', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: '025cb4b6b170a89548969a25bcce4ab7a3817898', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: 'b811b4e1cbc1528c2cfb57898f5615692120f840', 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 {
@@ -31653,7 +31933,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: '9083d3ea92131df1480dfdaacd62037ffd5a69ec', onClick: this.onClick, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'b0d648e071bc8095998b519ce4dcdd0ea91575c0', onClick: this.onClick, class: createColorClasses$1(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -31663,10 +31943,10 @@ class Toggle {
                 [`toggle-alignment-${alignment}`]: true,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, hAsync("label", { key: '554e11ac1db370363b251b83e4d57c32a2bd4577', class: "toggle-wrapper" }, hAsync("input", Object.assign({ key: '327540a212dfe686310e8a587fa8c81edfd2e229', 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: '9ba185a8afaf65c8ba0d2044b1abfa376aee4db3', class: {
+            }) }, hAsync("label", { key: '9a2fe1d16dba66a9dfef450efebf2e5cbe3dcd00', class: "toggle-wrapper" }, hAsync("input", Object.assign({ key: '4358d18cb86da768155c17f9da3aac641296c256', 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: '0ec99e452164d7059cc4f93d09e5b918f82c022a', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, hAsync("slot", { key: '730287f916c13ec437f39f2304a70afa50f41dc7' })), hAsync("div", { key: '0e810cdf6dc7623d4efd2092a642ef12906efcae', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, hAsync("slot", { key: '1c5cbc99905a79e842e9487eb3ca654e1bab3c66' })), hAsync("div", { key: 'ca8196423b429899febd11c7337d768ff05df6f4', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -31770,10 +32050,10 @@ class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (hAsync(Host, { key: 'af016bf9981a2d6182783c6643e2d460245ecc2f', class: Object.assign(Object.assign({}, childStyles), createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '4bb3a55001408a3bdf033af76b9196cb96c07c09', class: Object.assign(Object.assign({}, childStyles), createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, hAsync("div", { key: '437debb5b7c561b315d887ae8d47186cba5521ce', class: "toolbar-background" }), hAsync("div", { key: '4c2429fa3e8526fedf456e4658be92d5dce8ca34', class: "toolbar-container" }, hAsync("slot", { key: '4c07db12cfc48b4836b566449b854c24db308e3a', name: "start" }), hAsync("slot", { key: '12855ec04622c09cc404f9b4f07f57a73e5770a0', name: "secondary" }), hAsync("div", { key: '56f37d52c91de2b76910defbc9e5b7c1def3861c', class: "toolbar-content" }, hAsync("slot", { key: 'c10ec3fdbea10a6388f4f510d45188f7fda1a371' })), hAsync("slot", { key: 'c8ed49c6888faf35e71f2a8f4f6bf98fb0c34a25', name: "primary" }), hAsync("slot", { key: '0251f3980082a092304f95cbc002bc8c633c5739', name: "end" }))));
+            })) }, hAsync("div", { key: '0891db157d6e028c6d03696f13fb510ea91b0296', class: "toolbar-background" }), hAsync("div", { key: '95fbc870d808f74af4bb18cd8f8ec8c7828a9e0b', class: "toolbar-container" }, hAsync("slot", { key: '84d4a9644660fe00ca085055ca8d12f3647531ad', name: "start" }), hAsync("slot", { key: 'fd361dc9c9979f59aed2fedcf94629506fae62b0', name: "secondary" }), hAsync("div", { key: '54d2b28616a4627c55766f66dc453707752758a6', class: "toolbar-content" }, hAsync("slot", { key: '8f65e0830cce7135640b90eb694e282cb7e5efd2' })), hAsync("slot", { key: 'c78be11a207c8674f222543646398636956087e6', name: "primary" }), hAsync("slot", { key: 'ab25e1601ccaa8cb0d81921b849bcb7402aa7826', name: "end" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -31823,11 +32103,11 @@ class ToolbarTitle {
     render() {
         const mode = getIonMode$1(this);
         const size = this.getSize();
-        return (hAsync(Host, { key: '5cb49f3642fb3c937cdba729ab7d561213d9bce5', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '5a58dc437a6f4257244bbdd7e9a682a17d8c9a6b', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, hAsync("div", { key: 'f089bf6cff17ab109fec7de8b1bf96bf33bede1f', class: "toolbar-title" }, hAsync("slot", { key: 'ed74c4e77126a309970ff719baa6ebaebb00d2e6' }))));
+            }) }, hAsync("div", { key: '58682ea7b8f47a08adfad419b5c76b34784c6501', class: "toolbar-title" }, hAsync("slot", { key: '8a9248534e4c3076f5e2dfda38ef86069796851c' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {