@ionic/core 8.3.5-nightly.20241104 → 8.4.0

package/hydrate/index.mjs

@@ -4619,6 +4619,7 @@ const createController = (tagName) => {
 };
 const alertController = /*@__PURE__*/ createController('ion-alert');
 const actionSheetController = /*@__PURE__*/ createController('ion-action-sheet');
+const modalController = /*@__PURE__*/ createController('ion-modal');
 const popoverController = /*@__PURE__*/ createController('ion-popover');
 /**
  * Prepares the overlay element to be presented.
@@ -7287,13 +7288,15 @@ class Alert {
         const msgId = `alert-${overlayIndex}-msg`;
         const role = this.inputs.length > 0 || this.buttons.length > 0 ? 'alertdialog' : 'alert';
         /**
-         * If the header is defined, use that. Otherwise, fall back to the subHeader.
-         * If neither is defined, don't set aria-labelledby.
+         * Use both the header and subHeader ids if they are defined.
+         * If only the header is defined, use the header id.
+         * If only the subHeader is defined, use the subHeader id.
+         * If neither are defined, do not set aria-labelledby.
          */
-        const ariaLabelledBy = header ? hdrId : subHeader ? subHdrId : null;
-        return (hAsync(Host, Object.assign({ key: 'c7d53f48b359f2bc3480a2e1ba34948fc9378fb0', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
+        const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
+        return (hAsync(Host, Object.assign({ key: 'ad7e14b4f92a09387aa80abfb718a755e4e889d6', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { 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: '18c7e6b5d63435d9a6a82bda951158e7e1af6e92', tappable: this.backdropDismiss }), hAsync("div", { key: '8ea08a2a70239e817442c12596f51b108aca428c', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '215ca5d72b8b180788e9748f5f22de01fa5a152a', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: '9880acd318428d4b5d670c67dd156477877f99f2', class: "alert-head" }, header && (hAsync("h2", { key: '612dec8dc9bfdcb36e1e4655dc214b7c229b20c8', id: hdrId, class: "alert-title" }, header)), subHeader && (hAsync("h2", { key: 'e3c54c80a1cd9399595064b5a0a887c16fdc8ff8', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("div", { key: '9062655e906b5caf36df6f742fd412552ae510be', 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: '4b4693dca3c910aa9a61c4d90295d785ec6cbe3d', tappable: this.backdropDismiss }), hAsync("div", { key: '64fd19b8f1d8246dcc869053f858bc33506def4b', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'e61ba6f339c3a02cecd37d8b641ee5043018eb29', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: '044e00667ffcb74aa2c5e0d0b42669c4004dbb4f', class: "alert-head" }, header && (hAsync("h2", { key: '1aaae8d58722c4cf5debb1f00415ab7ed0a52bbd', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (hAsync("h2", { key: '9c9854dc3b0ad40f1861a49b76d5636afcae9c74', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (hAsync("h3", { key: '19aaca9912f77cde4ae8079be210eda697ed8de1', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("div", { key: 'a85d27c516f7cdbc85b19f40d2f0bd865490b6a7', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -7371,7 +7374,7 @@ class App {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'e95cdeb2709edbc74f4e6ebf77cb110154605b72', class: {
+        return (hAsync(Host, { key: '96715520fd05d6f0e6fa26a8ba78792cfccd4c0a', class: {
                 [mode]: true,
                 'ion-page': true,
                 'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
@@ -7402,7 +7405,7 @@ class Avatar {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: 'dc1e3cd535e419eebe5599574fd2393ebfde8bbc', class: getIonMode$1(this) }, hAsync("slot", { key: 'edb8441c063ea592b41345ea97d88ecd90cb3052' })));
+        return (hAsync(Host, { key: '998217066084f966bf5d356fed85bcbd451f675a', class: getIonMode$1(this) }, hAsync("slot", { key: '1a6f7c9d4dc6a875f86b5b3cda6d59cb39587f22' })));
     }
     static get style() { return {
         ios: IonAvatarIosStyle0,
@@ -7490,7 +7493,7 @@ class BackButton {
         const showBackButton = defaultHref !== undefined;
         const mode = getIonMode$1(this);
         const ariaLabel = inheritedAttributes['aria-label'] || backButtonText || 'back';
-        return (hAsync(Host, { key: '8351c93a1812c94c979fb115f07a9ad7b3152188', onClick: this.onClick, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '5466624a10f1ab56f5469e6dc07080303880f2fe', onClick: this.onClick, class: createColorClasses$1(color, {
                 [mode]: true,
                 button: true, // ion-buttons target .button
                 'back-button-disabled': disabled,
@@ -7500,7 +7503,7 @@ class BackButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 'show-back-button': showBackButton,
-            }) }, hAsync("button", { key: '991b8baa784dbfbdf8d3581cbbf6a858ac1f1e6e', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, hAsync("span", { key: '929fcd83a4fdb00cf97ca803f234719171602a5e', class: "button-inner" }, backButtonIcon && (hAsync("ion-icon", { key: '0c10d412ae8342d96f221e626b421c9abadac748', part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (hAsync("span", { key: '96f505880a80f36ee8b8c78268b450f3629ee613', part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), mode === 'md' && hAsync("ion-ripple-effect", { key: '0aecf5d415c608069eb1a10043530bd0929b6383', type: this.rippleType }))));
+            }) }, hAsync("button", { key: '63bc75ef0ad7cc9fb79e58217a3314b20acd73e3', type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, hAsync("span", { key: '5d3eacbd11af2245c6e1151cab446a0d96559ad8', class: "button-inner" }, backButtonIcon && (hAsync("ion-icon", { key: '6439af0ae463764174e7d3207f02267811df666d', part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (hAsync("span", { key: '8ee89fb18dfdb5b75948a8b197ff4cdbc008742f', part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), mode === 'md' && hAsync("ion-ripple-effect", { key: '63803a884998bc73bea5afe0b2a0a14e3fa4d6bf', type: this.rippleType }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -7553,7 +7556,7 @@ class Backdrop {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'fe191068e2aaadfdbe7a463c08d227a1b36d7a98', "aria-hidden": "true", class: {
+        return (hAsync(Host, { key: '7abaf2c310aa399607451b14063265e8a5846938', "aria-hidden": "true", class: {
                 [mode]: true,
                 'backdrop-hide': !this.visible,
                 'backdrop-no-tappable': !this.tappable,
@@ -7593,9 +7596,9 @@ class Badge {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '1253618692342bcf9487188402dc3d49ae0de480', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '1a2d39c5deec771a2f2196447627b62a7d4c8389', class: createColorClasses$1(this.color, {
                 [mode]: true,
-            }) }, hAsync("slot", { key: '71d65e203965ea37b94504a8a0a96beb52d4e356' })));
+            }) }, hAsync("slot", { key: 'fc1b6587f1ed24715748eb6785e7fb7a57cdd5cd' })));
     }
     static get style() { return {
         ios: IonBadgeIosStyle0,
@@ -7681,7 +7684,7 @@ class Breadcrumb {
         // to show the separator as long as it isn't also the last breadcrumb
         // otherwise if not collapsed use the value in separator
         const showSeparator = last ? false : collapsed ? (showCollapsedIndicator && !last ? true : false) : separator;
-        return (hAsync(Host, { key: 'dfe55ad57f23e5da5f2e2c51fea99964812472e3', onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '32ca61c83721dff52b5e97171ed449dce3584a55', onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses$1(color, {
                 [mode]: true,
                 'breadcrumb-active': active,
                 'breadcrumb-collapsed': collapsed,
@@ -7691,15 +7694,15 @@ class Breadcrumb {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': clickable,
                 'ion-focusable': clickable,
-            }) }, hAsync(TagType, Object.assign({ key: 'e361b1f0e7de6dd5c5dd4f6deae72c2c8210466d' }, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), hAsync("slot", { key: '9daeb45a8a28c89f3ad5751f71b8412197846371', name: "start" }), hAsync("slot", { key: '4849e63cdffd6c712292745138b68730442c8b0d' }), hAsync("slot", { key: '6edf9bac5aec06ccec2844efac2d9afa1d24cf57', name: "end" })), showCollapsedIndicator && (hAsync("button", { key: 'de7f5faea75b44011b289d259265e2435a65874f', part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
+            }) }, hAsync(TagType, Object.assign({ key: '479feb845f4a6d8009d5422b33eb423730b9722b' }, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), hAsync("slot", { key: '3c5dcaeb0d258235d1b7707868026ff1d1404099', name: "start" }), hAsync("slot", { key: 'f1cfb934443cd97dc220882c5e3596ea879d66cf' }), hAsync("slot", { key: '539710121b5b1f3ee8d4c24a9651b67c2ae08add', name: "end" })), showCollapsedIndicator && (hAsync("button", { key: 'ed53a95ccd89022c8b7bee0658a221ec62a5c73b', part: "collapsed-indicator", "aria-label": "Show more breadcrumbs", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
                 'breadcrumbs-collapsed-indicator': true,
-            } }, hAsync("ion-icon", { key: '957d8851af9c99dda263f34eff0b35a0fc212c32', "aria-hidden": "true", icon: ellipsisHorizontal, lazy: false }))), showSeparator && (
+            } }, hAsync("ion-icon", { key: 'a849e1142a86f06f207cf11662fa2a560ab7fc6a', "aria-hidden": "true", icon: ellipsisHorizontal, lazy: false }))), showSeparator && (
         /**
          * Separators should not be announced by narrators.
          * We add aria-hidden on the span so that this applies
          * to any custom separators too.
          */
-        hAsync("span", { key: '97d646c37c4c41ad6b12c3a543d1146fde06fc9a', class: "breadcrumb-separator", part: "separator", "aria-hidden": "true" }, hAsync("slot", { key: '0429f671a986f2d7be1b1b69fc879e80806d2916', name: "separator" }, mode === 'ios' ? (hAsync("ion-icon", { icon: chevronForwardOutline, lazy: false, "flip-rtl": true })) : (hAsync("span", null, "/")))))));
+        hAsync("span", { key: 'fc3c741cb01fafef8b26046c7ee5b190efc69a7c', class: "breadcrumb-separator", part: "separator", "aria-hidden": "true" }, hAsync("slot", { key: '4871932ae1dae520767e0713e7cee2d11b0bba6d', name: "separator" }, mode === 'ios' ? (hAsync("ion-icon", { icon: chevronForwardOutline, lazy: false, "flip-rtl": true })) : (hAsync("span", null, "/")))))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -7839,12 +7842,12 @@ class Breadcrumbs {
     render() {
         const { color, collapsed } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '18ffba1642f10cc2bc31440e84f23aa6f042e501', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'fe64e9cdf597ede2db140bf5fa05a0359d82db57', class: createColorClasses$1(color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'breadcrumbs-collapsed': collapsed,
-            }) }, hAsync("slot", { key: '3db6d31590e3047889ce554d57d155c8ea2e1455', onSlotchange: this.slotChanged })));
+            }) }, hAsync("slot", { key: 'a2c99b579e339055c50a613d5c6b61032f5ddffe', onSlotchange: this.slotChanged })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -8087,7 +8090,7 @@ class Button {
         {
             type !== 'button' && this.renderHiddenButton();
         }
-        return (hAsync(Host, { key: '8f3a0363d46ef888d22b0b0812c70cb4f79e6efa', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '340a809d85698741bb36e796355cae89a970655f', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses$1(color, {
                 [mode]: true,
                 [buttonType]: true,
                 [`${buttonType}-${expand}`]: expand !== undefined,
@@ -8102,7 +8105,7 @@ class Button {
                 'button-disabled': disabled,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, hAsync(TagType, Object.assign({ key: 'a517c7d06aab15ad4c2a51b8ec224c1aeb4ed565' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), hAsync("span", { key: '127c26dd97c0bf5097433df77df7313d59784899', class: "button-inner" }, hAsync("slot", { key: '39d9a9cad8e1addbe63406062e555e05c2cb541b', name: "icon-only", onSlotchange: this.slotChanged }), hAsync("slot", { key: 'cfdebdd89155c6c21eb80e51e06456a3a6d877e0', name: "start" }), hAsync("slot", { key: 'eac497e0f97ab55baa834ae23155d89b0f7069c6' }), hAsync("slot", { key: 'c99f7900f8856b32a0b4ac11092d461f5e9a1109', name: "end" })), mode === 'md' && hAsync("ion-ripple-effect", { key: 'c681edb0480879fbd801575f2233f6e118898638', type: this.rippleType }))));
+            }) }, hAsync(TagType, Object.assign({ key: '03ae1b94a0d606aa65aa6f82c2fc76abcf3f1300' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), hAsync("span", { key: '90bf53d4ffcab88ee596ece7113d5b6409e61143', class: "button-inner" }, hAsync("slot", { key: 'a7876695f0d8702e8bcb471ae4c0984f27d77458', name: "icon-only", onSlotchange: this.slotChanged }), hAsync("slot", { key: '2c8551586f8726884d7797a6d3fee2d4b3aab35f', name: "start" }), hAsync("slot", { key: '9ab07accdb22b08d0a463a7c821c9793507d1f7d' }), hAsync("slot", { key: '8984afe177e6ba021435875a3798e2a64f3bdf2c', name: "end" })), mode === 'md' && hAsync("ion-ripple-effect", { key: '3e9f01e7a1198b6b7109502293a971da7072a4f3', type: this.rippleType }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -8153,10 +8156,10 @@ class Buttons {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '4e5ce9abb3f56e8c91e3eb58c2819300e61eba24', class: {
+        return (hAsync(Host, { key: '58c1fc5eb867d0731c63549b1ccb3ec3bbbe6e1b', class: {
                 [mode]: true,
                 ['buttons-collapse']: this.collapse,
-            } }, hAsync("slot", { key: 'f2f360ec888b6e946b512fed07431fab47c61482' })));
+            } }, hAsync("slot", { key: '0c8f95b9840c8fa0c4e50be84c5159620a3eb5c8' })));
     }
     static get style() { return {
         ios: IonButtonsIosStyle0,
@@ -8225,7 +8228,7 @@ class Card {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '8584300522f382ee8891c039d71da82533dfa36a', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '85e9b30bd81e79a0c7ac75cb3664bdcf9e4afc4d', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'card-disabled': this.disabled,
                 'ion-activatable': this.isClickable(),
@@ -8272,7 +8275,7 @@ class CardContent {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '2a2d0b48aad4b83990a1748fce60e772514eb223', class: {
+        return (hAsync(Host, { key: 'd98e4d1fc6ad3237549f9bc17e4c67ec5059b1b3', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`card-content-${mode}`]: true,
@@ -8309,11 +8312,11 @@ class CardHeader {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '18d12507ec6e650a72d721e9d0f4128b5e86df1d', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '64246b81931203a64d553c788cd736f41e23f37b', class: createColorClasses$1(this.color, {
                 'card-header-translucent': this.translucent,
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, hAsync("slot", { key: '3374c087d8c3f014082787e255432e7a335ef44f' })));
+            }) }, hAsync("slot", { key: 'af2da2dfe266889afeb57fac25c6a730558dbba4' })));
     }
     static get style() { return {
         ios: IonCardHeaderIosStyle0,
@@ -8348,10 +8351,10 @@ class CardSubtitle {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'cbcb01bd01cf6de64a0b04fb626e42b07ceb8f53', role: "heading", "aria-level": "3", class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '84d820a19d9074f9c8bc61ccba1ca40062a60b73', role: "heading", "aria-level": "3", class: createColorClasses$1(this.color, {
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, hAsync("slot", { key: 'cbcaa73aa5799882c48d6c0aabfb13651bcc91c0' })));
+            }) }, hAsync("slot", { key: 'e4d07d395a1f4469a90847636083101b32b776a1' })));
     }
     static get style() { return {
         ios: IonCardSubtitleIosStyle0,
@@ -8385,10 +8388,10 @@ class CardTitle {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'f904a0ca6489f147d03c9c5f9f2c5549cdb38d1a', role: "heading", "aria-level": "2", class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'fca001a86396e83718d5211cd71912fdf40dea2f', role: "heading", "aria-level": "2", class: createColorClasses$1(this.color, {
                 'ion-inherit-color': true,
                 [mode]: true,
-            }) }, hAsync("slot", { key: 'effb921de4ad8dfbbe318b3f692f4005812da7b1' })));
+            }) }, hAsync("slot", { key: '2ba416aed488b2ff462fa75fb3b70373a6dd7da6' })));
     }
     static get style() { return {
         ios: IonCardTitleIosStyle0,
@@ -8473,7 +8476,8 @@ class Checkbox {
     componentWillLoad() {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
     }
-    setFocus() {
+    /** @internal */
+    async setFocus() {
         if (this.focusEl) {
             this.focusEl.focus();
         }
@@ -8483,7 +8487,7 @@ class Checkbox {
         const mode = getIonMode$1(this);
         const path = getSVGPath(mode, indeterminate);
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (hAsync(Host, { key: 'd7a07fbf130413eaa4622c07786e8a00723113eb', "aria-checked": indeterminate ? 'mixed' : `${checked}`, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '6dc787e1100521d08c4900104e1a3e2f594e919f', "aria-checked": indeterminate ? 'mixed' : `${checked}`, class: createColorClasses$1(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'checkbox-checked': checked,
@@ -8493,10 +8497,10 @@ class Checkbox {
                 [`checkbox-justify-${justify}`]: justify !== undefined,
                 [`checkbox-alignment-${alignment}`]: alignment !== undefined,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }), onClick: this.onClick }, hAsync("label", { key: '99797589ed4ea7cbac53531c85b2d4a2dcd568c4', class: "checkbox-wrapper" }, hAsync("input", Object.assign({ key: 'cc12fe7920ab23c6f21546f7b312b8f1f5671349', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), hAsync("div", { key: '1b087f061da5abca6129d372503d8882b77e24be', class: {
+            }), onClick: this.onClick }, hAsync("label", { key: '68222fb736a5ec3f2e488649b0e2ce0417dcb224', class: "checkbox-wrapper" }, hAsync("input", Object.assign({ key: 'f12962d7e9b19c744cfdbdeccc67ae7f5d080281', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), hAsync("div", { key: 'c72df2699414b1e5a41a1bc267bc634f0c93dcff', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': el.textContent === '',
-            }, part: "label" }, hAsync("slot", { key: 'bc84274c826fa1db1207230aa03bf5790afe2992' })), hAsync("div", { key: '89e9396dc9215804bd8ac42e943a292d050ef8c5', class: "native-wrapper" }, hAsync("svg", { key: '2aafac248c639074faaf17044d8d9204474a9b7b', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
+            }, part: "label" }, hAsync("slot", { key: 'a2a80285178a7e0e3b536fc9ca26b8b444aa4307' })), hAsync("div", { key: 'c2b05e0d1fe8df5dcd72858220b5ff51ecaee4cc', class: "native-wrapper" }, hAsync("svg", { key: 'ee24913fded72258ebd9713654a6dba92a18fcf7', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
     }
     getSVGPath(mode, indeterminate) {
         let path = indeterminate ? (hAsync("path", { d: "M6 12L18 12", part: "mark" })) : (hAsync("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));
@@ -8522,7 +8526,8 @@ class Checkbox {
             "value": [8],
             "labelPlacement": [1, "label-placement"],
             "justify": [1],
-            "alignment": [1]
+            "alignment": [1],
+            "setFocus": [64]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -8549,12 +8554,12 @@ class Chip {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '7dd923c1b28d1eb1efa348f66f49cec067645af9', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'fa2e9a4837ef87a17ef10f388e8caa7f604d9145', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'chip-outline': this.outline,
                 'chip-disabled': this.disabled,
                 'ion-activatable': true,
-            }) }, hAsync("slot", { key: '7ede838bf109dc27a898ee2dcdeabc3f439c8e6f' }), mode === 'md' && hAsync("ion-ripple-effect", { key: '5acb073029544e73fcc0db4cc4e661ec1df4d231' })));
+            }) }, hAsync("slot", { key: '3793fbd9d915cef7241fb101e2bc64c08b9ba482' }), mode === 'md' && hAsync("ion-ripple-effect", { key: 'd3b95b53918611dec095a50f2aaaab65617947a4' })));
     }
     static get style() { return {
         ios: IonChipIosStyle0,
@@ -8705,9 +8710,9 @@ class Col {
     render() {
         const isRTL = document.dir === 'rtl';
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'c37fa4c4c993385ccbb6f4e89b2f390b140507a0', class: {
+        return (hAsync(Host, { key: '32ed75d81dd09d9bc8999f6d42e5b3cb99c84d91', class: {
                 [mode]: true,
-            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, hAsync("slot", { key: '6a5296ff0b9dee6600c2dafe7363a065d053bac2' })));
+            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, hAsync("slot", { key: '38f8d0440c20cc6d1b1d6a654d07f16de61d8134' })));
     }
     static get style() { return IonColStyle0; }
     static get cmpMeta() { return {
@@ -9081,7 +9086,7 @@ class Content {
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
         this.resize();
-        return (hAsync(Host, Object.assign({ key: '92a7cbc2e9c812930f4231bd846411933a5dded6', role: isMainContent ? 'main' : undefined, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, Object.assign({ key: 'f2a24aa66dbf5c76f9d4b06f708eb73cadc239df', role: isMainContent ? 'main' : undefined, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
@@ -9089,12 +9094,12 @@ class Content {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, inheritedAttributes), hAsync("div", { key: '52498d8874b9944b8245e448ea9dfc75b3929c2d', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? hAsync("slot", { name: "fixed" }) : null, hAsync("div", { key: '00e157a53485b285300404178436276afceb63f5', class: {
+            } }, inheritedAttributes), hAsync("div", { key: '6480ca7648b278abb36477b3838bccbcd4995e2a', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? hAsync("slot", { name: "fixed" }) : null, hAsync("div", { key: '29a23b663f5f0215bb000820c01e1814c0d55985', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, hAsync("slot", { key: '8522320514a2e8a63f7dc9ade6c1fb3fb00f454e' })), transitionShadow ? (hAsync("div", { class: "transition-effect" }, hAsync("div", { class: "transition-cover" }), hAsync("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? hAsync("slot", { name: "fixed" }) : null));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, hAsync("slot", { key: '0fe1bd05609a4b88ae2ce9addf5d5dc5dc1806f0' })), transitionShadow ? (hAsync("div", { class: "transition-effect" }, hAsync("div", { class: "transition-cover" }), hAsync("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? hAsync("slot", { name: "fixed" }) : null));
     }
     get el() { return getElement(this); }
     static get style() { return IonContentStyle0; }
@@ -12615,7 +12620,7 @@ class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (hAsync(Host, { key: '2933ce5caaeb21a633b1ec4d936e86b0f0890807', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
+        return (hAsync(Host, { key: '7afbb1a7e6c78389b4588999779e5c90e010e85d', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -12625,7 +12630,7 @@ class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, hAsync("div", { key: '0efc9ef0aa1a29234412b2eddf5d7ff899b7543f', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, hAsync("div", { key: '297c458d4d17154cb297e2ef5926505bcb2d1fce', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -13033,11 +13038,11 @@ class DatetimeButton {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '0be955404133adbb31ae16a6599014bb29765f19', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '26e606af6f067a5774db37ed41387ffebb941777', class: createColorClasses$1(color, {
                 [mode]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
-            }) }, dateText && (hAsync("button", { key: '812dcb50b17768cc13a5cfa0bcce8b113cee0f09', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, hAsync("slot", { key: '46930c740a32a78502df9e651f9bd5914d6a9fea', name: "date-target" }, dateText), mode === 'md' && hAsync("ion-ripple-effect", { key: '0602999cc8435dc37aa22da7f5531bc8cb71e1b4' }))), timeText && (hAsync("button", { key: 'ecdd21da5181ecbdce03209f9f6673b7dcbc1f78', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, hAsync("slot", { key: 'b5b093b5166d12d11e27360788edaac916d44390', name: "time-target" }, timeText), mode === 'md' && hAsync("ion-ripple-effect", { key: '70bb3a04f4748d13233eeb257503968dbd1161a9' })))));
+            }) }, dateText && (hAsync("button", { key: '6b7aa66a15b4a6d89d411e40586de28a2ac9f343', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, hAsync("slot", { key: 'd42f34fd167be34386319e7ea788c2ab03c90b87', name: "date-target" }, dateText), mode === 'md' && hAsync("ion-ripple-effect", { key: '47dd34f3c2799064cac7a5fe25440ecc043950f0' }))), timeText && (hAsync("button", { key: 'd77424a20fae320654774c7bfc8a8e2369d3afe3', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, hAsync("slot", { key: 'ac088a78141bb53f2efd48dd7745f8954c92378b', name: "time-target" }, timeText), mode === 'md' && hAsync("ion-ripple-effect", { key: 'b3a58ddfd28b9396e2518ffd62a045ec13d8b9d0' })))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -13111,12 +13116,12 @@ class Fab {
     render() {
         const { horizontal, vertical, edge } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'cb44cf6486b0a6439b99da87c065b0b52e2514f4', class: {
+        return (hAsync(Host, { key: '8a310806d0e748d7ebb0ed3d9a2652038e0f2960', class: {
                 [mode]: true,
                 [`fab-horizontal-${horizontal}`]: horizontal !== undefined,
                 [`fab-vertical-${vertical}`]: vertical !== undefined,
                 'fab-edge': edge,
-            } }, hAsync("slot", { key: '1ed484c7ecb10cd81fbca9a4f5c4049bf82f9f8a' })));
+            } }, hAsync("slot", { key: '9394ef6d6e5b0410fa6ba212171f687fb178ce2d' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -13206,7 +13211,7 @@ class FabButton {
                 rel: this.rel,
                 target: this.target,
             };
-        return (hAsync(Host, { key: 'eb347f7d6749c40637540d84778eb8d1b667a947', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '4eee204d20b0e2ffed49a88f6cb3e04b6697965c', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses$1(color, {
                 [mode]: true,
                 'fab-button-in-list': inList,
                 'fab-button-translucent-in-list': inList && translucent,
@@ -13217,7 +13222,7 @@ class FabButton {
                 'ion-activatable': true,
                 'ion-focusable': true,
                 [`fab-button-${size}`]: size !== undefined,
-            }) }, hAsync(TagType, Object.assign({ key: '83e853c8815f41543c848eb2e05ec2bb1716110a' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), hAsync("ion-icon", { key: '798deede94de658e4345acf7c2aafe2ab2567b0b', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), hAsync("span", { key: '99252fde6de1aca73fc240a6da7e29acac9acb18', class: "button-inner" }, hAsync("slot", { key: 'dc73e9b41bf1f0e385e5784f975dfb81e37c8dfb' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '8413e162f44a0350f54dff06cff7aad101de3549' }))));
+            }) }, hAsync(TagType, Object.assign({ key: '914561622c0c6bd41453e828a7d8a39f924875ac' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), hAsync("ion-icon", { key: '2c8090742a64c62a79243667027a195cca9d5912', "aria-hidden": "true", icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), hAsync("span", { key: 'c3e55291e4c4d306d34a4b95dd2e727e87bdf39c', class: "button-inner" }, hAsync("slot", { key: 'f8e57f71d8f8878d9746cfece82f57f19ef9e988' })), mode === 'md' && hAsync("ion-ripple-effect", { key: 'a5e94fa0bb9836072300617245ed0c1b4887bac6' }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -13268,11 +13273,11 @@ class FabList {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'fa1d195b9950654ba0e984bf61d981c977d05275', class: {
+        return (hAsync(Host, { key: '64b33366447f66c7f979cfac56307fbb1a6fac1c', class: {
                 [mode]: true,
                 'fab-list-active': this.activated,
                 [`fab-list-side-${this.side}`]: true,
-            } }, hAsync("slot", { key: '2ec738c66c05112e1e2521155d6adfc36d2fd1db' })));
+            } }, hAsync("slot", { key: 'd9f474f7f20fd7e813db358fddc720534ca05bb6' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -13724,7 +13729,7 @@ class Footer {
         const mode = getIonMode$1(this);
         const tabs = this.el.closest('ion-tabs');
         const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
-        return (hAsync(Host, { key: '5da19dc38ba73e1ddfd1bef3ebd485105d77c751', role: "contentinfo", class: {
+        return (hAsync(Host, { key: 'ddc228f1a1e7fa4f707dccf74db2490ca3241137', role: "contentinfo", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`footer-${mode}`]: true,
@@ -13732,7 +13737,7 @@ class Footer {
                 [`footer-translucent-${mode}`]: translucent,
                 ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
                 [`footer-collapse-${collapse}`]: collapse !== undefined,
-            } }, mode === 'ios' && translucent && hAsync("div", { key: 'fafad08090a33d8c4e8a5b63d61929dcb89aab47', class: "footer-background" }), hAsync("slot", { key: 'e0a443d346afa55e4317c0bc1263fdbe3c619559' })));
+            } }, mode === 'ios' && translucent && hAsync("div", { key: 'e16ed4963ff94e06de77eb8038201820af73937c', class: "footer-background" }), hAsync("slot", { key: 'f186934febf85d37133d9351a96c1a64b0a4b203' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -13763,10 +13768,10 @@ class Grid {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '930ce78b02f8360fbca08a35d364d2c09128c6c8', class: {
+        return (hAsync(Host, { key: '617127ecfabf9bf615bef1dda1be3fed5a065949', class: {
                 [mode]: true,
                 'grid-fixed': this.fixed,
-            } }, hAsync("slot", { key: 'c47bf7ef2197f5ebc42d3e2c55044276fb0db393' })));
+            } }, hAsync("slot", { key: 'c781fff853b093d8f44bdb7943bbc4f17c903803' })));
     }
     static get style() { return IonGridStyle0; }
     static get cmpMeta() { return {
@@ -14097,14 +14102,14 @@ class Header {
         const collapse = this.collapse || 'none';
         // banner role must be at top level, so remove role if inside a menu
         const roleType = hostContext('ion-menu', this.el) ? 'none' : 'banner';
-        return (hAsync(Host, Object.assign({ key: 'c687314ef290793a9d633ad20cfc5eeb47621e31', role: roleType, class: {
+        return (hAsync(Host, Object.assign({ key: 'b6cc27f0b08afc9fcc889683525da765d80ba672', role: roleType, class: {
                 [mode]: true,
                 // Used internally for styling
                 [`header-${mode}`]: true,
                 [`header-translucent`]: this.translucent,
                 [`header-collapse-${collapse}`]: true,
                 [`header-translucent-${mode}`]: this.translucent,
-            } }, inheritedAttributes), mode === 'ios' && translucent && hAsync("div", { key: 'b429996046082405a91e7c23f95516db0b736f12', class: "header-background" }), hAsync("slot", { key: 'e17a8965f8d3a33c1bfcb056c153d8242e5229fa' })));
+            } }, inheritedAttributes), mode === 'ios' && translucent && hAsync("div", { key: '395766d4dcee3398bc91960db21f922095292f14', class: "header-background" }), hAsync("slot", { key: '09a67ece27b258ff1248805d43d92a49b2c6859a' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -14383,7 +14388,7 @@ class Img {
     render() {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
-        return (hAsync(Host, { key: '14d24d65ec8e5522192ca58035264971b1ab883b', class: getIonMode$1(this) }, hAsync("img", { key: '345ba155a5fdce5e66c397a599b7333d37d9cb1d', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        return (hAsync(Host, { key: 'da600442894427dee1974a28e545613afac69fca', class: getIonMode$1(this) }, hAsync("img", { key: '16df0c7069af86c0fa7ce5af598bc0f63b4eb71a', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -14590,7 +14595,7 @@ class InfiniteScroll {
     render() {
         const mode = getIonMode$1(this);
         const disabled = this.disabled;
-        return (hAsync(Host, { key: '1444429a86950c449953cbf578436cc8cabf40ec', class: {
+        return (hAsync(Host, { key: 'e844956795f69be33396ce4480aa7a54ad01b28c', class: {
                 [mode]: true,
                 'infinite-scroll-loading': this.isLoading,
                 'infinite-scroll-enabled': !disabled,
@@ -14646,11 +14651,11 @@ class InfiniteScrollContent {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '060278bf9cb0321e182352f9613be4ebbb028259', class: {
+        return (hAsync(Host, { key: '7c16060dcfe2a0b0fb3e2f8f4c449589a76f1baa', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`infinite-scroll-content-${mode}`]: true,
-            } }, hAsync("div", { key: '07d3cada920145f979ad315bd187fb878e0c3da3', class: "infinite-loading" }, this.loadingSpinner && (hAsync("div", { key: '6254f175d7543d09f3dd47cd0589a2809182cd8c', class: "infinite-loading-spinner" }, hAsync("ion-spinner", { key: 'a6a816d1c65b60b786333b209b63492aa716a283', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+            } }, hAsync("div", { key: 'a94f4d8746e053dc718f97520bd7e48cb316443a', class: "infinite-loading" }, this.loadingSpinner && (hAsync("div", { key: '10143d5d2a50a2a2bc5de1cee8e7ab51263bcf23', class: "infinite-loading-spinner" }, hAsync("ion-spinner", { key: '8846e88191690d9c61a0b462889ed56fbfed8b0d', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
     }
     static get style() { return {
         ios: IonInfiniteScrollContentIosStyle0,
@@ -15397,7 +15402,7 @@ class Input {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (hAsync(Host, { key: 'cdde9963d71685e6a4f3f3b3bc52e75d022435cb', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '54b5662d9a7f011a85e4119650c92b9af275bf96', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -15408,7 +15413,7 @@ class Input {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, hAsync("label", { key: '4412791c93405f20e50e50363879265180b6078f', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), hAsync("div", { key: '5c71c43ef3eeb44dde76ed64ce10763834c8fbc7', class: "native-wrapper" }, hAsync("slot", { key: '1d86b58dc299a4208dd02ccdc9ceaea7576698c3', name: "start" }), hAsync("input", Object.assign({ key: '7fc932174485f7d09e6a797dfd49ea11fbad71b6', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (hAsync("button", { key: '46de455e4e308b8d7640b04778f7c7559b4124c6', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, hAsync("label", { key: '551cf8a932af3275689ecf32988b84355404e8f1', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), hAsync("div", { key: 'b3601dca7e0f23517748f6e7feb899c953355bc4', class: "native-wrapper" }, hAsync("slot", { key: 'd687a9bb4c5778cfee35ce1b8d6d16ddc8eca768', name: "start" }), hAsync("input", Object.assign({ key: 'ab927e84e43bedf8b7827bb743888a1778292deb', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (hAsync("button", { key: '0d2ee3f7e69cee75f071f37b2e9bc174572c5a01', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
@@ -15423,7 +15428,7 @@ class Input {
                  * for screen readers as it means users would be unable to swipe past the clear button.
                  */
                 ev.stopPropagation();
-            }, onClick: this.clearTextInput }, hAsync("ion-icon", { key: '375e860a20e1807ce0db0e1934a0650fe9929966', "aria-hidden": "true", icon: clearIconData }))), hAsync("slot", { key: '859d47a1b88aa8377479e5d11e52a6a1c1c30e7e', name: "end" })), shouldRenderHighlight && hAsync("div", { key: 'd2d4286b348107e33247b5c0afda0f8bd697ecee', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, hAsync("ion-icon", { key: 'c7715111897f43839c10d38662616edb662cd49b', "aria-hidden": "true", icon: clearIconData }))), hAsync("slot", { key: 'afc44cbe1ad50f17942d5297a12509abecbd6ecd', name: "end" })), shouldRenderHighlight && hAsync("div", { key: 'ee3af32cd9003d497f33e352e56313d43295f3a9', class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -15545,16 +15550,16 @@ class InputPasswordToggle {
         const showPasswordIcon = (_a = this.showIcon) !== null && _a !== void 0 ? _a : eye;
         const hidePasswordIcon = (_b = this.hideIcon) !== null && _b !== void 0 ? _b : eyeOff;
         const isPasswordVisible = type === 'text';
-        return (hAsync(Host, { key: 'ed1c29726ce0c91548f0e2ada61e3f8b5c813d2d', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'd9811e25bfeb2aa197352bb9be852e9e420739d5', class: createColorClasses$1(color, {
                 [mode]: true,
-            }) }, hAsync("ion-button", { key: '9698eccdaedb86cf12d20acc53660371b3af3c55', mode: mode, color: color, fill: "clear", shape: "round", "aria-checked": isPasswordVisible ? 'true' : 'false', "aria-label": "show password", role: "switch", type: "button", onPointerDown: (ev) => {
+            }) }, hAsync("ion-button", { key: '1eaea1442b248fb2b8d61538b27274e647a07804', mode: mode, color: color, fill: "clear", shape: "round", "aria-checked": isPasswordVisible ? 'true' : 'false', "aria-label": "show password", role: "switch", type: "button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the password toggle
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.togglePasswordVisibility }, hAsync("ion-icon", { key: '1f2119c30b56c800d9af44e6499445a0ebb466cf', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? hidePasswordIcon : showPasswordIcon }))));
+            }, onClick: this.togglePasswordVisibility }, hAsync("ion-icon", { key: '9c88de8f4631d9bde222ce2edf6950d639e04773', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? hidePasswordIcon : showPasswordIcon }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -15850,11 +15855,11 @@ class ItemDivider {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '60fda1dab7dbc0038ec7ff68a661896430f7d5c5', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '6cff318230a9b2a9db529df154285d3dd9822efe', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'item-divider-sticky': this.sticky,
                 item: true,
-            }) }, hAsync("slot", { key: '6ce072dfc2adfa699a2c34ffe25ed221c74d9eea', name: "start" }), hAsync("div", { key: '9a441be204ee2f0b567432722407c75e3cbbe942', class: "item-divider-inner" }, hAsync("div", { key: 'fd6f2969b345dba51400a290473e594d2d019dc5', class: "item-divider-wrapper" }, hAsync("slot", { key: 'ebf5601b21c4cf199c01bf142865b8da0c1ba4a6' })), hAsync("slot", { key: '249af8f30113f2c986976d518126661f65531121', name: "end" }))));
+            }) }, hAsync("slot", { key: 'eb50dfab74ab0fd13697db17ecd60e8fa0bf1750', name: "start" }), hAsync("div", { key: '2806efd89d086f4fb844a479d9c095e1e0775713', class: "item-divider-inner" }, hAsync("div", { key: '77b7d5fa987e5f1c26d8023cd1f974a8a263a3de', class: "item-divider-wrapper" }, hAsync("slot", { key: 'dbafb0deb140a19a2a9748fd5b48760c39c6fd2e' })), hAsync("slot", { key: 'ef9a848fe21e84ef21cd273b8a4d9f95f558175b', name: "end" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -15886,7 +15891,7 @@ class ItemGroup {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '24ff047b7c45f963f0dad072c65d38a230c2bc97', role: "group", class: {
+        return (hAsync(Host, { key: 'f9ffe0290d3fa546494fe55f952d8554f2a8abf8', role: "group", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-group-${mode}`]: true,
@@ -15954,12 +15959,12 @@ class ItemOption {
                 href: this.href,
                 target: this.target,
             };
-        return (hAsync(Host, { key: '1900e015f593fefd710478a2088e052399c957eb', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '89310624997821858c1abde60c0ffb142ca466e0', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'item-option-disabled': disabled,
                 'item-option-expandable': expandable,
                 'ion-activatable': true,
-            }) }, hAsync(TagType, Object.assign({ key: '5db2bb9bc72b7b00c324e4189cd1b5f862680ebb' }, attrs, { class: "button-native", part: "native", disabled: disabled }), hAsync("span", { key: '6927e812ad001c5e7bd17f440d82c3830c58957b', class: "button-inner" }, hAsync("slot", { key: '0fde4333def94c55d1318868c2bc71e780d5876a', name: "top" }), hAsync("div", { key: '7ecc9ae8ddf66d7ed5d9f30becc9faf820e1c62e', class: "horizontal-wrapper" }, hAsync("slot", { key: 'a15567fd4bd91080e9fbb6bb0c9b0e67d8a67051', name: "start" }), hAsync("slot", { key: '7f86cdd28063e23f9d78997623333c5037c4f364', name: "icon-only" }), hAsync("slot", { key: '4abb69ce3ad6c4917dd87b7b1eb0fa1c69917d73' }), hAsync("slot", { key: '8b35a29f48722040465f182679ac17209937578d', name: "end" })), hAsync("slot", { key: 'fa15a00891b41d66a4ccb51575dec54b72d0059e', name: "bottom" })), mode === 'md' && hAsync("ion-ripple-effect", { key: '0c071910c90fafca8026f59d78f4d9d5224d150a' }))));
+            }) }, hAsync(TagType, Object.assign({ key: 'e4dfbb3048eed03a7f7e84c6f75545e0ca9b45fb' }, attrs, { class: "button-native", part: "native", disabled: disabled }), hAsync("span", { key: 'dffcf437fbdc15f2e7a19e60a015e90c73c8377d', class: "button-inner" }, hAsync("slot", { key: '48a23512e0601e062118d8b2c46c8bb96f25509f', name: "top" }), hAsync("div", { key: '952a9a9aa3a476aa1f4408d7e208bf9e916b8c30', class: "horizontal-wrapper" }, hAsync("slot", { key: 'f8d18a61c1ecec4a22a55443cf72bbc51383b64f', name: "start" }), hAsync("slot", { key: '1f9f219e6f879d2e0bf6d80cf0d3f518eb14ce0e', name: "icon-only" }), hAsync("slot", { key: 'a55adcdbe68131e5b1855c2dd45dd9454ab544fb' }), hAsync("slot", { key: '3c4c85a4fbb7efc797d8bc5adf6d238da022ff9f', name: "end" })), hAsync("slot", { key: '503c7e4b306745c523f57f24399ea06ba9b1e21d', name: "bottom" })), mode === 'md' && hAsync("ion-ripple-effect", { key: 'b0e270b0c4f3ff9f9b6d74bad12a9278d7633226' }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -16006,7 +16011,7 @@ class ItemOptions {
     render() {
         const mode = getIonMode$1(this);
         const isEnd = isEndSide(this.side);
-        return (hAsync(Host, { key: 'e28cd6a236323b5cc203c9b96782aa81024da924', class: {
+        return (hAsync(Host, { key: '6d91399d2aaaa81d514d0bbc8dffe53eeec25d36', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`item-options-${mode}`]: true,
@@ -16468,7 +16473,7 @@ class ItemSliding {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '99f87c8bd794ae69830b407ba55013ac44793c26', class: {
+        return (hAsync(Host, { key: '47a3edd2ef2080ed9cfc2784277dea09785c7dc4', class: {
                 [mode]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
@@ -16577,13 +16582,13 @@ class Label {
     render() {
         const position = this.position;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'c2c0f388dab910d294efb9fbb409ee4ef829c1ed', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '6353a70565ef6fbbbf4042b000e536c61bcf99a9', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 [`label-${position}`]: position !== undefined,
                 [`label-no-animate`]: this.noAnimate,
                 'label-rtl': document.dir === 'rtl',
-            }) }, hAsync("slot", { key: '4de6b69950f417873a13c851018ec31ea2686f0a' })));
+            }) }, hAsync("slot", { key: '6ef9c2758c0168442aa84941af0a6cec1ef1ec21' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -16639,7 +16644,7 @@ class List {
     render() {
         const mode = getIonMode$1(this);
         const { lines, inset } = this;
-        return (hAsync(Host, { key: '8bde220025a7eeca6da075379c6487c4c9bdddc1', role: "list", class: {
+        return (hAsync(Host, { key: '5ff2b0b3989cc99ce17abb8bcd7ec1847940d1ec', role: "list", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`list-${mode}`]: true,
@@ -16685,10 +16690,10 @@ class ListHeader {
     render() {
         const { lines } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '7e2e050f13722f2b870a2415d99a9e631e9ca267', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'fb78bd8601cbd7b90ec84a96e0c8325be1132b1e', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, hAsync("div", { key: '6117bebc45800d874e9b75355476fbced5cc8398', class: "list-header-inner" }, hAsync("slot", { key: '9165fb274cd2c45a5a65c271d8b1f30e8a00c890' }))));
+            }) }, hAsync("div", { key: '2580ad49f3a54973e15f14d645a1e55a6fa066ac', class: "list-header-inner" }, hAsync("slot", { key: '677b2e2ec8eeb3ae6ad329e86c76451cf3ae6c2f' }))));
     }
     static get style() { return {
         ios: IonListHeaderIosStyle0,
@@ -16957,9 +16962,9 @@ class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (hAsync(Host, Object.assign({ key: 'fb3d2cd7cd0539ed6540d8be50e243c7916b3ca2', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'd97f536b7f443ea19a2bbf2dcbc7f546b8e0a092', 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: 'c8bd30782f3040b1b80e88aa924861e439d40754', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '7ad4447fafa49aa861d311221b8c2e8171b4c610', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '1879df0d895eb8ee20ccdc94dd35d708c1140b91', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: '220f292c136681f5fa91f94669aac75b15e490ce', class: "loading-spinner" }, hAsync("ion-spinner", { key: 'd599084a1426d941bdd080a988d8ad5b9589b823', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: 'e443897b353a48e0c72718dba04d83d7c5070d73', 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: '6cd39bd7912fd080ab59d041644054c96d238ea9', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'c14ca5a9308844f11bcb010257e15208a75b39bc', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '118bceefa8e1cf8b225a858f224e6d919cf03c26', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: '490d6e8ae4433835fe273162d7b90deab944fb39', class: "loading-spinner" }, hAsync("ion-spinner", { key: 'c5cf6549c43df4cb23814b3e62ec4d9e7ea2b64f', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: '2b888362122d3b66b0492d53b0c21bd6a2a97501', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -17311,7 +17316,7 @@ const createMenuController = () => {
             menus.splice(index, 1);
         }
     };
-    const _setOpen = async (menu, shouldOpen, animated) => {
+    const _setOpen = async (menu, shouldOpen, animated, role) => {
         if (isAnimatingSync()) {
             return false;
         }
@@ -17321,7 +17326,7 @@ const createMenuController = () => {
                 await openedMenu.setOpen(false, false);
             }
         }
-        return menu._setOpen(shouldOpen, animated);
+        return menu._setOpen(shouldOpen, animated, role);
     };
     const _createAnimation = (type, menuCmp) => {
         const animationBuilder = menuAnimations.get(type); // TODO(FW-2832): type
@@ -17555,13 +17560,13 @@ class Menu {
             if (shouldClose) {
                 ev.preventDefault();
                 ev.stopPropagation();
-                this.close();
+                this.close(undefined, BACKDROP);
             }
         }
     }
     onKeydown(ev) {
         if (ev.key === 'Escape') {
-            this.close();
+            this.close(undefined, BACKDROP);
         }
     }
     /**
@@ -17590,8 +17595,8 @@ class Menu {
      * Closes the menu. If the menu is already closed or it can't be closed,
      * it returns `false`.
      */
-    close(animated = true) {
-        return this.setOpen(false, animated);
+    close(animated = true, role) {
+        return this.setOpen(false, animated, role);
     }
     /**
      * Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it.
@@ -17604,8 +17609,8 @@ class Menu {
      * Opens or closes the button.
      * If the operation can't be completed successfully, it returns `false`.
      */
-    setOpen(shouldOpen, animated = true) {
-        return menuController._setOpen(this, shouldOpen, animated);
+    setOpen(shouldOpen, animated = true, role) {
+        return menuController._setOpen(this, shouldOpen, animated, role);
     }
     trapKeyboardFocus(ev, doc) {
         const target = ev.target;
@@ -17643,12 +17648,12 @@ class Menu {
             }
         }
     }
-    async _setOpen(shouldOpen, animated = true) {
+    async _setOpen(shouldOpen, animated = true, role) {
         // If the menu is disabled or it is currently being animated, let's do nothing
         if (!this._isActive() || this.isAnimating || shouldOpen === this._isOpen) {
             return false;
         }
-        this.beforeAnimation(shouldOpen);
+        this.beforeAnimation(shouldOpen, role);
         await this.loadAnimation();
         await this.startAnimation(shouldOpen, animated);
         /**
@@ -17660,7 +17665,7 @@ class Menu {
             this.operationCancelled = false;
             return false;
         }
-        this.afterAnimation(shouldOpen);
+        this.afterAnimation(shouldOpen, role);
         return true;
     }
     async loadAnimation() {
@@ -17735,7 +17740,7 @@ class Menu {
         return checkEdgeSide(window, detail.currentX, this.isEndSide, this.maxEdgeStart);
     }
     onWillStart() {
-        this.beforeAnimation(!this._isOpen);
+        this.beforeAnimation(!this._isOpen, GESTURE);
         return this.loadAnimation();
     }
     onStart() {
@@ -17802,10 +17807,10 @@ class Menu {
         const playTo = this._isOpen ? !shouldComplete : shouldComplete;
         this.animation
             .easing('cubic-bezier(0.4, 0.0, 0.6, 1)')
-            .onFinish(() => this.afterAnimation(shouldOpen), { oneTimeCallback: true })
+            .onFinish(() => this.afterAnimation(shouldOpen, GESTURE), { oneTimeCallback: true })
             .progressEnd(playTo ? 1 : 0, this._isOpen ? 1 - newStepValue : newStepValue, 300);
     }
-    beforeAnimation(shouldOpen) {
+    beforeAnimation(shouldOpen, role) {
         assert(!this.isAnimating, '_before() should not be called while animating');
         // this places the menu into the correct location before it animates in
         // this css class doesn't actually kick off any animations
@@ -17844,10 +17849,10 @@ class Menu {
             this.ionWillOpen.emit();
         }
         else {
-            this.ionWillClose.emit();
+            this.ionWillClose.emit({ role });
         }
     }
-    afterAnimation(isOpen) {
+    afterAnimation(isOpen, role) {
         var _a;
         // keep opening/closing the menu disabled for a touch more yet
         // only add listeners/css if it's enabled and isOpen
@@ -17897,7 +17902,7 @@ class Menu {
                 this.animation.stop();
             }
             // emit close event
-            this.ionDidClose.emit();
+            this.ionDidClose.emit({ role });
             // undo focus trapping so multiple menus don't collide
             document.removeEventListener('focus', this.handleFocus, true);
         }
@@ -17929,7 +17934,7 @@ class Menu {
              * If the menu is disabled then we should
              * forcibly close the menu even if it is open.
              */
-            this.afterAnimation(false);
+            this.afterAnimation(false, GESTURE);
         }
     }
     render() {
@@ -17940,14 +17945,14 @@ class Menu {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (hAsync(Host, { key: '30c0c9bfb8973e4a6feb658f8c4ee8e362f464ed', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (hAsync(Host, { key: '5aaea91873d0885b97304372223b2a6ed16ca28b', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
                 'split-pane-side': hostContext('ion-split-pane', el),
-            } }, hAsync("div", { key: '34b0e5840906862cf1bc27207e089004b0402c56', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: '2cd7e61a8c0987ca4b3f1f8b33cba7152f1275fe' })), hAsync("ion-backdrop", { key: 'd190b1f9b66c76e276f27bfe074d3aab796180fb', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, hAsync("div", { key: '3ba822411ad11eff52c518fecf1b2a5b47e0b678', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: 'd28a78e98493b21d43ea8b19e96b21547adf1916' })), hAsync("ion-backdrop", { key: '0468c15d111737f5cb646918dcfacedadf907a8f', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -18050,7 +18055,7 @@ class MenuButton {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (hAsync(Host, { key: '95a8b9f09c7fae9713a8dc003ed277f6f31403da', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '7ec29715ce7926b7c2b08f3d9cac8aaa16b3dc28', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses$1(color, {
                 [mode]: true,
                 button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
@@ -18059,7 +18064,7 @@ class MenuButton {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, hAsync("button", Object.assign({ key: '39f3ce20c400d2fac4890a042e8e44426709fca5' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), hAsync("span", { key: '310978dc1cdef668de6720cde2a2304253679176', class: "button-inner" }, hAsync("slot", { key: '2a2b9de524c1fc3c526fe9559cb077b976852725' }, hAsync("ion-icon", { key: '9c22d7ea9fc3d76c32ec1c1b4b13d982c60b8c2d', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && hAsync("ion-ripple-effect", { key: 'c58c9e29c763070383472f65a9d322a684bcb564', type: "unbounded" }))));
+            }) }, hAsync("button", Object.assign({ key: 'd4c5929264af3ba0328118bcc27d2ab7ef5d3809' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), hAsync("span", { key: '7bfa6e9a93105486623d044861e879ec79ff64f1', class: "button-inner" }, hAsync("slot", { key: '071ab58e285832fc188706166f5547d45d501ac5' }, hAsync("ion-icon", { key: '918ec5d791921de9821c347af4f65f97dd94aabf', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && hAsync("ion-ripple-effect", { key: '00ffdd53f635e706c1dbd01b8e7944498650fe81', type: "unbounded" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -18108,10 +18113,10 @@ class MenuToggle {
     render() {
         const mode = getIonMode$1(this);
         const hidden = this.autoHide && !this.visible;
-        return (hAsync(Host, { key: '90e621f09792383f1badcc1b402b1ac7d08c5f98', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+        return (hAsync(Host, { key: '7c27ea5b0795676bf5cb33e1f83aa142c197f64e', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
                 [mode]: true,
                 'menu-toggle-hidden': hidden,
-            } }, hAsync("slot", { key: 'c0abdd1d91e9d80ee3704e3e374ebe1f29078460' })));
+            } }, hAsync("slot", { key: '69f187becedc0fe34603d41d279f043cf0fdf776' })));
     }
     static get style() { return IonMenuToggleStyle0; }
     static get cmpMeta() { return {
@@ -20115,18 +20120,18 @@ class Modal {
         const mode = getIonMode$1(this);
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
-        return (hAsync(Host, Object.assign({ key: '013ba4864ca4d2c1052c512f6a4b0732b8decff7', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'b4da5111fe4719fa450c39b2d4bd884a302a7924', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), hAsync("ion-backdrop", { key: '498b1c0a03836d6799dcf3b8e9315805c70f6480', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: 'ce22e4caf1096e87248926fe2477f0d5a4c8a5cf', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '540e47b15d8290166c39b022c725182114a75682',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), hAsync("ion-backdrop", { key: 'c12dbf747e0eb914eaf1331798548ffc7e147763', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: 'da546ee80c6576b5acc66e959fd5009e0b9a8160', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '306ebe6427440ad5f7ed36d590e562d15a503b75',
             /*
               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: 'f3b352ec9a63a7ec801462aacfd8295b4302d115', 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: 'c5d17e346fe255a7c0cacbbf15c0083f2d09c488', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), hAsync("slot", { key: '31a3f58f4c733ffdf736523c154200874a96b1d0' }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), hAsync("slot", { key: '5cc714170a00b67f3eda0cd1d6f37c1489a99c83' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -21075,7 +21080,7 @@ class Nav {
         }
     }
     render() {
-        return hAsync("slot", { key: 'e9d99a8a0b84f02f9964d8143cd5e647e43334f9' });
+        return hAsync("slot", { key: 'dfe98cb6604a2015a49f41beffebdd2da957dfff' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -21148,7 +21153,7 @@ class NavLink {
         this.routerAnimation = undefined;
     }
     render() {
-        return hAsync(Host, { key: '42c23dcdec5fdb25defebaf6e8a9fa75754ff8eb', onClick: this.onClick });
+        return hAsync(Host, { key: 'd2f8545b4fbd5aa25ef36eb01dffbc5d35ccfbb9', onClick: this.onClick });
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -21182,9 +21187,9 @@ class Note {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '90ec2fe8c9487608ed8c0bdc32c2e80a6a0890b3', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '10a3495bc21166176986441479f8f7539029d161', class: createColorClasses$1(this.color, {
                 [mode]: true,
-            }) }, hAsync("slot", { key: '115ee3f79e6c526b0644443aad468e99385d0eda' })));
+            }) }, hAsync("slot", { key: 'b6a9459e1b85f608fafd060a4bfeb11637ebe873' })));
     }
     static get style() { return {
         ios: IonNoteIosStyle0,
@@ -21681,7 +21686,7 @@ class Picker$1 {
         this.emitInputModeChange();
     }
     render() {
-        return (hAsync(Host, { key: '02b0687b1f80ba295a965dfba76dd59e2d1de5d3', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, hAsync("input", { key: 'f83ed84bcf9e02539c00d8a4e63e6a0d7fc4ac71', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
+        return (hAsync(Host, { key: 'f92214a09dc85b65873676f40fde2b802960e704', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, hAsync("input", { key: '6da37f75aca4ea1c9cb3bc733ebda2116279f313', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
                 var _a;
                 /**
                  * The "Enter" key represents
@@ -21696,7 +21701,7 @@ class Picker$1 {
                 if (ev.key === 'Enter') {
                     (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.blur();
                 }
-            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), hAsync("div", { key: '45b07fb0617d8e006712776bf78302288edb3ff4', class: "picker-before" }), hAsync("div", { key: '73009229368e0d62b09c913aacade26f068a7aa9', class: "picker-after" }), hAsync("div", { key: 'b73da00e446cd1cfd511c39212e14a00d355752e', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), hAsync("slot", { key: 'd969f5efc5ddb9eda6c4828702efd1ceeb69f767' })));
+            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), hAsync("div", { key: '298e99d83dd3f5bf2798150bab0bb4024af472fa', class: "picker-before" }), hAsync("div", { key: 'ea578f04eb562a4dc6d6cc92de133dcb9fb7f42a', class: "picker-after" }), hAsync("div", { key: '84567824956dfe967992a629904836ba8b75b3ec', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), hAsync("slot", { key: 'df81f8fb90e1f649b608328034528f5c31c70c3b' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -21949,11 +21954,11 @@ class Picker {
     render() {
         const { htmlAttributes } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, Object.assign({ key: '3b163ca87354a3a4f302ff016d5affd0dc97bccc', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '0712fa8732141848e50ad2e08e2ba66ef2a48991', "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: 'da4224447bdbcfbadd1bd63ebe7a7bfdb8aa3129', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '65eba425990a21be00fdac90de20a630d284cf97', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'd78ada360801b2c051baa030751f3d83ac81e697', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { key: 'd5bd9ddfbdbdaf42048a1496e7939eb3aee6da65', 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: '96ee1e3ec77c57174b1a93135b66bea6b7002555', class: "picker-columns" }, hAsync("div", { key: 'e11b1c238f350e65bde2ee67eee9d71c830e74e7', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-legacy-column", { col: c })), hAsync("div", { key: '4d5fc7c723185111ec01fd34ef95a897c301238d', class: "picker-below-highlight" }))), hAsync("div", { key: '899bcad97609c1d971c1b886551db5ba0248a9f4', tabindex: "0", "aria-hidden": "true" })));
+                [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), hAsync("ion-backdrop", { key: 'c997632ef0488698739664012de5a6494de438b6', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '20045054a76cca997b410835fa6b305af22dcb12', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'a73a6ac20b685ed9694d4fa95ea236ce5d63fdbf', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, hAsync("div", { key: '1221cdcc2ff013deeba12170129c8fe78308330c', 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: '45038a58430a4251100797b902e7034243137564', class: "picker-columns" }, hAsync("div", { key: 'c579bb69cddd4090912855ffd7f59536280f34b9', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => hAsync("ion-picker-legacy-column", { col: c })), hAsync("div", { key: '978c6632d82a97d053b729c9de65dd3af4c4cee2', class: "picker-below-highlight" }))), hAsync("div", { key: 'e7e9dc437a3cf6d559e2cb0df71af69047a2ae31', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -22535,12 +22540,12 @@ class PickerColumn {
     render() {
         const { color, disabled, isActive, numericInput } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'd60736ce74c0e8c774a163272b78fbad32993ec2', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'a221dc10f1eb7c41637a16d2c7167c16939822fd', class: createColorClasses$1(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, this.renderAssistiveFocusable(), hAsync("slot", { key: '74611112ef154b343ae29a773f8cd8a01cc1447d', name: "prefix" }), hAsync("div", { key: 'af772d2b61b7eb41a567593d290b80a50b7caa72', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
+            }) }, this.renderAssistiveFocusable(), hAsync("slot", { key: '81b0656f606856f3dc0a657bf167d81a5011405e', name: "prefix" }), hAsync("div", { key: '71b9de67c04150255dd66592601c9d926db0c31c', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
                 this.scrollEl = el;
             },
             /**
@@ -22561,7 +22566,7 @@ class PickerColumn {
              * To prevent this, we set the tabIndex to -1. This
              * will match the behavior of the other browsers.
              */
-            tabIndex: -1 }, hAsync("div", { key: '4b646ee97bcf8ed541b9798c91dff189eec41dd1', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'a44d1a10d20a13aeb47f9871b09e291aa7f216bd', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '6a481715bd68fa68dc2a76c2e867ce771ea680b0', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("slot", { key: '23236e731b1ad432c104761ebeec91697a6b7643' }), hAsync("div", { key: '58a6c1f35a3ff0b26acaceebfd477d74b6dcfd6d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'ea864872dec6dc363406d1bd9101b1bf21944db6', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '28cc4c570d0dd59f491eef2b15a5ed706d28b7bb', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), hAsync("slot", { key: 'cff1cc0bea732a5ce22bb451c5ea404a84af1993', name: "suffix" })));
+            tabIndex: -1 }, hAsync("div", { key: 'ebdc2f08c83db0cf17b4be29f28fcb00f529601e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '04ab56fcb8e6a7d6af00204c4560feb99ff34a56', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '6cf8f538903faf0fe1e4130f3eaf7b4e2e17cb52', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("slot", { key: '1cc392307b70c576be5b81b5226ceba735957f0f' }), hAsync("div", { key: '23e3f28e2a99b9aa8b7c8f68ad9583e3ca63e9e2', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '8a0563f09780c3116af0caebe4f40587ec1f041f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '13207e248fc0009f37e0c90a3ee2bac2f130b856', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), hAsync("slot", { key: '55ecf2ab5f214f936c2468cbdb7952daf89416b8', name: "suffix" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -22928,9 +22933,9 @@ class PickerColumnCmp {
     render() {
         const col = this.col;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '56289a294e5c580f3e7fe5fc12777aa7f80ad19b', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
+        return (hAsync(Host, { key: 'c015eb8bc01b3287cbd1d71af0aa311b6be89d36', class: Object.assign({ [mode]: true, 'picker-col': true, 'picker-opts-left': this.col.align === 'left', 'picker-opts-right': this.col.align === 'right' }, getClassMap(col.cssClass)), style: {
                 'max-width': this.col.columnWidth,
-            } }, col.prefix && (hAsync("div", { key: 'd21f44667b5df567d6879723fe643ea7c2c60bef', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), hAsync("div", { key: 'bb427e5f24fd832703926e0e847ad05567597262', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (hAsync("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (hAsync("div", { key: '0413f7c074b6534b8967387ecb9957a79a267aff', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
+            } }, col.prefix && (hAsync("div", { key: 'f9de3fe2f5c7ad3256d6e5f44b6d03a2b1f96ffb', class: "picker-prefix", style: { width: col.prefixWidth } }, col.prefix)), hAsync("div", { key: '10f9c12aa174f96c7cf9adc30efbb26695c0aa64', class: "picker-opts", style: { maxWidth: col.optionsWidth }, ref: (el) => (this.optsEl = el) }, col.options.map((o, index) => (hAsync("button", { "aria-label": o.ariaLabel, class: { 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }, "opt-index": index }, o.text)))), col.suffix && (hAsync("div", { key: '1d9c0892ce56e0da9044c79eb953827166f5190b', class: "picker-suffix", style: { width: col.suffixWidth } }, col.suffix))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -23034,10 +23039,10 @@ class PickerColumnOption {
     render() {
         const { color, disabled, ariaLabel } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'cc4435a0ce0e55be1321bcabaf342ed68cf5ba1e', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'c743c6ef44bb9f765cc15b3b5d2864de6520203a', class: createColorClasses$1(color, {
                 [mode]: true,
                 ['option-disabled']: disabled,
-            }) }, hAsync("button", { key: '0187fb967771e0787807a8538dce4e59f6a98565', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, hAsync("slot", { key: 'dbe52552f3f27332816748c12d929cc81060841d' }))));
+            }) }, hAsync("button", { key: '4c3d9eb245c52b2c007f727e145cfb55759bd7a9', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, hAsync("slot", { key: '4c907d2187cbe9d5941e27f2b12578e2b7271461' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -24351,9 +24356,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: '3a7c4c39384bab1447c4bd6b9b06d7837a09353b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'ffe8b37c9ffb5cac210a7307e6cdfcf78712905b', "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: '38a1c4ad29238d1e81cab407f099121fa4947cce', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: 'f825494c5e3be89d7fcf0229e29b405bccb13edb', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '3acae5a0106389c776c8ffe5bf10f3ff006e0346', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '2aa73e9f06b1d2ac4c0d36c23186b9164f395079', class: "popover-content", part: "content" }, hAsync("slot", { key: '62f5713414aae47dde6a8aef1f9b69af287534ae' })))));
+            }, 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: '12b3ffa3928b4d56a4f09c3d2f5d493d47b45255', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: '2c2862d5c7e75b637973c712b4982bf4978c0cdf', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '0cfacc52afaa7abc28c1b7742889d7a1c23a37ad', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '3ef570c44d4fe7f063dd419008c92c8c40d3cd22', class: "popover-content", part: "content" }, hAsync("slot", { key: '6fc5dfdce20fee1642bc1f05d41b5bf7d1034457' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -24445,7 +24450,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: 'b293f4475bcdaa7851b41ebfda659037f0365120', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '8d8ddf0b26fe33803d3a6168cbedd523d1a888e7', 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,
@@ -24578,8 +24583,10 @@ class Radio {
     }
     /** @internal */
     async setFocus(ev) {
-        ev.stopPropagation();
-        ev.preventDefault();
+        if (ev !== undefined) {
+            ev.stopPropagation();
+            ev.preventDefault();
+        }
         this.el.focus();
     }
     /** @internal */
@@ -24613,7 +24620,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: 'd6d9525eea9dadc3ea7060eb9b8cbb919e1d7091', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '5a0adab55ad009305de4856fa1b9f93f2279a734', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
                 [mode]: true,
                 'in-item': inItem,
                 'radio-checked': checked,
@@ -24624,10 +24631,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: '3ec73512bac8feb651c66e544899c6a4330d504c', class: "radio-wrapper" }, hAsync("div", { key: '9ae7ecb19c7bafe0ce3d0f717af0338251964ebf', class: {
+            }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, hAsync("label", { key: 'f5673a798e6d87868339f046445f707e1d93b7b6', class: "radio-wrapper" }, hAsync("div", { key: 'e9190c06f75a171cab63e3f74ccf771c3ed87005', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, hAsync("slot", { key: '2950f1579a22d4a06f9c903fd462c2b46f43bfd7' })), hAsync("div", { key: '8b19ce30b39066744108a6de2da42a7ce8ffdbec', class: "native-wrapper" }, this.renderRadioControl()))));
+            }, part: "label" }, hAsync("slot", { key: '6cedf4e7b3bd03e4a635727dd7b6094bab64af64' })), hAsync("div", { key: '26dd48d9d2848b7f100b732abdc4a3171adde483', class: "native-wrapper" }, this.renderRadioControl()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -24759,7 +24766,9 @@ class RadioGroup {
         this.ionChange.emit({ value, event });
     }
     onKeydown(ev) {
-        const inSelectPopover = !!this.el.closest('ion-select-popover');
+        // We don't want the value to automatically change/emit when the radio group is part of a select interface
+        // as this will cause the interface to close when navigating through the radio group options
+        const inSelectInterface = !!this.el.closest('ion-select-popover') || !!this.el.closest('ion-select-modal');
         if (ev.target && !this.el.contains(ev.target)) {
             return;
         }
@@ -24783,7 +24792,7 @@ class RadioGroup {
             }
             if (next && radios.includes(next)) {
                 next.setFocus(ev);
-                if (!inSelectPopover) {
+                if (!inSelectInterface) {
                     this.value = next.value;
                     this.emitValueChange(ev);
                 }
@@ -24812,7 +24821,7 @@ class RadioGroup {
         const { label, labelId, el, name, value } = this;
         const mode = getIonMode$1(this);
         renderHiddenInput(true, el, name, value, false);
-        return hAsync(Host, { key: '7a8ad7eb6a05c6f96a348dcf30fd0c610a95688c', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
+        return hAsync(Host, { key: '99f543b9caa8e2d30a80e7ea7ecf6b6fdacc76eb', role: "radiogroup", "aria-labelledby": label ? labelId : null, onClick: this.onClick, class: mode });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -25444,7 +25453,7 @@ class Range {
         const needsEndAdjustment = inItem && !hasEndContent;
         const mode = getIonMode$1(this);
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (hAsync(Host, { key: '877c9f15e62fadb184f9da82dc19898227521e07', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '05c699caaead7cc74deaae2a958c4632191473a8', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
@@ -25453,10 +25462,10 @@ class Range {
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
-            }) }, hAsync("label", { key: '2ae9088349a65e09b0e33c53442190ef563b2345', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: 'c3d0ca96ceb1e57fbd383e9c7e4da14d931771b8', class: {
+            }) }, hAsync("label", { key: '959837bcc48c4bda33ae1f62b66ef444329a2961', class: "range-wrapper", id: "range-label" }, hAsync("div", { key: 'a434c6b5c26f57f52b3af98d881e7e6a179c89fc', 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: '25d20fd5e015931f60a8ecc5374a1c84d167af9c', class: "native-wrapper" }, hAsync("slot", { key: 'ae9f9fd92eed35b81ca97a81caa56332d8b6b2b2', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: '74b7dede566a959c9b05a6de68426c7e339d18c8', name: "end" })))));
+            }, part: "label" }, label !== undefined ? hAsync("div", { class: "label-text" }, label) : hAsync("slot", { name: "label" })), hAsync("div", { key: '87df1037b6b3337bd1fab05d33a26bf658c57914', class: "native-wrapper" }, hAsync("slot", { key: '2cb88f101da49b70aeae29b0bf5445fac241bb2f', name: "start" }), this.renderRangeSlider(), hAsync("slot", { key: '17b835cfb2bd9b8e1957afd425543ff02b913d83', name: "end" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -26357,7 +26366,7 @@ class Refresher {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '3270f181a5141e7d886ec554a3e892974446b90e', slot: "fixed", class: {
+        return (hAsync(Host, { key: '9d4ac22988aec2c6af0b0c90934c52f62f0e4ce3', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,
@@ -26585,7 +26594,7 @@ class RefresherContent {
         const pullingIcon = this.pullingIcon;
         const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '1bec5b4da221c69d856f3f5ddf40f2e03ebf2a4c', class: mode }, hAsync("div", { key: '4fcc526c4f1881e9368d9cd16bd7030919bd3841', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (hAsync("div", { key: 'a4e9e2e12c2d7faefc8303ec8c021f999ddf308e', class: "refresher-pulling-icon" }, hAsync("div", { key: '5a2d215feb7fb4b64d540d3a65c0f24b415a2433', class: "spinner-arrow-container" }, hAsync("ion-spinner", { key: 'abef2621d671ac6ff0abac43a702cbd825b7f127', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (hAsync("div", { key: '30087d672c3780672a05874cd93cd099b2855462', class: "arrow-container" }, hAsync("ion-icon", { key: '5e30333dee469aec0d8efc8c4e6dabb619c6f363', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (hAsync("div", { key: '48fe72b5ce8ded633c6ee799cebb520b9c8be528', class: "refresher-pulling-icon" }, hAsync("ion-icon", { key: 'd8dfd5d42056b1c0a436c5006affb255407816c0', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), hAsync("div", { key: 'c2cbfb94f157c82601ffe7bb815ff82ebc7c0a49', class: "refresher-refreshing" }, this.refreshingSpinner && (hAsync("div", { key: '17f3ebe6a31768d5e389f45a2c12f68600185db9', class: "refresher-refreshing-icon" }, hAsync("ion-spinner", { key: 'e8e61f8d7189c9939bba184201c9509d1d5b0fad', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
+        return (hAsync(Host, { key: '19633bbcf02e3dba885d6bdcdaf2269bf4c8e2f5', class: mode }, hAsync("div", { key: '28922e434a55a6cac0476fe2bee56941ce0d1c02', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (hAsync("div", { key: 'fe575bf996021884677e9b23a3215d63caf894f5', class: "refresher-pulling-icon" }, hAsync("div", { key: '59fe12297fd95bc33b8df8cd35316e2a1c084d91', class: "spinner-arrow-container" }, hAsync("ion-spinner", { key: 'af9cc013ae04945c140b2865610ca73edb52ab48', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (hAsync("div", { key: '34df66ad1b0f706a0532957251aa2c20bf4587d8', class: "arrow-container" }, hAsync("ion-icon", { key: 'ffdb5c123e606b823491c6c51cc2b497f62581bb', icon: caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (hAsync("div", { key: 'ac3a2032bb969264d20fa057e9123441005d7a9d', class: "refresher-pulling-icon" }, hAsync("ion-icon", { key: 'd969d10915548e72aae289b52154366f3dd39b31', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), hAsync("div", { key: 'a8f854f81a94812d7bef8ce088331d94f49ff53d', class: "refresher-refreshing" }, this.refreshingSpinner && (hAsync("div", { key: 'a1f646945370e40c844d62bc0c647443ae9dfbe7', class: "refresher-refreshing-icon" }, hAsync("ion-spinner", { key: 'ab3ff4047769b6436e222b46d193c1e8b23e2fce', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
     get el() { return getElement(this); }
     static get cmpMeta() { return {
@@ -26628,7 +26637,7 @@ class Reorder {
     render() {
         const mode = getIonMode$1(this);
         const reorderIcon = mode === 'ios' ? reorderThreeOutline : reorderTwoSharp;
-        return (hAsync(Host, { key: '663d74e231e3af56b6298ee2539fdac9c8465839', class: mode }, hAsync("slot", { key: 'c7c384ab8c9ca8abdc89cd984a39dfde70e342ca' }, hAsync("ion-icon", { key: 'c8b6052db03d4b9e33a90e600c20861c73ee73ce', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
+        return (hAsync(Host, { key: '27266e30bcb7e10c57fb6d546399cfb1f1c93b23', class: mode }, hAsync("slot", { key: '8745cb9a31458e884c27eed1fb90d104fe9a79eb' }, hAsync("ion-icon", { key: '6c4b9631a2f5610f1e21b2db025b6702d0d593bf', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -26882,7 +26891,7 @@ class ReorderGroup {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '491f3e5843cf728ff4589e58bd86b8ce6709b293', class: {
+        return (hAsync(Host, { key: 'a38c7fbceb677201330a602273d5b55abb32da19', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
@@ -26990,7 +26999,7 @@ class RippleEffect {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '2302f087ab1c6755355736e4ca77309c5fdcf185', role: "presentation", class: {
+        return (hAsync(Host, { key: '7ae559bda5d2c1856a45bfa150c2cb4f83373f8e', role: "presentation", class: {
                 [mode]: true,
                 unbounded: this.unbounded,
             } }));
@@ -27932,10 +27941,10 @@ class RouterLink {
             rel: this.rel,
             target: this.target,
         };
-        return (hAsync(Host, { key: 'f876442cab5b14b7e83c6d6ad2c2d878a9c57439', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '529ceed5beaf92d7b4cc315c82f449eac18310e8', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'ion-activatable': true,
-            }) }, hAsync("a", Object.assign({ key: 'c44b78ec1fd10a40c23bfe548860ac2b346646a8' }, attrs), hAsync("slot", { key: 'd32180a567613f79f89885135bd0d776ffc1eb8e' }))));
+            }) }, hAsync("a", Object.assign({ key: 'd5f1f8b256695d70bdafd20ff3d1b625963fa2da' }, attrs), hAsync("slot", { key: '613fcdb36a71e076f989551ea21f1d5c118b1cd2' }))));
     }
     static get style() { return IonRouterLinkStyle0; }
     static get cmpMeta() { return {
@@ -28130,7 +28139,7 @@ class RouterOutlet {
         return true;
     }
     render() {
-        return hAsync("slot", { key: '8279a453c66a766e6e383ff59842b4ae070c13a9' });
+        return hAsync("slot", { key: 'a70341f58d19df55de1dad00e3464388e446aa2a' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -28164,7 +28173,7 @@ class Row {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '813c9a7f6782d2cf8eb27f30d3ab28e6f3122868', class: getIonMode$1(this) }, hAsync("slot", { key: '356bec4d4d408ea63d6b431b06465d5b7bcbff71' })));
+        return (hAsync(Host, { key: 'aea072a5005e3f1f309f0d1ae5be5ee19869b035', class: getIonMode$1(this) }, hAsync("slot", { key: '2a481c2126ac6ca65f0a1bbd07c2d3365409cb78' })));
     }
     static get style() { return IonRowStyle0; }
     static get cmpMeta() { return {
@@ -28558,8 +28567,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: '20b2d0f2e3425eede725dbe3323c7c29cdb66f4e', "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: '3a516c3fdd35256eb79639fd340afcdd92cfd7aa', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (hAsync(Host, { key: '34878db21f63a9bdffca0446d8ad5619ff04cac3', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '0ef595eb1628928d4c7fdb166b8e41768700fa6e', "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: 'ea2c9b36d991acf5af7662059cb6b045f683ca94', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (hAsync(Host, { key: '17d57ece5852d03047e4d53ddad6c9d88a432a00', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -28569,14 +28578,14 @@ class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, hAsync("div", { key: 'faa7b011206a8359b1963368c65988e506b260cb', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: '732d3e5a2b258da6f136a14472ac872816a9853b', "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: '767dca971849f221dde220deae728b41bf764b98', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: '9941b5de1ed9ebcf3e81de8e0731c09dea5a89d9', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, hAsync("div", { key: 'f67c2124e70c24eef0a271516e9c4bdaf7e98ceb', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: '8c7f7ccc6809cca30ccc8c4e98e349d3f916321d', "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: 'f06524d3163b3883bbde937862aa1e0e8f49f6e1', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: '9f7ba2bec93412ecb674b197be13db1de308bb57', "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: 'cb2b543d286373a84e2c6c2a959f92b045bbd7dd', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: '19fc3dbc722acc47ff7eb3c94ad4de8aed38dff4', "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 {
@@ -28643,6 +28652,7 @@ class Segment {
         this.ionChange = createEvent(this, "ionChange", 7);
         this.ionSelect = createEvent(this, "ionSelect", 7);
         this.ionStyle = createEvent(this, "ionStyle", 7);
+        this.segmentViewEl = null;
         this.onClick = (ev) => {
             const current = ev.target;
             const previous = this.checked;
@@ -28657,7 +28667,13 @@ class Segment {
             if (current !== previous) {
                 this.emitValueChange();
             }
-            if (this.scrollable || !this.swipeGesture) {
+            if (this.segmentViewEl) {
+                this.updateSegmentView();
+                if (this.scrollable && previous) {
+                    this.checkButton(previous, current);
+                }
+            }
+            else if (this.scrollable || !this.swipeGesture) {
                 if (previous) {
                     this.checkButton(previous, current);
                 }
@@ -28713,19 +28729,49 @@ class Segment {
     swipeGestureChanged() {
         this.gestureChanged();
     }
-    valueChanged(value) {
+    valueChanged(value, oldValue) {
+        // Force a value to exist if we're using a segment view
+        if (this.segmentViewEl && value === undefined) {
+            this.value = this.getButtons()[0].value;
+            return;
+        }
+        if (oldValue !== undefined && value !== undefined) {
+            const buttons = this.getButtons();
+            const previous = buttons.find((button) => button.value === oldValue);
+            const current = buttons.find((button) => button.value === value);
+            if (previous && current) {
+                if (!this.segmentViewEl) {
+                    this.checkButton(previous, current);
+                }
+                else if (this.triggerScrollOnValueChange !== false) {
+                    this.updateSegmentView();
+                }
+            }
+        }
+        else if (value !== undefined && oldValue === undefined && this.segmentViewEl) {
+            this.updateSegmentView();
+        }
         /**
          * `ionSelect` is emitted every time the value changes (internal or external changes).
          * Used by `ion-segment-button` to determine if the button should be checked.
          */
         this.ionSelect.emit({ value });
-        this.scrollActiveButtonIntoView();
+        // The scroll listener should handle scrolling the active button into view as needed
+        if (!this.segmentViewEl) {
+            this.scrollActiveButtonIntoView();
+        }
+        this.triggerScrollOnValueChange = undefined;
     }
     disabledChanged() {
         this.gestureChanged();
-        const buttons = this.getButtons();
-        for (const button of buttons) {
-            button.disabled = this.disabled;
+        if (!this.segmentViewEl) {
+            const buttons = this.getButtons();
+            for (const button of buttons) {
+                button.disabled = this.disabled;
+            }
+        }
+        else {
+            this.segmentViewEl.disabled = this.disabled;
         }
     }
     gestureChanged() {
@@ -28735,6 +28781,10 @@ class Segment {
     }
     connectedCallback() {
         this.emitStyle();
+        this.segmentViewEl = this.getSegmentView();
+    }
+    disconnectedCallback() {
+        this.segmentViewEl = null;
     }
     componentWillLoad() {
         this.emitStyle();
@@ -28768,6 +28818,9 @@ class Segment {
         if (this.disabled) {
             this.disabledChanged();
         }
+        // Update segment view based on the initial value,
+        // but do not animate the scroll
+        this.updateSegmentView(false);
     }
     onStart(detail) {
         this.valueBeforeGesture = this.value;
@@ -28784,6 +28837,7 @@ class Segment {
         if (value !== undefined) {
             if (this.valueBeforeGesture !== value) {
                 this.emitValueChange();
+                this.updateSegmentView();
             }
         }
         this.valueBeforeGesture = undefined;
@@ -28811,12 +28865,7 @@ class Segment {
     setActivated(activated) {
         const buttons = this.getButtons();
         buttons.forEach((button) => {
-            if (activated) {
-                button.classList.add('segment-button-activated');
-            }
-            else {
-                button.classList.remove('segment-button-activated');
-            }
+            button.classList.toggle('segment-button-activated', activated);
         });
         this.activated = activated;
     }
@@ -28867,6 +28916,7 @@ class Segment {
             currentIndicator.classList.add('segment-button-indicator-animated');
             // Remove the transform to slide the indicator back to the button clicked
             currentIndicator.style.setProperty('transform', '');
+            this.scrollActiveButtonIntoView(true);
         });
         this.value = current.value;
         this.setCheckedClasses();
@@ -28882,6 +28932,60 @@ class Segment {
             buttons[next].classList.add('segment-button-after-checked');
         }
     }
+    getSegmentView() {
+        const buttons = this.getButtons();
+        // Get the first button with a contentId
+        const firstContentId = buttons.find((button) => button.contentId);
+        // Get the segment content with an id matching the button's contentId
+        const segmentContent = document.querySelector(`ion-segment-content[id="${firstContentId === null || firstContentId === void 0 ? void 0 : firstContentId.contentId}"]`);
+        // Return the segment view for that matching segment content
+        return segmentContent === null || segmentContent === void 0 ? void 0 : segmentContent.closest('ion-segment-view');
+    }
+    handleSegmentViewScroll(ev) {
+        const { scrollRatio, isManualScroll } = ev.detail;
+        if (!isManualScroll) {
+            return;
+        }
+        const dispatchedFrom = ev.target;
+        const segmentViewEl = this.segmentViewEl;
+        const segmentEl = this.el;
+        // Only update the indicator if the event was dispatched from the correct segment view
+        if (ev.composedPath().includes(segmentViewEl) || (dispatchedFrom === null || dispatchedFrom === void 0 ? void 0 : dispatchedFrom.contains(segmentEl))) {
+            const buttons = this.getButtons();
+            // If no buttons are found or there is no value set then do nothing
+            if (!buttons.length)
+                return;
+            const index = buttons.findIndex((button) => button.value === this.value);
+            const current = buttons[index];
+            const nextIndex = Math.round(scrollRatio * (buttons.length - 1));
+            if (this.lastNextIndex === undefined || this.lastNextIndex !== nextIndex) {
+                this.lastNextIndex = nextIndex;
+                this.triggerScrollOnValueChange = false;
+                this.checkButton(current, buttons[nextIndex]);
+                this.emitValueChange();
+            }
+        }
+    }
+    /**
+     * Finds the related segment view and sets its current content
+     * based on the selected segment button. This method
+     * should be called on initial load of the segment,
+     * after the gesture is completed (if dragging between segments)
+     * and when a segment button is clicked directly.
+     */
+    updateSegmentView(smoothScroll = true) {
+        const buttons = this.getButtons();
+        const button = buttons.find((btn) => btn.value === this.value);
+        // If the button does not have a contentId then there is
+        // no associated segment view to update
+        if (!(button === null || button === void 0 ? void 0 : button.contentId)) {
+            return;
+        }
+        const segmentView = this.segmentViewEl;
+        if (segmentView) {
+            segmentView.setContent(button.contentId, smoothScroll);
+        }
+    }
     scrollActiveButtonIntoView(smoothScroll = true) {
         const { scrollable, value, el } = this;
         if (scrollable) {
@@ -29064,14 +29168,14 @@ class Segment {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'f1f7103b4c298e037df850ac809a1a7c6e9987a7', role: "tablist", onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '66bd7a565ba73540b3bbe56dd23b95e59bcef9bc', 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: '6efdb318b13da8d21687084aa0761728fdf12579', onSlotchange: this.onSlottedItemsChange })));
+            }) }, hAsync("slot", { key: '782c521b1a33729b8eab1c4b879bc3f2ff48ae1b', onSlotchange: this.onSlottedItemsChange })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29096,7 +29200,7 @@ class Segment {
             "selectOnFocus": [4, "select-on-focus"],
             "activated": [32]
         },
-        "$listeners$": [[0, "keydown", "onKeyDown"]],
+        "$listeners$": [[16, "ionSegmentViewScroll", "handleSegmentViewScroll"], [0, "keydown", "onKeyDown"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": [["color", "color"]]
     }; }
@@ -29133,6 +29237,7 @@ class SegmentButton {
             }
         };
         this.checked = false;
+        this.contentId = undefined;
         this.disabled = false;
         this.layout = 'icon-top';
         this.type = 'button';
@@ -29148,6 +29253,26 @@ class SegmentButton {
             addEventListener$1(segmentEl, 'ionSelect', this.updateState);
             addEventListener$1(segmentEl, 'ionStyle', this.updateStyle);
         }
+        // Return if there is no contentId defined
+        if (!this.contentId)
+            return;
+        // Attempt to find the Segment Content by its contentId
+        const segmentContent = document.getElementById(this.contentId);
+        // If no associated Segment Content exists, log an error and return
+        if (!segmentContent) {
+            console.error(`Segment Button: Unable to find Segment Content with id="${this.contentId}".`);
+            return;
+        }
+        // Ensure the found element is a valid ION-SEGMENT-CONTENT
+        if (segmentContent.tagName !== 'ION-SEGMENT-CONTENT') {
+            console.error(`Segment Button: Element with id="${this.contentId}" is not an <ion-segment-content> element.`);
+            return;
+        }
+        // Prevent buttons from being disabled when associated with segment content
+        if (this.disabled) {
+            console.warn(`Segment Button: Segment buttons cannot be disabled when associated with an <ion-segment-content>.`);
+            this.disabled = false;
+        }
     }
     disconnectedCallback() {
         const segmentEl = this.segmentEl;
@@ -29181,7 +29306,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: '70cf5c7a3ae2620222c5250c644faf3cfc3b3e4e', class: {
+        return (hAsync(Host, { key: 'd50a5d5e2f6206e8523598f258d8217d2903f69b', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -29197,10 +29322,7 @@ class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, hAsync("button", Object.assign({ key: 'a53c9f1e360934e8d2e90476642ba4507fc38ebd', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled }, this.inheritedAttributes), hAsync("span", { key: '7d8feda840d389941cc693f500b5eba0b39b41da', class: "button-inner" }, hAsync("slot", { key: 'd9ae1eec45db253cbf573d29cd545658dd595d87' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '49e6a16968709dc9b3fc77bc9fb99acb42fda88c' })), hAsync("div", { key: '4e3ea0989ed5205dbb03586e4facb439b05a92de', part: "indicator", class: {
-                'segment-button-indicator': true,
-                'segment-button-indicator-animated': true,
-            } }, hAsync("div", { key: '65c72a151080998c1e548c87d4d4ebd5c7dda72f', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, hAsync("button", Object.assign({ key: 'b4f6f145286ba8ab79669e11035b906daa85ae7e', "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: '67965996c9ffe70553875e00d3da0ae5b2b1d814', class: "button-inner" }, hAsync("slot", { key: '5087988fe45a8fdf388ec44c395d0b745b207806' })), mode === 'md' && hAsync("ion-ripple-effect", { key: 'b24858de0750bbc769b3183fac0077dfe817ba27' })), hAsync("div", { key: '97b4359432acd1c9da0816360cd1df9472e183f7', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, hAsync("div", { key: '0561738ea15b0986f4ed3d8276d5e6f2d13f7e51', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29214,6 +29336,7 @@ class SegmentButton {
         "$flags$": 41,
         "$tagName$": "ion-segment-button",
         "$members$": {
+            "contentId": [513, "content-id"],
             "disabled": [1028],
             "layout": [1],
             "type": [1],
@@ -29223,6 +29346,151 @@ class SegmentButton {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["contentId", "content-id"]]
+    }; }
+}
+
+const segmentContentCss = ":host{scroll-snap-align:center;scroll-snap-stop:always;-ms-flex-negative:0;flex-shrink:0;width:100%}";
+var IonSegmentContentStyle0 = segmentContentCss;
+
+class SegmentContent {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (hAsync(Host, { key: '03684b2999ac64fe13e376fd7e7f279976e9d4f2' }, hAsync("slot", { key: '143031075bf33ca19e7cfd76fc8a67b83ccaf11c' })));
+    }
+    static get style() { return IonSegmentContentStyle0; }
+    static get cmpMeta() { return {
+        "$flags$": 9,
+        "$tagName$": "ion-segment-content",
+        "$members$": undefined,
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+const segmentViewIosCss = ":host{display:-ms-flexbox;display:flex;height:100%;overflow-x:scroll;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}:host::-webkit-scrollbar{display:none}:host(.segment-view-disabled){-ms-touch-action:none;touch-action:none;overflow-x:hidden}:host(.segment-view-scroll-disabled){pointer-events:none}:host(.segment-view-disabled){opacity:0.3}";
+var IonSegmentViewIosStyle0 = segmentViewIosCss;
+
+const segmentViewMdCss = ":host{display:-ms-flexbox;display:flex;height:100%;overflow-x:scroll;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}:host::-webkit-scrollbar{display:none}:host(.segment-view-disabled){-ms-touch-action:none;touch-action:none;overflow-x:hidden}:host(.segment-view-scroll-disabled){pointer-events:none}:host(.segment-view-disabled){opacity:0.3}";
+var IonSegmentViewMdStyle0 = segmentViewMdCss;
+
+class SegmentView {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.ionSegmentViewScroll = createEvent(this, "ionSegmentViewScroll", 7);
+        this.scrollEndTimeout = null;
+        this.isTouching = false;
+        this.disabled = false;
+        this.isManualScroll = undefined;
+    }
+    handleScroll(ev) {
+        var _a;
+        const { scrollLeft, scrollWidth, clientWidth } = ev.target;
+        const scrollRatio = scrollLeft / (scrollWidth - clientWidth);
+        this.ionSegmentViewScroll.emit({
+            scrollRatio,
+            isManualScroll: (_a = this.isManualScroll) !== null && _a !== void 0 ? _a : true,
+        });
+        // Reset the timeout to check for scroll end
+        this.resetScrollEndTimeout();
+    }
+    /**
+     * Handle touch start event to know when the user is actively dragging the segment view.
+     */
+    handleScrollStart() {
+        if (this.scrollEndTimeout) {
+            clearTimeout(this.scrollEndTimeout);
+            this.scrollEndTimeout = null;
+        }
+        this.isTouching = true;
+    }
+    /**
+     * Handle touch end event to know when the user is no longer dragging the segment view.
+     */
+    handleTouchEnd() {
+        this.isTouching = false;
+    }
+    /**
+     * Reset the scroll end detection timer. This is called on every scroll event.
+     */
+    resetScrollEndTimeout() {
+        if (this.scrollEndTimeout) {
+            clearTimeout(this.scrollEndTimeout);
+            this.scrollEndTimeout = null;
+        }
+        this.scrollEndTimeout = setTimeout(() => {
+            this.checkForScrollEnd();
+        }, 
+        // Setting this to a lower value may result in inconsistencies in behavior
+        // across browsers (particularly Firefox).
+        // Ideally, all of this logic is removed once the scroll end event is
+        // supported on all browsers (https://caniuse.com/?search=scrollend)
+        100);
+    }
+    /**
+     * Check if the scroll has ended and the user is not actively touching.
+     * If the conditions are met (active content is enabled and no active touch),
+     * reset the scroll position and emit the scroll end event.
+     */
+    checkForScrollEnd() {
+        // Only emit scroll end event if the active content is not disabled and
+        // the user is not touching the segment view
+        if (!this.isTouching) {
+            this.isManualScroll = undefined;
+        }
+    }
+    /**
+     * @internal
+     *
+     * This method is used to programmatically set the displayed segment content
+     * in the segment view. Calling this method will update the `value` of the
+     * corresponding segment button.
+     *
+     * @param id: The id of the segment content to display.
+     * @param smoothScroll: Whether to animate the scroll transition.
+     */
+    async setContent(id, smoothScroll = true) {
+        const contents = this.getSegmentContents();
+        const index = contents.findIndex((content) => content.id === id);
+        if (index === -1)
+            return;
+        this.isManualScroll = false;
+        this.resetScrollEndTimeout();
+        const contentWidth = this.el.offsetWidth;
+        this.el.scrollTo({
+            top: 0,
+            left: index * contentWidth,
+            behavior: smoothScroll ? 'smooth' : 'instant',
+        });
+    }
+    getSegmentContents() {
+        return Array.from(this.el.querySelectorAll('ion-segment-content'));
+    }
+    render() {
+        const { disabled, isManualScroll } = this;
+        return (hAsync(Host, { key: '9f4f11d31c4db776f077e59ae895b35dd4454717', class: {
+                'segment-view-disabled': disabled,
+                'segment-view-scroll-disabled': isManualScroll === false,
+            } }, hAsync("slot", { key: 'ea58b21f031cee2ab2b70580f336deaefa364538' })));
+    }
+    get el() { return getElement(this); }
+    static get style() { return {
+        ios: IonSegmentViewIosStyle0,
+        md: IonSegmentViewMdStyle0
+    }; }
+    static get cmpMeta() { return {
+        "$flags$": 41,
+        "$tagName$": "ion-segment-view",
+        "$members$": {
+            "disabled": [4],
+            "isManualScroll": [32],
+            "setContent": [64]
+        },
+        "$listeners$": [[1, "scroll", "handleScroll"], [1, "touchstart", "handleScrollStart"], [1, "touchend", "handleTouchEnd"]],
+        "$lazyBundleId$": "-",
         "$attrsToReflect$": []
     }; }
 }
@@ -29383,13 +29651,12 @@ class Select {
             this.setFocus();
         });
         await overlay.present();
-        // focus selected option for popovers
-        if (this.interface === 'popover') {
-            const indexOfSelected = this.childOpts.map((o) => o.value).indexOf(this.value);
+        // focus selected option for popovers and modals
+        if (this.interface === 'popover' || this.interface === 'modal') {
+            const indexOfSelected = this.childOpts.findIndex((o) => o.value === this.value);
             if (indexOfSelected > -1) {
                 const selectedItem = overlay.querySelector(`.select-interface-option:nth-child(${indexOfSelected + 1})`);
                 if (selectedItem) {
-                    focusVisibleElement(selectedItem);
                     /**
                      * Browsers such as Firefox do not
                      * correctly delegate focus when manually
@@ -29403,8 +29670,11 @@ class Select {
                      */
                     const interactiveEl = selectedItem.querySelector('ion-radio, ion-checkbox');
                     if (interactiveEl) {
-                        interactiveEl.focus();
+                        // Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
+                        // and removing `ion-focused` style
+                        interactiveEl.setFocus();
                     }
+                    focusVisibleElement(selectedItem);
                 }
             }
             else {
@@ -29413,11 +29683,14 @@ class Select {
                  */
                 const firstEnabledOption = overlay.querySelector('ion-radio:not(.radio-disabled), ion-checkbox:not(.checkbox-disabled)');
                 if (firstEnabledOption) {
-                    focusVisibleElement(firstEnabledOption.closest('ion-item'));
                     /**
                      * Focus the option for the same reason as we do above.
+                     *
+                     * Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
+                     * and removing `ion-focused` style
                      */
-                    firstEnabledOption.focus();
+                    firstEnabledOption.setFocus();
+                    focusVisibleElement(firstEnabledOption.closest('ion-item'));
                 }
             }
         }
@@ -29439,6 +29712,9 @@ class Select {
         if (selectInterface === 'popover') {
             return this.openPopover(ev);
         }
+        if (selectInterface === 'modal') {
+            return this.openModal();
+        }
         return this.openAlert();
     }
     updateOverlayOptions() {
@@ -29455,7 +29731,13 @@ class Select {
             case 'popover':
                 const popover = overlay.querySelector('ion-select-popover');
                 if (popover) {
-                    popover.options = this.createPopoverOptions(childOpts, value);
+                    popover.options = this.createOverlaySelectOptions(childOpts, value);
+                }
+                break;
+            case 'modal':
+                const modal = overlay.querySelector('ion-select-modal');
+                if (modal) {
+                    modal.options = this.createOverlaySelectOptions(childOpts, value);
                 }
                 break;
             case 'alert':
@@ -29510,7 +29792,7 @@ class Select {
         });
         return alertInputs;
     }
-    createPopoverOptions(data, selectValue) {
+    createOverlaySelectOptions(data, selectValue) {
         const popoverOptions = data.map((option) => {
             const value = getOptionValue(option);
             // Remove hydrated before copying over classes
@@ -29570,7 +29852,7 @@ class Select {
                 message: interfaceOptions.message,
                 multiple,
                 value,
-                options: this.createPopoverOptions(this.childOpts, value),
+                options: this.createOverlaySelectOptions(this.childOpts, value),
             } });
         return popoverController.create(popoverOpts);
     }
@@ -29605,6 +29887,17 @@ class Select {
             ] });
         return alertController.create(alertOpts);
     }
+    openModal() {
+        const { multiple, value, interfaceOptions } = this;
+        const mode = getIonMode$1(this);
+        const modalOpts = Object.assign(Object.assign({}, interfaceOptions), { mode, cssClass: ['select-modal', interfaceOptions.cssClass], component: 'ion-select-modal', componentProps: {
+                header: interfaceOptions.header,
+                multiple,
+                value,
+                options: this.createOverlaySelectOptions(this.childOpts, value),
+            } });
+        return modalController.create(modalOpts);
+    }
     /**
      * Close the select interface.
      */
@@ -29812,7 +30105,7 @@ class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (hAsync(Host, { key: '73c571c1f8468e1c3f4fe02fbbb33ba9cbc8e989', onClick: this.onClick, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '144dfa5c49549a74fe516c65b9b8104a477ac789', onClick: this.onClick, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -29828,7 +30121,7 @@ class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, hAsync("label", { key: '2b08538cba0b9f747541d57ac18fb6a1ea658878', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), hAsync("div", { key: '33f54373bcb02c72a9d0af2efffebc27ee2c69fe', class: "select-wrapper-inner" }, hAsync("slot", { key: 'd1c93aec99dc1cd6410f93309cef615fe04b541b', name: "start" }), hAsync("div", { key: '493d1a3cad9565516f855bef75685b020785ffd3', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '353a3ee5635f8a8f3be411efd6caef6c2ad74a89', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: 'fd5f85555db02affe954f9f4f2876ac8fe676234', class: "select-highlight" }))));
+            }) }, hAsync("label", { key: '0edcfcbac575a9dccc77991531b6980d1caebf42', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), hAsync("div", { key: '348151d90cb093f5d21c7d4a834264ac4a312c40', class: "select-wrapper-inner" }, hAsync("slot", { key: '8b7708c7f81217435c58276da0c08bba766d9500', name: "start" }), hAsync("div", { key: '10c520a335da0a0d1cf40f9365597beb244d3b48', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '0f15c40a5495e98e29d2a21ba21e0bc6f1c0125a', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: 'c87faad2e5ebf7f9453397d7ede43abd64d21294', class: "select-highlight" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -29908,6 +30201,108 @@ const textForValue = (opts, value, compareWith) => {
 let selectIds = 0;
 const OPTION_CLASS = 'select-interface-option';
 
+const ionicSelectModalMdCss = ".sc-ion-select-modal-ionic-h{height:100%}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(container){display:none}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(label){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-ionic{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-ionic{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-ionic{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}";
+var IonSelectModalIonicStyle0 = ionicSelectModalMdCss;
+
+const selectModalIosCss = ".sc-ion-select-modal-ios-h{height:100%}";
+var IonSelectModalIosStyle0 = selectModalIosCss;
+
+const selectModalMdCss = ".sc-ion-select-modal-md-h{height:100%}ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md::part(container){display:none}ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md::part(label){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-md{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-md{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-md{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}";
+var IonSelectModalMdStyle0 = selectModalMdCss;
+
+class SelectModal {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.header = undefined;
+        this.multiple = undefined;
+        this.options = [];
+    }
+    closeModal() {
+        const modal = this.el.closest('ion-modal');
+        if (modal) {
+            modal.dismiss();
+        }
+    }
+    findOptionFromEvent(ev) {
+        const { options } = this;
+        return options.find((o) => o.value === ev.target.value);
+    }
+    getValues(ev) {
+        const { multiple, options } = this;
+        if (multiple) {
+            // this is a modal with checkboxes (multiple value select)
+            // return an array of all the checked values
+            return options.filter((o) => o.checked).map((o) => o.value);
+        }
+        // this is a modal with radio buttons (single value select)
+        // return the value that was clicked, otherwise undefined
+        const option = ev ? this.findOptionFromEvent(ev) : null;
+        return option ? option.value : undefined;
+    }
+    callOptionHandler(ev) {
+        const option = this.findOptionFromEvent(ev);
+        const values = this.getValues(ev);
+        if (option === null || option === void 0 ? void 0 : option.handler) {
+            safeCall(option.handler, values);
+        }
+    }
+    setChecked(ev) {
+        const { multiple } = this;
+        const option = this.findOptionFromEvent(ev);
+        // this is a modal with checkboxes (multiple value select)
+        // we need to set the checked value for this option
+        if (multiple && option) {
+            option.checked = ev.detail.checked;
+        }
+    }
+    renderRadioOptions() {
+        const checked = this.options.filter((o) => o.checked).map((o) => o.value)[0];
+        return (hAsync("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option) => (hAsync("ion-item", { class: Object.assign({
+                // TODO FW-4784
+                'item-radio-checked': option.value === checked
+            }, getClassMap(option.cssClass)) }, hAsync("ion-radio", { value: option.value, disabled: option.disabled, justify: "start", labelPlacement: "end", onClick: () => this.closeModal(), onKeyUp: (ev) => {
+                if (ev.key === ' ') {
+                    /**
+                     * Selecting a radio option with keyboard navigation,
+                     * either through the Enter or Space keys, should
+                     * dismiss the modal.
+                     */
+                    this.closeModal();
+                }
+            } }, option.text))))));
+    }
+    renderCheckboxOptions() {
+        return this.options.map((option) => (hAsync("ion-item", { class: Object.assign({
+                // TODO FW-4784
+                'item-checkbox-checked': option.checked
+            }, getClassMap(option.cssClass)) }, hAsync("ion-checkbox", { value: option.value, disabled: option.disabled, checked: option.checked, justify: "start", labelPlacement: "end", onIonChange: (ev) => {
+                this.setChecked(ev);
+                this.callOptionHandler(ev);
+            } }, option.text))));
+    }
+    render() {
+        return (hAsync(Host, { key: 'f4b92f4fc3d646f9a327e43a9622abaf69659c28', class: getIonMode$1(this) }, hAsync("ion-header", { key: '11232ef496e7abd69e55cef988963a4869a7b01e' }, hAsync("ion-toolbar", { key: 'e7c41878691a504d44c658db02807867df542588' }, this.header !== undefined && hAsync("ion-title", { key: 'fcf9d33e0f3e0076ff14805de68848f9ef199cca' }, this.header), hAsync("ion-buttons", { key: '748a967ae0ce68bc2fd018a6b9ebe0e4b810f6ac', slot: "end" }, hAsync("ion-button", { key: 'f5e60791870b5085a31b7af70ed4bb3fb83eb185', onClick: () => this.closeModal() }, "Close")))), hAsync("ion-content", { key: '159797957b6f788a9b393d91864c18db34481c68' }, hAsync("ion-list", { key: '4124554fe8b2411637cbf02f08e50e0d8f804175' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+    }
+    get el() { return getElement(this); }
+    static get style() { return {
+        ionic: IonSelectModalIonicStyle0,
+        ios: IonSelectModalIosStyle0,
+        md: IonSelectModalMdStyle0
+    }; }
+    static get cmpMeta() { return {
+        "$flags$": 34,
+        "$tagName$": "ion-select-modal",
+        "$members$": {
+            "header": [1],
+            "multiple": [4],
+            "options": [16]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 const selectOptionCss = ":host{display:none}";
 var IonSelectOptionStyle0 = selectOptionCss;
 
@@ -29919,7 +30314,7 @@ class SelectOption {
         this.value = undefined;
     }
     render() {
-        return hAsync(Host, { key: 'ba5a9c695c53fe0802af11a49f4305a9b8f71773', role: "option", id: this.inputId, class: getIonMode$1(this) });
+        return hAsync(Host, { key: '2e6fa159464f04f6d8720f960141f67918bc7534', role: "option", id: this.inputId, class: getIonMode$1(this) });
     }
     get el() { return getElement(this); }
     static get style() { return IonSelectOptionStyle0; }
@@ -30039,7 +30434,7 @@ class SelectPopover {
     render() {
         const { header, message, options, subHeader } = this;
         const hasSubHeaderOrMessage = subHeader !== undefined || message !== undefined;
-        return (hAsync(Host, { key: '302553a2eec4d1442751b8af28b7c9bd3487fd5d', class: getIonMode$1(this) }, hAsync("ion-list", { key: '39ae8579e6fe3bae2c7504147268ad5c82fd27e6' }, header !== undefined && hAsync("ion-list-header", { key: 'e0e6686380d188f46c593e1bb25287dcf08c75c2' }, header), hasSubHeaderOrMessage && (hAsync("ion-item", { key: '8a2d8652db269593c0ba7d767277e12c2b06144d' }, hAsync("ion-label", { key: 'a30cc0ecf95d5bdd6421ee1683922c1b853e98ea', class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", { key: 'c298459ca450123808a08d65660825b2c26d00e5' }, subHeader), message !== undefined && hAsync("p", { key: 'ed895fbaec020e809021138401341b6fd7675035' }, message)))), this.renderOptions(options))));
+        return (hAsync(Host, { key: 'dd0990db4de4f175b176b27f35501dd1604ca400', class: getIonMode$1(this) }, hAsync("ion-list", { key: 'cea2bc3687b8b2490a2a9ff4a1e16cd34169558e' }, header !== undefined && hAsync("ion-list-header", { key: '194aebb53453c43f913daae45a1a3066a1708c4c' }, header), hasSubHeaderOrMessage && (hAsync("ion-item", { key: 'b706b07a3c63ad8104d2db413e210c735ec1bec9' }, hAsync("ion-label", { key: '6e52b5b4cf6b04ff3dd5671d64264233de4190d5', class: "ion-text-wrap" }, subHeader !== undefined && hAsync("h3", { key: '6ef4440d17f5db8c96c63b9aa5073f4fe4b8ad62' }, subHeader), message !== undefined && hAsync("p", { key: 'c7b3b76c30ecd606c0e985a0258c13d3a75756e7' }, message)))), this.renderOptions(options))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -30087,11 +30482,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: '1a3e78e9a6f740d609d1f0b7a16cb6eff4a2d617', class: {
+        return (hAsync(Host, { key: 'fdfabf9364caf507450239b62be24f08873bd650', class: {
                 [mode]: true,
                 'skeleton-text-animated': animated,
                 'in-media': inMedia,
-            } }, hAsync("span", { key: 'be3eabe196ec6e8ec19857375ba30f4c8aa58e7f' }, "\u00A0")));
+            } }, hAsync("span", { key: '3482c88dcc177547185ce87972afa064a542367d' }, "\u00A0")));
     }
     get el() { return getElement(this); }
     static get style() { return IonSkeletonTextStyle0; }
@@ -30144,7 +30539,7 @@ class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (hAsync(Host, { key: '50cbaed55eeab15292447d106a80b93db4cb40de', class: createColorClasses$1(self.color, {
+        return (hAsync(Host, { key: '9d30ee9f5aa0dd0e220da07e75d05b8b2435224d', class: createColorClasses$1(self.color, {
                 [mode]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),
@@ -30244,12 +30639,12 @@ class SplitPane {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'd54c356cd4bff7e55325160882dea8249f47f388', class: {
+        return (hAsync(Host, { key: '1ca0b0299d03605bb358112ca56cbafbe58f00f5', class: {
                 [mode]: true,
                 // Used internally for styling
                 [`split-pane-${mode}`]: true,
                 'split-pane-visible': this.visible,
-            } }, hAsync("slot", { key: 'af62690d0fd686cfbd29d888c79eda9001f13e2f' })));
+            } }, hAsync("slot", { key: 'abe231361727ae7fc63edd592a4490caac1909fb' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -30318,10 +30713,10 @@ class Tab {
     }
     render() {
         const { tab, active, component } = this;
-        return (hAsync(Host, { key: '46d5498418f5379861c3d7465e8021dec45f1200', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+        return (hAsync(Host, { key: 'cb75d0877979b3b8df8f7e1952bfa9677da1eaa5', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
                 'ion-page': component === undefined,
                 'tab-hidden': !active,
-            } }, hAsync("slot", { key: 'b45045dccb87dfe75e3f5a5a474bb48b6c98e922' })));
+            } }, hAsync("slot", { key: '37fbb7b7a6b03eb93b1dacd2dc1025b78eb2aa6b' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -30399,11 +30794,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: '3a8595dd83f89e8319471a7a7f9f64b2565b384c', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'a87fd2ea5df053705a37ea7ffec043e75c4a9907', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, hAsync("slot", { key: '8b65eceb922f6abfa15f41046261586fb94b981f' })));
+            }) }, hAsync("slot", { key: '81a6223299b6cab29d7ddced590e9152e2b3ded0' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -30501,7 +30896,7 @@ class TabButton {
             rel,
             target,
         };
-        return (hAsync(Host, { key: '4b528ce31f67e10ad849e0c99bd034bba675c227', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
+        return (hAsync(Host, { key: '5976c45943ea7ea8e7c1a85fc9996de421439f08', onClick: this.onClick, onKeyup: this.onKeyUp, id: tab !== undefined ? `tab-button-${tab}` : null, class: {
                 [mode]: true,
                 'tab-selected': selected,
                 'tab-disabled': disabled,
@@ -30513,7 +30908,7 @@ class TabButton {
                 'ion-activatable': true,
                 'ion-selectable': true,
                 'ion-focusable': true,
-            } }, hAsync("a", Object.assign({ key: '0da8784b1b243ffaaaf04dd7adb55d6881ed0c08' }, attrs, { class: "button-native", part: "native", role: "tab", "aria-selected": selected ? 'true' : null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? '-1' : undefined }, inheritedAttributes), hAsync("span", { key: '2c628e8f1ebc129f84876c01530468cb97d8bf3a', class: "button-inner" }, hAsync("slot", { key: '8052a171d197a7de1a7eb12b091c35f73ae1ee21' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '4186bdb5ed045ec16f495a14fa30ac864c576227', type: "unbounded" }))));
+            } }, hAsync("a", Object.assign({ key: '1db09d861b67ff292018fb4b0dc7b85bd4677eb8' }, 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: '4381eafcb27e8c7bb0d86d4f115ceb0caf03b9b4', class: "button-inner" }, hAsync("slot", { key: '1981135f6fbb88376c1bd923c55c70fe8b5c5159' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '0509bc7155d055d1ed710600e9cf4df135881491', type: "unbounded" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -30689,7 +31084,7 @@ class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (hAsync(Host, { key: 'eb094c9bd15b7777c53bd0bd6d225784fa472849', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: 'a516ca6915bf26e77eeeb0ff684c4fcc7d4420a7', name: "top" }), hAsync("div", { key: 'dd2a32a072d77afe216abc4958c1d686405fb780', class: "tabs-inner" }, hAsync("slot", { key: '222c20ba862068f5c78e7bbef4fa213499fb2fa5' })), hAsync("slot", { key: '3e76dcb1b21873aa137d095c56131514054ead3a', name: "bottom" })));
+        return (hAsync(Host, { key: 'e01ccf6bfaccad094515be50e407399c733fc226', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: '38d2d01dbfd8a08f01e6f0e27274b21d75424e37', name: "top" }), hAsync("div", { key: '7e894f0f423e2d43e1c68daff5f9f6c442fad237', class: "tabs-inner" }, hAsync("slot", { key: 'df16be529a0370a26d0adf850530b31607507c23' })), hAsync("slot", { key: '44642e1cb24c3281c43db75fd69a32fe0defe40a', name: "bottom" })));
     }
     get el() { return getElement(this); }
     static get style() { return IonTabsStyle0; }
@@ -30731,9 +31126,9 @@ class Text {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '4b76333b1ea5cab134b9dc1f5670c0d5a253fc32', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'e134d70c04344b708a2ecf6253722781ad2ca826', class: createColorClasses$1(this.color, {
                 [mode]: true,
-            }) }, hAsync("slot", { key: '3dee5f16bc58b3d92547d910bd4f441a00ce2039' })));
+            }) }, hAsync("slot", { key: 'da79c760f7ebbcd007ce110439f05a62cb22eac8' })));
     }
     static get style() { return IonTextStyle0; }
     static get cmpMeta() { return {
@@ -31115,7 +31510,7 @@ class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (hAsync(Host, { key: 'e8a5b5727c6a018bbd6f5507b690bc5f0959e352', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: 'd6e25c83d8eab8cb1a5b6ab411c9a13847f69f8d', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -31124,7 +31519,7 @@ class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, hAsync("label", { key: '48e889571e2d3e7e150b038e4b4b15862b418288', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), hAsync("div", { key: '6c6c7872ae4d351d8b8d772ad18ce3ba7a0e9a87', class: "textarea-wrapper-inner" }, hAsync("div", { key: '03aef5dfa59af0fa78a3e5c92e0ed72396717d72', class: "start-slot-wrapper" }, hAsync("slot", { key: '39aee9faebb0f1d10de5a5817fd9d9771b074b96', name: "start" })), hAsync("div", { key: '738e8ff603f4c9b9083b3139db861f4b7ec20f79', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, hAsync("textarea", Object.assign({ key: '7763fb4f8ffe94635167331c70d21d661544c4f8', 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.getHintTextID() === this.errorTextId }, this.inheritedAttributes), value)), hAsync("div", { key: 'b3af9ec0982c6dbd381afaa02df153d7e90471be', class: "end-slot-wrapper" }, hAsync("slot", { key: '60f99bcd49a5ec2e1fa6e3e77809aefeb9d2d0d6', name: "end" }))), shouldRenderHighlight && hAsync("div", { key: '6a7f45639ba027f4da573adae53f1197a6dec383', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, hAsync("label", { key: 'f840a5be2b776a4b9c18c6da24e0b7d3d4838fee', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), hAsync("div", { key: '979461fc0d4684926d79d75759c63c6867b7622b', class: "textarea-wrapper-inner" }, hAsync("div", { key: '88f0d5d4bac29597cc2588e5b2ed72fb4fbe153d', class: "start-slot-wrapper" }, hAsync("slot", { key: '21dcca0e59c1260e3d0d1e126c1c590de15c4bad', name: "start" })), hAsync("div", { key: '3c48a4bb3d763a389d3429123e7c110064b9b8d4', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, hAsync("textarea", Object.assign({ key: '1550599ad15b3f215c104c014e90711f073ace8b', 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.getHintTextID() === this.errorTextId }, this.inheritedAttributes), value)), hAsync("div", { key: '4f01ab4d2994a6de6f49eb9ed2e310d00daf21b2', class: "end-slot-wrapper" }, hAsync("slot", { key: '501e288b6807e039972bb4f0b63906114255518a', name: "end" }))), shouldRenderHighlight && hAsync("div", { key: 'd3008eed34494aa9f8e98a28eac3b465dc4c2bd0', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -31186,7 +31581,7 @@ class Thumbnail {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: 'ea55000055f941b0c79561e8934be6242ec8e114', class: getIonMode$1(this) }, hAsync("slot", { key: 'a4f934f442797f5c66a77e0ef8920fdd07c204f2' })));
+        return (hAsync(Host, { key: 'cfa9aeb1d4fd624a9732c5230d29dd887e4b7771', class: getIonMode$1(this) }, hAsync("slot", { key: '29bc6e64063cba44e2643228df54394883933918' })));
     }
     static get style() { return IonThumbnailStyle0; }
     static get cmpMeta() { return {
@@ -32022,9 +32417,9 @@ class Toast {
         if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
             printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
         }
-        return (hAsync(Host, Object.assign({ key: '68c336f80af04ba484ca9899bae8f40c0d9b7691', tabindex: "-1" }, this.htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: 'c05655ff06af8d0e48c2a85396b07ad942fa81b4', 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: '3483b188f14b700964a123997a60a43a2023a1b6', class: wrapperClass }, hAsync("div", { key: '1b88544a9b87253b364cbec6285625388979b560', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: 'bd1c42e3b14af66b880dfe283e3ae910075c0f70', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: 'a5ef6cdabc1f7c70d11a5f2a0abf8737fe7550e8', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+            }, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: '9393ead4de1bf28529661d6f64049d34e18d725c', class: wrapperClass }, hAsync("div", { key: '3e9dd73c17c337849c3f26e8d0f395b3e5ee20a7', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: '5d15b18364301ad55e44e9f601014ac33181590b', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("div", { key: 'f6dd164502637a882c5caf18445d8509b85ad6f9', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -32244,7 +32639,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: '8f024fb0fbc2d4442be0574b03450426e8e4fc9e', onClick: this.onClick, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'f52195ec3bc14c024647cb41319c32a4cd330e19', onClick: this.onClick, class: createColorClasses$1(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -32254,10 +32649,10 @@ class Toggle {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, hAsync("label", { key: '0492f009cd89755adf41f60925028002df0e67b1', class: "toggle-wrapper" }, hAsync("input", Object.assign({ key: 'fd98b23e8adfa2630878eddc30607a0b1bf9e798', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), hAsync("div", { key: 'bcbde055ad9450319ae41e8956a1e8cc0a7796a4', class: {
+            }) }, hAsync("label", { key: 'f8b3a215ad85b2cee611ad63449b584e1640f27f', class: "toggle-wrapper" }, hAsync("input", Object.assign({ key: 'f387b1ea840737a9737917e516834c887be99c09', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, this.inheritedAttributes)), hAsync("div", { key: '936af880db59fe377cd2de9101eb28a1c4fb8914', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabel,
-            }, part: "label" }, hAsync("slot", { key: '7a6ea9515d454d80615f0622f361c5f91b41345c' })), hAsync("div", { key: '6d3670b81b8f809092c98b3f3b8e483ddf6a7cac', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label" }, hAsync("slot", { key: '80a6672e2e792c15011a9496dcd75363cdba31c6' })), hAsync("div", { key: '2b2b318b38ab27b194c0dab4cecd77d9d780f2ca', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -32361,10 +32756,10 @@ class Toolbar {
         this.childrenStyles.forEach((value) => {
             Object.assign(childStyles, value);
         });
-        return (hAsync(Host, { key: '4bb3a55001408a3bdf033af76b9196cb96c07c09', class: Object.assign(Object.assign({}, childStyles), createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '462538a5ecd01baf3cde116c9f029aeda26c81be', class: Object.assign(Object.assign({}, childStyles), createColorClasses$1(this.color, {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
-            })) }, hAsync("div", { key: '0891db157d6e028c6d03696f13fb510ea91b0296', class: "toolbar-background" }), hAsync("div", { key: '95fbc870d808f74af4bb18cd8f8ec8c7828a9e0b', class: "toolbar-container" }, hAsync("slot", { key: '84d4a9644660fe00ca085055ca8d12f3647531ad', name: "start" }), hAsync("slot", { key: 'fd361dc9c9979f59aed2fedcf94629506fae62b0', name: "secondary" }), hAsync("div", { key: '54d2b28616a4627c55766f66dc453707752758a6', class: "toolbar-content" }, hAsync("slot", { key: '8f65e0830cce7135640b90eb694e282cb7e5efd2' })), hAsync("slot", { key: 'c78be11a207c8674f222543646398636956087e6', name: "primary" }), hAsync("slot", { key: 'ab25e1601ccaa8cb0d81921b849bcb7402aa7826', name: "end" }))));
+            })) }, hAsync("div", { key: 'c0b4415d3b2472de643a9be7cb3b13b3b628621b', class: "toolbar-background" }), hAsync("div", { key: '0ccb8a2dbeaa28d8f9bed87629c0c097446690c2', class: "toolbar-container" }, hAsync("slot", { key: '3e726dac359e923df21d80301651f16063a3de20', name: "start" }), hAsync("slot", { key: 'cd799330b56a7f8833bc61bb2807aafb21846f71', name: "secondary" }), hAsync("div", { key: '395282e6ac8c53576922dcdb5f08c25d34638c86', class: "toolbar-content" }, hAsync("slot", { key: 'a437c60e4ba5aae65e55169ae82a6f379868ec1d' })), hAsync("slot", { key: '711af9b9d321a7b31ede924c9bdcad767aa9a1ca', name: "primary" }), hAsync("slot", { key: 'ecc02edeaf80a837890bcb08d5096df1e22a0b9a', name: "end" }))));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -32414,11 +32809,11 @@ class ToolbarTitle {
     render() {
         const mode = getIonMode$1(this);
         const size = this.getSize();
-        return (hAsync(Host, { key: '5a58dc437a6f4257244bbdd7e9a682a17d8c9a6b', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '7293d2ecd6262feb0d8d769effbb208230baed89', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 [`title-${size}`]: true,
                 'title-rtl': document.dir === 'rtl',
-            }) }, hAsync("div", { key: '58682ea7b8f47a08adfad419b5c76b34784c6501', class: "toolbar-title" }, hAsync("slot", { key: '8a9248534e4c3076f5e2dfda38ef86069796851c' }))));
+            }) }, hAsync("div", { key: '086ec3a361ebdf6506846a8704b457cda3a6f897', class: "toolbar-title" }, hAsync("slot", { key: '59add7eb92b82d6832a8f0894f897c51fdf4f214' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -32519,7 +32914,10 @@ registerComponents([
   Searchbar,
   Segment,
   SegmentButton,
+  SegmentContent,
+  SegmentView,
   Select,
+  SelectModal,
   SelectOption,
   SelectPopover,
   SkeletonText,