@ionic/vue 8.8.19-dev.11786610762.137bbb21 → 8.8.19-dev.11786735826.1fad7c0a

package/dist/index.js

@@ -19,84 +19,80 @@ import { defineCustomElement as defineCustomElement$g } from '@ionic/core/compon
 import { defineCustomElement as defineCustomElement$h } from '@ionic/core/components/ion-content.js';
 import { defineCustomElement as defineCustomElement$i } from '@ionic/core/components/ion-datetime.js';
 import { defineCustomElement as defineCustomElement$j } from '@ionic/core/components/ion-datetime-button.js';
-import { defineCustomElement as defineCustomElement$k } from '@ionic/core/components/ion-divider.js';
-import { defineCustomElement as defineCustomElement$l } from '@ionic/core/components/ion-fab.js';
-import { defineCustomElement as defineCustomElement$m } from '@ionic/core/components/ion-fab-button.js';
-import { defineCustomElement as defineCustomElement$n } from '@ionic/core/components/ion-fab-list.js';
-import { defineCustomElement as defineCustomElement$o } from '@ionic/core/components/ion-footer.js';
-import { defineCustomElement as defineCustomElement$p } from '@ionic/core/components/ion-gallery.js';
-import { defineCustomElement as defineCustomElement$q } from '@ionic/core/components/ion-gallery-item.js';
-import { defineCustomElement as defineCustomElement$r } from '@ionic/core/components/ion-grid.js';
-import { defineCustomElement as defineCustomElement$s } from '@ionic/core/components/ion-header.js';
-import { defineCustomElement as defineCustomElement$t } from '@ionic/core/components/ion-img.js';
-import { defineCustomElement as defineCustomElement$u } from '@ionic/core/components/ion-infinite-scroll.js';
-import { defineCustomElement as defineCustomElement$v } from '@ionic/core/components/ion-infinite-scroll-content.js';
-import { defineCustomElement as defineCustomElement$w } from '@ionic/core/components/ion-input.js';
-import { defineCustomElement as defineCustomElement$x } from '@ionic/core/components/ion-input-otp.js';
-import { defineCustomElement as defineCustomElement$y } from '@ionic/core/components/ion-input-password-toggle.js';
-import { defineCustomElement as defineCustomElement$z } from '@ionic/core/components/ion-item.js';
-import { defineCustomElement as defineCustomElement$A } from '@ionic/core/components/ion-item-divider.js';
-import { defineCustomElement as defineCustomElement$B } from '@ionic/core/components/ion-item-group.js';
-import { defineCustomElement as defineCustomElement$C } from '@ionic/core/components/ion-item-option.js';
-import { defineCustomElement as defineCustomElement$D } from '@ionic/core/components/ion-item-options.js';
-import { defineCustomElement as defineCustomElement$E } from '@ionic/core/components/ion-item-sliding.js';
-import { defineCustomElement as defineCustomElement$F } from '@ionic/core/components/ion-label.js';
-import { defineCustomElement as defineCustomElement$G } from '@ionic/core/components/ion-list.js';
-import { defineCustomElement as defineCustomElement$H } from '@ionic/core/components/ion-list-header.js';
-import { defineCustomElement as defineCustomElement$I } from '@ionic/core/components/ion-menu.js';
-import { defineCustomElement as defineCustomElement$J } from '@ionic/core/components/ion-menu-button.js';
-import { defineCustomElement as defineCustomElement$K } from '@ionic/core/components/ion-menu-toggle.js';
-import { defineCustomElement as defineCustomElement$1m } from '@ionic/core/components/ion-nav.js';
-import { defineCustomElement as defineCustomElement$L } from '@ionic/core/components/ion-nav-link.js';
-import { defineCustomElement as defineCustomElement$M } from '@ionic/core/components/ion-note.js';
-import { defineCustomElement as defineCustomElement$N } from '@ionic/core/components/ion-picker.js';
-import { defineCustomElement as defineCustomElement$O } from '@ionic/core/components/ion-picker-column.js';
-import { defineCustomElement as defineCustomElement$P } from '@ionic/core/components/ion-picker-column-option.js';
-import { defineCustomElement as defineCustomElement$Q } from '@ionic/core/components/ion-progress-bar.js';
-import { defineCustomElement as defineCustomElement$R } from '@ionic/core/components/ion-radio.js';
-import { defineCustomElement as defineCustomElement$S } from '@ionic/core/components/ion-radio-group.js';
-import { defineCustomElement as defineCustomElement$T } from '@ionic/core/components/ion-range.js';
-import { defineCustomElement as defineCustomElement$U } from '@ionic/core/components/ion-refresher.js';
-import { defineCustomElement as defineCustomElement$V } from '@ionic/core/components/ion-refresher-content.js';
-import { defineCustomElement as defineCustomElement$W } from '@ionic/core/components/ion-reorder.js';
-import { defineCustomElement as defineCustomElement$X } from '@ionic/core/components/ion-reorder-group.js';
-import { defineCustomElement as defineCustomElement$Y } from '@ionic/core/components/ion-ripple-effect.js';
-import { defineCustomElement as defineCustomElement$Z } from '@ionic/core/components/ion-row.js';
-import { defineCustomElement as defineCustomElement$_ } from '@ionic/core/components/ion-searchbar.js';
-import { defineCustomElement as defineCustomElement$$ } from '@ionic/core/components/ion-segment.js';
-import { defineCustomElement as defineCustomElement$10 } from '@ionic/core/components/ion-segment-button.js';
-import { defineCustomElement as defineCustomElement$11 } from '@ionic/core/components/ion-segment-content.js';
-import { defineCustomElement as defineCustomElement$12 } from '@ionic/core/components/ion-segment-view.js';
-import { defineCustomElement as defineCustomElement$13 } from '@ionic/core/components/ion-select.js';
-import { defineCustomElement as defineCustomElement$14 } from '@ionic/core/components/ion-select-modal.js';
-import { defineCustomElement as defineCustomElement$15 } from '@ionic/core/components/ion-select-option.js';
-import { defineCustomElement as defineCustomElement$16 } from '@ionic/core/components/ion-skeleton-text.js';
-import { defineCustomElement as defineCustomElement$17 } from '@ionic/core/components/ion-spinner.js';
-import { defineCustomElement as defineCustomElement$18 } from '@ionic/core/components/ion-split-pane.js';
-import { defineCustomElement as defineCustomElement$19 } from '@ionic/core/components/ion-tab.js';
-import { defineCustomElement as defineCustomElement$1a } from '@ionic/core/components/ion-text.js';
-import { defineCustomElement as defineCustomElement$1b } from '@ionic/core/components/ion-textarea.js';
-import { defineCustomElement as defineCustomElement$1c } from '@ionic/core/components/ion-thumbnail.js';
-import { defineCustomElement as defineCustomElement$1d } from '@ionic/core/components/ion-title.js';
-import { defineCustomElement as defineCustomElement$1e } from '@ionic/core/components/ion-toggle.js';
-import { defineCustomElement as defineCustomElement$1f } from '@ionic/core/components/ion-toolbar.js';
-import { LIFECYCLE_WILL_ENTER, LIFECYCLE_DID_ENTER, LIFECYCLE_WILL_LEAVE, LIFECYCLE_DID_LEAVE, initialize, modalController as modalController$1, popoverController as popoverController$1, alertController as alertController$1, actionSheetController as actionSheetController$1, loadingController as loadingController$1, pickerController as pickerController$1, toastController as toastController$1 } from '@ionic/core/components';
+import { defineCustomElement as defineCustomElement$k } from '@ionic/core/components/ion-fab.js';
+import { defineCustomElement as defineCustomElement$l } from '@ionic/core/components/ion-fab-button.js';
+import { defineCustomElement as defineCustomElement$m } from '@ionic/core/components/ion-fab-list.js';
+import { defineCustomElement as defineCustomElement$n } from '@ionic/core/components/ion-footer.js';
+import { defineCustomElement as defineCustomElement$o } from '@ionic/core/components/ion-grid.js';
+import { defineCustomElement as defineCustomElement$p } from '@ionic/core/components/ion-header.js';
+import { defineCustomElement as defineCustomElement$q } from '@ionic/core/components/ion-img.js';
+import { defineCustomElement as defineCustomElement$r } from '@ionic/core/components/ion-infinite-scroll.js';
+import { defineCustomElement as defineCustomElement$s } from '@ionic/core/components/ion-infinite-scroll-content.js';
+import { defineCustomElement as defineCustomElement$t } from '@ionic/core/components/ion-input.js';
+import { defineCustomElement as defineCustomElement$u } from '@ionic/core/components/ion-input-otp.js';
+import { defineCustomElement as defineCustomElement$v } from '@ionic/core/components/ion-input-password-toggle.js';
+import { defineCustomElement as defineCustomElement$w } from '@ionic/core/components/ion-item.js';
+import { defineCustomElement as defineCustomElement$x } from '@ionic/core/components/ion-item-divider.js';
+import { defineCustomElement as defineCustomElement$y } from '@ionic/core/components/ion-item-group.js';
+import { defineCustomElement as defineCustomElement$z } from '@ionic/core/components/ion-item-option.js';
+import { defineCustomElement as defineCustomElement$A } from '@ionic/core/components/ion-item-options.js';
+import { defineCustomElement as defineCustomElement$B } from '@ionic/core/components/ion-item-sliding.js';
+import { defineCustomElement as defineCustomElement$C } from '@ionic/core/components/ion-label.js';
+import { defineCustomElement as defineCustomElement$D } from '@ionic/core/components/ion-list.js';
+import { defineCustomElement as defineCustomElement$E } from '@ionic/core/components/ion-list-header.js';
+import { defineCustomElement as defineCustomElement$F } from '@ionic/core/components/ion-menu.js';
+import { defineCustomElement as defineCustomElement$G } from '@ionic/core/components/ion-menu-button.js';
+import { defineCustomElement as defineCustomElement$H } from '@ionic/core/components/ion-menu-toggle.js';
+import { defineCustomElement as defineCustomElement$1j } from '@ionic/core/components/ion-nav.js';
+import { defineCustomElement as defineCustomElement$I } from '@ionic/core/components/ion-nav-link.js';
+import { defineCustomElement as defineCustomElement$J } from '@ionic/core/components/ion-note.js';
+import { defineCustomElement as defineCustomElement$K } from '@ionic/core/components/ion-picker.js';
+import { defineCustomElement as defineCustomElement$L } from '@ionic/core/components/ion-picker-column.js';
+import { defineCustomElement as defineCustomElement$M } from '@ionic/core/components/ion-picker-column-option.js';
+import { defineCustomElement as defineCustomElement$N } from '@ionic/core/components/ion-progress-bar.js';
+import { defineCustomElement as defineCustomElement$O } from '@ionic/core/components/ion-radio.js';
+import { defineCustomElement as defineCustomElement$P } from '@ionic/core/components/ion-radio-group.js';
+import { defineCustomElement as defineCustomElement$Q } from '@ionic/core/components/ion-range.js';
+import { defineCustomElement as defineCustomElement$R } from '@ionic/core/components/ion-refresher.js';
+import { defineCustomElement as defineCustomElement$S } from '@ionic/core/components/ion-refresher-content.js';
+import { defineCustomElement as defineCustomElement$T } from '@ionic/core/components/ion-reorder.js';
+import { defineCustomElement as defineCustomElement$U } from '@ionic/core/components/ion-reorder-group.js';
+import { defineCustomElement as defineCustomElement$V } from '@ionic/core/components/ion-ripple-effect.js';
+import { defineCustomElement as defineCustomElement$W } from '@ionic/core/components/ion-row.js';
+import { defineCustomElement as defineCustomElement$X } from '@ionic/core/components/ion-searchbar.js';
+import { defineCustomElement as defineCustomElement$Y } from '@ionic/core/components/ion-segment.js';
+import { defineCustomElement as defineCustomElement$Z } from '@ionic/core/components/ion-segment-button.js';
+import { defineCustomElement as defineCustomElement$_ } from '@ionic/core/components/ion-segment-content.js';
+import { defineCustomElement as defineCustomElement$$ } from '@ionic/core/components/ion-segment-view.js';
+import { defineCustomElement as defineCustomElement$10 } from '@ionic/core/components/ion-select.js';
+import { defineCustomElement as defineCustomElement$11 } from '@ionic/core/components/ion-select-modal.js';
+import { defineCustomElement as defineCustomElement$12 } from '@ionic/core/components/ion-select-option.js';
+import { defineCustomElement as defineCustomElement$13 } from '@ionic/core/components/ion-skeleton-text.js';
+import { defineCustomElement as defineCustomElement$14 } from '@ionic/core/components/ion-spinner.js';
+import { defineCustomElement as defineCustomElement$15 } from '@ionic/core/components/ion-split-pane.js';
+import { defineCustomElement as defineCustomElement$16 } from '@ionic/core/components/ion-tab.js';
+import { defineCustomElement as defineCustomElement$17 } from '@ionic/core/components/ion-text.js';
+import { defineCustomElement as defineCustomElement$18 } from '@ionic/core/components/ion-textarea.js';
+import { defineCustomElement as defineCustomElement$19 } from '@ionic/core/components/ion-thumbnail.js';
+import { defineCustomElement as defineCustomElement$1a } from '@ionic/core/components/ion-title.js';
+import { defineCustomElement as defineCustomElement$1b } from '@ionic/core/components/ion-toggle.js';
+import { defineCustomElement as defineCustomElement$1c } from '@ionic/core/components/ion-toolbar.js';
+import { LIFECYCLE_WILL_ENTER, LIFECYCLE_DID_ENTER, LIFECYCLE_WILL_LEAVE, LIFECYCLE_DID_LEAVE, initialize, modalController as modalController$1, popoverController as popoverController$1, alertController as alertController$1, actionSheetController as actionSheetController$1, loadingController as loadingController$1, toastController as toastController$1 } from '@ionic/core/components';
 export { IonicSafeString, IonicSlides, createAnimation, createGesture, getIonPageElement, getPlatforms, getTimeGivenProgression, iosTransitionAnimation, isPlatform, mdTransitionAnimation, menuController, openURL } from '@ionic/core/components';
