@ionic/core 8.7.6-dev.11759345401.165fca78 → 8.7.6-dev.11759412372.1f332f62

package/components/ion-tab-bar.js

@@ -18,7 +18,6 @@ const TabBar = /*@__PURE__*/ proxyCustomElement(class TabBar extends HTMLElement
         this.ionTabBarChanged = createEvent(this, "ionTabBarChanged", 7);
         this.ionTabBarLoaded = createEvent(this, "ionTabBarLoaded", 7);
         this.keyboardCtrl = null;
-        this.didLoad = false;
         this.keyboardVisible = false;
         /**
          * If `true`, the tab bar will be translucent.
@@ -28,29 +27,14 @@ const TabBar = /*@__PURE__*/ proxyCustomElement(class TabBar extends HTMLElement
         this.translucent = false;
     }
     selectedTabChanged() {
-        // Skip the initial watcher call that happens during component load
-        // We handle that in componentDidLoad to ensure children are ready
-        if (!this.didLoad) {
-            return;
-        }
         if (this.selectedTab !== undefined) {
             this.ionTabBarChanged.emit({
                 tab: this.selectedTab,
             });
         }
     }
-    componentDidLoad() {
-        this.ionTabBarLoaded.emit();
-        // Set the flag to indicate the component has loaded
-        // This allows the watcher to emit changes from this point forward
-        this.didLoad = true;
-        // Emit the initial selected tab after the component is fully loaded
-        // This ensures all child components (ion-tab-button) are ready
-        if (this.selectedTab !== undefined) {
-            this.ionTabBarChanged.emit({
-                tab: this.selectedTab,
-            });
-        }
+    componentWillLoad() {
+        this.selectedTabChanged();
     }
     async connectedCallback() {
         this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
@@ -70,15 +54,18 @@ const TabBar = /*@__PURE__*/ proxyCustomElement(class TabBar extends HTMLElement
             this.keyboardCtrl.destroy();
         }
     }
+    componentDidLoad() {
+        this.ionTabBarLoaded.emit();
+    }
     render() {
         const { color, translucent, keyboardVisible } = this;
         const mode = getIonMode(this);
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (h(Host, { key: '388ec37ce308035bab78d6c9a016bb616e9517a9', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: '275dc6c1b30f6928ce9039b2f445208bb3500ddc', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, h("slot", { key: 'ce10ade2b86725e24f3254516483eeedd8ecb16a' })));
+            }) }, h("slot", { key: 'ceac20128d75c6a4a0f445f2df8deb8cc71fc4da' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-tabs.js

@@ -52,27 +52,29 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         }
         this.ionNavWillLoad.emit();
     }
-    componentDidLoad() {
-        this.updateTabBar();
-    }
-    componentDidUpdate() {
-        this.updateTabBar();
-    }
-    updateTabBar() {
+    componentWillRender() {
         const tabBar = this.el.querySelector('ion-tab-bar');
-        if (!tabBar) {
-            return;
-        }
-        const tab = this.selectedTab ? this.selectedTab.tab : undefined;
-        // If tabs has no selected tab but tab-bar already has a selected-tab set,
-        // don't overwrite it. This handles cases where tab-bar is used without ion-tab elements.
-        if (tab === undefined) {
-            return;
-        }
-        if (tabBar.selectedTab === tab) {
-            return;
+        if (tabBar) {
+            let tab = this.selectedTab ? this.selectedTab.tab : undefined;
+            // Fallback: if no selectedTab is set but we're using router mode,
+            // determine the active tab from the current URL. This works around
+            // timing issues in React Router integration where setRouteId may not
+            // be called in time for the initial render.
+            // TODO(FW-6724): Remove this with React Router upgrade
+            if (!tab && this.useRouter && typeof window !== 'undefined') {
+                const currentPath = window.location.pathname;
+                const tabButtons = this.el.querySelectorAll('ion-tab-button');
+                // Look for a tab button that matches the current path pattern
+                for (const tabButton of tabButtons) {
+                    const tabId = tabButton.getAttribute('tab');
+                    if (tabId && currentPath.includes(tabId)) {
+                        tab = tabId;
+                        break;
+                    }
+                }
+            }
+            tabBar.selectedTab = tab;
         }
-        tabBar.selectedTab = tab;
     }
     /**
      * Select a tab by the value of its `tab` property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
@@ -131,7 +133,6 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         this.selectedTab = selectedTab;
         this.ionTabsWillChange.emit({ tab: selectedTab.tab });
         selectedTab.active = true;
-        this.updateTabBar();
         return Promise.resolve();
     }
     tabSwitch() {
@@ -166,7 +167,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (h(Host, { key: '7b4b302f2942d8d131f6fc24e817989a8be08867', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '2c51cf14c0f17a8ddf2d879858c984cdf8fd3147', name: "top" }), h("div", { key: '7e9d6055092d41bd9bc80ae15965f77e216feb84', class: "tabs-inner" }, h("slot", { key: 'c308a787e37ff7f6653531d70deca597a7602d26' })), h("slot", { key: 'd5f5e693710c853570811602f859cf3e88272684', name: "bottom" })));
+        return (h(Host, { key: '6dd1d17cc5a7aff4b910303006b4478080ca97af', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: 'db54a692d1a825498a116f090eb305f7cceceb5a', name: "top" }), h("div", { key: 'e1b7d49ba7032e9071de2029695254e2a8303be9', class: "tabs-inner" }, h("slot", { key: '4c3b58d5292c8c834e7532c51de0861068943d79' })), h("slot", { key: 'dd59c0b9b217dfbfb0fccdbc6896b593278549cc', name: "bottom" })));
     }
     get el() { return this; }
     static get style() { return tabsCss; }

package/components/modal.js

@@ -947,6 +947,7 @@ const mdLeaveAnimation = (baseEl, opts) => {
 };
 
 const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange) => {
+    var _a, _b;
     // Defaults for the sheet swipe animation
     const defaultBackdrop = [
         { offset: 0, opacity: 'var(--backdrop-opacity)' },
@@ -984,10 +985,15 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
     const backdropAnimation = animation.childAnimations.find((ani) => ani.id === 'backdropAnimation');
     const contentAnimation = animation.childAnimations.find((ani) => ani.id === 'contentAnimation');
     const enableBackdrop = () => {
+        var _a, _b;
         // Respect explicit opt-out of focus trapping/backdrop interactions
         // If focusTrap is false or showBackdrop is false, do not enable the backdrop or re-enable focus trap
         const el = baseEl;
-        if (el.focusTrap === false || el.showBackdrop === false) {
+        const focusTrapAttr = (_a = el.getAttribute) === null || _a === void 0 ? void 0 : _a.call(el, 'focus-trap');
+        const showBackdropAttr = (_b = el.getAttribute) === null || _b === void 0 ? void 0 : _b.call(el, 'show-backdrop');
+        const focusTrapDisabled = el.focusTrap === false || focusTrapAttr === 'false';
+        const backdropDisabled = el.showBackdrop === false || showBackdropAttr === 'false';
+        if (focusTrapDisabled || backdropDisabled) {
             return;
         }
         baseEl.style.setProperty('pointer-events', 'auto');
@@ -1114,9 +1120,12 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
          * ion-backdrop and .modal-wrapper always have pointer-events: auto
          * applied, so the modal content can still be interacted with.
          */
-        const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
-            baseEl.focusTrap !== false &&
-            baseEl.showBackdrop !== false;
+        const modalEl = baseEl;
+        const focusTrapAttr = (_a = modalEl.getAttribute) === null || _a === void 0 ? void 0 : _a.call(modalEl, 'focus-trap');
+        const showBackdropAttr = (_b = modalEl.getAttribute) === null || _b === void 0 ? void 0 : _b.call(modalEl, 'show-backdrop');
+        const focusTrapDisabled = modalEl.focusTrap === false || focusTrapAttr === 'false';
+        const backdropDisabled = modalEl.showBackdrop === false || showBackdropAttr === 'false';
+        const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint && !focusTrapDisabled && !backdropDisabled;
         if (shouldEnableBackdrop) {
             enableBackdrop();
         }
@@ -1414,6 +1423,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
                      */
                     if (wrapperAnimation && backdropAnimation) {
                         raf(() => {
+                            var _a, _b;
                             wrapperAnimation.keyframes([...SheetDefaults.WRAPPER_KEYFRAMES]);
                             backdropAnimation.keyframes([...SheetDefaults.BACKDROP_KEYFRAMES]);
                             contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]);
@@ -1424,9 +1434,12 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
                              * Backdrop should become enabled
                              * after the backdropBreakpoint value
                              */
-                            const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
-                                baseEl.focusTrap !== false &&
-                                baseEl.showBackdrop !== false;
+                            const modalEl = baseEl;
+                            const focusTrapAttr = (_a = modalEl.getAttribute) === null || _a === void 0 ? void 0 : _a.call(modalEl, 'focus-trap');
+                            const showBackdropAttr = (_b = modalEl.getAttribute) === null || _b === void 0 ? void 0 : _b.call(modalEl, 'show-backdrop');
+                            const focusTrapDisabled = modalEl.focusTrap === false || focusTrapAttr === 'false';
+                            const backdropDisabled = modalEl.showBackdrop === false || showBackdropAttr === 'false';
+                            const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint && !focusTrapDisabled && !backdropDisabled;
                             if (shouldEnableBackdrop) {
                                 enableBackdrop();
                             }
@@ -2327,20 +2340,21 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, Object.assign({ key: '9e9a7bd591eb17a225a00b4fa2e379e94601d17f', "no-router": true,
+        const focusTrapAttr = this.el.getAttribute('focus-trap');
+        return (h(Host, Object.assign({ key: '5cb4c73e060f5bc0fdc9728cb8029665a08b4187', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
             tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: 'e5eae2c14f830f75e308fcd7f4c10c86fac5b962', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'e268f9cd310c3cf4e051b5b92524ce4fb70d005e', class: "modal-shadow" }), h("div", Object.assign({ key: '9c380f36c18144c153077b15744d1c3346bce63e',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false || focusTrapAttr === 'false' }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '7697171f861e148d3ef7e35460dd8d3df2d4f3ac', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'd71a7ca23e1aa2048af82959f902ea0fc92d6fba', class: "modal-shadow" }), h("div", Object.assign({ key: '9543fdf222f35bd22ded828f60a1345e3b3da65c',
             /*
               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 && (h("button", { key: '2d5ee6d5959d97309c306e8ce72eb0f2c19be144', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '411f1e52935485e2791afd9a97d6685c994bf44a', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '5590434c35ea04c42fc006498bc189038e15a298', onSlotchange: this.onSlotChange }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '8dac500e345dfd66f3a3fa62cd94570682b1083e', onSlotchange: this.onSlotChange }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/overlays.js

@@ -502,7 +502,7 @@ const setRootAriaHidden = (hidden = false) => {
     }
 };
 const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     if (overlay.presented) {
         return;
     }
@@ -535,10 +535,14 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
      * to avoid disabling the overlay.
      */
     const overlayEl = overlay.el;
-    const shouldTrapFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
+    const focusTrapAttr = (_a = overlayEl.getAttribute) === null || _a === void 0 ? void 0 : _a.call(overlayEl, 'focus-trap');
+    const showBackdropAttr = (_b = overlayEl.getAttribute) === null || _b === void 0 ? void 0 : _b.call(overlayEl, 'show-backdrop');
+    const focusTrapDisabled = overlayEl.focusTrap === false || focusTrapAttr === 'false';
+    const backdropDisabled = overlayEl.showBackdrop === false || showBackdropAttr === 'false';
+    const shouldTrapFocus = overlayEl.tagName !== 'ION-TOAST' && !focusTrapDisabled;
     // Only lock out root content when backdrop is active. Developers relying on showBackdrop=false
     // expect background interaction to remain enabled.
-    const shouldLockRoot = shouldTrapFocus && overlayEl.showBackdrop !== false;
+    const shouldLockRoot = shouldTrapFocus && !backdropDisabled;
     overlay.presented = true;
     overlay.willPresent.emit();
     if (shouldLockRoot) {
@@ -550,7 +554,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
         }
         document.body.classList.add(BACKDROP_NO_SCROLL);
     }
-    (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
+    (_c = overlay.willPresentShorthand) === null || _c === void 0 ? void 0 : _c.emit();
     const mode = getIonMode(overlay);
     // get the user's animation fn if one was provided
     const animationBuilder = overlay.enterAnimation
@@ -559,7 +563,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
     const completed = await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
     if (completed) {
         overlay.didPresent.emit();
-        (_b = overlay.didPresentShorthand) === null || _b === void 0 ? void 0 : _b.emit();
+        (_d = overlay.didPresentShorthand) === null || _d === void 0 ? void 0 : _d.emit();
     }
     /**
      * If the focused element is already
@@ -637,7 +641,7 @@ const restoreElementFocus = async (overlayEl) => {
     }
 };
 const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnimation, opts) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     if (!overlay.presented) {
         return false;
     }
@@ -653,11 +657,20 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
      * is dismissed.
      */
     const overlaysLockingRoot = presentedOverlays.filter((o) => {
+        var _a, _b;
         const el = o;
-        return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && el.showBackdrop !== false;
+        const focusTrapAttr = (_a = el.getAttribute) === null || _a === void 0 ? void 0 : _a.call(el, 'focus-trap');
+        const showBackdropAttr = (_b = el.getAttribute) === null || _b === void 0 ? void 0 : _b.call(el, 'show-backdrop');
+        const focusTrapDisabled = el.focusTrap === false || focusTrapAttr === 'false';
+        const backdropDisabled = el.showBackdrop === false || showBackdropAttr === 'false';
+        return el.tagName !== 'ION-TOAST' && !focusTrapDisabled && !backdropDisabled;
     });
     const overlayEl = overlay.el;
-    const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && overlayEl.showBackdrop !== false;
+    const focusTrapAttr = (_a = overlayEl.getAttribute) === null || _a === void 0 ? void 0 : _a.call(overlayEl, 'focus-trap');
+    const showBackdropAttr = (_b = overlayEl.getAttribute) === null || _b === void 0 ? void 0 : _b.call(overlayEl, 'show-backdrop');
+    const focusTrapDisabled = overlayEl.focusTrap === false || focusTrapAttr === 'false';
+    const backdropDisabled = overlayEl.showBackdrop === false || showBackdropAttr === 'false';
+    const locksRoot = overlayEl.tagName !== 'ION-TOAST' && !focusTrapDisabled && !backdropDisabled;
     /**
      * If this is the last visible overlay that is trapping focus
      * then we want to re-add the root to the accessibility tree.
@@ -672,7 +685,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
         // Overlay contents should not be clickable during dismiss
         overlay.el.style.setProperty('pointer-events', 'none');
         overlay.willDismiss.emit({ data, role });
-        (_a = overlay.willDismissShorthand) === null || _a === void 0 ? void 0 : _a.emit({ data, role });
+        (_c = overlay.willDismissShorthand) === null || _c === void 0 ? void 0 : _c.emit({ data, role });
         const mode = getIonMode(overlay);
         const animationBuilder = overlay.leaveAnimation
             ? overlay.leaveAnimation
@@ -682,7 +695,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
             await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
         }
         overlay.didDismiss.emit({ data, role });
-        (_b = overlay.didDismissShorthand) === null || _b === void 0 ? void 0 : _b.emit({ data, role });
+        (_d = overlay.didDismissShorthand) === null || _d === void 0 ? void 0 : _d.emit({ data, role });
         // Get a reference to all animations currently assigned to this overlay
         // Then tear them down to return the overlay to its initial visual state
         const animations = activeAnimations.get(overlay) || [];

package/components/popover.js

@@ -1387,9 +1387,10 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (h(Host, Object.assign({ key: '16866c02534968c982cf4730d2936d03a5107c8b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        const focusTrapAttr = this.el.getAttribute('focus-trap');
+        return (h(Host, Object.assign({ key: 'fe80ce582ef39698a3c11e305df3e8e599e91bdb', "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 && h("ion-backdrop", { key: '0df258601a4d30df3c27aa8234a7d5e056c3ecbb', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'f94e80ed996b957b5cd09b826472b4f60e8fcc78', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '185ce22f6386e8444a9cc7b8818dbfc16c463c99', class: "popover-arrow", part: "arrow" }), h("div", { key: '206202b299404e110de5397b229678cca18568d3', class: "popover-content", part: "content" }, h("slot", { key: 'ee543a0b92d6e35a837c0a0e4617c7b0fc4ad0b0' })))));
+            }, 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 || focusTrapAttr === 'false', 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: 'f37d7c8574fded2721311d4f12726e21d830cc54', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '1567893f935e1da1cb46b81ea14a76af7895eee5', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '456163df03d2b582e07b1f81fa6088125d3308ef', class: "popover-arrow", part: "arrow" }), h("div", { key: '470d257a44fb9532a392bf9f5a89a1531d02323c', class: "popover-content", part: "content" }, h("slot", { key: 'd434289bba55ad9ab169a5092d214f4031511a8f' })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/cjs/index.cjs.js

@@ -15,7 +15,7 @@ var index$2 = require('./index-DNh170BW.js');
 var config = require('./config-CKhELRRu.js');
 var theme = require('./theme-CeDs6Hcv.js');
 var index$3 = require('./index-D24wggHR.js');
-var overlays = require('./overlays-czPyT6xP.js');
+var overlays = require('./overlays-CnXxzdUE.js');
 require('./index-DkNv4J_i.js');
 require('./gesture-controller-dtqlP_q4.js');
 require('./hardware-back-button-BxdNu76F.js');

package/dist/cjs/ion-action-sheet.cjs.entry.js

@@ -7,7 +7,7 @@ var index = require('./index-DNh170BW.js');
 var buttonActive = require('./button-active-BzZenWWH.js');
 var helpers = require('./helpers-DgwmcYAu.js');
 var lockController = require('./lock-controller-aDB9wrEf.js');
-var overlays = require('./overlays-czPyT6xP.js');
+var overlays = require('./overlays-CnXxzdUE.js');
 var theme = require('./theme-CeDs6Hcv.js');
 var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
 var animation = require('./animation-ZJ1lAkZD.js');

package/dist/cjs/ion-alert.cjs.entry.js

@@ -8,7 +8,7 @@ var config = require('./config-CKhELRRu.js');
 var buttonActive = require('./button-active-BzZenWWH.js');
 var helpers = require('./helpers-DgwmcYAu.js');
 var lockController = require('./lock-controller-aDB9wrEf.js');
-var overlays = require('./overlays-czPyT6xP.js');
+var overlays = require('./overlays-CnXxzdUE.js');
 var theme = require('./theme-CeDs6Hcv.js');
 var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
 var animation = require('./animation-ZJ1lAkZD.js');

package/dist/cjs/ion-datetime_3.cjs.entry.js

@@ -6,7 +6,7 @@
 var index = require('./index-DNh170BW.js');
 var focusVisible = require('./focus-visible-CCvKiLh3.js');
 var helpers = require('./helpers-DgwmcYAu.js');
-var overlays = require('./overlays-czPyT6xP.js');
+var overlays = require('./overlays-CnXxzdUE.js');
 var dir = require('./dir-Cn0z1rJH.js');
 var theme = require('./theme-CeDs6Hcv.js');
 var index$1 = require('./index-DqmRDbxg.js');

package/dist/cjs/ion-loading.cjs.entry.js

@@ -7,7 +7,7 @@ var index = require('./index-DNh170BW.js');
 var config = require('./config-CKhELRRu.js');
 var helpers = require('./helpers-DgwmcYAu.js');
 var lockController = require('./lock-controller-aDB9wrEf.js');
-var overlays = require('./overlays-czPyT6xP.js');
+var overlays = require('./overlays-CnXxzdUE.js');
 var theme = require('./theme-CeDs6Hcv.js');
 var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
 var animation = require('./animation-ZJ1lAkZD.js');

package/dist/cjs/ion-menu_3.cjs.entry.js

@@ -5,7 +5,7 @@
 
 var index = require('./index-DNh170BW.js');
 var cubicBezier = require('./cubic-bezier-DAjy1V-e.js');
-var overlays = require('./overlays-czPyT6xP.js');
+var overlays = require('./overlays-CnXxzdUE.js');
 var gestureController = require('./gesture-controller-dtqlP_q4.js');
 var hardwareBackButton = require('./hardware-back-button-BxdNu76F.js');
 var helpers = require('./helpers-DgwmcYAu.js');

package/dist/cjs/ion-modal.cjs.entry.js

@@ -9,7 +9,7 @@ var frameworkDelegate = require('./framework-delegate-WkyjrnCx.js');
 var helpers = require('./helpers-DgwmcYAu.js');
 var lockController = require('./lock-controller-aDB9wrEf.js');
 var capacitor = require('./capacitor-DmA66EwP.js');
-var overlays = require('./overlays-czPyT6xP.js');
+var overlays = require('./overlays-CnXxzdUE.js');
 var theme = require('./theme-CeDs6Hcv.js');
 var index$4 = require('./index-BzEyuIww.js');
 var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
@@ -950,6 +950,7 @@ const mdLeaveAnimation = (baseEl, opts) => {
 };
 
 const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange) => {
+    var _a, _b;
     // Defaults for the sheet swipe animation
     const defaultBackdrop = [
         { offset: 0, opacity: 'var(--backdrop-opacity)' },
@@ -987,10 +988,15 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
     const backdropAnimation = animation.childAnimations.find((ani) => ani.id === 'backdropAnimation');
     const contentAnimation = animation.childAnimations.find((ani) => ani.id === 'contentAnimation');
     const enableBackdrop = () => {
+        var _a, _b;
         // Respect explicit opt-out of focus trapping/backdrop interactions
         // If focusTrap is false or showBackdrop is false, do not enable the backdrop or re-enable focus trap
         const el = baseEl;
-        if (el.focusTrap === false || el.showBackdrop === false) {
+        const focusTrapAttr = (_a = el.getAttribute) === null || _a === void 0 ? void 0 : _a.call(el, 'focus-trap');
+        const showBackdropAttr = (_b = el.getAttribute) === null || _b === void 0 ? void 0 : _b.call(el, 'show-backdrop');
+        const focusTrapDisabled = el.focusTrap === false || focusTrapAttr === 'false';
+        const backdropDisabled = el.showBackdrop === false || showBackdropAttr === 'false';
+        if (focusTrapDisabled || backdropDisabled) {
             return;
         }
         baseEl.style.setProperty('pointer-events', 'auto');
@@ -1117,9 +1123,12 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
          * ion-backdrop and .modal-wrapper always have pointer-events: auto
          * applied, so the modal content can still be interacted with.
          */
-        const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
-            baseEl.focusTrap !== false &&
-            baseEl.showBackdrop !== false;
+        const modalEl = baseEl;
+        const focusTrapAttr = (_a = modalEl.getAttribute) === null || _a === void 0 ? void 0 : _a.call(modalEl, 'focus-trap');
+        const showBackdropAttr = (_b = modalEl.getAttribute) === null || _b === void 0 ? void 0 : _b.call(modalEl, 'show-backdrop');
+        const focusTrapDisabled = modalEl.focusTrap === false || focusTrapAttr === 'false';
+        const backdropDisabled = modalEl.showBackdrop === false || showBackdropAttr === 'false';
+        const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint && !focusTrapDisabled && !backdropDisabled;
         if (shouldEnableBackdrop) {
             enableBackdrop();
         }
@@ -1417,6 +1426,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
                      */
                     if (wrapperAnimation && backdropAnimation) {
                         helpers.raf(() => {
+                            var _a, _b;
                             wrapperAnimation.keyframes([...SheetDefaults.WRAPPER_KEYFRAMES]);
                             backdropAnimation.keyframes([...SheetDefaults.BACKDROP_KEYFRAMES]);
                             contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]);
@@ -1427,9 +1437,12 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
                              * Backdrop should become enabled
                              * after the backdropBreakpoint value
                              */
-                            const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
-                                baseEl.focusTrap !== false &&
-                                baseEl.showBackdrop !== false;
+                            const modalEl = baseEl;
+                            const focusTrapAttr = (_a = modalEl.getAttribute) === null || _a === void 0 ? void 0 : _a.call(modalEl, 'focus-trap');
+                            const showBackdropAttr = (_b = modalEl.getAttribute) === null || _b === void 0 ? void 0 : _b.call(modalEl, 'show-backdrop');
+                            const focusTrapDisabled = modalEl.focusTrap === false || focusTrapAttr === 'false';
+                            const backdropDisabled = modalEl.showBackdrop === false || showBackdropAttr === 'false';
+                            const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint && !focusTrapDisabled && !backdropDisabled;
                             if (shouldEnableBackdrop) {
                                 enableBackdrop();
                             }
@@ -2328,20 +2341,21 @@ const Modal = class {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (index$3.h(index$3.Host, Object.assign({ key: '9e9a7bd591eb17a225a00b4fa2e379e94601d17f', "no-router": true,
+        const focusTrapAttr = this.el.getAttribute('focus-trap');
+        return (index$3.h(index$3.Host, Object.assign({ key: '5cb4c73e060f5bc0fdc9728cb8029665a08b4187', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
             tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), index$3.h("ion-backdrop", { key: 'e5eae2c14f830f75e308fcd7f4c10c86fac5b962', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && index$3.h("div", { key: 'e268f9cd310c3cf4e051b5b92524ce4fb70d005e', class: "modal-shadow" }), index$3.h("div", Object.assign({ key: '9c380f36c18144c153077b15744d1c3346bce63e',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false || focusTrapAttr === 'false' }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), index$3.h("ion-backdrop", { key: '7697171f861e148d3ef7e35460dd8d3df2d4f3ac', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && index$3.h("div", { key: 'd71a7ca23e1aa2048af82959f902ea0fc92d6fba', class: "modal-shadow" }), index$3.h("div", Object.assign({ key: '9543fdf222f35bd22ded828f60a1345e3b3da65c',
             /*
               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 && (index$3.h("button", { key: '2d5ee6d5959d97309c306e8ce72eb0f2c19be144', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (index$3.h("button", { key: '411f1e52935485e2791afd9a97d6685c994bf44a', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), index$3.h("slot", { key: '5590434c35ea04c42fc006498bc189038e15a298', onSlotchange: this.onSlotChange }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), index$3.h("slot", { key: '8dac500e345dfd66f3a3fa62cd94570682b1083e', onSlotchange: this.onSlotChange }))));
     }
     get el() { return index$3.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ion-popover.cjs.entry.js

@@ -4,7 +4,7 @@
 'use strict';
 
 var index = require('./index-DNh170BW.js');
-var overlays = require('./overlays-czPyT6xP.js');
+var overlays = require('./overlays-CnXxzdUE.js');
 var frameworkDelegate = require('./framework-delegate-WkyjrnCx.js');
 var helpers = require('./helpers-DgwmcYAu.js');
 var lockController = require('./lock-controller-aDB9wrEf.js');
@@ -1388,9 +1388,10 @@ const Popover = class {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = ionicGlobal.isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (index.h(index.Host, Object.assign({ key: '16866c02534968c982cf4730d2936d03a5107c8b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        const focusTrapAttr = this.el.getAttribute('focus-trap');
+        return (index.h(index.Host, Object.assign({ key: 'fe80ce582ef39698a3c11e305df3e8e599e91bdb', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && index.h("ion-backdrop", { key: '0df258601a4d30df3c27aa8234a7d5e056c3ecbb', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), index.h("div", { key: 'f94e80ed996b957b5cd09b826472b4f60e8fcc78', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && index.h("div", { key: '185ce22f6386e8444a9cc7b8818dbfc16c463c99', class: "popover-arrow", part: "arrow" }), index.h("div", { key: '206202b299404e110de5397b229678cca18568d3', class: "popover-content", part: "content" }, index.h("slot", { key: 'ee543a0b92d6e35a837c0a0e4617c7b0fc4ad0b0' })))));
+            }, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false || focusTrapAttr === 'false', 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && index.h("ion-backdrop", { key: 'f37d7c8574fded2721311d4f12726e21d830cc54', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), index.h("div", { key: '1567893f935e1da1cb46b81ea14a76af7895eee5', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && index.h("div", { key: '456163df03d2b582e07b1f81fa6088125d3308ef', class: "popover-arrow", part: "arrow" }), index.h("div", { key: '470d257a44fb9532a392bf9f5a89a1531d02323c', class: "popover-content", part: "content" }, index.h("slot", { key: 'd434289bba55ad9ab169a5092d214f4031511a8f' })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ion-select-modal.cjs.entry.js

@@ -5,7 +5,7 @@
 
 var index = require('./index-DNh170BW.js');
 var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
-var overlays = require('./overlays-czPyT6xP.js');
+var overlays = require('./overlays-CnXxzdUE.js');
 var theme = require('./theme-CeDs6Hcv.js');
 require('./index-DkNv4J_i.js');
 require('./helpers-DgwmcYAu.js');

package/dist/cjs/ion-select_3.cjs.entry.js

@@ -7,7 +7,7 @@ var index = require('./index-DNh170BW.js');
 var notchController = require('./notch-controller-Bf5Rr4R5.js');
 var compareWithUtils = require('./compare-with-utils-DSicavqM.js');
 var helpers = require('./helpers-DgwmcYAu.js');
-var overlays = require('./overlays-czPyT6xP.js');
+var overlays = require('./overlays-CnXxzdUE.js');
 var dir = require('./dir-Cn0z1rJH.js');
 var theme = require('./theme-CeDs6Hcv.js');
 var watchOptions = require('./watch-options-CviOsrTS.js');

package/dist/cjs/ion-tab-bar_2.cjs.entry.js

@@ -22,7 +22,6 @@ const TabBar = class {
         this.ionTabBarChanged = index.createEvent(this, "ionTabBarChanged", 7);
         this.ionTabBarLoaded = index.createEvent(this, "ionTabBarLoaded", 7);
         this.keyboardCtrl = null;
-        this.didLoad = false;
         this.keyboardVisible = false;
         /**
          * If `true`, the tab bar will be translucent.
@@ -32,29 +31,14 @@ const TabBar = class {
         this.translucent = false;
     }
     selectedTabChanged() {
-        // Skip the initial watcher call that happens during component load
-        // We handle that in componentDidLoad to ensure children are ready
-        if (!this.didLoad) {
-            return;
-        }
         if (this.selectedTab !== undefined) {
             this.ionTabBarChanged.emit({
                 tab: this.selectedTab,
             });
         }
     }
-    componentDidLoad() {
-        this.ionTabBarLoaded.emit();
-        // Set the flag to indicate the component has loaded
-        // This allows the watcher to emit changes from this point forward
-        this.didLoad = true;
-        // Emit the initial selected tab after the component is fully loaded
-        // This ensures all child components (ion-tab-button) are ready
-        if (this.selectedTab !== undefined) {
-            this.ionTabBarChanged.emit({
-                tab: this.selectedTab,
-            });
-        }
+    componentWillLoad() {
+        this.selectedTabChanged();
     }
     async connectedCallback() {
         this.keyboardCtrl = await keyboardController.createKeyboardController(async (keyboardOpen, waitForResize) => {
@@ -74,15 +58,18 @@ const TabBar = class {
             this.keyboardCtrl.destroy();
         }
     }
+    componentDidLoad() {
+        this.ionTabBarLoaded.emit();
+    }
     render() {
         const { color, translucent, keyboardVisible } = this;
         const mode = ionicGlobal.getIonMode(this);
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (index.h(index.Host, { key: '388ec37ce308035bab78d6c9a016bb616e9517a9', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: '275dc6c1b30f6928ce9039b2f445208bb3500ddc', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: theme.createColorClasses(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, index.h("slot", { key: 'ce10ade2b86725e24f3254516483eeedd8ecb16a' })));
+            }) }, index.h("slot", { key: 'ceac20128d75c6a4a0f445f2df8deb8cc71fc4da' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {