@ionic/core 8.8.6-dev.11777572994.1147595d → 8.8.6-nightly.20260501

package/hydrate/index.mjs

@@ -7790,7 +7790,7 @@ const focusElementInOverlay = (hostToFocus, overlay) => {
  * Should NOT include: Toast
  */
 const trapKeyboardFocus = (ev, doc) => {
-    const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-popover');
+    const lastOverlay = getPresentedOverlay(doc, 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover');
     const target = ev.target;
     /**
      * If no active overlay, ignore this event.
@@ -8024,7 +8024,7 @@ const dismissOverlay = (doc, data, role, overlayTag, id) => {
  */
 const getOverlays = (doc, selector) => {
     if (selector === undefined) {
-        selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-popover,ion-toast';
+        selector = 'ion-alert,ion-action-sheet,ion-loading,ion-modal,ion-picker-legacy,ion-popover,ion-toast';
     }
     return Array.from(doc.querySelectorAll(selector)).filter((c) => c.overlayIndex > 0);
 };
@@ -8086,29 +8086,6 @@ const setRootAriaHidden = (hidden = false) => {
         viewContainer.removeAttribute('aria-hidden');
     }
 };
-/**
- * Cleans up root `aria-hidden` and `backdrop-no-scroll` when
- * an overlay is removed from the DOM without going through
- * the `dismiss()` flow (e.g., when a framework unmounts the
- * overlay during a route change).
- *
- * Should be called from an overlay's `disconnectedCallback`
- * when the overlay was still presented at the time of removal.
- */
-const cleanupRootFocusTrapAccessibility = () => {
-    if (typeof document === 'undefined') {
-        return;
-    }
-    const remainingOverlays = getPresentedOverlays(document);
-    const hasRemainingLocking = remainingOverlays.some((o) => {
-        const el = o;
-        return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && isBackdropAlwaysBlocking(el);
-    });
-    if (!hasRemainingLocking) {
-        setRootAriaHidden(false);
-        document.body.classList.remove(BACKDROP_NO_SCROLL);
-    }
-};
 const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
     var _a, _b;
     if (overlay.presented) {
@@ -9365,7 +9342,7 @@ const createAnimation = (animationId) => {
 /**
  * iOS Action Sheet Enter Animation
  */
-const iosEnterAnimation$5 = (baseEl) => {
+const iosEnterAnimation$6 = (baseEl) => {
     const baseAnimation = createAnimation();
     const backdropAnimation = createAnimation();
     const wrapperAnimation = createAnimation();
@@ -9389,7 +9366,7 @@ const iosEnterAnimation$5 = (baseEl) => {
 /**
  * iOS Action Sheet Leave Animation
  */
-const iosLeaveAnimation$5 = (baseEl) => {
+const iosLeaveAnimation$6 = (baseEl) => {
     const baseAnimation = createAnimation();
     const backdropAnimation = createAnimation();
     const wrapperAnimation = createAnimation();
@@ -9545,7 +9522,7 @@ class ActionSheet {
     async present() {
         const unlock = await this.lockController.lock();
         await this.delegateController.attachViewToDom();
-        await present(this, 'actionSheetEnter', iosEnterAnimation$5, mdEnterAnimation$5);
+        await present(this, 'actionSheetEnter', iosEnterAnimation$6, mdEnterAnimation$5);
         unlock();
     }
     /**
@@ -9562,7 +9539,7 @@ class ActionSheet {
      */
     async dismiss(data, role) {
         const unlock = await this.lockController.lock();
-        const dismissed = await dismiss(this, data, role, 'actionSheetLeave', iosLeaveAnimation$5, mdLeaveAnimation$5);
+        const dismissed = await dismiss(this, data, role, 'actionSheetLeave', iosLeaveAnimation$6, mdLeaveAnimation$5);
         if (dismissed) {
             this.delegateController.removeViewFromDom();
         }
@@ -9731,10 +9708,6 @@ class ActionSheet {
             this.gesture = undefined;
         }
         this.triggerController.removeClickListener();
-        // Clean up aria-hidden if removed without dismiss() being called
-        if (this.presented) {
-            cleanupRootFocusTrapAccessibility();
-        }
     }
     componentWillLoad() {
         var _a;
@@ -9823,7 +9796,7 @@ class ActionSheet {
             if (isRadio) {
                 htmlAttrs['aria-checked'] = isActiveRadio ? 'true' : 'false';
             }
-            return (hAsync("button", Object.assign({}, htmlAttrs, { role: isRadio ? 'radio' : undefined, type: "button", id: buttonId, class: Object.assign(Object.assign({}, buttonClass$2(b)), { 'action-sheet-selected': isActiveRadio }), onClick: () => {
+            return (hAsync("button", Object.assign({}, htmlAttrs, { role: isRadio ? 'radio' : undefined, type: "button", id: buttonId, class: Object.assign(Object.assign({}, buttonClass$3(b)), { 'action-sheet-selected': isActiveRadio }), onClick: () => {
                     if (isRadio) {
                         this.selectRadioButton(b);
                     }
@@ -9838,12 +9811,12 @@ class ActionSheet {
         const cancelButton = allButtons.find((b) => b.role === 'cancel');
         const buttons = allButtons.filter((b) => b.role !== 'cancel');
         const headerID = `action-sheet-${overlayIndex}-header`;
-        return (hAsync(Host, Object.assign({ key: 'fc8e6c837c7e16d78348a3109f5dc992f111784a', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '173fcff5b1da7c33c267de4667591c946b8c8d03', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), hAsync("ion-backdrop", { key: 'e558804050a8ba80dcca73308bbcb4b31687ba70', tappable: this.backdropDismiss }), hAsync("div", { key: '6697622f6a62a460eac489afc5cd504eda002140', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '4c05e7a9a20953faaa8ea0eab739b9b400895137', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: '43bbc9b7217570cfc62789b4987e61a6e51a1c5f', class: "action-sheet-container" }, hAsync("div", { key: '5f9b36b5396043997d7b74e29ad3738b2af8821e', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (hAsync("div", { key: '3306e90dace90046d226b1eb95b06af11eebba5e', id: headerID, class: {
+            }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), hAsync("ion-backdrop", { key: '521ede659f747864f6c974e09016436eceb7158c', tappable: this.backdropDismiss }), hAsync("div", { key: '7a7946fc434bc444f16a70638f5e948c69d33fcd', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'bcff39a580489dbafa255842e57aa8602c6d0f18', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: '84bba13ce14261f0f0daa3f9c77648c9e7f36e0e', class: "action-sheet-container" }, hAsync("div", { key: 'd9c8ac404fd6719a7adf8cb36549f67616f9a0c4', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (hAsync("div", { key: '180433a8ad03ef5c54728a1a8f34715b6921d658', id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && hAsync("div", { key: 'ee8e87e627e8eb6afdb1f4c3f0ef34c29a2b69c6', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (hAsync("div", { key: 'cb568ea8502afd8d913c0d0107db4fc98b5e50c6', class: "action-sheet-group action-sheet-group-cancel" }, hAsync("button", Object.assign({ key: 'd11ca6898fa308f494f2183ffc45bbcf971c14cb' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass$2(cancelButton), onClick: () => this.buttonClick(cancelButton) }), hAsync("span", { key: 'b18e80930fdd0515d3647846729d392971c7c511', class: "action-sheet-button-inner" }, cancelButton.icon && (hAsync("ion-icon", { key: '4e0a3fdcedaa480329080a8597df29746c14fd06', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && hAsync("ion-ripple-effect", { key: 'fd2be8895b57b74bc83ee54a5d738472ad5fdb00' })))))), hAsync("div", { key: 'b08dba5d658f9a5a64d76dc7eb8aba720c9333c3', tabindex: "0", "aria-hidden": "true" })));
+            } }, header, this.subHeader && hAsync("div", { key: '7138e79e61b1a8f42bc5a9175c57fa2f15d7ec5a', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (hAsync("div", { key: 'b617c722f5b8028d73ed34b69310f312c65f34a7', class: "action-sheet-group action-sheet-group-cancel" }, hAsync("button", Object.assign({ key: 'd0dd876fc48815df3710413c201c0b445a8e16c0' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass$3(cancelButton), onClick: () => this.buttonClick(cancelButton) }), hAsync("span", { key: 'e7b960157cc6fc5fe92a12090b2be55e8ae072e4', class: "action-sheet-button-inner" }, cancelButton.icon && (hAsync("ion-icon", { key: '05498ffc60cab911dbff0ecbc6168dea59ada9a5', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && hAsync("ion-ripple-effect", { key: '3d401346cea301be4ca03671f7370f6f4b0b6bde' })))))), hAsync("div", { key: '971f3c5fcc07f36c28eb469a47ec0290c692e139', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -9892,7 +9865,7 @@ class ActionSheet {
         "$attrsToReflect$": []
     }; }
 }
-const buttonClass$2 = (button) => {
+const buttonClass$3 = (button) => {
     return Object.assign({ 'action-sheet-button': true, 'ion-activatable': !button.disabled, 'ion-focusable': !button.disabled, [`action-sheet-${button.role}`]: button.role !== undefined }, getClassMap(button.cssClass));
 };
 
@@ -10063,7 +10036,7 @@ class IonicSafeString {
 /**
  * iOS Alert Enter Animation
  */
-const iosEnterAnimation$4 = (baseEl) => {
+const iosEnterAnimation$5 = (baseEl) => {
     const baseAnimation = createAnimation();
     const backdropAnimation = createAnimation();
     const wrapperAnimation = createAnimation();
@@ -10088,7 +10061,7 @@ const iosEnterAnimation$4 = (baseEl) => {
 /**
  * iOS Alert Leave Animation
  */
-const iosLeaveAnimation$4 = (baseEl) => {
+const iosLeaveAnimation$5 = (baseEl) => {
     const baseAnimation = createAnimation();
     const backdropAnimation = createAnimation();
     const wrapperAnimation = createAnimation();
@@ -10349,10 +10322,6 @@ class Alert {
             this.gesture.destroy();
             this.gesture = undefined;
         }
-        // Clean up aria-hidden if removed without dismiss() being called
-        if (this.presented) {
-            cleanupRootFocusTrapAccessibility();
-        }
     }
     componentDidLoad() {
         /**
@@ -10389,7 +10358,7 @@ class Alert {
     async present() {
         const unlock = await this.lockController.lock();
         await this.delegateController.attachViewToDom();
-        await present(this, 'alertEnter', iosEnterAnimation$4, mdEnterAnimation$4).then(() => {
+        await present(this, 'alertEnter', iosEnterAnimation$5, mdEnterAnimation$4).then(() => {
             var _a, _b;
             /**
              * Check if alert has only one button and no inputs.
@@ -10420,7 +10389,7 @@ class Alert {
      */
     async dismiss(data, role) {
         const unlock = await this.lockController.lock();
-        const dismissed = await dismiss(this, data, role, 'alertLeave', iosLeaveAnimation$4, mdLeaveAnimation$4);
+        const dismissed = await dismiss(this, data, role, 'alertLeave', iosLeaveAnimation$5, mdLeaveAnimation$4);
         if (dismissed) {
             this.delegateController.removeViewFromDom();
         }
@@ -10561,7 +10530,7 @@ class Alert {
             'alert-button-group': true,
             'alert-button-group-vertical': buttons.length > 2,
         };
-        return (hAsync("div", { class: alertButtonGroupClass }, buttons.map((button) => (hAsync("button", Object.assign({}, button.htmlAttributes, { type: "button", id: button.id, class: buttonClass$1(button), tabIndex: 0, onClick: () => this.buttonClick(button) }), hAsync("span", { class: "alert-button-inner" }, button.text), mode === 'md' && hAsync("ion-ripple-effect", null))))));
+        return (hAsync("div", { class: alertButtonGroupClass }, buttons.map((button) => (hAsync("button", Object.assign({}, button.htmlAttributes, { type: "button", id: button.id, class: buttonClass$2(button), tabIndex: 0, onClick: () => this.buttonClick(button) }), hAsync("span", { class: "alert-button-inner" }, button.text), mode === 'md' && hAsync("ion-ripple-effect", null))))));
     }
     renderAlertMessage(msgId) {
         const { customHTMLEnabled, message } = this;
@@ -10584,9 +10553,9 @@ class Alert {
          * If neither are defined, do not set aria-labelledby.
          */
         const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
-        return (hAsync(Host, { key: '51ccec282f165dbaa02d7ee0c6413b870abae1d5', tabindex: "-1", style: {
+        return (hAsync(Host, { key: '6025440b9cd369d4fac89e7e4296c84a10a0b8e0', tabindex: "-1", style: {
                 zIndex: `${20000 + overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, hAsync("ion-backdrop", { key: '555fb7a0048d1ada0182925ca460956e65f43322', tappable: this.backdropDismiss }), hAsync("div", { key: 'bce7b1466f5d3c2615a7478ec8903f9567c9b101', tabindex: "0", "aria-hidden": "true" }), hAsync("div", Object.assign({ key: '8b0e8793070fee6cb3a69f0fc9b828b07672d0f9', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), hAsync("div", { key: 'f9c99afdd4389421e9eaabaa7e2f9c17e2cb88f4', class: "alert-head" }, header && (hAsync("h2", { key: '7aa37fe49189d714e7d4bc786d9895ab8191f25c', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (hAsync("h2", { key: '1c32cbb4d615672b669bfacff35079791a0ab50a', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (hAsync("h3", { key: 'fc7285499cee4cef323085e501d974d423102e94', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("div", { key: 'b69334b5643b2592053bc408a9ab3b623e2d2b9d', tabindex: "0", "aria-hidden": "true" })));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, hAsync("ion-backdrop", { key: '3cd5ca8b99cb95b11dd22ab41a820d841142896f', tappable: this.backdropDismiss }), hAsync("div", { key: '4cc62ae6e21424057d22aeef1e8fc77011e77cd5', tabindex: "0", "aria-hidden": "true" }), hAsync("div", Object.assign({ key: '364057a69f25aa88904df17bdcf7e5bf714e7830', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), hAsync("div", { key: '78694e3c0db2d408df3899fb1a90859bcc8d14cc', class: "alert-head" }, header && (hAsync("h2", { key: 'ec88ff3e4e1ea871b5975133fdcf4cac38b05e0f', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (hAsync("h2", { key: '9b09bc8bb68af255ef8b7d22587acc946148e544', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (hAsync("h3", { key: '99abe815f75d2df7f1b77c0df9f3436724fea76f', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("div", { key: 'a43d0c22c0e46b1ef911f92ffeb253d7911b85f7', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -10643,7 +10612,7 @@ const inputClass = (input) => {
     var _a, _b, _c;
     return Object.assign(Object.assign({ 'alert-input': true, 'alert-input-disabled': ((_b = (_a = input.attributes) === null || _a === void 0 ? void 0 : _a.disabled) !== null && _b !== void 0 ? _b : input.disabled) || false }, getClassMap(input.cssClass)), getClassMap(input.attributes ? (_c = input.attributes.class) === null || _c === void 0 ? void 0 : _c.toString() : ''));
 };
-const buttonClass$1 = (button) => {
+const buttonClass$2 = (button) => {
     return Object.assign({ 'alert-button': true, 'ion-focusable': true, 'ion-activatable': true, [`alert-button-role-${button.role}`]: button.role !== undefined }, getClassMap(button.cssClass));
 };
 
@@ -21473,7 +21442,7 @@ class ListHeader {
 /**
  * iOS Loading Enter Animation
  */
-const iosEnterAnimation$3 = (baseEl) => {
+const iosEnterAnimation$4 = (baseEl) => {
     const baseAnimation = createAnimation();
     const backdropAnimation = createAnimation();
     const wrapperAnimation = createAnimation();
@@ -21498,7 +21467,7 @@ const iosEnterAnimation$3 = (baseEl) => {
 /**
  * iOS Loading Leave Animation
  */
-const iosLeaveAnimation$3 = (baseEl) => {
+const iosLeaveAnimation$4 = (baseEl) => {
     const baseAnimation = createAnimation();
     const backdropAnimation = createAnimation();
     const wrapperAnimation = createAnimation();
@@ -21671,10 +21640,6 @@ class Loading {
     }
     disconnectedCallback() {
         this.triggerController.removeClickListener();
-        // Clean up aria-hidden if removed without dismiss() being called
-        if (this.presented) {
-            cleanupRootFocusTrapAccessibility();
-        }
     }
     /**
      * Present the loading overlay after it has been created.
@@ -21682,7 +21647,7 @@ class Loading {
     async present() {
         const unlock = await this.lockController.lock();
         await this.delegateController.attachViewToDom();
-        await present(this, 'loadingEnter', iosEnterAnimation$3, mdEnterAnimation$3);
+        await present(this, 'loadingEnter', iosEnterAnimation$4, mdEnterAnimation$3);
         if (this.duration > 0) {
             this.durationTimeout = setTimeout(() => this.dismiss(), this.duration + 10);
         }
@@ -21705,7 +21670,7 @@ class Loading {
         if (this.durationTimeout) {
             clearTimeout(this.durationTimeout);
         }
-        const dismissed = await dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation$3, mdLeaveAnimation$3);
+        const dismissed = await dismiss(this, data, role, 'loadingLeave', iosLeaveAnimation$4, mdLeaveAnimation$3);
         if (dismissed) {
             this.delegateController.removeViewFromDom();
         }
@@ -21740,9 +21705,9 @@ class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (hAsync(Host, Object.assign({ key: 'ab48bfcee8f7e3e33847a2f262fdc08b9ea804ca', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'f86ddbc600cb5c396b7de38fb5f49625388c3c3f', 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: '41baccc7fb6474389a3a3431c208e829ef738b75', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '7b7290974abbe8db8739b19835aca9f8b5c271c2', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'e32466abfcc92aaad47ea03b1dcb49f66abe4b63', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: 'c5e6e6f9e3f39dba0225d08d7dd2c1b96a1d83c7', class: "loading-spinner" }, hAsync("ion-spinner", { key: 'f428038959d879404ea898011363aac0b807ad11', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: '490e531367b86c319fa4260722dcff4dd631fa88', tabindex: "0", "aria-hidden": "true" })));
+            }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), hAsync("ion-backdrop", { key: 'b53727aaddc37ef3c685fcc150c6d5193290a847', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '4c61bede8e0a4e47daa6f1f9d0f364ef6aec0bc3', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '84e51ceb07118f1eaeb757df28801c255496931b', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: 'fc97f1912e0fc558b7c309a5bc084415f5f620b2', class: "loading-spinner" }, hAsync("ion-spinner", { key: '6e186d856cd3f10f22c3e317ef00f31b4216459c', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: 'dcbe9d9a619daa1c08174e73827bdabeb59dde92', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -24016,7 +23981,7 @@ const createEnterAnimation$1 = () => {
 /**
  * iOS Modal Enter Animation for the Card presentation style
  */
-const iosEnterAnimation$2 = (baseEl, opts) => {
+const iosEnterAnimation$3 = (baseEl, opts) => {
     const { presentingEl, currentBreakpoint, expandToScroll } = opts;
     const root = getElementRoot(baseEl);
     const { wrapperAnimation, backdropAnimation, contentAnimation } = currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation$1();
@@ -24109,7 +24074,7 @@ const createLeaveAnimation$1 = () => {
 /**
  * iOS Modal Leave Animation
  */
-const iosLeaveAnimation$2 = (baseEl, opts, duration = 500) => {
+const iosLeaveAnimation$3 = (baseEl, opts, duration = 500) => {
     const { presentingEl, currentBreakpoint } = opts;
     const root = getElementRoot(baseEl);
     const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetLeaveAnimation(opts) : createLeaveAnimation$1();
@@ -25482,10 +25447,6 @@ class Modal {
         // Also called in dismiss() — intentional dual cleanup covers both
         // dismiss-then-remove and direct DOM removal without dismiss.
         this.cleanupSafeAreaOverrides();
-        // Clean up aria-hidden if removed without dismiss() being called
-        if (this.presented) {
-            cleanupRootFocusTrapAccessibility();
-        }
     }
     componentWillLoad() {
         var _a;
@@ -25662,7 +25623,7 @@ class Modal {
             this.statusBarStyle = await StatusBar.getStyle();
             setCardStatusBarDark();
         }
-        await present(this, 'modalEnter', iosEnterAnimation$2, mdEnterAnimation$2, {
+        await present(this, 'modalEnter', iosEnterAnimation$3, mdEnterAnimation$2, {
             presentingEl: presentingElement,
             currentBreakpoint: this.initialBreakpoint,
             backdropBreakpoint: this.backdropBreakpoint,
@@ -25724,7 +25685,7 @@ class Modal {
         // All of the elements needed for the swipe gesture
         // should be in the DOM and referenced by now, except
         // for the presenting el
-        const animationBuilder = this.leaveAnimation || config.get('modalLeave', iosLeaveAnimation$2);
+        const animationBuilder = this.leaveAnimation || config.get('modalLeave', iosLeaveAnimation$3);
         const ani = (this.animation = animationBuilder(el, {
             presentingEl: this.presentingElement,
             expandToScroll: this.expandToScroll,
@@ -25743,7 +25704,7 @@ class Modal {
         if (!wrapperEl || initialBreakpoint === undefined) {
             return;
         }
-        const animationBuilder = this.enterAnimation || config.get('modalEnter', iosEnterAnimation$2);
+        const animationBuilder = this.enterAnimation || config.get('modalEnter', iosEnterAnimation$3);
         const ani = (this.animation = animationBuilder(this.el, {
             presentingEl: this.presentingElement,
             currentBreakpoint: initialBreakpoint,
@@ -25933,7 +25894,7 @@ class Modal {
             window.removeEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
             this.keyboardOpenCallback = undefined;
         }
-        const dismissed = await dismiss(this, data, role, 'modalLeave', iosLeaveAnimation$2, mdLeaveAnimation$2, {
+        const dismissed = await dismiss(this, data, role, 'modalLeave', iosLeaveAnimation$3, mdLeaveAnimation$2, {
             presentingEl: presentingElement,
             currentBreakpoint: (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : this.initialBreakpoint,
             backdropBreakpoint: this.backdropBreakpoint,
@@ -26365,20 +26326,20 @@ class Modal {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (hAsync(Host, Object.assign({ key: '8878518986eab4692754087d117b3b4a7968e4b2', "no-router": true,
+        return (hAsync(Host, Object.assign({ key: '4bf38aa67df9a3f977163bba5423960bbafd16de', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
             tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, '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, onFocus: this.onModalFocus }), hAsync("ion-backdrop", { key: '9566ae71e855f74ca44f54c98ba8e87ea987bb61', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: '7411fb2aa9f9bd1b43339d95903732039db97817', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '191dac7e097957a46a55bb45717e8762a6865d86',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, '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, onFocus: this.onModalFocus }), hAsync("ion-backdrop", { key: '866da40cc5fc8d3e36637098fb3066a5bc9f4e0f', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: '5a2a05514ea8592c8feb0465e504aa7c7af17963', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '4d327115306451f57d190b06ab8cbb6191a6f1d7',
             /*
               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: 'e1cacd56459934e33f5ffab9326d4dfa31764b8f', 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: 'd1882835cc049232c0d957e3ba1e79676a07d179', 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", ref: (el) => (this.dragHandleEl = el) })), hAsync("slot", { key: 'b361c4609a107e2eb759926708178964e37132f2', onSlotchange: this.onSlotChange }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), hAsync("slot", { key: '81dc58b09cf7d7022b04cd170f53113604364d5e', onSlotchange: this.onSlotChange }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -27458,14 +27419,14 @@ class Note {
     }; }
 }
 
-const pickerIosCss = () => `:host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}:host .picker-before{inset-inline-start:0}:host .picker-after{top:116px;height:84px}:host .picker-after{inset-inline-start:0}:host .picker-highlight{border-radius:var(--highlight-border-radius, 8px);left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--highlight-background);z-index:-1}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column:first-of-type){text-align:start}:host ::slotted(ion-picker-column:last-of-type){text-align:end}:host ::slotted(ion-picker-column:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to bottom, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-highlight{background:var(--highlight-background, var(--ion-color-step-150, var(--ion-background-color-step-150, #eeeeef)))}`;
+const pickerIosCss$1 = () => `:host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}:host .picker-before{inset-inline-start:0}:host .picker-after{top:116px;height:84px}:host .picker-after{inset-inline-start:0}:host .picker-highlight{border-radius:var(--highlight-border-radius, 8px);left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--highlight-background);z-index:-1}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column:first-of-type){text-align:start}:host ::slotted(ion-picker-column:last-of-type){text-align:end}:host ::slotted(ion-picker-column:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to bottom, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), to(rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0.8) 100%)}:host .picker-highlight{background:var(--highlight-background, var(--ion-color-step-150, var(--ion-background-color-step-150, #eeeeef)))}`;
 
-const pickerMdCss = () => `:host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}:host .picker-before{inset-inline-start:0}:host .picker-after{top:116px;height:84px}:host .picker-after{inset-inline-start:0}:host .picker-highlight{border-radius:var(--highlight-border-radius, 8px);left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--highlight-background);z-index:-1}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column:first-of-type){text-align:start}:host ::slotted(ion-picker-column:last-of-type){text-align:end}:host ::slotted(ion-picker-column:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to bottom, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}`;
+const pickerMdCss$1 = () => `:host{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:200px;direction:ltr;z-index:0}:host .picker-before,:host .picker-after{position:absolute;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:1;pointer-events:none}:host .picker-before{top:0;height:83px}:host .picker-before{inset-inline-start:0}:host .picker-after{top:116px;height:84px}:host .picker-after{inset-inline-start:0}:host .picker-highlight{border-radius:var(--highlight-border-radius, 8px);left:0;right:0;top:50%;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;position:absolute;width:calc(100% - 16px);height:34px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:var(--highlight-background);z-index:-1}:host input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host ::slotted(ion-picker-column:first-of-type){text-align:start}:host ::slotted(ion-picker-column:last-of-type){text-align:end}:host ::slotted(ion-picker-column:only-child){text-align:center}:host .picker-before{background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to bottom, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 20%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}:host .picker-after{background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1)), color-stop(90%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0)));background:linear-gradient(to top, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 1) 30%, rgba(var(--fade-background-rgb, var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255))), 0) 90%)}`;
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
-class Picker {
+let Picker$1 = class Picker {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.ionInputModeChange = createEvent(this, "ionInputModeChange", 7);
@@ -27931,8 +27892,8 @@ class Picker {
     }
     get el() { return getElement(this); }
     static get style() { return {
-        ios: pickerIosCss(),
-        md: pickerMdCss()
+        ios: pickerIosCss$1(),
+        md: pickerMdCss$1()
     }; }
     static get cmpMeta() { return {
         "$flags$": 297,
@@ -27944,7 +27905,322 @@ class Picker {
         "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
+};
+
+/**
+ * iOS Picker Enter Animation
+ */
+const iosEnterAnimation$2 = (baseEl) => {
+    const baseAnimation = createAnimation();
+    const backdropAnimation = createAnimation();
+    const wrapperAnimation = createAnimation();
+    backdropAnimation
+        .addElement(baseEl.querySelector('ion-backdrop'))
+        .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+        .beforeStyles({
+        'pointer-events': 'none',
+    })
+        .afterClearStyles(['pointer-events']);
+    wrapperAnimation
+        .addElement(baseEl.querySelector('.picker-wrapper'))
+        .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
+    return baseAnimation
+        .addElement(baseEl)
+        .easing('cubic-bezier(.36,.66,.04,1)')
+        .duration(400)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+};
+
+/**
+ * iOS Picker Leave Animation
+ */
+const iosLeaveAnimation$2 = (baseEl) => {
+    const baseAnimation = createAnimation();
+    const backdropAnimation = createAnimation();
+    const wrapperAnimation = createAnimation();
+    backdropAnimation
+        .addElement(baseEl.querySelector('ion-backdrop'))
+        .fromTo('opacity', 'var(--backdrop-opacity)', 0.01);
+    wrapperAnimation
+        .addElement(baseEl.querySelector('.picker-wrapper'))
+        .fromTo('transform', 'translateY(0%)', 'translateY(100%)');
+    return baseAnimation
+        .addElement(baseEl)
+        .easing('cubic-bezier(.36,.66,.04,1)')
+        .duration(400)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+};
+
+const pickerIosCss = () => `.sc-ion-picker-legacy-ios-h{--border-radius:0;--border-style:solid;--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--max-height:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1001}.sc-ion-picker-legacy-ios-h{inset-inline-start:0}.overlay-hidden.sc-ion-picker-legacy-ios-h{display:none}.picker-wrapper.sc-ion-picker-legacy-ios{border-radius:var(--border-radius);left:0;right:0;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;-webkit-transform:translate3d(0,  100%,  0);transform:translate3d(0,  100%,  0);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;overflow:hidden;z-index:10}.picker-toolbar.sc-ion-picker-legacy-ios{width:100%;background:transparent;contain:strict;z-index:1}.picker-button.sc-ion-picker-legacy-ios{border:0;font-family:inherit}.picker-button.sc-ion-picker-legacy-ios:active,.picker-button.sc-ion-picker-legacy-ios:focus{outline:none}.picker-columns.sc-ion-picker-legacy-ios{display:-ms-flexbox;display:flex;position:relative;-ms-flex-pack:center;justify-content:center;margin-bottom:var(--ion-safe-area-bottom, 0);contain:strict;overflow:hidden}.picker-above-highlight.sc-ion-picker-legacy-ios,.picker-below-highlight.sc-ion-picker-legacy-ios{display:none;pointer-events:none}.sc-ion-picker-legacy-ios-h{--background:var(--ion-background-color, #fff);--border-width:1px 0 0;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));--height:260px;--backdrop-opacity:var(--ion-backdrop-opacity, 0.26);color:var(--ion-item-color, var(--ion-text-color, #000))}.picker-toolbar.sc-ion-picker-legacy-ios{display:-ms-flexbox;display:flex;height:44px;border-bottom:0.55px solid var(--border-color)}.picker-toolbar-button.sc-ion-picker-legacy-ios{-ms-flex:1;flex:1;text-align:end}.picker-toolbar-button.sc-ion-picker-legacy-ios:last-child .picker-button.sc-ion-picker-legacy-ios{font-weight:600}.picker-toolbar-button.sc-ion-picker-legacy-ios:first-child{font-weight:normal;text-align:start}.picker-button.sc-ion-picker-legacy-ios,.picker-button.ion-activated.sc-ion-picker-legacy-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:1em;padding-inline-start:1em;-webkit-padding-end:1em;padding-inline-end:1em;padding-top:0;padding-bottom:0;height:44px;background:transparent;color:var(--ion-color-primary, #0054e9);font-size:16px}.picker-columns.sc-ion-picker-legacy-ios{height:215px;-webkit-perspective:1000px;perspective:1000px}.picker-above-highlight.sc-ion-picker-legacy-ios{top:0;-webkit-transform:translate3d(0,  0,  90px);transform:translate3d(0,  0,  90px);display:block;position:absolute;width:100%;height:81px;border-bottom:1px solid var(--border-color);background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, var(--background, var(--ion-background-color, #fff))), to(rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8)));background:linear-gradient(to bottom, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);z-index:10}.picker-above-highlight.sc-ion-picker-legacy-ios{inset-inline-start:0}.picker-below-highlight.sc-ion-picker-legacy-ios{top:115px;-webkit-transform:translate3d(0,  0,  90px);transform:translate3d(0,  0,  90px);display:block;position:absolute;width:100%;height:119px;border-top:1px solid var(--border-color);background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, var(--background, var(--ion-background-color, #fff))), to(rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8)));background:linear-gradient(to top, var(--background, var(--ion-background-color, #fff)) 30%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);z-index:11}.picker-below-highlight.sc-ion-picker-legacy-ios{inset-inline-start:0}`;
+
+const pickerMdCss = () => `.sc-ion-picker-legacy-md-h{--border-radius:0;--border-style:solid;--min-width:auto;--width:100%;--max-width:500px;--min-height:auto;--max-height:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;font-family:var(--ion-font-family, inherit);contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1001}.sc-ion-picker-legacy-md-h{inset-inline-start:0}.overlay-hidden.sc-ion-picker-legacy-md-h{display:none}.picker-wrapper.sc-ion-picker-legacy-md{border-radius:var(--border-radius);left:0;right:0;bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;-webkit-transform:translate3d(0,  100%,  0);transform:translate3d(0,  100%,  0);display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;overflow:hidden;z-index:10}.picker-toolbar.sc-ion-picker-legacy-md{width:100%;background:transparent;contain:strict;z-index:1}.picker-button.sc-ion-picker-legacy-md{border:0;font-family:inherit}.picker-button.sc-ion-picker-legacy-md:active,.picker-button.sc-ion-picker-legacy-md:focus{outline:none}.picker-columns.sc-ion-picker-legacy-md{display:-ms-flexbox;display:flex;position:relative;-ms-flex-pack:center;justify-content:center;margin-bottom:var(--ion-safe-area-bottom, 0);contain:strict;overflow:hidden}.picker-above-highlight.sc-ion-picker-legacy-md,.picker-below-highlight.sc-ion-picker-legacy-md{display:none;pointer-events:none}.sc-ion-picker-legacy-md-h{--background:var(--ion-background-color, #fff);--border-width:0.55px 0 0;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));--height:260px;--backdrop-opacity:var(--ion-backdrop-opacity, 0.26);color:var(--ion-item-color, var(--ion-text-color, #000))}.picker-toolbar.sc-ion-picker-legacy-md{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;height:44px}.picker-button.sc-ion-picker-legacy-md,.picker-button.ion-activated.sc-ion-picker-legacy-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-padding-start:1.1em;padding-inline-start:1.1em;-webkit-padding-end:1.1em;padding-inline-end:1.1em;padding-top:0;padding-bottom:0;height:44px;background:transparent;color:var(--ion-color-primary, #0054e9);font-size:14px;font-weight:500;text-transform:uppercase;-webkit-box-shadow:none;box-shadow:none}.picker-columns.sc-ion-picker-legacy-md{height:216px;-webkit-perspective:1800px;perspective:1800px}.picker-above-highlight.sc-ion-picker-legacy-md{top:0;-webkit-transform:translate3d(0,  0,  90px);transform:translate3d(0,  0,  90px);position:absolute;width:100%;height:81px;border-bottom:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, var(--ion-background-color, #fff)), to(rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8)));background:linear-gradient(to bottom, var(--ion-background-color, #fff) 20%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);z-index:10}.picker-above-highlight.sc-ion-picker-legacy-md{inset-inline-start:0}.picker-below-highlight.sc-ion-picker-legacy-md{top:115px;-webkit-transform:translate3d(0,  0,  90px);transform:translate3d(0,  0,  90px);position:absolute;width:100%;height:119px;border-top:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));background:-webkit-gradient(linear, left bottom, left top, color-stop(30%, var(--ion-background-color, #fff)), to(rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8)));background:linear-gradient(to top, var(--ion-background-color, #fff) 30%, rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8) 100%);z-index:11}.picker-below-highlight.sc-ion-picker-legacy-md{inset-inline-start:0}`;
+
+// TODO(FW-2832): types
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ */
+class Picker {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.didPresent = createEvent(this, "ionPickerDidPresent", 7);
+        this.willPresent = createEvent(this, "ionPickerWillPresent", 7);
+        this.willDismiss = createEvent(this, "ionPickerWillDismiss", 7);
+        this.didDismiss = createEvent(this, "ionPickerDidDismiss", 7);
+        this.didPresentShorthand = createEvent(this, "didPresent", 7);
+        this.willPresentShorthand = createEvent(this, "willPresent", 7);
+        this.willDismissShorthand = createEvent(this, "willDismiss", 7);
+        this.didDismissShorthand = createEvent(this, "didDismiss", 7);
+        this.delegateController = createDelegateController(this);
+        this.lockController = createLockController();
+        this.triggerController = createTriggerController();
+        this.presented = false;
+        /** @internal */
+        this.hasController = false;
+        /**
+         * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+         */
+        this.keyboardClose = true;
+        /**
+         * Array of buttons to be displayed at the top of the picker.
+         */
+        this.buttons = [];
+        /**
+         * Array of columns to be displayed in the picker.
+         */
+        this.columns = [];
+        /**
+         * Number of milliseconds to wait before dismissing the picker.
+         */
+        this.duration = 0;
+        /**
+         * If `true`, a backdrop will be displayed behind the picker.
+         */
+        this.showBackdrop = true;
+        /**
+         * If `true`, the picker will be dismissed when the backdrop is clicked.
+         */
+        this.backdropDismiss = true;
+        /**
+         * If `true`, the picker will animate.
+         */
+        this.animated = true;
+        /**
+         * If `true`, the picker will open. If `false`, the picker will close.
+         * Use this if you need finer grained control over presentation, otherwise
+         * just use the pickerController or the `trigger` property.
+         * Note: `isOpen` will not automatically be set back to `false` when
+         * the picker dismisses. You will need to do that in your code.
+         */
+        this.isOpen = false;
+        this.onBackdropTap = () => {
+            this.dismiss(undefined, BACKDROP);
+        };
+        this.dispatchCancelHandler = (ev) => {
+            const role = ev.detail.role;
+            if (isCancel(role)) {
+                const cancelButton = this.buttons.find((b) => b.role === 'cancel');
+                this.callButtonHandler(cancelButton);
+            }
+        };
+    }
+    onIsOpenChange(newValue, oldValue) {
+        if (newValue === true && oldValue === false) {
+            this.present();
+        }
+        else if (newValue === false && oldValue === true) {
+            this.dismiss();
+        }
+    }
+    triggerChanged() {
+        const { trigger, el, triggerController } = this;
+        if (trigger) {
+            triggerController.addClickListener(el, trigger);
+        }
+    }
+    connectedCallback() {
+        prepareOverlay(this.el);
+        this.triggerChanged();
+    }
+    disconnectedCallback() {
+        this.triggerController.removeClickListener();
+    }
+    componentWillLoad() {
+        var _a;
+        if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
+            setOverlayId(this.el);
+        }
+    }
+    componentDidLoad() {
+        printIonWarning('[ion-picker-legacy] - ion-picker-legacy and ion-picker-legacy-column have been deprecated in favor of new versions of the ion-picker and ion-picker-column components. These new components display inline with your page content allowing for more presentation flexibility than before.', this.el);
+        /**
+         * If picker was rendered with isOpen="true"
+         * then we should open picker immediately.
+         */
+        if (this.isOpen === true) {
+            raf(() => this.present());
+        }
+        /**
+         * When binding values in frameworks such as Angular
+         * it is possible for the value to be set after the Web Component
+         * initializes but before the value watcher is set up in Stencil.
+         * As a result, the watcher callback may not be fired.
+         * We work around this by manually calling the watcher
+         * callback when the component has loaded and the watcher
+         * is configured.
+         */
+        this.triggerChanged();
+    }
+    /**
+     * Present the picker overlay after it has been created.
+     */
+    async present() {
+        const unlock = await this.lockController.lock();
+        await this.delegateController.attachViewToDom();
+        await present(this, 'pickerEnter', iosEnterAnimation$2, iosEnterAnimation$2, undefined);
+        if (this.duration > 0) {
+            this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
+        }
+        unlock();
+    }
+    /**
+     * Dismiss the picker overlay after it has been presented.
+     *
+     * @param data Any data to emit in the dismiss events.
+     * @param role The role of the element that is dismissing the picker.
+     * This can be useful in a button handler for determining which button was
+     * clicked to dismiss the picker.
+     * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+     */
+    async dismiss(data, role) {
+        const unlock = await this.lockController.lock();
+        if (this.durationTimeout) {
+            clearTimeout(this.durationTimeout);
+        }
+        const dismissed = await dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation$2, iosLeaveAnimation$2);
+        if (dismissed) {
+            this.delegateController.removeViewFromDom();
+        }
+        unlock();
+        return dismissed;
+    }
+    /**
+     * Returns a promise that resolves when the picker did dismiss.
+     */
+    onDidDismiss() {
+        return eventMethod(this.el, 'ionPickerDidDismiss');
+    }
+    /**
+     * Returns a promise that resolves when the picker will dismiss.
+     */
+    onWillDismiss() {
+        return eventMethod(this.el, 'ionPickerWillDismiss');
+    }
+    /**
+     * Get the column that matches the specified name.
+     *
+     * @param name The name of the column.
+     */
+    getColumn(name) {
+        return Promise.resolve(this.columns.find((column) => column.name === name));
+    }
+    async buttonClick(button) {
+        const role = button.role;
+        if (isCancel(role)) {
+            return this.dismiss(undefined, role);
+        }
+        const shouldDismiss = await this.callButtonHandler(button);
+        if (shouldDismiss) {
+            return this.dismiss(this.getSelected(), button.role);
+        }
+        return Promise.resolve();
+    }
+    async callButtonHandler(button) {
+        if (button) {
+            // a handler has been provided, execute it
+            // pass the handler the values from the inputs
+            const rtn = await safeCall(button.handler, this.getSelected());
+            if (rtn === false) {
+                // if the return value of the handler is false then do not dismiss
+                return false;
+            }
+        }
+        return true;
+    }
+    getSelected() {
+        const selected = {};
+        this.columns.forEach((col, index) => {
+            const selectedColumn = col.selectedIndex !== undefined ? col.options[col.selectedIndex] : undefined;
+            selected[col.name] = {
+                text: selectedColumn ? selectedColumn.text : undefined,
+                value: selectedColumn ? selectedColumn.value : undefined,
+                columnIndex: index,
+            };
+        });
+        return selected;
+    }
+    render() {
+        const { htmlAttributes } = this;
+        const mode = getIonMode$1(this);
+        return (hAsync(Host, Object.assign({ key: '80f66d33780d8a1352d24be9cb63a0cc03d01ab5', "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: '97fb8e10ba08b197610cb8c0cdea61103883d55f', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'b3969cb6fbf7153623d14e3ca1493d3370efb211', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '299268483c3727e698d9135bfdf40349a7050ac1', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { key: '95394de3ef691899b7dbf416f56fd3e86bbdce3f', 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: '05f18bb8d00dc0e22f691b7e41f90f729a6c66d7', class: "picker-columns" }, hAsync("div", { key: '4a8fdf224effc0af67fd413e2e6aca8a78d1cf43', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-legacy-column", { col: c })), hAsync("div", { key: 'e50a31db45e3f39e9d0fed36a21be9257eec09bf', class: "picker-below-highlight" }))), hAsync("div", { key: '5a78cb2176ac807ea0c195c6b76cd0e8eef9d4c0', tabindex: "0", "aria-hidden": "true" })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "isOpen": [{
+                "onIsOpenChange": 0
+            }],
+        "trigger": [{
+                "triggerChanged": 0
+            }]
+    }; }
+    static get style() { return {
+        ios: pickerIosCss(),
+        md: pickerMdCss()
+    }; }
+    static get cmpMeta() { return {
+        "$flags$": 34,
+        "$tagName$": "ion-picker-legacy",
+        "$members$": {
+            "overlayIndex": [2, "overlay-index"],
+            "delegate": [16],
+            "hasController": [4, "has-controller"],
+            "keyboardClose": [4, "keyboard-close"],
+            "enterAnimation": [16],
+            "leaveAnimation": [16],
+            "buttons": [16],
+            "columns": [16],
+            "cssClass": [1, "css-class"],
+            "duration": [2],
+            "showBackdrop": [4, "show-backdrop"],
+            "backdropDismiss": [4, "backdrop-dismiss"],
+            "animated": [4],
+            "htmlAttributes": [16],
+            "isOpen": [4, "is-open"],
+            "trigger": [1],
+            "presented": [32],
+            "present": [64],
+            "dismiss": [64],
+            "onDidDismiss": [64],
+            "onWillDismiss": [64],
+            "getColumn": [64]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
 }
+const buttonWrapperClass = (button) => {
+    return {
+        [`picker-toolbar-${button.role}`]: button.role !== undefined,
+        'picker-toolbar-button': true,
+    };
+};
+const buttonClass$1 = (button) => {
+    return Object.assign({ 'picker-button': true, 'ion-activatable': true }, getClassMap(button.cssClass));
+};
 
 const pickerColumnCss = () => `:host{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{left:0;right:0;top:0;bottom:0;position:absolute;z-index:1;pointer-events:none}.assistive-focusable:focus{outline:none}.picker-opts{-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{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{display:none}::slotted(ion-picker-column-option){display:block;scroll-snap-align:center}.picker-item-empty,:host(:not([disabled])) ::slotted(ion-picker-column-option.option-disabled){scroll-snap-align:none}::slotted([slot=prefix]),::slotted([slot=suffix]){max-width:200px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::slotted([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]){-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{overflow-y:hidden}:host(.picker-column-disabled) ::slotted(ion-picker-column-option){cursor:default;opacity:0.4;pointer-events:none}@media (any-hover: hover){:host(:focus) .picker-opts{outline:none;background:rgba(var(--ion-color-base-rgb), 0.2)}}`;
 
@@ -28531,6 +28807,371 @@ class PickerColumn {
 }
 const PICKER_ITEM_ACTIVE_CLASS = 'option-active';
 
+const pickerColumnIosCss = () => `.picker-col{display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;height:100%;-webkit-box-sizing:content-box;box-sizing:content-box;contain:content}.picker-opts{position:relative;-ms-flex:1;flex:1;max-width:100%}.picker-opt{top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}.picker-opt{inset-inline-start:0}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{-ms-flex-pack:start;justify-content:flex-start}.picker-opts-right{-ms-flex-pack:end;justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;-ms-flex:1;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;-ms-flex:1;flex:1;text-align:start;white-space:nowrap}.picker-col{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:0;padding-bottom:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.picker-prefix,.picker-suffix,.picker-opts{top:77px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;color:inherit;font-size:20px;line-height:42px;pointer-events:none}.picker-opt{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-transform-origin:center center;transform-origin:center center;height:46px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:20px;line-height:42px;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:auto}:host-context([dir=rtl]) .picker-opt{-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}[dir=rtl] .picker-opt{-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}@supports selector(:dir(rtl)){.picker-opt:dir(rtl){-webkit-transform-origin:calc(100% - center) center;transform-origin:calc(100% - center) center}}`;
+
+const pickerColumnMdCss = () => `.picker-col{display:-ms-flexbox;display:flex;position:relative;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;height:100%;-webkit-box-sizing:content-box;box-sizing:content-box;contain:content}.picker-opts{position:relative;-ms-flex:1;flex:1;max-width:100%}.picker-opt{top:0;display:block;position:absolute;width:100%;border:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;contain:strict;overflow:hidden;will-change:transform}.picker-opt{inset-inline-start:0}.picker-opt.picker-opt-disabled{pointer-events:none}.picker-opt-disabled{opacity:0}.picker-opts-left{-ms-flex-pack:start;justify-content:flex-start}.picker-opts-right{-ms-flex-pack:end;justify-content:flex-end}.picker-opt:active,.picker-opt:focus{outline:none}.picker-prefix{position:relative;-ms-flex:1;flex:1;text-align:end;white-space:nowrap}.picker-suffix{position:relative;-ms-flex:1;flex:1;text-align:start;white-space:nowrap}.picker-col{-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px;padding-top:0;padding-bottom:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.picker-prefix,.picker-suffix,.picker-opts{top:77px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;color:inherit;font-size:22px;line-height:42px;pointer-events:none}.picker-opt{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;height:43px;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;background:transparent;color:inherit;font-size:22px;line-height:42px;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:auto}.picker-prefix,.picker-suffix,.picker-opt.picker-opt-selected{color:var(--ion-color-primary, #0054e9)}`;
+
+/**
+ * @internal
+ */
+class PickerColumnCmp {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.ionPickerColChange = createEvent(this, "ionPickerColChange", 7);
+        this.optHeight = 0;
+        this.rotateFactor = 0;
+        this.scaleFactor = 1;
+        this.velocity = 0;
+        this.y = 0;
+        this.noAnimate = true;
+        // `colDidChange` is a flag that gets set when the column is changed
+        // dynamically. When this flag is set, the column will refresh
+        // after the component re-renders to incorporate the new column data.
+        // This is necessary because `this.refresh` queries for the option elements,
+        // so it needs to wait for the latest elements to be available in the DOM.
+        // Ex: column is created with 3 options. User updates the column data
+        // to have 5 options. The column will still think it only has 3 options.
+        this.colDidChange = false;
+    }
+    colChanged() {
+        this.colDidChange = true;
+    }
+    async connectedCallback() {
+        let pickerRotateFactor = 0;
+        let pickerScaleFactor = 0.81;
+        const mode = getIonMode$1(this);
+        if (mode === 'ios') {
+            pickerRotateFactor = -0.46;
+            pickerScaleFactor = 1;
+        }
+        this.rotateFactor = pickerRotateFactor;
+        this.scaleFactor = pickerScaleFactor;
+        this.gesture = (await Promise.resolve().then(function () { return index; })).createGesture({
+            el: this.el,
+            gestureName: 'picker-swipe',
+            gesturePriority: 100,
+            threshold: 0,
+            passive: false,
+            onStart: (ev) => this.onStart(ev),
+            onMove: (ev) => this.onMove(ev),
+            onEnd: (ev) => this.onEnd(ev),
+        });
+        this.gesture.enable();
+        // Options have not been initialized yet
+        // Animation must be disabled through the `noAnimate` flag
+        // Otherwise, the options will render
+        // at the top of the column and transition down
+        this.tmrId = setTimeout(() => {
+            this.noAnimate = false;
+            // After initialization, `refresh()` will be called
+            // At this point, animation will be enabled. The options will
+            // animate as they are being selected.
+            this.refresh(true);
+        }, 250);
+    }
+    componentDidLoad() {
+        this.onDomChange();
+    }
+    componentDidUpdate() {
+        // Options may have changed since last update.
+        if (this.colDidChange) {
+            // Animation must be disabled through the `onDomChange` parameter.
+            // Otherwise, the recently added options will render
+            // at the top of the column and transition down
+            this.onDomChange(true, false);
+            this.colDidChange = false;
+        }
+    }
+    disconnectedCallback() {
+        if (this.rafId !== undefined)
+            cancelAnimationFrame(this.rafId);
+        if (this.tmrId)
+            clearTimeout(this.tmrId);
+        if (this.gesture) {
+            this.gesture.destroy();
+            this.gesture = undefined;
+        }
+    }
+    emitColChange() {
+        this.ionPickerColChange.emit(this.col);
+    }
+    setSelected(selectedIndex, duration) {
+        // if there is a selected index, then figure out it's y position
+        // if there isn't a selected index, then just use the top y position
+        const y = selectedIndex > -1 ? -(selectedIndex * this.optHeight) : 0;
+        this.velocity = 0;
+        // set what y position we're at
+        if (this.rafId !== undefined)
+            cancelAnimationFrame(this.rafId);
+        this.update(y, duration, true);
+        this.emitColChange();
+    }
+    update(y, duration, saveY) {
+        if (!this.optsEl) {
+            return;
+        }
+        // ensure we've got a good round number :)
+        let translateY = 0;
+        let translateZ = 0;
+        const { col, rotateFactor } = this;
+        const prevSelected = col.selectedIndex;
+        const selectedIndex = (col.selectedIndex = this.indexForY(-y));
+        const durationStr = duration === 0 ? '' : duration + 'ms';
+        const scaleStr = `scale(${this.scaleFactor})`;
+        const children = this.optsEl.children;
+        for (let i = 0; i < children.length; i++) {
+            const button = children[i];
+            const opt = col.options[i];
+            const optOffset = i * this.optHeight + y;
+            let transform = '';
+            if (rotateFactor !== 0) {
+                const rotateX = optOffset * rotateFactor;
+                if (Math.abs(rotateX) <= 90) {
+                    translateY = 0;
+                    translateZ = 90;
+                    transform = `rotateX(${rotateX}deg) `;
+                }
+                else {
+                    translateY = -9999;
+                }
+            }
+            else {
+                translateZ = 0;
+                translateY = optOffset;
+            }
+            const selected = selectedIndex === i;
+            transform += `translate3d(0px,${translateY}px,${translateZ}px) `;
+            if (this.scaleFactor !== 1 && !selected) {
+                transform += scaleStr;
+            }
+            // Update transition duration
+            if (this.noAnimate) {
+                opt.duration = 0;
+                button.style.transitionDuration = '';
+            }
+            else if (duration !== opt.duration) {
+                opt.duration = duration;
+                button.style.transitionDuration = durationStr;
+            }
+            // Update transform
+            if (transform !== opt.transform) {
+                opt.transform = transform;
+            }
+            button.style.transform = transform;
+            /**
+             * Ensure that the select column
+             * item has the selected class
+             */
+            opt.selected = selected;
+            if (selected) {
+                button.classList.add(PICKER_OPT_SELECTED);
+            }
+            else {
+                button.classList.remove(PICKER_OPT_SELECTED);
+            }
+        }
+        this.col.prevSelected = prevSelected;
+        if (saveY) {
+            this.y = y;
+        }
+        if (this.lastIndex !== selectedIndex) {
+            // have not set a last index yet
+            hapticSelectionChanged();
+            this.lastIndex = selectedIndex;
+        }
+    }
+    decelerate() {
+        if (this.velocity !== 0) {
+            // still decelerating
+            this.velocity *= DECELERATION_FRICTION;
+            // do not let it go slower than a velocity of 1
+            this.velocity = this.velocity > 0 ? Math.max(this.velocity, 1) : Math.min(this.velocity, -1);
+            let y = this.y + this.velocity;
+            if (y > this.minY) {
+                // whoops, it's trying to scroll up farther than the options we have!
+                y = this.minY;
+                this.velocity = 0;
+            }
+            else if (y < this.maxY) {
+                // gahh, it's trying to scroll down farther than we can!
+                y = this.maxY;
+                this.velocity = 0;
+            }
+            this.update(y, 0, true);
+            const notLockedIn = Math.round(y) % this.optHeight !== 0 || Math.abs(this.velocity) > 1;
+            if (notLockedIn) {
+                // isn't locked in yet, keep decelerating until it is
+                this.rafId = requestAnimationFrame(() => this.decelerate());
+            }
+            else {
+                this.velocity = 0;
+                this.emitColChange();
+                hapticSelectionEnd();
+            }
+        }
+        else if (this.y % this.optHeight !== 0) {
+            // needs to still get locked into a position so options line up
+            const currentPos = Math.abs(this.y % this.optHeight);
+            // create a velocity in the direction it needs to scroll
+            this.velocity = currentPos > this.optHeight / 2 ? 1 : -1;
+            this.decelerate();
+        }
+    }
+    indexForY(y) {
+        return Math.min(Math.max(Math.abs(Math.round(y / this.optHeight)), 0), this.col.options.length - 1);
+    }
+    onStart(detail) {
+        // We have to prevent default in order to block scrolling under the picker
+        // but we DO NOT have to stop propagation, since we still want
+        // some "click" events to capture
+        if (detail.event.cancelable) {
+            detail.event.preventDefault();
+        }
+        detail.event.stopPropagation();
+        hapticSelectionStart();
+        // reset everything
+        if (this.rafId !== undefined)
+            cancelAnimationFrame(this.rafId);
+        const options = this.col.options;
+        let minY = options.length - 1;
+        let maxY = 0;
+        for (let i = 0; i < options.length; i++) {
+            if (!options[i].disabled) {
+                minY = Math.min(minY, i);
+                maxY = Math.max(maxY, i);
+            }
+        }
+        this.minY = -(minY * this.optHeight);
+        this.maxY = -(maxY * this.optHeight);
+    }
+    onMove(detail) {
+        if (detail.event.cancelable) {
+            detail.event.preventDefault();
+        }
+        detail.event.stopPropagation();
+        // update the scroll position relative to pointer start position
+        let y = this.y + detail.deltaY;
+        if (y > this.minY) {
+            // scrolling up higher than scroll area
+            y = Math.pow(y, 0.8);
+            this.bounceFrom = y;
+        }
+        else if (y < this.maxY) {
+            // scrolling down below scroll area
+            y += Math.pow(this.maxY - y, 0.9);
+            this.bounceFrom = y;
+        }
+        else {
+            this.bounceFrom = 0;
+        }
+        this.update(y, 0, false);
+    }
+    onEnd(detail) {
+        if (this.bounceFrom > 0) {
+            // bounce back up
+            this.update(this.minY, 100, true);
+            this.emitColChange();
+            return;
+        }
+        else if (this.bounceFrom < 0) {
+            // bounce back down
+            this.update(this.maxY, 100, true);
+            this.emitColChange();
+            return;
+        }
+        this.velocity = clamp(-90, detail.velocityY * 23, MAX_PICKER_SPEED);
+        if (this.velocity === 0 && detail.deltaY === 0) {
+            const opt = detail.event.target.closest('.picker-opt');
+            if (opt === null || opt === void 0 ? void 0 : opt.hasAttribute('opt-index')) {
+                this.setSelected(parseInt(opt.getAttribute('opt-index'), 10), TRANSITION_DURATION);
+            }
+        }
+        else {
+            this.y += detail.deltaY;
+            if (Math.abs(detail.velocityY) < 0.05) {
+                const isScrollingUp = detail.deltaY > 0;
+                const optHeightFraction = (Math.abs(this.y) % this.optHeight) / this.optHeight;
+                if (isScrollingUp && optHeightFraction > 0.5) {
+                    this.velocity = Math.abs(this.velocity) * -1;
+                }
+                else if (!isScrollingUp && optHeightFraction <= 0.5) {
+                    this.velocity = Math.abs(this.velocity);
+                }
+            }
+            this.decelerate();
+        }
+    }
+    refresh(forceRefresh, animated) {
+        var _a;
+        let min = this.col.options.length - 1;
+        let max = 0;
+        const options = this.col.options;
+        for (let i = 0; i < options.length; i++) {
+            if (!options[i].disabled) {
+                min = Math.min(min, i);
+                max = Math.max(max, i);
+            }
+        }
+        /**
+         * Only update selected value if column has a
+         * velocity of 0. If it does not, then the
+         * column is animating might land on
+         * a value different than the value at
+         * selectedIndex
+         */
+        if (this.velocity !== 0) {
+            return;
+        }
+        const selectedIndex = clamp(min, (_a = this.col.selectedIndex) !== null && _a !== void 0 ? _a : 0, max);
+        if (this.col.prevSelected !== selectedIndex || forceRefresh) {
+            const y = selectedIndex * this.optHeight * -1;
+            const duration = animated ? TRANSITION_DURATION : 0;
+            this.velocity = 0;
+            this.update(y, duration, true);
+        }
+    }
+    onDomChange(forceRefresh, animated) {
+        const colEl = this.optsEl;
+        if (colEl) {
+            // DOM READ
+            // We perfom a DOM read over a rendered item, this needs to happen after the first render or after the column has changed
+            this.optHeight = colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0;
+        }
+        this.refresh(forceRefresh, animated);
+    }
+    render() {
+        const col = this.col;
+        const mode = getIonMode$1(this);
+        return (hAsync(Host, { key: '86125e95f18837dfd021db01777d72a1562d8ee3', 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: 'b0f3d39e0bd128781066ffefb7a1e40d12a9e76d', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), hAsync("div", { key: '0b106ac4d56916eaaa7f09d1b68348b3754b7bba', 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: '00ff2f9dbb4561787e5a5223327c6a2a33f8362e', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "col": [{
+                "colChanged": 0
+            }]
+    }; }
+    static get style() { return {
+        ios: pickerColumnIosCss(),
+        md: pickerColumnMdCss()
+    }; }
+    static get cmpMeta() { return {
+        "$flags$": 32,
+        "$tagName$": "ion-picker-legacy-column",
+        "$members$": {
+            "col": [16]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+const PICKER_OPT_SELECTED = 'picker-opt-selected';
+const DECELERATION_FRICTION = 0.97;
+const MAX_PICKER_SPEED = 90;
+const TRANSITION_DURATION = 150;
+
 const pickerColumnOptionIosCss = () => `.picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;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;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}`;
 
 const pickerColumnOptionMdCss = () => `.picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;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;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}:host(.option-active){color:var(--ion-color-base)}`;
@@ -29952,10 +30593,6 @@ class Popover {
             this.headerResizeObserver.disconnect();
             this.headerResizeObserver = undefined;
         }
-        // Clean up aria-hidden if removed without dismiss() being called
-        if (this.presented) {
-            cleanupRootFocusTrapAccessibility();
-        }
     }
     componentWillLoad() {
         var _a, _b;
@@ -30194,9 +30831,9 @@ class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (hAsync(Host, Object.assign({ key: 'd7f3aa2c2fa93a93585e3eda9e4a6d0daaa541be', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '2edd8333c630efbce59071f8a383e4326e928dbc', "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, [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: 'b87be2ef14219997b9c47dcbaf904eb770d0e057', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: 'e6243572faf1b871ae2b34923410b2a6638469f0', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '3d4938c9d0764a644398e0e7a4361106da1bd926', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '24ad6d777828aad2881d56595693e6022fc9cb8e', class: "popover-content", part: "content" }, hAsync("slot", { key: '79f83df74a5c5e3dd7650f15c1aa50795b90a345' })))));
+            }, 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: 'aac4e68b08197534375e8ea3f8c9ea0c10ab2af4', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: 'b7f4ebf57d4148b32856b0075d286f454be8de5d', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '607d94c28d73e8e957175a7c0f6e8a99ec4dcd53', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '4366a5a5de550c09895e923f345583508e1ec30c', class: "popover-content", part: "content" }, hAsync("slot", { key: 'eb7886fbc99c15b667b7d825d24f1c12d9380f03' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -30307,7 +30944,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: 'd7476268ce53b6a4f425b7bc9f01d6935eb411c3', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'c859e48f3d24a458239e36d925e5dc003ed07c6b', 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,
@@ -30492,7 +31129,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: 'd9425b252ed38086420d91d5c680421d121c99f4', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'af5dc59ed528150872e907ed1036e3e2decba939', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -30503,10 +31140,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: 'de391fca2aa0b681af5c1d089121596c46e68271', class: "radio-wrapper" }, hAsync("div", { key: '44e4c71645f86a9e73ad58c0e8b41c0558b920f6', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, hAsync("label", { key: '1312aba3259a87fe23a6911cdfa477e309469c8b', class: "radio-wrapper" }, hAsync("div", { key: 'b342aa27e240a300836d2a135658d346b95daf09', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, hAsync("slot", { key: '589d7c1b45a1918b5811663daa8f30788e7729f8' })), hAsync("div", { key: '0f61a17b195582d6c9a0c597cd40e6629256e479', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, hAsync("slot", { key: '0a4613d29aa783d1882cf889377f7e4fd4fea51d' })), hAsync("div", { key: '191faea79dc4cd8befc4b873f5bd9f5af8ca2acc', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -30525,7 +31162,7 @@ class Radio {
             "color": [513],
             "name": [1],
             "disabled": [4],
-            "value": [520],
+            "value": [8],
             "labelPlacement": [1, "label-placement"],
             "justify": [1],
             "alignment": [1],
@@ -30536,7 +31173,7 @@ class Radio {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["color", "color"], ["value", "value"]]
+        "$attrsToReflect$": [["color", "color"]]
     }; }
 }
 let radioButtonIds = 0;
@@ -31601,7 +32238,7 @@ class Range {
         const valueAtMin = dualKnobs ? this.valA === min || this.valB === min : this.valA === min;
         const valueAtMax = dualKnobs ? this.valA === max || this.valB === max : this.valA === max;
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (hAsync(Host, { key: 'cd26f0187c0d37c7eb9df923f75c8a0f57c19ab6', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'f8063d1234fb113fe55a7902845dd4b4da8b1edb', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -31615,10 +32252,10 @@ class Range {
                 'range-item-end-adjustment': needsEndAdjustment,
                 'range-value-min': valueAtMin,
                 'range-value-max': valueAtMax,
-            }) }, hAsync("label", { key: '90224fd24b0e625a17e7972feff73a0ac31e093d', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: 'e07b9fa10983249c425eec26b741f0f628daf2b2', class: {
+            }) }, hAsync("label", { key: 'beead65ab01e3b18e4be59c0ee8ac6ebf32aad7c', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: '03633c689d9d2e4c50a2131bcd560329df49e314', 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: '9e252f1190838fbae46e724bf665f9b1943600a4', class: "native-wrapper" }, hAsync("slot", { key: '950697dd9636da340de659812daa91fff50e5345', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: 'd3fce46b29db275af71e6149e725967839ec12b0', name: "end" })))));
+            }, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { key: 'c066804263ab6ae7393f8dcc51184b7198844ffa', class: "native-wrapper" }, hAsync("slot", { key: '7e8ea224d72b3e965dd948bee7e45c1a096b6899', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: '21f242f6f60ff3adce6a2d90b2d4dac1ceaf6624', name: "end" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -32689,7 +33326,7 @@ class Refresher {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '1dd475095f76491206644828cf89fc6d2ec276d1', slot: "fixed", class: {
+        return (hAsync(Host, { key: '80fa313b0d77161680836bdd6aa334d02c549b41', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,
@@ -32915,7 +33552,7 @@ class RefresherContent {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'ec378d6a302be697c12c4f973a57c6ad2ada070f', class: mode }, hAsync("div", { key: '0055f98f8c5a1ed7979dc8146ec1f82a575860c7', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (hAsync("div", { key: '4f88468e26370df6889e72aa54ebb395ebf3757d', class: "refresher-pulling-icon" }, hAsync("div", { key: '05b3f8679576aaa6c2d84d60df6629a392df29e2', class: "spinner-arrow-container" }, hAsync("ion-spinner", { key: '0bf6ceea416ce1140c0f10a5bede063cae7054f4', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (hAsync("div", { key: 'b71ede8455837968218edae28504e5e14bbc1f5c', class: "arrow-container" }, hAsync("ion-icon", { key: '30b808288d23d3eac681b1225cd8392fdacfefe1', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (hAsync("div", { key: 'fee1ae7e57ef8a02f5654808dff9dca3002b6702', class: "refresher-pulling-icon" }, hAsync("ion-icon", { key: '55b34a98028adb497fbc2ac66bdb3d5ae5b1705b', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), hAsync("div", { key: 'ef8f987daa8060cb6f8fd83c0864095042b9eecf', class: "refresher-refreshing" }, this.refreshingSpinner && (hAsync("div", { key: 'cd6fe0e81b34eeae11478fcc8a42044bff6f7a52', class: "refresher-refreshing-icon" }, hAsync("ion-spinner", { key: '9cd778229582b538d54589c4d8e4d470efb64aad', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        return (hAsync(Host, { key: '4add42b9fdfded359d1b054d04c2c6ff48e028c8', class: mode }, hAsync("div", { key: '45d4e4e0adfed7f96dd1849767aa2cde947de044', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (hAsync("div", { key: '6bd6c8ef5bf6e10699eec3bd8646431bfe1077a0', class: "refresher-pulling-icon" }, hAsync("div", { key: '852d20414da53352c8e58bc627e0fda38eff97cb', class: "spinner-arrow-container" }, hAsync("ion-spinner", { key: '0dde3578a80cc4b77a07c4d1db1af80c7eb10c27', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (hAsync("div", { key: 'c71dbfcf416a19c30fed38f722ebf0358c2181dd', class: "arrow-container" }, hAsync("ion-icon", { key: 'fa7c2cf624e7a9c41964e66cabc88c594da6d1fd', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (hAsync("div", { key: '3dd68c9968b421c379d1c4349ba619ee0a189c6d', class: "refresher-pulling-icon" }, hAsync("ion-icon", { key: 'f83bceceae4fa8245f91939fb6db589a595e975b', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), hAsync("div", { key: '98e22ceb0f7883e871f815f6199f5cb313e2e086', class: "refresher-refreshing" }, this.refreshingSpinner && (hAsync("div", { key: 'faabe8a9b61c02a00994ef978bb82b9ba4537214', class: "refresher-refreshing-icon" }, hAsync("ion-spinner", { key: '029a0c073ee1a07f01211e12ba2abc985cf21ed7', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -32956,7 +33593,7 @@ class Reorder {
     render() {
         const mode = getIonMode$1(this);
         const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
-        return (hAsync(Host, { key: '4d35db30b5b3df2020d2212abb3cfac94f9bc2b8', class: mode }, hAsync("slot", { key: '68a565ae4a47f6a9f5d6ba845b596fdfa629ece8' }, hAsync("ion-icon", { key: '168fb0f8eb9c02329274488900fcdb05d44cb895', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        return (hAsync(Host, { key: 'b869db61ca6393cf1476f2111a66b387b567c6d1', class: mode }, hAsync("slot", { key: 'a78edd1776835282b8b5c841377018f36c83296c' }, hAsync("ion-icon", { key: '7fb067c47bbb9a7258e5063f028282cc097d0f94', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -33227,7 +33864,7 @@ class ReorderGroup {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '3afdc6a6c81bba2f88ea523d4b73c6fccff1b9ec', class: {
+        return (hAsync(Host, { key: '9527bbdedaab63d31f562c874a7332ea60c4b47b', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
@@ -33345,7 +33982,7 @@ class RippleEffect {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '5e88b5225414e29883256c86f111ded5bdf2ef91', role: "presentation", class: {
+        return (hAsync(Host, { key: '3b59cbb44741569a7350f9638b4392add673b6f1', role: "presentation", class: {
                 [mode]: true,
                 unbounded: this.unbounded,
             } }));
@@ -34314,10 +34951,10 @@ class RouterLink {
             rel: this.rel,
             target: this.target,
         };
-        return (hAsync(Host, { key: '6d5fdfa0dcf1eb216173bcc53f1f4d625f3ec551', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '8372835161d507c7b821b7536c55f912eb6ce704', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, hAsync("a", Object.assign({ key: '85796b7b48581fe9830ba1102dad7d1069de4e17' }, attrs), hAsync("slot", { key: '0f93b0da3ec4ae8f50f624f9e7bed87d13d712d0' }))));
+            }) }, hAsync("a", Object.assign({ key: '315966e14a17760f3f64197e8315200039787897' }, attrs), hAsync("slot", { key: '95fc1697b884225e85e647dddcaa8f4af8b9a979' }))));
     }
     static get style() { return routerLinkCss(); }
     static get cmpMeta() { return {
@@ -34356,11 +34993,10 @@ class RouterOutlet {
          */
         this.animated = true;
     }
-    swipeGestureChanged() {
-        this.updateGestureEnabled();
-    }
     swipeHandlerChanged() {
-        this.updateGestureEnabled();
+        if (this.gesture) {
+            this.gesture.enable(this.swipeHandler !== undefined);
+        }
     }
     async connectedCallback() {
         const onStart = () => {
@@ -34400,21 +35036,11 @@ class RouterOutlet {
                 this.gestureOrAnimationInProgress = false;
             }
         });
-        if (this.swipeGesture === undefined) {
-            this.swipeGesture = config.getBoolean('swipeBackEnabled', this.mode === 'ios');
-        }
-        else {
-            this.updateGestureEnabled();
-        }
+        this.swipeHandlerChanged();
     }
     componentWillLoad() {
         this.ionNavWillLoad.emit();
     }
-    updateGestureEnabled() {
-        if (this.gesture) {
-            this.gesture.enable(this.swipeHandler !== undefined && this.swipeGesture === true);
-        }
-    }
     disconnectedCallback() {
         if (this.gesture) {
             this.gesture.destroy();
@@ -34525,13 +35151,10 @@ class RouterOutlet {
         return true;
     }
     render() {
-        return hAsync("slot", { key: 'ce09e6fbba7b0a2276cdde5245bb37c9a162c1c7' });
+        return hAsync("slot", { key: '386c41745b61daba161cf75063da97fe29ba36cb' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "swipeGesture": [{
-                "swipeGestureChanged": 0
-            }],
         "swipeHandler": [{
                 "swipeHandlerChanged": 0
             }]
@@ -34545,7 +35168,6 @@ class RouterOutlet {
             "delegate": [16],
             "animated": [4],
             "animation": [16],
-            "swipeGesture": [1028, "swipe-gesture"],
             "swipeHandler": [16],
             "commit": [64],
             "setRouteId": [64],
@@ -34564,7 +35186,7 @@ class Row {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: 'a9066661fff12baaf3e80b2e8c08591af72fe5b8', class: getIonMode$1(this) }, hAsync("slot", { key: '62b103af46d3a5ec9c146019ae300b68a4ae867a' })));
+        return (hAsync(Host, { key: '8ba906a8cbea060a79ed658c9bf34906f0c11d38', class: getIonMode$1(this) }, hAsync("slot", { key: 'd1009176f45b588fa52c7d9eb336f3c6d3214bb8' })));
     }
     static get style() { return rowCss(); }
     static get cmpMeta() { return {
@@ -35016,8 +35638,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: '7b4d126a3a3b44dc8695695afb058ccae482d4b1', "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: '8a23082889ecef13bb5997d914d7dcdf3dc5a480', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (hAsync(Host, { key: 'ce0a2cebb0c2af3b351cb2d4699e3e4dbb8c3ee2', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '9e9f3a7f6ee66140181f8c3cfa42bbeee75adafc', "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: '5f83fbcc0708830637815e8c0b69356cad381870', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (hAsync(Host, { key: '219c263c1f3cc63e18bc2d2ba5d672b7806eddd0', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -35027,14 +35649,14 @@ class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, hAsync("div", { key: 'c4d734548345de9cb052269b19359720f50ed7e5', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: '849faa302b37b73345847ea7db401d3cc2a00404', "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: '1d24d7901b61bb982eb9e2af396f53ac20f41a92', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: 'd5af1c9c54785f99f5dd3193e30684896783cde8', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, hAsync("div", { key: '3f1c25442d6d87c0df67f79482a925b80dcc403d', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: 'a386fecafda0fab449ea1488906ba6cfc55e2b5c', "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: '5f81642628335def39a14f0726e0fafdc7203776', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: 'da3073646f2d7f639261b556517fbadabc3c10e9', "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: 'cc9c8781b22faf80a95550f99670626d2626b7f9', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: '065cd6c707ae462c0767df1bab04ce8045f340a4', "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 {
@@ -35639,14 +36261,14 @@ class Segment {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '3fd965c1483046cba38420dc6787f5b9cadec5ca', role: "tablist", onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '725cc37b25c539fa5e3ae8d90530ae33ededc3de', 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: '56b2961719d8a8afba0f21b47d0785a7f896b34b', onSlotchange: this.onSlottedItemsChange })));
+            }) }, hAsync("slot", { key: 'c51cf7ea50325866a9367d214e12bc3754870335', onSlotchange: this.onSlottedItemsChange })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -35794,7 +36416,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: '792f621c36260b1fceff2b4ec4fa95d98d51d46b', class: {
+        return (hAsync(Host, { key: 'f69e2a24198a7c57543dbe66902da039a6569c64', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -35810,7 +36432,7 @@ class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, hAsync("button", Object.assign({ key: '860698be6ceb8f08c0ce3d16ba82d4bb56adf030', "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: 'e903a2642ff46797878a941887b5c596d52fd3a3', class: "button-inner" }, hAsync("slot", { key: '5fc6b842ecb7f0ab8df23b344bf6714f38dda89a' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '710aaf6e4fa2b6cb15897a883e88dec17ef3829f' })), hAsync("div", { key: 'a7b036cba32420e9eb3f2d16487df0519ecc5289', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, hAsync("div", { key: 'a0a5f49ea7f2ecab8014f4f9ca473a27db8348b6', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, hAsync("button", Object.assign({ key: '0a6fea3a374074af19f7ece0ba3a7cf1e269ab6d', "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: '991018a38c59a6f3d76b2e952e5569c874d2c13e', class: "button-inner" }, hAsync("slot", { key: '23c547c80108025027b913c7fcbec189286627a3' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '7faa9d06ab6aa7346d16b0b6808979759a79650c' })), hAsync("div", { key: '0d61badf2c227dc38e20185b2b2bb590a5efa434', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, hAsync("div", { key: 'a84035752b78491c344179d1e61d109fb4bd1cf1', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -35847,7 +36469,7 @@ class SegmentContent {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: 'ef39f29c444177c3b083cd35680ba891e4bb6a2a' }, hAsync("slot", { key: '51f9dd9ca084ddd928b376aa9d716509669c32b2' })));
+        return (hAsync(Host, { key: '665f41a854621f898eaf7ba9a49e77cc9326501e' }, hAsync("slot", { key: '635aa57fbf6167dcd36fe8dc5dfc1c313637ac04' })));
     }
     static get style() { return segmentContentCss(); }
     static get cmpMeta() { return {
@@ -35966,11 +36588,11 @@ class SegmentView {
     }
     render() {
         const { disabled, isManualScroll, swipeGesture } = this;
-        return (hAsync(Host, { key: 'a6c6ac0232c4bb6f2a954b3de7993019d71f423a', class: {
+        return (hAsync(Host, { key: '2a6e0a1046af75b1fa0eed20a5fbbb4634480297', class: {
                 'segment-view-disabled': disabled,
                 'segment-view-scroll-disabled': isManualScroll === false,
                 'segment-view-swipe-disabled': swipeGesture === false,
-            } }, hAsync("slot", { key: '386305be2a75069c79def12005d9f6b49276763f' })));
+            } }, hAsync("slot", { key: '644b60d179d0de3fa204e3bef26a3503ceeaf1d6' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -36742,7 +37364,7 @@ class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (hAsync(Host, { key: 'ee7f8da9cbd2922f23e7b7984c418f79e6d491d6', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '5f4ee901b65554eacc9fa52230d06b1a5ff1247c', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -36760,7 +37382,7 @@ class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, hAsync("label", { key: '1841d570664579a8adbb1426474d906c9583c866', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), hAsync("div", { key: '658a9003d9f142b53b5834cb058b250d96e633d7', class: "select-wrapper-inner", part: "inner" }, hAsync("slot", { key: '86a83eac51070ae2ba7291d7be346807ff5dc93f', name: "start" }), hAsync("div", { key: '5bb6f5f5df8c75ef84056f929298f215eeaefb19', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '4691dc89bdb257c36418619fa6d107d55012a492', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: '991af5d72a83721d48ce51dfb84c62b00a8250fc', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, hAsync("label", { key: 'd56d89b5b58da2b5eaebada9d1be58ca45c67806', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, this.renderLabelContainer(), hAsync("div", { key: 'bc8bf089c693781ad5b3a5db76a12223867d748e', class: "select-wrapper-inner", part: "inner" }, hAsync("slot", { key: 'e1c12b96f1573eb192608c458ed1f3463174cd89', name: "start" }), hAsync("div", { key: '6ee5e3900d8e462f175649b502ac6faa2f2b9909', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: 'faeaea34aad412e1458beab95d4b1b9ca7b87c41', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: 'aeff51e51c990844869eff9940575ce6b2223135', class: "select-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -36944,7 +37566,7 @@ class SelectModal {
             } }, option.text))));
     }
     render() {
-        return (hAsync(Host, { key: '36fe925fe98356858630325abc9ab71ef25dfb46', class: getIonMode$1(this) }, hAsync("ion-header", { key: '16d89db1284d7080b4ead5f4a4a0bac57f264f62' }, hAsync("ion-toolbar", { key: 'e16c889d9c7b5edf3b26a7cca1443ec5520e69e0' }, this.header !== undefined && hAsync("ion-title", { key: '269df2e45a3abf3fe7518e8a34b0bab749bdea14' }, this.header), hAsync("ion-buttons", { key: 'd8e218821e085424e52f86ef6ede2c5fb568dc82', slot: "end" }, hAsync("ion-button", { key: '26c99660d4f5ec6334da56ad5712bfc79f80d0e2', onClick: () => this.closeModal() }, this.cancelText)))), hAsync("ion-content", { key: '455fb684edae7d6754ef4882c1221956f7b4d29b' }, hAsync("ion-list", { key: '3817a9deb1881a8c0d165b21940890bd628b3614' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+        return (hAsync(Host, { key: 'fda0bf6f93cd5ec9f3c64f88a52de849e0e140a2', class: getIonMode$1(this) }, hAsync("ion-header", { key: '27c0b17175a53db9ff159feeeb96451a3f011dab' }, hAsync("ion-toolbar", { key: '91a4155ebc317fbc9f1bb3e26a7e94754b953c9b' }, this.header !== undefined && hAsync("ion-title", { key: 'f6dae8e4e381f322cc90efefd9bb6ef81d4d2f3e' }, this.header), hAsync("ion-buttons", { key: 'e7760532fb2e7e7385ed6e62097d92d96ff20148', slot: "end" }, hAsync("ion-button", { key: '4999b6fc46cba138186546dca67b7950855e6fb7', onClick: () => this.closeModal() }, this.cancelText)))), hAsync("ion-content", { key: 'c73f80a4bc25b9061ea65cf11e5d811c1a4d8704' }, hAsync("ion-list", { key: 'b21905d15b36ad5eb45845e768918d2763cf48b1' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -36979,7 +37601,7 @@ class SelectOption {
         this.disabled = false;
     }
     render() {
-        return hAsync(Host, { key: '1fc1737fbb29dcb62638149b21620cbdf2f00dbc', role: "option", id: this.inputId, class: getIonMode$1(this) });
+        return hAsync(Host, { key: '824730b6c1e4f15b716e91b05840e890af5f1577', role: "option", id: this.inputId, class: getIonMode$1(this) });
     }
     get el() { return getElement(this); }
     static get style() { return selectOptionCss(); }
@@ -37107,7 +37729,7 @@ class SelectPopover {
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (hAsync(Host, { key: '81783ad099ad52b3e035efa18e5a23be766faf7b', class: getIonMode$1(this) }, hAsync("ion-list", { key: '319171787e9c2228d1d5a0133b2f5e0998644516' }, header !== undefined && hAsync("ion-list-header", { key: '09a0fdbe2807c270b9abdb908965f72c4838030c' }, header), hasSubHeaderOrMessage && (hAsync("ion-item", { key: 'ede19cb8e121fd14a2335fcb81cc59b9a102eac5' }, hAsync("ion-label", { key: '6b98c0f132bc6161299b22c0e56092f85b7b0095', class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", { key: '8053e175eb36d7b8f52df1f93cee48ee0794857e' }, subHeader), message !== undefined && hAsync("p", { key: '508673abcda7444ed8f8c828b5418dd48ef86b8e' }, message)))), this.renderOptions(options))));
+        return (hAsync(Host, { key: 'e7449a1ecfcdbf45a79f8e26a00253c4e146448a', class: getIonMode$1(this) }, hAsync("ion-list", { key: '52abdfc8668c3429a0dcefef8ddedb6647fdd894' }, header !== undefined && hAsync("ion-list-header", { key: '978e5c03728756feafcc60a0e10e6ec59bf2ae11' }, header), hasSubHeaderOrMessage && (hAsync("ion-item", { key: 'e93c44e7f07a76def16e4b11f0fb4780d84ed402' }, hAsync("ion-label", { key: 'bba1aac43b0bc7f4f00978dd8301985233f3725c', class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", { key: 'ad96f6017cf2cc5219540bded2c4f1ca3b532de2' }, subHeader), message !== undefined && hAsync("p", { key: '3fd038921dc40c4d0c29734433984b279ccaeec3' }, message)))), this.renderOptions(options))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -37157,11 +37779,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: '887d958d982345ce610730ab5c9ae35010430f75', class: {
+        return (hAsync(Host, { key: 'cb8da9aba121811b9a4ffdae60ed88105897cb3c', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, hAsync("span", { key: 'a184f4b9780a2aada0a16729109ac81436e9c9e1' }, "\u00A0")));
+            } }, hAsync("span", { key: '5379deee3c76d46d615be0cba14b4f60129ffa25' }, "\u00A0")));
     }
     get el() { return getElement(this); }
     static get style() { return skeletonTextCss(); }
@@ -37213,7 +37835,7 @@ class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (hAsync(Host, { key: 'c35ebd01186e860acb9cac260193f0836424fdf4', class: createColorClasses$1(self.color, {
+        return (hAsync(Host, { key: 'dd1954e557fa14b943e761474e29e4316ba53938', class: createColorClasses$1(self.color, {
                 [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),
@@ -37312,12 +37934,12 @@ class SplitPane {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '694e989fafcfe2453e0a83b3cb736efaa1eb4fec', class: {
+        return (hAsync(Host, { key: '05c88c009fbe2e223fd261760a2b49da1653ff62', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, hAsync("slot", { key: 'dde7e9382b62cc11971aa233cf98c2314ae4f720' })));
+            } }, hAsync("slot", { key: 'b35865082661253c4468520d79234fa5dab5bd35' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -37389,10 +38011,10 @@ class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (hAsync(Host, { key: '745262368a7f45244da459f4fa1730a46dd3e257', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (hAsync(Host, { key: 'fbd837bad7a0632336d46a597ace23673b153e48', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, hAsync("slot", { key: '823d09a6f93bf7c0dc74f2b8717d1d3a62df1ad8' })));
+            } }, hAsync("slot", { key: '35c218169fda826c9c1337558e0278d0c7f5f26a' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -37506,11 +38128,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: '148f65df0818e9d220a9b46db74cb89ab94e62d2', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '24e164eaf81a0bec9237b561465618f10990806c', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, hAsync("slot", { key: 'a64e235f3703662e2dd7a834f752cc5b1490adbc' })));
+            }) }, hAsync("slot", { key: '0ca29a2d97a7c38bbf43f8d79e271b874b4d9be8' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -37608,7 +38230,7 @@ class TabButton {
             rel,
             target,
         };
-        return (hAsync(Host, { key: '1034b5a928ecec49bd8efec3730ea1b11a579cf3', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (hAsync(Host, { key: '638b93ef40701ec3aefb89b1579eb91aaf6d4f8a', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [mode]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -37620,7 +38242,7 @@ class TabButton {
                 'ion-activatable': true,
                 'ion-selectable': true,
                 'ion-focusable': true,
-            } }, hAsync("a", Object.assign({ key: '4cc8e695425956ffc7622af27c1b88a45f8a0c68' }, 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: 'c529c166f557e1a5c744873c075b564c49786a2c', class: "button-inner" }, hAsync("slot", { key: 'f832355934d80267cd6e81e58b9c5afce0b42907' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '90e79bdf38ba1cd89fca9ce63465e26a29b49316', type: "unbounded" }))));
+            } }, hAsync("a", Object.assign({ key: 'c053d32fbcdad8d5e4a409956b47164d7a080c6b' }, 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: 'b3b460d33ec978a46b069442280d31b23bc8e794', class: "button-inner" }, hAsync("slot", { key: '87b3928475c941263261101b8fae27c6370d4671' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '6532e5b4546aebe4becaebe1c93ce0e6aedaffe7', type: "unbounded" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -37811,7 +38433,7 @@ class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (hAsync(Host, { key: 'ba04a29fdd02d7c758cbaa98cfc589949872d832', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: 'd5794140152e2c251e567eeb06afc392af74749d', name: "top" }), hAsync("div", { key: '26fb83786637fe7288901fbbdb3694b8bc94329f', class: "tabs-inner" }, hAsync("slot", { key: '60c663a8647e684455b533eaf5fa3908f9333ae9' })), hAsync("slot", { key: '2d9f7d07c8cdc72f5df200fa71fa56a9dd822c4c', name: "bottom" })));
+        return (hAsync(Host, { key: 'c7131135b31aa312dc0207602561e1c0f4ac3e53', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: '6c46e91c0389bbcea1f15f35cf3ea513a74ac545', name: "top" }), hAsync("div", { key: '4f1b649d8bb60b61402b97359de204979c5eda52', class: "tabs-inner" }, hAsync("slot", { key: '8d1ef4952be4fb33567376e1083ea4da697fcae0' })), hAsync("slot", { key: '260b8da8031494e9cb4635b3d22c49a433042db1', name: "bottom" })));
     }
     get el() { return getElement(this); }
     static get style() { return tabsCss(); }
@@ -37851,9 +38473,9 @@ class Text {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '41ed8da617ed0e07bbfe96e32a000e1c6503e24e', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'bfaa49d35f43b8036725ae8a322c716fc6e43bdf', class: createColorClasses$1(this.color, {
                 [mode]: true,
-            }) }, hAsync("slot", { key: 'db8de04a2493537b3037f276b03abd92dfa56847' })));
+            }) }, hAsync("slot", { key: 'c04880cd1935b42cbe60f58fd523b4d8a96072dc' })));
     }
     static get style() { return textCss(); }
     static get cmpMeta() { return {
@@ -38314,7 +38936,7 @@ class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (hAsync(Host, { key: 'eca1dfed53189408f614661ef3902cdb73d5f5de', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '4257e84acd46f43390fa2413d0b8f40e16a37499', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -38323,7 +38945,7 @@ class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, hAsync("label", { key: 'd4d835ffedbf8b6de192096e21167ec4f7e01d30', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: '39b03e26c23473de31a0237543eaf1e0875e6ed9', class: "textarea-wrapper-inner" }, hAsync("div", { key: 'e9e0997e7dc6d25f09e8439d81e138590c33a151', class: "start-slot-wrapper" }, hAsync("slot", { key: '2d88aace11d74196758e40af27a777eebb270019', name: "start" })), hAsync("div", { key: '8434424404f9fe707f9209ac6495a33bae060538', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, hAsync("textarea", Object.assign({ key: '5bb8eaeba76c39bccadb7c041a10fb077c422dcc', 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, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), hAsync("div", { key: '107707676552f8faca3e708285cc3266061a0394', class: "end-slot-wrapper" }, hAsync("slot", { key: 'dc890ffdce898f3d39a315e7bc432840559be466', name: "end" }))), shouldRenderHighlight && hAsync("div", { key: '4554ad09ac0908cea2e90bfa2301b4cd80ac7242', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, hAsync("label", { key: '003da35bad92ab36777b7ae40855541bf900c64a', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: '3cae2d19f96ba2b18a2d64298fdcc4b64ad34ac7', class: "textarea-wrapper-inner" }, hAsync("div", { key: 'e26cb06763d551f7f83b6ea80349871aab18a016', class: "start-slot-wrapper" }, hAsync("slot", { key: '135ba6db893eaca5f2a785fe61e24f33f56f3765', name: "start" })), hAsync("div", { key: '951eabdd01c5e370790cec8578268361dcc8abdc', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, hAsync("textarea", Object.assign({ key: '13d78f1a934b9f8d85cd9ed386dabc786f953f1d', 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, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), hAsync("div", { key: '699038558019470bccb4853fa65e7aeb069e0baa', class: "end-slot-wrapper" }, hAsync("slot", { key: '19d8c212d7c718aeb6924e10bf8e48cad01314ea', name: "end" }))), shouldRenderHighlight && hAsync("div", { key: '910a9437437ce7cab21e37a1cb4a6b309afda58f', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -38392,7 +39014,7 @@ class Thumbnail {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '833e947c683b482a78f8f0df8c9a68e99478bbaa', class: getIonMode$1(this) }, hAsync("slot", { key: '6d1e9e686db88d91379f14121058dbf035d8ded2' })));
+        return (hAsync(Host, { key: 'b250e01664238f1dca8f9757b15bc3d5d9387ffa', class: getIonMode$1(this) }, hAsync("slot", { key: '72cb568bccabc983c5186a7596ef6c6d4ebf5ad9' })));
     }
     static get style() { return thumbnailCss(); }
     static get cmpMeta() { return {
@@ -39252,9 +39874,9 @@ class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('[ion-toast] - 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: '2acb2cd2e12ea0082986495929e4a596d4da2f38', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'b5256edcf33d0ef51e6c5080c84e1ca58abe2ae0', 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: '8b24ba5d3d51d1ab94b9bf6bb5d6e4b8bb3248a7', class: wrapperClass, part: "wrapper" }, hAsync("div", { key: 'e1ebdf4f0425cc7b1e2688667ee9a2b3c545804a', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: '552b1ab8f4e72882cc8e878579c7a594119677e1', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: '8ac8d64f632fbedadb180132c83043474466bee0', class: "toast-content", part: "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: '0860f7e895d8bc66e44c4d924ca569f4cbb1a749', class: wrapperClass, part: "wrapper" }, hAsync("div", { key: '28784199c880a3f664677c8f5560b7caa8903251', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: '0a63ba1336ad43d2aec14e49055eb46c112359c2', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: 'ecec8107af582dc55d4b3828dd7f3054a29f26b1', class: "toast-content", part: "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 {
@@ -39572,7 +40194,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: 'ab093ddb505af61685cbb8571af1e765fc0292f8', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '736e1dcfca34fd41f6f0632652e7f86d6996a232', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses$1(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -39582,10 +40204,10 @@ class Toggle {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, hAsync("label", { key: 'b4b05e458fcbc767e4392ae43e647b075780cad0', class: "toggle-wrapper", htmlFor: inputId }, hAsync("input", Object.assign({ key: 'c09100447011c51d5b49b4400ec7d72012e3bc6f', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), hAsync("div", { key: '71cf059a999ae572a20127b76907e010ace486ad', class: {
+            }) }, hAsync("label", { key: 'e697739fd3964c1c6c23331cf7e38a9841c46a6a', class: "toggle-wrapper", htmlFor: inputId }, hAsync("input", Object.assign({ key: '3d500b8c1bc879591249d183c1abb3f5f26aff6b', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), hAsync("div", { key: 'e38f3fe0e66b4ca434fd81514f5ef771c2960841', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: 'c480b96a0ddd926568f73291d71253d6f74438c7' }), this.renderHintText()), hAsync("div", { key: '96a2cbd1673e051a78f8b2b16535ecd3f0ed4339', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '006dd3558264d69ab020c07005b348adc4ecdd5b' }), this.renderHintText()), hAsync("div", { key: 'dd4e52de31caabee41ec1bc58efecd1e213368c9', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -39697,10 +40319,10 @@ class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (hAsync(Host, { key: '40bad6fa7e94262438da4bbe037dcf8a5fa2df22', class: Object.assign(Object.assign({}, childStyles), createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'b849db2863778dee6c5a251bffa1b3a657aeb036', class: Object.assign(Object.assign({}, childStyles), createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, hAsync("div", { key: 'df44c9f0fe3958116ab860b0dad79c53b89f6c59', class: "toolbar-background", part: "background" }), hAsync("div", { key: '2169ffa576875b8d5624211cc0b4bf86191562bc', class: "toolbar-container", part: "container" }, hAsync("slot", { key: 'c8910dcf1ce98ab427fd89c3396a67c2a75bdd07', name: "start" }), hAsync("slot", { key: '05da24d5ef96b9eebd83b534ce02c1f7bcd06680', name: "secondary" }), hAsync("div", { key: '090fea1541e7e2b6ad74a6ded4eadffdb471ccce', class: "toolbar-content", part: "content" }, hAsync("slot", { key: '507e143f92f6fa59ff23d94026411fa2c74f2f8e' })), hAsync("slot", { key: 'f79fdee472e657e26a910cb89d7551943e40e440', name: "primary" }), hAsync("slot", { key: 'dd40fe9ed490cf4346c642e195fdb524dc6cc4f5', name: "end" }))));
+            })) }, hAsync("div", { key: '67f5bba9c4f527c3f35bfe1313a2b85741f9b246', class: "toolbar-background", part: "background" }), hAsync("div", { key: '085e8c68f056e5b0deb9d1606431fbeb45dae8e5', class: "toolbar-container", part: "container" }, hAsync("slot", { key: '15227c79c3baf883fd8c43fdb7e1313453933c79', name: "start" }), hAsync("slot", { key: '0b8a7f7e685aa31c80d9bc03446ccc3a9d07e0e8', name: "secondary" }), hAsync("div", { key: '57e4628c1fa89df79dd80456259db961bb691404', class: "toolbar-content", part: "content" }, hAsync("slot", { key: '82c2f6e1acf8d96db259bd8baf295881801edbd5' })), hAsync("slot", { key: 'b2d4afb15214199f206c0a5e08b581e4c9c2f58a', name: "primary" }), hAsync("slot", { key: 'bfb909a0c472f8834046c2ea23bef2f562167ad3', name: "end" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -39746,11 +40368,11 @@ class ToolbarTitle {
     render() {
         const mode = getIonMode$1(this);
         const size = this.getSize();
-        return (hAsync(Host, { key: 'd9317e8e66cb6112717f5a9c252658777efbd873', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '44e63f8439df64c470692904427b417e19406476', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, hAsync("div", { key: 'a4d011d6d409bf006d8efe33667002edb109820a', class: "toolbar-title" }, hAsync("slot", { key: '4ca3303b957a0e5387f1e9058e5adb4c6275afcc' }))));
+            }) }, hAsync("div", { key: '784cf60a0db16045391891cc8fad0c7dbeba4039', class: "toolbar-title" }, hAsync("slot", { key: '0c720a50479ba257e8756337aeb9b0ab7516a227' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -39830,8 +40452,10 @@ registerComponents([
   Nav,
   NavLink,
   Note,
+  Picker$1,
   Picker,
   PickerColumn,
+  PickerColumnCmp,
   PickerColumnOption,
   Popover,
   ProgressBar,