-import { defineCustomElement as defineCustomElement$1g } from '@ionic/core/components/ion-back-button.js';
-import { defineCustomElement as defineCustomElement$1h } from '@ionic/core/components/ion-router-outlet.js';
+import { defineCustomElement as defineCustomElement$1d } from '@ionic/core/components/ion-back-button.js';
+import { defineCustomElement as defineCustomElement$1e } from '@ionic/core/components/ion-router-outlet.js';
 import { routeLocationKey, useRoute, matchedRouteKey } from 'vue-router';
-import { defineCustomElement as defineCustomElement$1i } from '@ionic/core/components/ion-tab-button.js';
-import { defineCustomElement as defineCustomElement$1j } from '@ionic/core/components/ion-tabs.js';
-import { defineCustomElement as defineCustomElement$1k } from '@ionic/core/components/ion-tab-bar.js';
-import { defineCustomElement as defineCustomElement$1l } from '@ionic/core/components/ion-app.js';
-import { defineCustomElement as defineCustomElement$1n } from 'ionicons/components/ion-icon.js';
-import { defineCustomElement as defineCustomElement$1o } from '@ionic/core/components/ion-action-sheet.js';
-import { defineCustomElement as defineCustomElement$1p } from '@ionic/core/components/ion-alert.js';
-import { defineCustomElement as defineCustomElement$1q } from '@ionic/core/components/ion-loading.js';
-import { defineCustomElement as defineCustomElement$1r } from '@ionic/core/components/ion-modal.js';
-import { defineCustomElement as defineCustomElement$1s } from '@ionic/core/components/ion-picker-legacy.js';
-import { defineCustomElement as defineCustomElement$1t } from '@ionic/core/components/ion-popover.js';
-import { defineCustomElement as defineCustomElement$1u } from '@ionic/core/components/ion-toast.js';
+import { defineCustomElement as defineCustomElement$1f } from '@ionic/core/components/ion-tab-button.js';
+import { defineCustomElement as defineCustomElement$1g } from '@ionic/core/components/ion-tabs.js';
+import { defineCustomElement as defineCustomElement$1h } from '@ionic/core/components/ion-tab-bar.js';
+import { defineCustomElement as defineCustomElement$1i } from '@ionic/core/components/ion-app.js';
+import { defineCustomElement as defineCustomElement$1k } from 'ionicons/components/ion-icon.js';
+import { defineCustomElement as defineCustomElement$1l } from '@ionic/core/components/ion-action-sheet.js';
+import { defineCustomElement as defineCustomElement$1m } from '@ionic/core/components/ion-alert.js';
+import { defineCustomElement as defineCustomElement$1n } from '@ionic/core/components/ion-loading.js';
+import { defineCustomElement as defineCustomElement$1o } from '@ionic/core/components/ion-modal.js';
+import { defineCustomElement as defineCustomElement$1p } from '@ionic/core/components/ion-popover.js';
+import { defineCustomElement as defineCustomElement$1q } from '@ionic/core/components/ion-toast.js';
 
 const UPDATE_VALUE_EVENT = 'update:modelValue';
 const MODEL_VALUE = 'modelValue';
@@ -118,8 +114,19 @@ const DEFAULT_EMPTY_PROP$1 = { default: EMPTY_PROP$1 };
 const getComponentClasses = (classes) => {
     return classes?.split(' ') || [];
 };
