@ionic/core 8.0.2 → 8.1.1-dev.11714676345.1df5b5f8

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 {
@@ -28130,6 +28410,14 @@ class Segment {
                 }
             }
         };
+        this.onSlottedItemsChange = () => {
+            /**
+             * When the slotted segment buttons change we need to
+             * ensure that the new segment buttons are checked if
+             * the value matches the segment button value.
+             */
+            this.valueChanged(this.value);
+        };
         this.getSegmentButton = (selector) => {
             var _a, _b;
             const buttons = this.getButtons().filter((button) => !button.disabled);
@@ -28197,13 +28485,6 @@ class Segment {
     }
     async componentDidLoad() {
         this.setCheckedClasses();
-        /**
-         * If the value changes before watchers
-         * are setup, then the ionSelect watch callback
-         * will not fire. As a result, we manually
-         * fire this event when Select is loaded.
-         */
-        this.ionSelect.emit({ value: this.value });
         /**
          * We need to wait for the buttons to all be rendered
          * before we can scroll.
@@ -28514,14 +28795,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: 'ad0946134c8d465b760ad792655f1cb9922db520', 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: 'dcdb425bcda0d60acb7c317e5e671ed462715b4a', onSlotchange: this.onSlottedItemsChange })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -28631,7 +28912,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 +28928,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 {
@@ -28779,9 +29060,6 @@ class Select {
         this.value = value;
         this.ionChange.emit({ value });
     }
-    componentWillLoad() {
-        this.inheritedAttributes = inheritAttributes$1(this.el, ['aria-label']);
-    }
     async connectedCallback() {
         const { el } = this;
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
@@ -28791,6 +29069,12 @@ class Select {
             this.updateOverlayOptions();
         });
     }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAttributes$1(this.el, ['aria-label']);
+    }
+    componentDidLoad() {
+        this.emitStyle();
+    }
     disconnectedCallback() {
         if (this.mutationO) {
             this.mutationO.disconnect();
@@ -29249,7 +29533,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: '57fa52484e644c5c021921fef7131ac832034feb', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -29265,7 +29549,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: '34cb142fa7fec6946e7eb39e30d639e534fa30f8', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), hAsync("div", { key: '3243dcc4698ebd53adaa59ae470a6e90061feb57', class: "select-wrapper-inner" }, hAsync("slot", { key: '1e0aa1e18a79397fd551c0c87bb00053a29e428c', name: "start" }), hAsync("div", { key: 'e21995dd161859aaeade1063d0f27acf38941260', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '4cb0e709df3974acb3f3a9fa82fb6f02cc666fcf', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: 'bcf9062e00e10576b399eeee886ec48595b1e7a7', class: "select-highlight" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29356,7 +29640,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 +29760,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 +29808,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 +29865,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 +29965,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 +30039,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 +30120,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 +30222,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 +30234,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 +30400,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 +30442,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 +30811,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 +30820,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 +30882,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 +31715,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 +31937,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 +31947,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 +32054,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 +32107,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 {