-const getElementClasses = (ref, componentClasses, defaultClasses = []) => {
-    return [...Array.from(ref.value?.classList || []), ...defaultClasses].filter((c, i, self) => !componentClasses.has(c) && self.indexOf(c) === i);
+const syncElementClasses = (ref, componentClasses, defaultClasses = []) => {
+    if (ref?.value) {
+        const element = ref.value;
+        // makes sure vue classes are on the actual element
+        componentClasses.forEach((c) => {
+            if (!!c && !element.classList.contains(c)) {
+                element.classList.add(c);
+            }
+        });
+    }
+    return [...Array.from(ref.value?.classList || []), ...defaultClasses].filter((c, i, self) => {
+        return !componentClasses.has(c) && self.indexOf(c) === i;
+    });
 };
 /**
  * Create a callback to define a Vue component wrapper around a Web Component.
@@ -135,8 +142,9 @@ const getElementClasses = (ref, componentClasses, defaultClasses = []) => {
  * to customElements.define. Only set if `includeImportCustomElements: true` in your config.
  * @prop modelProp - The prop that v-model binds to (i.e. value)
  * @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
+ * @prop modelUpdateEventAttribute - Property to read value from when the value changes.
  */
-const defineContainer = (name, defineCustomElement, componentProps = [], emitProps = [], modelProp, modelUpdateEvent) => {
+const defineContainer = (name, defineCustomElement, componentProps = [], emitProps = [], modelProp, modelUpdateEvent, modelUpdateEventAttribute, transformTagFn) => {
     /**
      * Create a Vue component wrapper around a Web Component.
      * Note: The `props` here are not all properties on a component.
@@ -181,7 +189,7 @@ const defineContainer = (name, defineCustomElement, componentProps = [], emitPro
          */
         const vModelDirective = {
             created: (el) => {
-                const eventsNames = (Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent]).map((ev) => ev.replace(/-([a-z])/g, (g) => g[1].toUpperCase()));
+                const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
                 eventsNames.forEach((eventName) => {
                     el.addEventListener(eventName, (e) => {
                         /**
@@ -192,7 +200,11 @@ const defineContainer = (name, defineCustomElement, componentProps = [], emitPro
                          * when ionChange bubbles up from Component B.
                          */
                         if (e.target.tagName === el.tagName && modelProp) {
-                            modelPropValue = (e?.target)[modelProp];
+                            const resolvePath = (object, path) => {
+                                return path.split('.').reduce((value, key) => (value !== undefined ? value[key] : undefined), object);
+                            };
+                            const path = (modelUpdateEventAttribute ?? `target.${modelProp}`);
+                            const modelPropValue = resolvePath(e, path);
                             emit(UPDATE_VALUE_EVENT, modelPropValue);
                         }
                     });
@@ -206,6 +218,14 @@ const defineContainer = (name, defineCustomElement, componentProps = [], emitPro
             const { routerLink } = props;
             if (routerLink === EMPTY_PROP$1)
                 return;
+            /**
+             * Allow modifier key clicks (ctrl/cmd/shift) to open the link in a
+             * new tab/window without triggering SPA navigation on the current page.
+             */
+            const mouseEv = ev;
+            if (mouseEv.metaKey || mouseEv.ctrlKey || mouseEv.shiftKey) {
+                return;
+            }
             if (navManager !== undefined) {
                 /**
                  * This prevents the browser from
@@ -246,7 +266,7 @@ const defineContainer = (name, defineCustomElement, componentProps = [], emitPro
             };
             const propsToAdd = {
                 ref: containerRef,
-                class: getElementClasses(containerRef, classes),
+                class: syncElementClasses(containerRef, classes),
                 onClick: handleClick,
             };
             /**
@@ -294,7 +314,8 @@ const defineContainer = (name, defineCustomElement, componentProps = [], emitPro
              * vModelDirective is only needed on components that support v-model.
              * As a result, we conditionally call withDirectives with v-model components.
              */
-            const node = h(name, propsToAdd, slots.default && slots.default());
+            const tagName = transformTagFn ? transformTagFn(name) : name;
+            const node = h(tagName, propsToAdd, slots.default && slots.default());
             return modelProp === undefined ? node : withDirectives(node, [[vModelDirective]]);
         };
     }, {
@@ -321,18 +342,13 @@ const IonAccordionGroup = /*@__PURE__*/ defineContainer('ion-accordion-group', d
     'disabled',
     'readonly',
     'expand',
-    'shape',
     'ionChange',
     'ionValueChange'
 ], [
     'ionChange',
     'ionValueChange'
-], 'value', 'ion-change');
-const IonAvatar = /*@__PURE__*/ defineContainer('ion-avatar', defineCustomElement$2, [
-    'size',
-    'shape',
-    'disabled'
-]);
+], 'value', 'ionChange', undefined);
+const IonAvatar = /*@__PURE__*/ defineContainer('ion-avatar', defineCustomElement$2);
 const IonBackdrop = /*@__PURE__*/ defineContainer('ion-backdrop', defineCustomElement$3, [
     'visible',
     'tappable',
@@ -342,11 +358,7 @@ const IonBackdrop = /*@__PURE__*/ defineContainer('ion-backdrop', defineCustomEl
     'ionBackdropTap'
 ]);
 const IonBadge = /*@__PURE__*/ defineContainer('ion-badge', defineCustomElement$4, [
-    'color',
-    'hue',
-    'shape',
-    'size',
-    'vertical'
+    'color'
 ]);
 const IonBreadcrumb = /*@__PURE__*/ defineContainer('ion-breadcrumb', defineCustomElement$5, [
     'collapsed',
@@ -415,7 +427,6 @@ const IonCard = /*@__PURE__*/ defineContainer('ion-card', defineCustomElement$9,
     'rel',
     'routerDirection',
     'routerAnimation',
-    'shape',
     'target'
 ]);
 const IonCardContent = /*@__PURE__*/ defineContainer('ion-card-content', defineCustomElement$a);
@@ -442,8 +453,6 @@ const IonCheckbox = /*@__PURE__*/ defineContainer('ion-checkbox', defineCustomEl
     'justify',
     'alignment',
     'required',
-    'shape',
-    'size',
     'ionChange',
     'ionFocus',
     'ionBlur'
@@ -451,14 +460,11 @@ const IonCheckbox = /*@__PURE__*/ defineContainer('ion-checkbox', defineCustomEl
     'ionChange',
     'ionFocus',
     'ionBlur'
-], 'checked', 'ion-change');
+], 'checked', 'ionChange', undefined);
 const IonChip = /*@__PURE__*/ defineContainer('ion-chip', defineCustomElement$f, [
     'color',
     'outline',
-    'disabled',
-    'hue',
-    'shape',
-    'size'
+    'disabled'
 ]);
 const IonCol = /*@__PURE__*/ defineContainer('ion-col', defineCustomElement$g, [
     'offset',
@@ -467,12 +473,6 @@ const IonCol = /*@__PURE__*/ defineContainer('ion-col', defineCustomElement$g, [
     'offsetMd',
     'offsetLg',
     'offsetXl',
-    'order',
-    'orderXs',
-    'orderSm',
-    'orderMd',
-    'orderLg',
-    'orderXl',
     'pull',
     'pullXs',
     'pullSm',
@@ -555,23 +555,19 @@ const IonDatetime = /*@__PURE__*/ defineContainer('ion-datetime', defineCustomEl
     'ionBlur',
     'ionStyle',
     'ionRender'
-], 'value', 'ion-change');
+], 'value', 'ionChange', undefined);
 const IonDatetimeButton = /*@__PURE__*/ defineContainer('ion-datetime-button', defineCustomElement$j, [
     'color',
     'disabled',
     'datetime'
 ]);
-const IonDivider = /*@__PURE__*/ defineContainer('ion-divider', defineCustomElement$k, [
-    'spacing',
-    'inset'
-]);
-const IonFab = /*@__PURE__*/ defineContainer('ion-fab', defineCustomElement$l, [
+const IonFab = /*@__PURE__*/ defineContainer('ion-fab', defineCustomElement$k, [
     'horizontal',
     'vertical',
     'edge',
     'activated'
 ]);
-const IonFabButton = /*@__PURE__*/ defineContainer('ion-fab-button', defineCustomElement$m, [
+const IonFabButton = /*@__PURE__*/ defineContainer('ion-fab-button', defineCustomElement$l, [
     'color',
     'activated',
     'disabled',
@@ -593,32 +589,22 @@ const IonFabButton = /*@__PURE__*/ defineContainer('ion-fab-button', defineCusto
     'ionFocus',
     'ionBlur'
 ]);
-const IonFabList = /*@__PURE__*/ defineContainer('ion-fab-list', defineCustomElement$n, [
+const IonFabList = /*@__PURE__*/ defineContainer('ion-fab-list', defineCustomElement$m, [
     'activated',
     'side'
 ]);
-const IonFooter = /*@__PURE__*/ defineContainer('ion-footer', defineCustomElement$o, [
-    'scrollEffect',
+const IonFooter = /*@__PURE__*/ defineContainer('ion-footer', defineCustomElement$n, [
     'collapse',
     'translucent'
 ]);
-const IonGallery = /*@__PURE__*/ defineContainer('ion-gallery', defineCustomElement$p, [
-    'layout',
-    'order',
-    'columns',
-    'gap'
-]);
-const IonGalleryItem = /*@__PURE__*/ defineContainer('ion-gallery-item', defineCustomElement$q);
-const IonGrid = /*@__PURE__*/ defineContainer('ion-grid', defineCustomElement$r, [
+const IonGrid = /*@__PURE__*/ defineContainer('ion-grid', defineCustomElement$o, [
     'fixed'
 ]);
-const IonHeader = /*@__PURE__*/ defineContainer('ion-header', defineCustomElement$s, [
-    'scrollEffect',
+const IonHeader = /*@__PURE__*/ defineContainer('ion-header', defineCustomElement$p, [
     'collapse',
-    'divider',
     'translucent'
 ]);
-const IonImg = /*@__PURE__*/ defineContainer('ion-img', defineCustomElement$t, [
+const IonImg = /*@__PURE__*/ defineContainer('ion-img', defineCustomElement$q, [
     'alt',
     'src',
     'ionImgWillLoad',
@@ -629,20 +615,19 @@ const IonImg = /*@__PURE__*/ defineContainer('ion-img', defineCustomElement$t, [
     'ionImgDidLoad',
     'ionError'
 ]);
-const IonInfiniteScroll = /*@__PURE__*/ defineContainer('ion-infinite-scroll', defineCustomElement$u, [
+const IonInfiniteScroll = /*@__PURE__*/ defineContainer('ion-infinite-scroll', defineCustomElement$r, [
     'threshold',
     'disabled',
     'position',
-    'preserveRerenderScrollPosition',
     'ionInfinite'
 ], [
     'ionInfinite'
 ]);
-const IonInfiniteScrollContent = /*@__PURE__*/ defineContainer('ion-infinite-scroll-content', defineCustomElement$v, [
+const IonInfiniteScrollContent = /*@__PURE__*/ defineContainer('ion-infinite-scroll-content', defineCustomElement$s, [
     'loadingSpinner',
     'loadingText'
 ]);
-const IonInput = /*@__PURE__*/ defineContainer('ion-input', defineCustomElement$w, [
+const IonInput = /*@__PURE__*/ defineContainer('ion-input', defineCustomElement$t, [
     'color',
     'autocapitalize',
     'autocomplete',
@@ -675,7 +660,6 @@ const IonInput = /*@__PURE__*/ defineContainer('ion-input', defineCustomElement$
     'shape',
     'spellcheck',
     'step',
-    'size',
     'type',
     'value',
     'ionInput',
@@ -687,8 +671,8 @@ const IonInput = /*@__PURE__*/ defineContainer('ion-input', defineCustomElement$
     'ionChange',
     'ionBlur',
     'ionFocus'
-], 'value', 'ion-input');
-const IonInputOtp = /*@__PURE__*/ defineContainer('ion-input-otp', defineCustomElement$x, [
+], 'value', 'ionInput', undefined);
+const IonInputOtp = /*@__PURE__*/ defineContainer('ion-input-otp', defineCustomElement$u, [
     'autocapitalize',
     'color',
     'disabled',
@@ -713,14 +697,14 @@ const IonInputOtp = /*@__PURE__*/ defineContainer('ion-input-otp', defineCustomE
     'ionComplete',
     'ionBlur',
     'ionFocus'
-], 'value', 'ion-input');
-const IonInputPasswordToggle = /*@__PURE__*/ defineContainer('ion-input-password-toggle', defineCustomElement$y, [
+], 'value', 'ionInput', undefined);
+const IonInputPasswordToggle = /*@__PURE__*/ defineContainer('ion-input-password-toggle', defineCustomElement$v, [
     'color',
     'showIcon',
     'hideIcon',
     'type'
 ]);
-const IonItem = /*@__PURE__*/ defineContainer('ion-item', defineCustomElement$z, [
+const IonItem = /*@__PURE__*/ defineContainer('ion-item', defineCustomElement$w, [
     'color',
     'button',
     'detail',
@@ -735,36 +719,34 @@ const IonItem = /*@__PURE__*/ defineContainer('ion-item', defineCustomElement$z,
     'target',
     'type'
 ]);
-const IonItemDivider = /*@__PURE__*/ defineContainer('ion-item-divider', defineCustomElement$A, [
+const IonItemDivider = /*@__PURE__*/ defineContainer('ion-item-divider', defineCustomElement$x, [
     'color',
     'sticky'
 ]);
-const IonItemGroup = /*@__PURE__*/ defineContainer('ion-item-group', defineCustomElement$B);
-const IonItemOption = /*@__PURE__*/ defineContainer('ion-item-option', defineCustomElement$C, [
+const IonItemGroup = /*@__PURE__*/ defineContainer('ion-item-group', defineCustomElement$y);
+const IonItemOption = /*@__PURE__*/ defineContainer('ion-item-option', defineCustomElement$z, [
     'color',
     'disabled',
     'download',
     'expandable',
     'href',
-    'hue',
     'rel',
     'target',
-    'type',
-    'shape'
+    'type'
 ]);
-const IonItemOptions = /*@__PURE__*/ defineContainer('ion-item-options', defineCustomElement$D, [
+const IonItemOptions = /*@__PURE__*/ defineContainer('ion-item-options', defineCustomElement$A, [
     'side',
     'ionSwipe'
 ], [
     'ionSwipe'
 ]);
-const IonItemSliding = /*@__PURE__*/ defineContainer('ion-item-sliding', defineCustomElement$E, [
+const IonItemSliding = /*@__PURE__*/ defineContainer('ion-item-sliding', defineCustomElement$B, [
     'disabled',
     'ionDrag'
 ], [
     'ionDrag'
 ]);
-const IonLabel = /*@__PURE__*/ defineContainer('ion-label', defineCustomElement$F, [
+const IonLabel = /*@__PURE__*/ defineContainer('ion-label', defineCustomElement$C, [
     'color',
     'position',
     'ionColor',
@@ -773,16 +755,15 @@ const IonLabel = /*@__PURE__*/ defineContainer('ion-label', defineCustomElement$
     'ionColor',
     'ionStyle'
 ]);
-const IonList = /*@__PURE__*/ defineContainer('ion-list', defineCustomElement$G, [
+const IonList = /*@__PURE__*/ defineContainer('ion-list', defineCustomElement$D, [
     'lines',
-    'inset',
-    'shape'
+    'inset'
 ]);
-const IonListHeader = /*@__PURE__*/ defineContainer('ion-list-header', defineCustomElement$H, [
+const IonListHeader = /*@__PURE__*/ defineContainer('ion-list-header', defineCustomElement$E, [
     'color',
     'lines'
 ]);
-const IonMenu = /*@__PURE__*/ defineContainer('ion-menu', defineCustomElement$I, [
+const IonMenu = /*@__PURE__*/ defineContainer('ion-menu', defineCustomElement$F, [
     'contentId',
     'menuId',
     'type',
@@ -802,32 +783,32 @@ const IonMenu = /*@__PURE__*/ defineContainer('ion-menu', defineCustomElement$I,
     'ionDidClose',
     'ionMenuChange'
 ]);
-const IonMenuButton = /*@__PURE__*/ defineContainer('ion-menu-button', defineCustomElement$J, [
+const IonMenuButton = /*@__PURE__*/ defineContainer('ion-menu-button', defineCustomElement$G, [
     'color',
     'disabled',
     'menu',
     'autoHide',
     'type'
 ]);
-const IonMenuToggle = /*@__PURE__*/ defineContainer('ion-menu-toggle', defineCustomElement$K, [
+const IonMenuToggle = /*@__PURE__*/ defineContainer('ion-menu-toggle', defineCustomElement$H, [
     'menu',
     'autoHide'
 ]);
-const IonNavLink = /*@__PURE__*/ defineContainer('ion-nav-link', defineCustomElement$L, [
+const IonNavLink = /*@__PURE__*/ defineContainer('ion-nav-link', defineCustomElement$I, [
     'component',
     'componentProps',
     'routerDirection',
     'routerAnimation'
 ]);
-const IonNote = /*@__PURE__*/ defineContainer('ion-note', defineCustomElement$M, [
+const IonNote = /*@__PURE__*/ defineContainer('ion-note', defineCustomElement$J, [
     'color'
 ]);
-const IonPicker = /*@__PURE__*/ defineContainer('ion-picker', defineCustomElement$N, [
+const IonPicker = /*@__PURE__*/ defineContainer('ion-picker', defineCustomElement$K, [
     'ionInputModeChange'
 ], [
     'ionInputModeChange'
 ]);
-const IonPickerColumn = /*@__PURE__*/ defineContainer('ion-picker-column', defineCustomElement$O, [
+const IonPickerColumn = /*@__PURE__*/ defineContainer('ion-picker-column', defineCustomElement$L, [
     'disabled',
     'value',
     'color',
@@ -836,20 +817,19 @@ const IonPickerColumn = /*@__PURE__*/ defineContainer('ion-picker-column', defin
 ], [
     'ionChange'
 ]);
-const IonPickerColumnOption = /*@__PURE__*/ defineContainer('ion-picker-column-option', defineCustomElement$P, [
+const IonPickerColumnOption = /*@__PURE__*/ defineContainer('ion-picker-column-option', defineCustomElement$M, [
     'disabled',
     'value',
     'color'
 ]);
-const IonProgressBar = /*@__PURE__*/ defineContainer('ion-progress-bar', defineCustomElement$Q, [
+const IonProgressBar = /*@__PURE__*/ defineContainer('ion-progress-bar', defineCustomElement$N, [
     'type',
     'reversed',
     'value',
     'buffer',
-    'color',
-    'shape'
+    'color'
 ]);
-const IonRadio = /*@__PURE__*/ defineContainer('ion-radio', defineCustomElement$R, [
+const IonRadio = /*@__PURE__*/ defineContainer('ion-radio', defineCustomElement$O, [
     'color',
     'name',
     'disabled',
@@ -862,8 +842,8 @@ const IonRadio = /*@__PURE__*/ defineContainer('ion-radio', defineCustomElement$
 ], [
     'ionFocus',
     'ionBlur'
-], 'value', 'ion-change');
-const IonRadioGroup = /*@__PURE__*/ defineContainer('ion-radio-group', defineCustomElement$S, [
+], 'value', 'ionChange', undefined);
+const IonRadioGroup = /*@__PURE__*/ defineContainer('ion-radio-group', defineCustomElement$P, [
     'allowEmptySelection',
     'compareWith',
     'name',
@@ -875,8 +855,8 @@ const IonRadioGroup = /*@__PURE__*/ defineContainer('ion-radio-group', defineCus
 ], [
     'ionChange',
     'ionValueChange'
-], 'value', 'ion-change');
-const IonRange = /*@__PURE__*/ defineContainer('ion-range', defineCustomElement$T, [
+], 'value', 'ionChange', undefined);
+const IonRange = /*@__PURE__*/ defineContainer('ion-range', defineCustomElement$Q, [
     'color',
     'debounce',
     'name',
@@ -906,8 +886,8 @@ const IonRange = /*@__PURE__*/ defineContainer('ion-range', defineCustomElement$
     'ionBlur',
     'ionKnobMoveStart',
     'ionKnobMoveEnd'
-], 'value', 'ion-input');
-const IonRefresher = /*@__PURE__*/ defineContainer('ion-refresher', defineCustomElement$U, [
+], 'value', 'ionInput', undefined);
+const IonRefresher = /*@__PURE__*/ defineContainer('ion-refresher', defineCustomElement$R, [
     'pullMin',
     'pullMax',
     'closeDuration',
@@ -926,14 +906,14 @@ const IonRefresher = /*@__PURE__*/ defineContainer('ion-refresher', defineCustom
     'ionPullStart',
     'ionPullEnd'
 ]);
-const IonRefresherContent = /*@__PURE__*/ defineContainer('ion-refresher-content', defineCustomElement$V, [
+const IonRefresherContent = /*@__PURE__*/ defineContainer('ion-refresher-content', defineCustomElement$S, [
     'pullingIcon',
     'pullingText',
     'refreshingSpinner',
     'refreshingText'
 ]);
-const IonReorder = /*@__PURE__*/ defineContainer('ion-reorder', defineCustomElement$W);
-const IonReorderGroup = /*@__PURE__*/ defineContainer('ion-reorder-group', defineCustomElement$X, [
+const IonReorder = /*@__PURE__*/ defineContainer('ion-reorder', defineCustomElement$T);
+const IonReorderGroup = /*@__PURE__*/ defineContainer('ion-reorder-group', defineCustomElement$U, [
     'disabled',
     'ionItemReorder',
     'ionReorderStart',
@@ -945,11 +925,11 @@ const IonReorderGroup = /*@__PURE__*/ defineContainer('ion-reorder-group', defin
     'ionReorderMove',
     'ionReorderEnd'
 ]);
-const IonRippleEffect = /*@__PURE__*/ defineContainer('ion-ripple-effect', defineCustomElement$Y, [
+const IonRippleEffect = /*@__PURE__*/ defineContainer('ion-ripple-effect', defineCustomElement$V, [
     'type'
 ]);
-const IonRow = /*@__PURE__*/ defineContainer('ion-row', defineCustomElement$Z);
-const IonSearchbar = /*@__PURE__*/ defineContainer('ion-searchbar', defineCustomElement$_, [
+const IonRow = /*@__PURE__*/ defineContainer('ion-row', defineCustomElement$W);
+const IonSearchbar = /*@__PURE__*/ defineContainer('ion-searchbar', defineCustomElement$X, [
     'color',
     'animated',
     'autocapitalize',
@@ -972,8 +952,6 @@ const IonSearchbar = /*@__PURE__*/ defineContainer('ion-searchbar', defineCustom
     'spellcheck',
     'type',
     'value',
-    'shape',
-    'size',
     'ionInput',
     'ionChange',
     'ionCancel',
@@ -989,8 +967,8 @@ const IonSearchbar = /*@__PURE__*/ defineContainer('ion-searchbar', defineCustom
     'ionBlur',
     'ionFocus',
     'ionStyle'
-], 'value', 'ion-input');
-const IonSegment = /*@__PURE__*/ defineContainer('ion-segment', defineCustomElement$$, [
+], 'value', 'ionInput', undefined);
+const IonSegment = /*@__PURE__*/ defineContainer('ion-segment', defineCustomElement$Y, [
     'color',
     'disabled',
     'scrollable',
@@ -1004,25 +982,24 @@ const IonSegment = /*@__PURE__*/ defineContainer('ion-segment', defineCustomElem
     'ionChange',
     'ionSelect',
     'ionStyle'
-], 'value', 'ion-change');
-const IonSegmentButton = /*@__PURE__*/ defineContainer('ion-segment-button', defineCustomElement$10, [
+], 'value', 'ionChange', undefined);
+const IonSegmentButton = /*@__PURE__*/ defineContainer('ion-segment-button', defineCustomElement$Z, [
     'contentId',
     'disabled',
     'layout',
     'type',
     'value'
-], [], 'value', 'ion-change');
-const IonSegmentContent = /*@__PURE__*/ defineContainer('ion-segment-content', defineCustomElement$11);
-const IonSegmentView = /*@__PURE__*/ defineContainer('ion-segment-view', defineCustomElement$12, [
+], [], 'value', 'ionChange', undefined);
+const IonSegmentContent = /*@__PURE__*/ defineContainer('ion-segment-content', defineCustomElement$_);
+const IonSegmentView = /*@__PURE__*/ defineContainer('ion-segment-view', defineCustomElement$$, [
     'disabled',
     'swipeGesture',
     'ionSegmentViewScroll'
 ], [
     'ionSegmentViewScroll'
 ]);
-const IonSelect = /*@__PURE__*/ defineContainer('ion-select', defineCustomElement$13, [
+const IonSelect = /*@__PURE__*/ defineContainer('ion-select', defineCustomElement$10, [
     'cancelText',
-    'cancelIcon',
     'color',
     'compareWith',
     'disabled',
@@ -1041,10 +1018,9 @@ const IonSelect = /*@__PURE__*/ defineContainer('ion-select', defineCustomElemen
     'selectedText',
     'toggleIcon',
     'expandedIcon',
-    'required',
     'shape',
-    'size',
     'value',
+    'required',
     'ionChange',
     'ionCancel',
     'ionDismiss',
@@ -1058,35 +1034,33 @@ const IonSelect = /*@__PURE__*/ defineContainer('ion-select', defineCustomElemen
     'ionFocus',
     'ionBlur',
     'ionStyle'
-], 'value', 'ion-change');
-const IonSelectModal = /*@__PURE__*/ defineContainer('ion-select-modal', defineCustomElement$14, [
+], 'value', 'ionChange', undefined);
+const IonSelectModal = /*@__PURE__*/ defineContainer('ion-select-modal', defineCustomElement$11, [
     'header',
     'cancelText',
-    'cancelIcon',
     'multiple',
     'options'
 ]);
-const IonSelectOption = /*@__PURE__*/ defineContainer('ion-select-option', defineCustomElement$15, [
+const IonSelectOption = /*@__PURE__*/ defineContainer('ion-select-option', defineCustomElement$12, [
     'disabled',
     'value',
     'description',
     'labelPlacement',
     'justify'
 ]);
-const IonSkeletonText = /*@__PURE__*/ defineContainer('ion-skeleton-text', defineCustomElement$16, [
+const IonSkeletonText = /*@__PURE__*/ defineContainer('ion-skeleton-text', defineCustomElement$13, [
     'animated',
     'ionStyle'
 ], [
     'ionStyle'
 ]);
-const IonSpinner = /*@__PURE__*/ defineContainer('ion-spinner', defineCustomElement$17, [
+const IonSpinner = /*@__PURE__*/ defineContainer('ion-spinner', defineCustomElement$14, [
     'color',
     'duration',
     'name',
-    'paused',
-    'size'
+    'paused'
 ]);
-const IonSplitPane = /*@__PURE__*/ defineContainer('ion-split-pane', defineCustomElement$18, [
+const IonSplitPane = /*@__PURE__*/ defineContainer('ion-split-pane', defineCustomElement$15, [
     'contentId',
     'disabled',
     'when',
@@ -1094,16 +1068,16 @@ const IonSplitPane = /*@__PURE__*/ defineContainer('ion-split-pane', defineCusto
 ], [
     'ionSplitPaneVisible'
 ]);
-const IonTab = /*@__PURE__*/ defineContainer('ion-tab', defineCustomElement$19, [
+const IonTab = /*@__PURE__*/ defineContainer('ion-tab', defineCustomElement$16, [
     'active',
     'delegate',
     'tab',
     'component'
 ]);
-const IonText = /*@__PURE__*/ defineContainer('ion-text', defineCustomElement$1a, [
+const IonText = /*@__PURE__*/ defineContainer('ion-text', defineCustomElement$17, [
     'color'
 ]);
-const IonTextarea = /*@__PURE__*/ defineContainer('ion-textarea', defineCustomElement$1b, [
+const IonTextarea = /*@__PURE__*/ defineContainer('ion-textarea', defineCustomElement$18, [
     'color',
     'autocapitalize',
     'autofocus',
@@ -1132,7 +1106,6 @@ const IonTextarea = /*@__PURE__*/ defineContainer('ion-textarea', defineCustomEl
     'label',
     'labelPlacement',
     'shape',
-    'size',
     'ionChange',
     'ionInput',
     'ionBlur',
@@ -1142,16 +1115,16 @@ const IonTextarea = /*@__PURE__*/ defineContainer('ion-textarea', defineCustomEl
     'ionInput',
     'ionBlur',
     'ionFocus'
-], 'value', 'ion-input');
-const IonThumbnail = /*@__PURE__*/ defineContainer('ion-thumbnail', defineCustomElement$1c);
-const IonTitle = /*@__PURE__*/ defineContainer('ion-title', defineCustomElement$1d, [
+], 'value', 'ionInput', undefined);
+const IonThumbnail = /*@__PURE__*/ defineContainer('ion-thumbnail', defineCustomElement$19);
+const IonTitle = /*@__PURE__*/ defineContainer('ion-title', defineCustomElement$1a, [
     'color',
     'size',
     'ionStyle'
 ], [
     'ionStyle'
 ]);
-const IonToggle = /*@__PURE__*/ defineContainer('ion-toggle', defineCustomElement$1e, [
+const IonToggle = /*@__PURE__*/ defineContainer('ion-toggle', defineCustomElement$1b, [
     'color',
     'name',
     'checked',
@@ -1171,14 +1144,21 @@ const IonToggle = /*@__PURE__*/ defineContainer('ion-toggle', defineCustomElemen
     'ionChange',
     'ionFocus',
     'ionBlur'
-], 'checked', 'ion-change');
-const IonToolbar = /*@__PURE__*/ defineContainer('ion-toolbar', defineCustomElement$1f, [
-    'color',
-    'titlePlacement'
+], 'checked', 'ionChange', undefined);
+const IonToolbar = /*@__PURE__*/ defineContainer('ion-toolbar', defineCustomElement$1c, [
+    'color'
 ]);
 
 const useBackButton = (priority, handler) => {
-    const callback = (ev) => ev.detail.register(priority, handler);
+    /**
+     * `Handler` permits returning null, which core's public `register` type
+     * does not accept, so normalize it rather than narrowing the public
+     * `useBackButton` contract.
+     */
+    const callback = (ev) => ev.detail.register(priority, (processNextHandler) => {
+        const result = handler(processNextHandler);
+        return result === null ? undefined : result;
+    });
     const unregister = () => document.removeEventListener("ionBackButton", callback);
     document.addEventListener("ionBackButton", callback);
     return { unregister };
@@ -1228,17 +1208,16 @@ const hookNames = {
 };
 const ids = { main: 0 };
 const generateId = (type = "main") => {
-    var _a;
-    const id = ((_a = ids[type]) !== null && _a !== void 0 ? _a : 0) + 1;
+    const id = (ids[type] ?? 0) + 1;
     ids[type] = id;
     return id.toString();
 };
 const fireLifecycle = (vueComponent, vueInstance, lifecycle) => {
-    if (vueComponent === null || vueComponent === void 0 ? void 0 : vueComponent[lifecycle]) {
-        vueComponent[lifecycle].bind(vueInstance === null || vueInstance === void 0 ? void 0 : vueInstance.value)();
+    if (vueComponent?.[lifecycle]) {
+        vueComponent[lifecycle].bind(vueInstance?.value)();
     }
-    const instance = vueInstance === null || vueInstance === void 0 ? void 0 : vueInstance.value;
-    if (instance === null || instance === void 0 ? void 0 : instance[lifecycle]) {
+    const instance = vueInstance?.value;
+    if (instance?.[lifecycle]) {
         instance[lifecycle]();
     }
     /**
@@ -1292,7 +1271,13 @@ const injectHook = (lifecycleType, hook, component) => {
     }
 };
 const createHook = (lifecycle) => {
-    return (hook, target = getCurrentInstance()) => injectHook(lifecycle, hook, target);
+    return (hook, target = getCurrentInstance()
+    /**
+     * `injectHook` returns undefined when called outside of `setup()`, but
+     * that path only warns. Keep the published `Function` return so enabling
+     * `strict` does not widen this to `Function | undefined` for consumers.
+     */
+    ) => injectHook(lifecycle, hook, target);
 };
 const onIonViewWillEnter = createHook(LifecycleHooks.WillEnter);
 const onIonViewDidEnter = createHook(LifecycleHooks.DidEnter);
@@ -1337,10 +1322,10 @@ const IonicVue = {
 };
 
 const IonBackButton = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
-    defineCustomElement$1g();
+    defineCustomElement$1d();
     // TODO(FW-2969): type
     const ionRouter = inject("navManager");
-    const onClick = () => {
+    const onClick = (ev) => {
         /**
          * When using ion-back-button outside of
          * a routing context, ionRouter is undefined.
@@ -1348,12 +1333,33 @@ const IonBackButton = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
         if (ionRouter === undefined) {
             return;
         }
-        const defaultHref = attrs["default-href"] || attrs["defaultHref"];
+        /**
+         * If ion-back-button is being used inside
+         * of ion-nav (e.g. in a modal) then we should
+         * not interact with the router. The core
+         * ion-back-button component will handle the
+         * nav.pop() in that case.
+         */
+        const target = ev.target;
+        if (target && target.closest("ion-nav") !== null) {
+            return;
+        }
+        /**
+         * Core resolves `backButtonDefaultHref` itself and only renders the
+         * button once it has a href, so read the config here too or a
+         * config-only back button would be visible but do nothing.
+         */
+        const defaultHref = attrs["default-href"] ||
+            attrs["defaultHref"] ||
+            getConfig()?.get("backButtonDefaultHref");
         const routerAnimation = attrs["router-animation"] || attrs["routerAnimation"];
         ionRouter.handleNavigateBack(defaultHref, routerAnimation);
     };
     return () => {
-        return h("ion-back-button", Object.assign({ onClick }, attrs), slots.default && slots.default());
+        return h("ion-back-button", {
+            onClick,
+            ...attrs,
+        }, slots.default && slots.default());
     };
 }, {
     name: "IonBackButton",
@@ -1362,7 +1368,6 @@ const IonBackButton = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
 const IonPage = /*@__PURE__*/ defineComponent({
     name: "IonPage",
     props: {
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
         registerIonPage: { type: Function, default: () => { } },
     },
     mounted() {
@@ -1370,7 +1375,11 @@ const IonPage = /*@__PURE__*/ defineComponent({
     },
     setup(_, { attrs, slots }) {
         return () => {
-            return h("div", Object.assign(Object.assign({}, attrs), { ["class"]: "ion-page", ref: "ionPage" }), slots.default && slots.default());
+            return h("div", {
+                ...attrs,
+                ["class"]: "ion-page",
+                ref: "ionPage",
+            }, slots.default && slots.default());
         };
     },
 });
@@ -1383,8 +1392,14 @@ const isViewVisible = (enteringEl) => {
 const viewDepthKey = Symbol(0);
 const IonRouterOutlet = /*@__PURE__*/ defineComponent({
     name: "IonRouterOutlet",
+    props: {
+        swipeGesture: {
+            type: Boolean,
+            default: undefined,
+        },
+    },
     setup() {
-        defineCustomElement$1h();
+        defineCustomElement$1e();
         const injectedRoute = inject(routeLocationKey);
         const route = useRoute();
         const depth = inject(viewDepthKey, 0);
@@ -1397,6 +1412,7 @@ const IonRouterOutlet = /*@__PURE__*/ defineComponent({
         const id = generateId("ion-router-outlet");
         const ionRouter = inject("navManager");
         const viewStacks = inject("viewStacks");
+        // TODO(FW-2969): type
         const components = shallowRef([]);
         let skipTransition = false;
         // The base url for this router outlet
@@ -1460,11 +1476,6 @@ const IonRouterOutlet = /*@__PURE__*/ defineComponent({
          */
         { deep: true });
         const canStart = () => {
-            const config = getConfig();
-            const swipeEnabled = config &&
-                config.get("swipeBackEnabled", ionRouterOutlet.value.mode === "ios");
-            if (!swipeEnabled)
-                return false;
             const stack = viewStacks.getViewStack(id);
             if (!stack || stack.length <= 1)
                 return false;
@@ -1599,12 +1610,12 @@ See https://ionicframework.com/docs/vue/navigation#ionpage for more information.
              * going from a non-tabs page to a tabs page.
              */
             if (isViewVisible(enteringEl) &&
-                (leavingViewItem === null || leavingViewItem === void 0 ? void 0 : leavingViewItem.ionPageElement) !== undefined &&
+                leavingViewItem?.ionPageElement !== undefined &&
                 !isViewVisible(leavingViewItem.ionPageElement)) {
                 return;
             }
             fireLifecycle(enteringViewItem.vueComponent, enteringViewItem.vueComponentRef, LIFECYCLE_WILL_ENTER);
-            if ((leavingViewItem === null || leavingViewItem === void 0 ? void 0 : leavingViewItem.ionPageElement) &&
+            if (leavingViewItem?.ionPageElement &&
                 enteringViewItem !== leavingViewItem) {
                 let animationBuilder = routerAnimation;
                 const leavingEl = leavingViewItem.ionPageElement;
@@ -1755,9 +1766,16 @@ See https://ionicframework.com/docs/vue/navigation#ionpage for more information.
     },
     render() {
         const { components, registerIonPage, injectedRoute } = this;
-        return h("ion-router-outlet", { ref: "ionRouterOutlet" }, components &&
+        /**
+         * Forward props selectively to avoid setting undefined values
+         * that would override the web component's config-based defaults.
+         */
+        const routerOutletProps = { ref: "ionRouterOutlet" };
+        if (this.$props.swipeGesture !== undefined) {
+            routerOutletProps.swipeGesture = this.$props.swipeGesture;
+        }
+        return h("ion-router-outlet", routerOutletProps, components &&
             components.map((c) => {
-                var _a, _b;
                 let props = {
                     ref: c.vueComponentRef,
                     key: c.pathname,
@@ -1766,7 +1784,7 @@ See https://ionicframework.com/docs/vue/navigation#ionpage for more information.
                 /**
                  * IonRouterOutlet does not support named outlets.
                  */
-                const routePropsOption = (_b = (_a = c.matchedRoute) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.default;
+                const routePropsOption = c.matchedRoute?.props?.default;
                 /**
                  * Since IonRouterOutlet renders multiple components,
                  * each render will cause all props functions to be
@@ -1777,14 +1795,16 @@ See https://ionicframework.com/docs/vue/navigation#ionpage for more information.
                  * function is called again.
                  */
                 const getPropsFunctionResult = () => {
-                    var _a;
-                    const cachedPropsResult = (_a = c.vueComponentData) === null || _a === void 0 ? void 0 : _a.propsFunctionResult;
+                    const cachedPropsResult = c.vueComponentData?.propsFunctionResult;
                     if (cachedPropsResult) {
                         return cachedPropsResult;
                     }
                     else {
                         const propsFunctionResult = routePropsOption(injectedRoute);
-                        c.vueComponentData = Object.assign(Object.assign({}, c.vueComponentData), { propsFunctionResult });
+                        c.vueComponentData = {
+                            ...c.vueComponentData,
+                            propsFunctionResult,
+                        };
                         return propsFunctionResult;
                     }
                 };
@@ -1795,7 +1815,10 @@ See https://ionicframework.com/docs/vue/navigation#ionpage for more information.
                             ? getPropsFunctionResult()
                             : routePropsOption
                     : null;
-                props = Object.assign(Object.assign({}, props), routeProps);
+                props = {
+                    ...props,
+                    ...routeProps,
+                };
                 return h(c.vueComponent, props);
             }));
     },
@@ -1824,7 +1847,7 @@ const IonTabButton = /*@__PURE__*/ defineComponent({
         },
     },
     setup(props, { slots }) {
-        defineCustomElement$1i();
+        defineCustomElement$1f();
         // TODO(FW-2969): type
         const ionRouter = inject("navManager", null);
         const onClick = (ev) => {
@@ -1840,7 +1863,7 @@ const IonTabButton = /*@__PURE__*/ defineComponent({
             const { tab, href, _getTabState } = props;
             const tabState = _getTabState();
             const hasRouterOutlet = tabState.hasRouterOutlet;
-            const tappedTab = tabState.tabs[tab] || {};
+            const tappedTab = tabState.tabs[String(tab)] || {};
             const originalHref = tappedTab.originalHref || href;
             /**
              * If the router outlet is not defined, then the tabs is being used
@@ -1869,7 +1892,7 @@ const IonTabButton = /*@__PURE__*/ defineComponent({
             if (ionRouter !== null) {
                 if (prevActiveTab === tab) {
                     if (originalHref !== currentHref) {
-                        ionRouter.resetTab(tab);
+                        ionRouter.resetTab(tab, originalHref);
                     }
                 }
                 else {
@@ -1878,13 +1901,17 @@ const IonTabButton = /*@__PURE__*/ defineComponent({
             }
         };
         return () => {
-            return h("ion-tab-button", Object.assign({ onClick }, props), slots.default && slots.default());
+            return h("ion-tab-button", {
+                onClick,
+                ...props,
+            }, slots.default && slots.default());
         };
     },
 });
 
 const WILL_CHANGE = "ionTabsWillChange";
 const DID_CHANGE = "ionTabsDidChange";
+// TODO(FW-2969): types
 /**
  * Vue 3.2.38 fixed an issue where Web Component
  * names are respected using kebab case instead of pascal case.
@@ -1905,7 +1932,8 @@ const isTab = (node) => {
         }
         return false; // In case the fragment has no children.
     }
-    return (node.type && (node.type.name === "ion-tab" || node.type === IonTab));
+    return (!!node.type &&
+        (node.type.name === "ion-tab" || node.type === IonTab));
 };
 const IonTabs = /*@__PURE__*/ defineComponent({
     name: "IonTabs",
@@ -1953,7 +1981,7 @@ const IonTabs = /*@__PURE__*/ defineComponent({
          * `selectedTab` from core, which may occur if the custom
          * element is defined too early in the component's lifecycle.
          */
-        defineCustomElement$1j();
+        defineCustomElement$1g();
     },
     render() {
         const { slots, props } = this;
@@ -1984,7 +2012,9 @@ const IonTabs = /*@__PURE__*/ defineComponent({
             throw new Error("IonTabs cannot contain an IonRouterOutlet and IonTab at the same time.");
         }
         if (hasTab) {
-            return h("ion-tabs", Object.assign({}, props), slottedContent);
+            return h("ion-tabs", {
+                ...props,
+            }, slottedContent);
         }
         /**
          * TODO(ROU-11056)
@@ -2014,7 +2044,7 @@ const IonTabs = /*@__PURE__*/ defineComponent({
     },
 });
 
-const isTabButton = (child) => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.name) === "IonTabButton"; };
+const isTabButton = (child) => child.type?.name === "IonTabButton";
 /**
  * Checks if pathname matches the tab's href using path segment matching.
  * Avoids false matches like /home2 matching /home by requiring exact match
@@ -2063,10 +2093,12 @@ const IonTabBar = defineComponent({
                 hasRouterOutlet: false,
             },
             tabVnodes: [],
-            /* eslint-disable @typescript-eslint/no-empty-function */
-            _tabsWillChange: { type: Function, default: () => { } },
-            _tabsDidChange: { type: Function, default: () => { } },
-            /* eslint-enable @typescript-eslint/no-empty-function */
+            /**
+             * No-ops until `mounted` swaps in IonTabs' emitters, if IonTabs is
+             * present.
+             */
+            _tabsWillChange: (() => { }),
+            _tabsDidChange: (() => { }),
         };
     },
     updated() {
@@ -2083,14 +2115,21 @@ const IonTabBar = defineComponent({
              * show any child pages if necessary.
              */
             const tabState = this.$data.tabState;
-            const currentInstance = getCurrentInstance();
-            const tabs = (this.$data.tabVnodes = getTabs((currentInstance.subTree.children || [])));
+            const tabs = (this.$data.tabVnodes = getTabs((this.$.subTree.children || [])));
             tabs.forEach((child) => {
-                tabState.tabs[child.props.tab] = {
-                    originalHref: child.props.href,
-                    currentHref: child.props.href,
+                /**
+                 * `tab` may be undefined. `String()` keeps the key identical to the
+                 * one IonTabButton looks up.
+                 */
+                const childProps = child.props ?? {};
+                tabState.tabs[String(childProps.tab)] = {
+                    originalHref: childProps.href,
+                    currentHref: childProps.href,
                     ref: child,
                 };
+                if (!child.component) {
+                    return;
+                }
                 /**
                  * Passing this prop to each tab button
                  * lets it be aware of the state that
@@ -2128,13 +2167,13 @@ const IonTabBar = defineComponent({
          */
         checkActiveTab(ionRouter) {
             const hasRouterOutlet = this.$data.tabState.hasRouterOutlet;
-            const currentRoute = ionRouter === null || ionRouter === void 0 ? void 0 : ionRouter.getCurrentRouteInfo();
+            const currentRoute = ionRouter?.getCurrentRouteInfo();
             const childNodes = this.$data.tabVnodes;
             const { tabs, activeTab: prevActiveTab } = this.$data.tabState;
             const tabKeys = Object.keys(tabs);
             let activeTab = tabKeys.find((key) => {
                 const href = tabs[key].originalHref;
-                return ((currentRoute === null || currentRoute === void 0 ? void 0 : currentRoute.pathname) && matchesTab(currentRoute.pathname, href));
+                return (currentRoute?.pathname && matchesTab(currentRoute.pathname, href));
             });
             /**
              * Tabs is being used as a basic tab navigation,
@@ -2150,42 +2189,54 @@ const IonTabBar = defineComponent({
              * it in the tabs state.
              */
             childNodes.forEach((child) => {
-                const tab = tabs[child.props.tab];
-                if (!tab || tab.originalHref !== child.props.href) {
-                    tabs[child.props.tab] = {
-                        originalHref: child.props.href,
-                        currentHref: child.props.href,
+                const childProps = child.props ?? {};
+                const tab = tabs[String(childProps.tab)];
+                if (!tab || tab.originalHref !== childProps.href) {
+                    tabs[String(childProps.tab)] = {
+                        originalHref: childProps.href,
+                        currentHref: childProps.href,
                         ref: child,
                     };
                 }
             });
-            if (activeTab && prevActiveTab) {
-                const prevHref = this.$data.tabState.tabs[prevActiveTab].currentHref;
+            if (activeTab && currentRoute?.pathname) {
+                const prevHref = prevActiveTab
+                    ? this.$data.tabState.tabs[prevActiveTab].currentHref
+                    : undefined;
                 /**
                  * If the tabs change or the url changes,
                  * update the currentHref for the active tab.
-                 * Ex: url changes from /tabs/tab1 --> /tabs/tab1/child
+                 * Ex: url changes from /tabs/tab1 to /tabs/tab1/child.
                  * If we went to tab2 then back to tab1, we should
                  * land on /tabs/tab1/child instead of /tabs/tab1.
+                 *
+                 * Also runs on initial setup so a deep-loaded tab child
+                 * records its real pathname instead of `originalHref`.
                  */
-                if (activeTab !== prevActiveTab ||
-                    prevHref !== (currentRoute === null || currentRoute === void 0 ? void 0 : currentRoute.pathname)) {
+                if (activeTab !== prevActiveTab || prevHref !== currentRoute.pathname) {
                     /**
                      * By default the search is `undefined` in Ionic Vue,
                      * but Vue Router can set the search to the empty string.
                      * We check for truthy here because empty string is falsy
                      * and currentRoute.search cannot ever be a boolean.
                      */
-                    const search = (currentRoute === null || currentRoute === void 0 ? void 0 : currentRoute.search) ? `?${currentRoute.search}` : "";
-                    tabs[activeTab] = Object.assign(Object.assign({}, tabs[activeTab]), { currentHref: (currentRoute === null || currentRoute === void 0 ? void 0 : currentRoute.pathname) + search });
+                    const search = currentRoute.search ? `?${currentRoute.search}` : "";
+                    tabs[activeTab] = {
+                        ...tabs[activeTab],
+                        currentHref: currentRoute.pathname + search,
+                    };
                 }
                 /**
                  * If navigating back and the tabs change,
                  * set the previous tab back to its original href.
                  */
-                if ((currentRoute === null || currentRoute === void 0 ? void 0 : currentRoute.routerAction) === "pop" &&
+                if (prevActiveTab &&
+                    currentRoute.routerAction === "pop" &&
                     activeTab !== prevActiveTab) {
-                    tabs[prevActiveTab] = Object.assign(Object.assign({}, tabs[prevActiveTab]), { currentHref: tabs[prevActiveTab].originalHref });
+                    tabs[prevActiveTab] = {
+                        ...tabs[prevActiveTab],
+                        currentHref: tabs[prevActiveTab].originalHref,
+                    };
                 }
             }
             this.tabSwitch(activeTab, ionRouter);
@@ -2199,7 +2250,7 @@ const IonTabBar = defineComponent({
             const childNodes = this.$data.tabVnodes;
             const { activeTab: prevActiveTab } = this.$data.tabState;
             const tabState = this.$data.tabState;
-            const activeChild = childNodes.find((child) => { var _a; return isTabButton(child) && ((_a = child.props) === null || _a === void 0 ? void 0 : _a.tab) === activeTab; });
+            const activeChild = childNodes.find((child) => isTabButton(child) && child.props?.tab === activeTab);
             const tabBar = this.$refs.ionTabBar;
             const tabDidChange = activeTab !== prevActiveTab;
             if (tabBar) {
@@ -2231,15 +2282,17 @@ const IonTabBar = defineComponent({
          * IonTabs. Instead, data will be passed through
          * the provide/inject.
          */
-        const tabBarData = inject("tabBarData");
-        this.$data.tabState.hasRouterOutlet = tabBarData.value.hasRouterOutlet;
-        this.$data._tabsWillChange = tabBarData.value._tabsWillChange;
-        this.$data._tabsDidChange = tabBarData.value._tabsDidChange;
+        const tabBarData = inject("tabBarData", null);
+        if (tabBarData) {
+            this.$data.tabState.hasRouterOutlet = tabBarData.value.hasRouterOutlet;
+            this.$data._tabsWillChange = tabBarData.value._tabsWillChange;
+            this.$data._tabsDidChange = tabBarData.value._tabsDidChange;
+        }
         this.setupTabState(ionRouter);
-        ionRouter === null || ionRouter === void 0 ? void 0 : ionRouter.registerHistoryChangeListener(() => this.checkActiveTab(ionRouter));
+        ionRouter?.registerHistoryChangeListener(() => this.checkActiveTab(ionRouter));
     },
     setup(_, { slots }) {
-        defineCustomElement$1k();
+        defineCustomElement$1h();
         return () => {
             return h("ion-tab-bar", { ref: "ionTabBar" }, slots.default && slots.default());
         };
@@ -2248,9 +2301,12 @@ const IonTabBar = defineComponent({
 
 const userComponents = shallowRef([]);
 const IonApp = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
-    defineCustomElement$1l();
+    defineCustomElement$1i();
     return () => {
-        return h("ion-app", Object.assign({ name: "IonApp" }, attrs), [slots.default && slots.default(), ...userComponents.value]);
+        return h("ion-app", {
+            name: "IonApp",
+            ...attrs,
+        }, [slots.default && slots.default(), ...userComponents.value]);
     };
 }, {
     name: "IonApp",
@@ -2280,7 +2336,7 @@ const VueDelegate = (addFn = addTeleportedUserComponent, removeFn = removeTelepo
         const div = document.createElement("div");
         classes && div.classList.add(...classes);
         parentElement.appendChild(div);
-        const hostComponent = h(Teleport, { to: div }, h(componentOrTagName, Object.assign({}, componentProps)));
+        const hostComponent = h(Teleport, { to: div }, h(componentOrTagName, { ...componentProps }));
         /**
          * Ionic Framework will use what is returned from `attachViewToDom`
          * as the `component` argument in `removeViewFromDom`.
@@ -2301,7 +2357,7 @@ const VueDelegate = (addFn = addTeleportedUserComponent, removeFn = removeTelepo
 };
 
 const IonNav = /*@__PURE__*/ defineComponent((props) => {
-    defineCustomElement$1m();
+    defineCustomElement$1j();
     const views = shallowRef([]);
     /**
      * Allows us to create the component
@@ -2311,7 +2367,7 @@ const IonNav = /*@__PURE__*/ defineComponent((props) => {
     const removeView = (component) => (views.value = views.value.filter((cmp) => cmp !== component));
     const delegate = VueDelegate(addView, removeView);
     return () => {
-        return h("ion-nav", Object.assign(Object.assign({}, props), { delegate }), views.value);
+        return h("ion-nav", { ...props, delegate }, views.value);
     };
 }, {
     name: "IonNav",
@@ -2348,25 +2404,27 @@ const IonNav = /*@__PURE__*/ defineComponent((props) => {
 });
 
 const IonIcon = /*@__PURE__*/ defineComponent((props, { slots }) => {
-    defineCustomElement$1n();
+    defineCustomElement$1k();
     return () => {
-        var _a, _b;
         const { icon, ios, md, mode } = props;
         let iconToUse;
         const config = getConfig();
-        const iconMode = mode || (config === null || config === void 0 ? void 0 : config.get("mode"));
+        const iconMode = mode || config?.get("mode");
         if (ios || md) {
             if (iconMode === "ios") {
-                iconToUse = (_a = ios !== null && ios !== void 0 ? ios : md) !== null && _a !== void 0 ? _a : icon;
+                iconToUse = ios ?? md ?? icon;
             }
             else {
-                iconToUse = (_b = md !== null && md !== void 0 ? md : ios) !== null && _b !== void 0 ? _b : icon;
+                iconToUse = md ?? ios ?? icon;
             }
         }
         else {
             iconToUse = icon;
         }
-        return h("ion-icon", Object.assign(Object.assign({}, props), { icon: iconToUse }), slots);
+        return h("ion-icon", {
+            ...props,
+            icon: iconToUse,
+        }, slots);
     };
 }, {
     name: "IonIcon",
@@ -2431,7 +2489,6 @@ const defineOverlayContainer = (name, defineCustomElement, componentProps = [],
                 overlay.value = undefined;
             };
             const present = async (props) => {
-                var _a;
                 /**
                  * Do not open another instance
                  * if one is already opened.
@@ -2439,7 +2496,7 @@ const defineOverlayContainer = (name, defineCustomElement, componentProps = [],
                 if (overlay.value) {
                     await overlay.value;
                 }
-                if ((_a = overlay.value) === null || _a === void 0 ? void 0 : _a.present) {
+                if (overlay.value?.present) {
                     await overlay.value.present();
                     return;
                 }
@@ -2471,7 +2528,10 @@ const defineOverlayContainer = (name, defineCustomElement, componentProps = [],
                     delete restOfProps.onIonDragEnd;
                 }
                 const component = slots.default && slots.default()[0];
-                overlay.value = controller.create(Object.assign(Object.assign({}, restOfProps), { component }));
+                overlay.value = controller.create({
+                    ...restOfProps,
+                    component,
+                });
                 overlay.value = await overlay.value;
                 eventListeners.forEach((eventListener) => {
                     overlay.value.addEventListener(eventListener.componentEv, () => {
@@ -2566,7 +2626,7 @@ const defineOverlayContainer = (name, defineCustomElement, componentProps = [],
                     }
                     return slots;
                 };
-                return h(name, Object.assign(Object.assign({}, restOfProps), { ref: elementRef }), 
+                return h(name, { ...restOfProps, ref: elementRef }, 
                 /**
                  * When binding keepContentsMounted as an attribute
                  * i.e. <ion-modal keep-contents-mounted></ion-modal>
@@ -2583,10 +2643,13 @@ const defineOverlayContainer = (name, defineCustomElement, componentProps = [],
     };
     const options = {
         name,
-        props: Object.assign({ isOpen: DEFAULT_EMPTY_PROP }, componentProps.reduce((acc, prop) => {
-            acc[prop] = DEFAULT_EMPTY_PROP;
-            return acc;
-        }, {})),
+        props: {
+            isOpen: DEFAULT_EMPTY_PROP,
+            ...componentProps.reduce((acc, prop) => {
+                acc[prop] = DEFAULT_EMPTY_PROP;
+                return acc;
+            }, {}),
+        },
         emits: typeof controller !== "undefined"
             ? ["willPresent", "didPresent", "willDismiss", "didDismiss"]
             : undefined,
@@ -2600,13 +2663,12 @@ const defineOverlayContainer = (name, defineCustomElement, componentProps = [],
  * This is an autogenerated file created by 'scripts/copy-overlays.js'.
  * Changes made to this file will be overwritten on build.
  */
-const IonActionSheet = /*@__PURE__*/ defineOverlayContainer('ion-action-sheet', defineCustomElement$1o, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'theme', 'translucent', 'trigger']);
-const IonAlert = /*@__PURE__*/ defineOverlayContainer('ion-alert', defineCustomElement$1p, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'theme', 'translucent', 'trigger']);
-const IonLoading = /*@__PURE__*/ defineOverlayContainer('ion-loading', defineCustomElement$1q, ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'theme', 'translucent', 'trigger']);
-const IonModal = /*@__PURE__*/ defineOverlayContainer('ion-modal', defineCustomElement$1r, ['animated', 'backdropBreakpoint', 'backdropDismiss', 'breakpoints', 'canDismiss', 'enterAnimation', 'expandToScroll', 'focusTrap', 'handle', 'handleBehavior', 'htmlAttributes', 'initialBreakpoint', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'presentingElement', 'shape', 'showBackdrop', 'theme', 'trigger'], true);
-const IonPickerLegacy = /*@__PURE__*/ defineOverlayContainer('ion-picker-legacy', defineCustomElement$1s, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'theme', 'trigger']);
-const IonPopover = /*@__PURE__*/ defineOverlayContainer('ion-popover', defineCustomElement$1t, ['alignment', 'animated', 'arrow', 'backdropDismiss', 'component', 'componentProps', 'dismissOnSelect', 'enterAnimation', 'event', 'focusTrap', 'htmlAttributes', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'reference', 'showBackdrop', 'side', 'size', 'theme', 'translucent', 'trigger', 'triggerAction']);
-const IonToast = /*@__PURE__*/ defineOverlayContainer('ion-toast', defineCustomElement$1u, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'hue', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'shape', 'swipeGesture', 'theme', 'translucent', 'trigger']);
+const IonActionSheet = /*@__PURE__*/ defineOverlayContainer('ion-action-sheet', defineCustomElement$1l, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'subHeader', 'translucent', 'trigger']);
+const IonAlert = /*@__PURE__*/ defineOverlayContainer('ion-alert', defineCustomElement$1m, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent', 'trigger']);
+const IonLoading = /*@__PURE__*/ defineOverlayContainer('ion-loading', defineCustomElement$1n, ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger']);
+const IonModal = /*@__PURE__*/ defineOverlayContainer('ion-modal', defineCustomElement$1o, ['animated', 'backdropBreakpoint', 'backdropDismiss', 'breakpoints', 'canDismiss', 'enterAnimation', 'expandToScroll', 'focusTrap', 'handle', 'handleBehavior', 'htmlAttributes', 'initialBreakpoint', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'presentingElement', 'showBackdrop', 'trigger'], true);
+const IonPopover = /*@__PURE__*/ defineOverlayContainer('ion-popover', defineCustomElement$1p, ['alignment', 'animated', 'arrow', 'backdropDismiss', 'component', 'componentProps', 'dismissOnSelect', 'enterAnimation', 'event', 'focusTrap', 'htmlAttributes', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'reference', 'showBackdrop', 'side', 'size', 'translucent', 'trigger', 'triggerAction']);
+const IonToast = /*@__PURE__*/ defineOverlayContainer('ion-toast', defineCustomElement$1q, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'layout', 'leaveAnimation', 'message', 'mode', 'position', 'positionAnchor', 'swipeGesture', 'translucent', 'trigger']);
 
 // TODO(FW-2969): types
 /**
@@ -2619,20 +2681,19 @@ const createController = (defineCustomElement, oldController, useDelegate = fals
     const oldCreate = oldController.create.bind(oldController);
     oldController.create = (options) => {
         defineCustomElement();
-        return oldCreate(Object.assign(Object.assign({}, options), { delegate }));
+        return oldCreate({
+            ...options,
+            delegate,
+        });
     };
     return oldController;
 };
-const modalController = /*@__PURE__*/ createController(defineCustomElement$1r, modalController$1, true);
-const popoverController = /*@__PURE__*/ createController(defineCustomElement$1t, popoverController$1, true);
-const alertController = /*@__PURE__*/ createController(defineCustomElement$1p, alertController$1);
-const actionSheetController = /*@__PURE__*/ createController(defineCustomElement$1o, actionSheetController$1);
-const loadingController = /*@__PURE__*/ createController(defineCustomElement$1q, loadingController$1);
-/**
- * @deprecated Use the inline ion-picker component instead.
- */
-const pickerController = /*@__PURE__*/ createController(defineCustomElement$1s, pickerController$1);
-const toastController = /*@__PURE__*/ createController(defineCustomElement$1u, toastController$1);
+const modalController = /*@__PURE__*/ createController(defineCustomElement$1o, modalController$1, true);
+const popoverController = /*@__PURE__*/ createController(defineCustomElement$1p, popoverController$1, true);
+const alertController = /*@__PURE__*/ createController(defineCustomElement$1m, alertController$1);
+const actionSheetController = /*@__PURE__*/ createController(defineCustomElement$1l, actionSheetController$1);
+const loadingController = /*@__PURE__*/ createController(defineCustomElement$1n, loadingController$1);
+const toastController = /*@__PURE__*/ createController(defineCustomElement$1q, toastController$1);
 
-export { IonAccordion, IonAccordionGroup, IonActionSheet, IonAlert, IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonDatetimeButton, IonDivider, IonFab, IonFabButton, IonFabList, IonFooter, IonGallery, IonGalleryItem, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonInputOtp, IonInputPasswordToggle, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList, IonListHeader, IonLoading, IonMenu, IonMenuButton, IonMenuToggle, IonModal, IonNav, IonNavLink, IonNote, IonPage, IonPicker, IonPickerColumn, IonPickerColumnOption, IonPickerLegacy, IonPopover, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRouterOutlet, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonSelect, IonSelectModal, IonSelectOption, IonSkeletonText, IonSpinner, IonSplitPane, IonTab, IonTabBar, IonTabButton, IonTabs, IonText, IonTextarea, IonThumbnail, IonTitle, IonToast, IonToggle, IonToolbar, IonicVue, actionSheetController, alertController, loadingController, modalController, onIonViewDidEnter, onIonViewDidLeave, onIonViewWillEnter, onIonViewWillLeave, pickerController, popoverController, toastController, useBackButton, useIonRouter, useKeyboard };
+export { IonAccordion, IonAccordionGroup, IonActionSheet, IonAlert, IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonDatetimeButton, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonInputOtp, IonInputPasswordToggle, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList, IonListHeader, IonLoading, IonMenu, IonMenuButton, IonMenuToggle, IonModal, IonNav, IonNavLink, IonNote, IonPage, IonPicker, IonPickerColumn, IonPickerColumnOption, IonPopover, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRouterOutlet, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonSelect, IonSelectModal, IonSelectOption, IonSkeletonText, IonSpinner, IonSplitPane, IonTab, IonTabBar, IonTabButton, IonTabs, IonText, IonTextarea, IonThumbnail, IonTitle, IonToast, IonToggle, IonToolbar, IonicVue, actionSheetController, alertController, loadingController, modalController, onIonViewDidEnter, onIonViewDidLeave, onIonViewWillEnter, onIonViewWillLeave, popoverController, toastController, useBackButton, useIonRouter, useKeyboard };
 //# sourceMappingURL=index.js.map