@ionic/core 8.7.5-dev.11758642453.13b1da5d → 8.7.5-dev.11758652700.103435a3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/components/modal.js +7 -4
  2. package/components/overlays.js +26 -9
  3. package/dist/cjs/index.cjs.js +1 -1
  4. package/dist/cjs/ion-action-sheet.cjs.entry.js +1 -1
  5. package/dist/cjs/ion-alert.cjs.entry.js +1 -1
  6. package/dist/cjs/ion-datetime_3.cjs.entry.js +1 -1
  7. package/dist/cjs/ion-loading.cjs.entry.js +1 -1
  8. package/dist/cjs/ion-menu_3.cjs.entry.js +1 -1
  9. package/dist/cjs/ion-modal.cjs.entry.js +8 -5
  10. package/dist/cjs/ion-popover.cjs.entry.js +1 -1
  11. package/dist/cjs/ion-select-modal.cjs.entry.js +1 -1
  12. package/dist/cjs/ion-select_3.cjs.entry.js +1 -1
  13. package/dist/cjs/ion-toast.cjs.entry.js +1 -1
  14. package/dist/cjs/{overlays-CPUTc8An.js → overlays-czPyT6xP.js} +26 -9
  15. package/dist/collection/components/modal/gestures/sheet.js +7 -4
  16. package/dist/collection/utils/overlays.js +26 -9
  17. package/dist/docs.json +1 -1
  18. package/dist/esm/index.js +1 -1
  19. package/dist/esm/ion-action-sheet.entry.js +1 -1
  20. package/dist/esm/ion-alert.entry.js +1 -1
  21. package/dist/esm/ion-datetime_3.entry.js +1 -1
  22. package/dist/esm/ion-loading.entry.js +1 -1
  23. package/dist/esm/ion-menu_3.entry.js +1 -1
  24. package/dist/esm/ion-modal.entry.js +8 -5
  25. package/dist/esm/ion-popover.entry.js +1 -1
  26. package/dist/esm/ion-select-modal.entry.js +1 -1
  27. package/dist/esm/ion-select_3.entry.js +1 -1
  28. package/dist/esm/ion-toast.entry.js +1 -1
  29. package/dist/esm/{overlays-BOalOTUe.js → overlays-BYcYBCrx.js} +26 -9
  30. package/dist/ionic/index.esm.js +1 -1
  31. package/dist/ionic/ionic.esm.js +1 -1
  32. package/dist/ionic/{p-de2bedb6.entry.js → p-0793aea6.entry.js} +1 -1
  33. package/dist/ionic/{p-3f07313b.entry.js → p-0e1904a0.entry.js} +1 -1
  34. package/dist/ionic/{p-12d04c28.entry.js → p-117e7a3f.entry.js} +1 -1
  35. package/dist/ionic/{p-97f8294e.entry.js → p-1f68cb59.entry.js} +1 -1
  36. package/dist/ionic/{p-f4dfce09.entry.js → p-25e5e5cc.entry.js} +1 -1
  37. package/dist/ionic/{p-2e1782af.entry.js → p-568efea2.entry.js} +1 -1
  38. package/dist/ionic/{p-1bd0a347.entry.js → p-63852736.entry.js} +1 -1
  39. package/dist/ionic/p-6e43c86a.entry.js +4 -0
  40. package/dist/ionic/{p-fd46b48a.entry.js → p-746cd400.entry.js} +1 -1
  41. package/dist/ionic/{p-4a95b96c.entry.js → p-90f4cc71.entry.js} +1 -1
  42. package/dist/ionic/p-Cnh7O81W.js +4 -0
  43. package/hydrate/index.js +33 -13
  44. package/hydrate/index.mjs +33 -13
  45. package/package.json +1 -1
  46. package/dist/ionic/p-JK8qe2uI.js +0 -4
  47. package/dist/ionic/p-f8900d24.entry.js +0 -4
@@ -985,8 +985,9 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
985
985
  const contentAnimation = animation.childAnimations.find((ani) => ani.id === 'contentAnimation');
986
986
  const enableBackdrop = () => {
987
987
  // Respect explicit opt-out of focus trapping/backdrop interactions
988
- // If focusTrap is false, do not enable the backdrop or re-enable focus trap
989
- if (baseEl.focusTrap === false) {
988
+ // If focusTrap is false or showBackdrop is false, do not enable the backdrop or re-enable focus trap
989
+ const el = baseEl;
990
+ if (el.focusTrap === false || el.showBackdrop === false) {
990
991
  return;
991
992
  }
992
993
  baseEl.style.setProperty('pointer-events', 'auto');
@@ -1114,7 +1115,8 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
1114
1115
  * applied, so the modal content can still be interacted with.
1115
1116
  */
1116
1117
  const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
1117
- baseEl.focusTrap !== false;
1118
+ baseEl.focusTrap !== false &&
1119
+ baseEl.showBackdrop !== false;
1118
1120
  if (shouldEnableBackdrop) {
1119
1121
  enableBackdrop();
1120
1122
  }
@@ -1423,7 +1425,8 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
1423
1425
  * after the backdropBreakpoint value
1424
1426
  */
1425
1427
  const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
1426
- baseEl.focusTrap !== false;
1428
+ baseEl.focusTrap !== false &&
1429
+ baseEl.showBackdrop !== false;
1427
1430
  if (shouldEnableBackdrop) {
1428
1431
  enableBackdrop();
1429
1432
  }
@@ -496,11 +496,9 @@ const setRootAriaHidden = (hidden = false) => {
496
496
  }
497
497
  if (hidden) {
498
498
  viewContainer.setAttribute('aria-hidden', 'true');
499
- viewContainer.setAttribute('inert', '');
500
499
  }
501
500
  else {
502
501
  viewContainer.removeAttribute('aria-hidden');
503
- viewContainer.removeAttribute('inert');
504
502
  }
505
503
  };
506
504
  const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
@@ -527,15 +525,31 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
527
525
  * the keyboard focus from leaving the overlay unless
528
526
  * developers explicitly opt out (for example, sheet
529
527
  * modals that should permit background interaction).
528
+ *
529
+ * Note: Some apps move inline overlays to a specific container
530
+ * during the willPresent lifecycle (e.g., React portals via
531
+ * onWillPresent). Defer applying aria-hidden/inert to the app
532
+ * root until after willPresent so we can detect where the
533
+ * overlay is finally inserted. If the overlay is inside the
534
+ * view container subtree, skip adding aria-hidden/inert there
535
+ * to avoid disabling the overlay.
530
536
  */
531
537
  const overlayEl = overlay.el;
532
538
  const shouldTrapFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
533
- if (shouldTrapFocus) {
534
- setRootAriaHidden(true);
535
- document.body.classList.add(BACKDROP_NO_SCROLL);
536
- }
539
+ // Only lock out root content when backdrop is active. Developers relying on showBackdrop=false
540
+ // expect background interaction to remain enabled.
541
+ const shouldLockRoot = shouldTrapFocus && overlayEl.showBackdrop !== false;
537
542
  overlay.presented = true;
538
543
  overlay.willPresent.emit();
544
+ if (shouldLockRoot) {
545
+ const root = getAppRoot(document);
546
+ const viewContainer = root.querySelector('ion-router-outlet, #ion-view-container-root');
547
+ const overlayInsideViewContainer = viewContainer ? viewContainer.contains(overlayEl) : false;
548
+ if (!overlayInsideViewContainer) {
549
+ setRootAriaHidden(true);
550
+ }
551
+ document.body.classList.add(BACKDROP_NO_SCROLL);
552
+ }
539
553
  (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
540
554
  const mode = getIonMode(overlay);
541
555
  // get the user's animation fn if one was provided
@@ -638,14 +652,17 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
638
652
  * from the root element when the last focus-trapping overlay
639
653
  * is dismissed.
640
654
  */
641
- const overlaysTrappingFocus = presentedOverlays.filter((o) => o.tagName !== 'ION-TOAST' && o.focusTrap !== false);
655
+ const overlaysLockingRoot = presentedOverlays.filter((o) => {
656
+ const el = o;
657
+ return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && el.showBackdrop !== false;
658
+ });
642
659
  const overlayEl = overlay.el;
643
- const trapsFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
660
+ const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && overlayEl.showBackdrop !== false;
644
661
  /**
645
662
  * If this is the last visible overlay that is trapping focus
646
663
  * then we want to re-add the root to the accessibility tree.
647
664
  */
648
- const lastOverlayTrappingFocus = trapsFocus && overlaysTrappingFocus.length === 1 && overlaysTrappingFocus[0].id === overlayEl.id;
665
+ const lastOverlayTrappingFocus = locksRoot && overlaysLockingRoot.length === 1 && overlaysLockingRoot[0].id === overlayEl.id;
649
666
  if (lastOverlayTrappingFocus) {
650
667
  setRootAriaHidden(false);
651
668
  document.body.classList.remove(BACKDROP_NO_SCROLL);
@@ -15,7 +15,7 @@ var index$2 = require('./index-DNh170BW.js');
15
15
  var config = require('./config-CKhELRRu.js');
16
16
  var theme = require('./theme-CeDs6Hcv.js');
17
17
  var index$3 = require('./index-D24wggHR.js');
18
- var overlays = require('./overlays-CPUTc8An.js');
18
+ var overlays = require('./overlays-czPyT6xP.js');
19
19
  require('./index-DkNv4J_i.js');
20
20
  require('./gesture-controller-dtqlP_q4.js');
21
21
  require('./hardware-back-button-BxdNu76F.js');
@@ -7,7 +7,7 @@ var index = require('./index-DNh170BW.js');
7
7
  var buttonActive = require('./button-active-BzZenWWH.js');
8
8
  var helpers = require('./helpers-DgwmcYAu.js');
9
9
  var lockController = require('./lock-controller-aDB9wrEf.js');
10
- var overlays = require('./overlays-CPUTc8An.js');
10
+ var overlays = require('./overlays-czPyT6xP.js');
11
11
  var theme = require('./theme-CeDs6Hcv.js');
12
12
  var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
13
13
  var animation = require('./animation-ZJ1lAkZD.js');
@@ -8,7 +8,7 @@ var config = require('./config-CKhELRRu.js');
8
8
  var buttonActive = require('./button-active-BzZenWWH.js');
9
9
  var helpers = require('./helpers-DgwmcYAu.js');
10
10
  var lockController = require('./lock-controller-aDB9wrEf.js');
11
- var overlays = require('./overlays-CPUTc8An.js');
11
+ var overlays = require('./overlays-czPyT6xP.js');
12
12
  var theme = require('./theme-CeDs6Hcv.js');
13
13
  var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
14
14
  var animation = require('./animation-ZJ1lAkZD.js');
@@ -6,7 +6,7 @@
6
6
  var index = require('./index-DNh170BW.js');
7
7
  var focusVisible = require('./focus-visible-CCvKiLh3.js');
8
8
  var helpers = require('./helpers-DgwmcYAu.js');
9
- var overlays = require('./overlays-CPUTc8An.js');
9
+ var overlays = require('./overlays-czPyT6xP.js');
10
10
  var dir = require('./dir-Cn0z1rJH.js');
11
11
  var theme = require('./theme-CeDs6Hcv.js');
12
12
  var index$1 = require('./index-DqmRDbxg.js');
@@ -7,7 +7,7 @@ var index = require('./index-DNh170BW.js');
7
7
  var config = require('./config-CKhELRRu.js');
8
8
  var helpers = require('./helpers-DgwmcYAu.js');
9
9
  var lockController = require('./lock-controller-aDB9wrEf.js');
10
- var overlays = require('./overlays-CPUTc8An.js');
10
+ var overlays = require('./overlays-czPyT6xP.js');
11
11
  var theme = require('./theme-CeDs6Hcv.js');
12
12
  var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
13
13
  var animation = require('./animation-ZJ1lAkZD.js');
@@ -5,7 +5,7 @@
5
5
 
6
6
  var index = require('./index-DNh170BW.js');
7
7
  var cubicBezier = require('./cubic-bezier-DAjy1V-e.js');
8
- var overlays = require('./overlays-CPUTc8An.js');
8
+ var overlays = require('./overlays-czPyT6xP.js');
9
9
  var gestureController = require('./gesture-controller-dtqlP_q4.js');
10
10
  var hardwareBackButton = require('./hardware-back-button-BxdNu76F.js');
11
11
  var helpers = require('./helpers-DgwmcYAu.js');
@@ -9,7 +9,7 @@ var frameworkDelegate = require('./framework-delegate-WkyjrnCx.js');
9
9
  var helpers = require('./helpers-DgwmcYAu.js');
10
10
  var lockController = require('./lock-controller-aDB9wrEf.js');
11
11
  var capacitor = require('./capacitor-DmA66EwP.js');
12
- var overlays = require('./overlays-CPUTc8An.js');
12
+ var overlays = require('./overlays-czPyT6xP.js');
13
13
  var theme = require('./theme-CeDs6Hcv.js');
14
14
  var index$4 = require('./index-BzEyuIww.js');
15
15
  var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
@@ -988,8 +988,9 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
988
988
  const contentAnimation = animation.childAnimations.find((ani) => ani.id === 'contentAnimation');
989
989
  const enableBackdrop = () => {
990
990
  // Respect explicit opt-out of focus trapping/backdrop interactions
991
- // If focusTrap is false, do not enable the backdrop or re-enable focus trap
992
- if (baseEl.focusTrap === false) {
991
+ // If focusTrap is false or showBackdrop is false, do not enable the backdrop or re-enable focus trap
992
+ const el = baseEl;
993
+ if (el.focusTrap === false || el.showBackdrop === false) {
993
994
  return;
994
995
  }
995
996
  baseEl.style.setProperty('pointer-events', 'auto');
@@ -1117,7 +1118,8 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
1117
1118
  * applied, so the modal content can still be interacted with.
1118
1119
  */
1119
1120
  const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
1120
- baseEl.focusTrap !== false;
1121
+ baseEl.focusTrap !== false &&
1122
+ baseEl.showBackdrop !== false;
1121
1123
  if (shouldEnableBackdrop) {
1122
1124
  enableBackdrop();
1123
1125
  }
@@ -1426,7 +1428,8 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
1426
1428
  * after the backdropBreakpoint value
1427
1429
  */
1428
1430
  const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
1429
- baseEl.focusTrap !== false;
1431
+ baseEl.focusTrap !== false &&
1432
+ baseEl.showBackdrop !== false;
1430
1433
  if (shouldEnableBackdrop) {
1431
1434
  enableBackdrop();
1432
1435
  }
@@ -4,7 +4,7 @@
4
4
  'use strict';
5
5
 
6
6
  var index = require('./index-DNh170BW.js');
7
- var overlays = require('./overlays-CPUTc8An.js');
7
+ var overlays = require('./overlays-czPyT6xP.js');
8
8
  var frameworkDelegate = require('./framework-delegate-WkyjrnCx.js');
9
9
  var helpers = require('./helpers-DgwmcYAu.js');
10
10
  var lockController = require('./lock-controller-aDB9wrEf.js');
@@ -5,7 +5,7 @@
5
5
 
6
6
  var index = require('./index-DNh170BW.js');
7
7
  var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
8
- var overlays = require('./overlays-CPUTc8An.js');
8
+ var overlays = require('./overlays-czPyT6xP.js');
9
9
  var theme = require('./theme-CeDs6Hcv.js');
10
10
  require('./index-DkNv4J_i.js');
11
11
  require('./helpers-DgwmcYAu.js');
@@ -7,7 +7,7 @@ var index = require('./index-DNh170BW.js');
7
7
  var notchController = require('./notch-controller-Bf5Rr4R5.js');
8
8
  var compareWithUtils = require('./compare-with-utils-DSicavqM.js');
9
9
  var helpers = require('./helpers-DgwmcYAu.js');
10
- var overlays = require('./overlays-CPUTc8An.js');
10
+ var overlays = require('./overlays-czPyT6xP.js');
11
11
  var dir = require('./dir-Cn0z1rJH.js');
12
12
  var theme = require('./theme-CeDs6Hcv.js');
13
13
  var watchOptions = require('./watch-options-CviOsrTS.js');
@@ -7,7 +7,7 @@ var index$1 = require('./index-DNh170BW.js');
7
7
  var config = require('./config-CKhELRRu.js');
8
8
  var helpers = require('./helpers-DgwmcYAu.js');
9
9
  var lockController = require('./lock-controller-aDB9wrEf.js');
10
- var overlays = require('./overlays-CPUTc8An.js');
10
+ var overlays = require('./overlays-czPyT6xP.js');
11
11
  var theme = require('./theme-CeDs6Hcv.js');
12
12
  var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
13
13
  var animation = require('./animation-ZJ1lAkZD.js');
@@ -498,11 +498,9 @@ const setRootAriaHidden = (hidden = false) => {
498
498
  }
499
499
  if (hidden) {
500
500
  viewContainer.setAttribute('aria-hidden', 'true');
501
- viewContainer.setAttribute('inert', '');
502
501
  }
503
502
  else {
504
503
  viewContainer.removeAttribute('aria-hidden');
505
- viewContainer.removeAttribute('inert');
506
504
  }
507
505
  };
508
506
  const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
@@ -529,15 +527,31 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
529
527
  * the keyboard focus from leaving the overlay unless
530
528
  * developers explicitly opt out (for example, sheet
531
529
  * modals that should permit background interaction).
530
+ *
531
+ * Note: Some apps move inline overlays to a specific container
532
+ * during the willPresent lifecycle (e.g., React portals via
533
+ * onWillPresent). Defer applying aria-hidden/inert to the app
534
+ * root until after willPresent so we can detect where the
535
+ * overlay is finally inserted. If the overlay is inside the
536
+ * view container subtree, skip adding aria-hidden/inert there
537
+ * to avoid disabling the overlay.
532
538
  */
533
539
  const overlayEl = overlay.el;
534
540
  const shouldTrapFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
535
- if (shouldTrapFocus) {
536
- setRootAriaHidden(true);
537
- document.body.classList.add(gestureController.BACKDROP_NO_SCROLL);
538
- }
541
+ // Only lock out root content when backdrop is active. Developers relying on showBackdrop=false
542
+ // expect background interaction to remain enabled.
543
+ const shouldLockRoot = shouldTrapFocus && overlayEl.showBackdrop !== false;
539
544
  overlay.presented = true;
540
545
  overlay.willPresent.emit();
546
+ if (shouldLockRoot) {
547
+ const root = getAppRoot(document);
548
+ const viewContainer = root.querySelector('ion-router-outlet, #ion-view-container-root');
549
+ const overlayInsideViewContainer = viewContainer ? viewContainer.contains(overlayEl) : false;
550
+ if (!overlayInsideViewContainer) {
551
+ setRootAriaHidden(true);
552
+ }
553
+ document.body.classList.add(gestureController.BACKDROP_NO_SCROLL);
554
+ }
541
555
  (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
542
556
  const mode = ionicGlobal.getIonMode(overlay);
543
557
  // get the user's animation fn if one was provided
@@ -640,14 +654,17 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
640
654
  * from the root element when the last focus-trapping overlay
641
655
  * is dismissed.
642
656
  */
643
- const overlaysTrappingFocus = presentedOverlays.filter((o) => o.tagName !== 'ION-TOAST' && o.focusTrap !== false);
657
+ const overlaysLockingRoot = presentedOverlays.filter((o) => {
658
+ const el = o;
659
+ return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && el.showBackdrop !== false;
660
+ });
644
661
  const overlayEl = overlay.el;
645
- const trapsFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
662
+ const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && overlayEl.showBackdrop !== false;
646
663
  /**
647
664
  * If this is the last visible overlay that is trapping focus
648
665
  * then we want to re-add the root to the accessibility tree.
649
666
  */
650
- const lastOverlayTrappingFocus = trapsFocus && overlaysTrappingFocus.length === 1 && overlaysTrappingFocus[0].id === overlayEl.id;
667
+ const lastOverlayTrappingFocus = locksRoot && overlaysLockingRoot.length === 1 && overlaysLockingRoot[0].id === overlayEl.id;
651
668
  if (lastOverlayTrappingFocus) {
652
669
  setRootAriaHidden(false);
653
670
  document.body.classList.remove(gestureController.BACKDROP_NO_SCROLL);
@@ -46,8 +46,9 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
46
46
  const contentAnimation = animation.childAnimations.find((ani) => ani.id === 'contentAnimation');
47
47
  const enableBackdrop = () => {
48
48
  // Respect explicit opt-out of focus trapping/backdrop interactions
49
- // If focusTrap is false, do not enable the backdrop or re-enable focus trap
50
- if (baseEl.focusTrap === false) {
49
+ // If focusTrap is false or showBackdrop is false, do not enable the backdrop or re-enable focus trap
50
+ const el = baseEl;
51
+ if (el.focusTrap === false || el.showBackdrop === false) {
51
52
  return;
52
53
  }
53
54
  baseEl.style.setProperty('pointer-events', 'auto');
@@ -175,7 +176,8 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
175
176
  * applied, so the modal content can still be interacted with.
176
177
  */
177
178
  const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
178
- baseEl.focusTrap !== false;
179
+ baseEl.focusTrap !== false &&
180
+ baseEl.showBackdrop !== false;
179
181
  if (shouldEnableBackdrop) {
180
182
  enableBackdrop();
181
183
  }
@@ -484,7 +486,8 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
484
486
  * after the backdropBreakpoint value
485
487
  */
486
488
  const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
487
- baseEl.focusTrap !== false;
489
+ baseEl.focusTrap !== false &&
490
+ baseEl.showBackdrop !== false;
488
491
  if (shouldEnableBackdrop) {
489
492
  enableBackdrop();
490
493
  }
@@ -417,11 +417,9 @@ export const setRootAriaHidden = (hidden = false) => {
417
417
  }
418
418
  if (hidden) {
419
419
  viewContainer.setAttribute('aria-hidden', 'true');
420
- viewContainer.setAttribute('inert', '');
421
420
  }
422
421
  else {
423
422
  viewContainer.removeAttribute('aria-hidden');
424
- viewContainer.removeAttribute('inert');
425
423
  }
426
424
  };
427
425
  export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
@@ -448,15 +446,31 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
448
446
  * the keyboard focus from leaving the overlay unless
449
447
  * developers explicitly opt out (for example, sheet
450
448
  * modals that should permit background interaction).
449
+ *
450
+ * Note: Some apps move inline overlays to a specific container
451
+ * during the willPresent lifecycle (e.g., React portals via
452
+ * onWillPresent). Defer applying aria-hidden/inert to the app
453
+ * root until after willPresent so we can detect where the
454
+ * overlay is finally inserted. If the overlay is inside the
455
+ * view container subtree, skip adding aria-hidden/inert there
456
+ * to avoid disabling the overlay.
451
457
  */
452
458
  const overlayEl = overlay.el;
453
459
  const shouldTrapFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
454
- if (shouldTrapFocus) {
455
- setRootAriaHidden(true);
456
- document.body.classList.add(BACKDROP_NO_SCROLL);
457
- }
460
+ // Only lock out root content when backdrop is active. Developers relying on showBackdrop=false
461
+ // expect background interaction to remain enabled.
462
+ const shouldLockRoot = shouldTrapFocus && overlayEl.showBackdrop !== false;
458
463
  overlay.presented = true;
459
464
  overlay.willPresent.emit();
465
+ if (shouldLockRoot) {
466
+ const root = getAppRoot(document);
467
+ const viewContainer = root.querySelector('ion-router-outlet, #ion-view-container-root');
468
+ const overlayInsideViewContainer = viewContainer ? viewContainer.contains(overlayEl) : false;
469
+ if (!overlayInsideViewContainer) {
470
+ setRootAriaHidden(true);
471
+ }
472
+ document.body.classList.add(BACKDROP_NO_SCROLL);
473
+ }
460
474
  (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
461
475
  const mode = getIonMode(overlay);
462
476
  // get the user's animation fn if one was provided
@@ -559,14 +573,17 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
559
573
  * from the root element when the last focus-trapping overlay
560
574
  * is dismissed.
561
575
  */
562
- const overlaysTrappingFocus = presentedOverlays.filter((o) => o.tagName !== 'ION-TOAST' && o.focusTrap !== false);
576
+ const overlaysLockingRoot = presentedOverlays.filter((o) => {
577
+ const el = o;
578
+ return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && el.showBackdrop !== false;
579
+ });
563
580
  const overlayEl = overlay.el;
564
- const trapsFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
581
+ const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && overlayEl.showBackdrop !== false;
565
582
  /**
566
583
  * If this is the last visible overlay that is trapping focus
567
584
  * then we want to re-add the root to the accessibility tree.
568
585
  */
569
- const lastOverlayTrappingFocus = trapsFocus && overlaysTrappingFocus.length === 1 && overlaysTrappingFocus[0].id === overlayEl.id;
586
+ const lastOverlayTrappingFocus = locksRoot && overlaysLockingRoot.length === 1 && overlaysLockingRoot[0].id === overlayEl.id;
570
587
  if (lastOverlayTrappingFocus) {
571
588
  setRootAriaHidden(false);
572
589
  document.body.classList.remove(BACKDROP_NO_SCROLL);
package/dist/docs.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2025-09-23T15:49:23",
2
+ "timestamp": "2025-09-23T18:40:04",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.36.2",
package/dist/esm/index.js CHANGED
@@ -13,7 +13,7 @@ export { L as LogLevel } from './index-4DxY6_gG.js';
13
13
  export { I as IonicSafeString, g as getMode, s as setupConfig } from './config-Dx_6wPIJ.js';
14
14
  export { o as openURL } from './theme-DiVJyqlX.js';
15
15
  export { m as menuController } from './index-CXSTcaAW.js';
16
- export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-BOalOTUe.js';
16
+ export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-BYcYBCrx.js';
17
17
  import './index-ZjP4CjeZ.js';
18
18
  import './gesture-controller-BTEOs1at.js';
19
19
  import './hardware-back-button-Dhbd-23H.js';
@@ -5,7 +5,7 @@ import { r as registerInstance, c as createEvent, a as readTask, h, d as Host, g
5
5
  import { c as createButtonActiveGesture } from './button-active-DBUPuLNw.js';
6
6
  import { r as raf } from './helpers-8KSQQGQy.js';
7
7
  import { c as createLockController } from './lock-controller-B-hirT0v.js';
8
- import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-BOalOTUe.js';
8
+ import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-BYcYBCrx.js';
9
9
  import { g as getClassMap } from './theme-DiVJyqlX.js';
10
10
  import { b as getIonMode } from './ionic-global-CTSyufhF.js';
11
11
  import { c as createAnimation } from './animation-BvhAtgca.js';
@@ -6,7 +6,7 @@ import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './conf
6
6
  import { c as createButtonActiveGesture } from './button-active-DBUPuLNw.js';
7
7
  import { r as raf } from './helpers-8KSQQGQy.js';
8
8
  import { c as createLockController } from './lock-controller-B-hirT0v.js';
9
- import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-BOalOTUe.js';
9
+ import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-BYcYBCrx.js';
10
10
  import { g as getClassMap } from './theme-DiVJyqlX.js';
11
11
  import { b as getIonMode } from './ionic-global-CTSyufhF.js';
12
12
  import { c as createAnimation } from './animation-BvhAtgca.js';
@@ -4,7 +4,7 @@
4
4
  import { j as printIonError, f as printIonWarning, r as registerInstance, c as createEvent, w as writeTask, h, d as Host, g as getElement } from './index-4DxY6_gG.js';
5
5
  import { startFocusVisible } from './focus-visible-BmVRXR1y.js';
6
6
  import { r as raf, g as getElementRoot, a as renderHiddenInput, e as clamp } from './helpers-8KSQQGQy.js';
7
- import { F as FOCUS_TRAP_DISABLE_CLASS, d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-BOalOTUe.js';
7
+ import { F as FOCUS_TRAP_DISABLE_CLASS, d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-BYcYBCrx.js';
8
8
  import { i as isRTL } from './dir-C53feagD.js';
9
9
  import { c as createColorClasses, g as getClassMap } from './theme-DiVJyqlX.js';
10
10
  import { l as chevronDown, o as caretUpSharp, p as chevronForward, q as caretDownSharp, c as chevronBack } from './index-DV3sJJW8.js';
@@ -5,7 +5,7 @@ import { r as registerInstance, c as createEvent, e as config, h, d as Host, g a
5
5
  import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config-Dx_6wPIJ.js';
6
6
  import { r as raf } from './helpers-8KSQQGQy.js';
7
7
  import { c as createLockController } from './lock-controller-B-hirT0v.js';
8
- import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-BOalOTUe.js';
8
+ import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-BYcYBCrx.js';
9
9
  import { g as getClassMap } from './theme-DiVJyqlX.js';
10
10
  import { b as getIonMode } from './ionic-global-CTSyufhF.js';
11
11
  import { c as createAnimation } from './animation-BvhAtgca.js';
@@ -3,7 +3,7 @@
3
3
  */
4
4
  import { r as registerInstance, c as createEvent, e as config, j as printIonError, h, d as Host, g as getElement } from './index-4DxY6_gG.js';
5
5
  import { g as getTimeGivenProgression } from './cubic-bezier-hHmYLOfE.js';
6
- import { o as getPresentedOverlay, B as BACKDROP, n as focusFirstDescendant, q as focusLastDescendant, G as GESTURE } from './overlays-BOalOTUe.js';
6
+ import { o as getPresentedOverlay, B as BACKDROP, n as focusFirstDescendant, q as focusLastDescendant, G as GESTURE } from './overlays-BYcYBCrx.js';
7
7
  import { G as GESTURE_CONTROLLER } from './gesture-controller-BTEOs1at.js';
8
8
  import { shouldUseCloseWatcher } from './hardware-back-button-Dhbd-23H.js';
9
9
  import { o as isEndSide, i as inheritAriaAttributes, l as assert, e as clamp } from './helpers-8KSQQGQy.js';
@@ -7,7 +7,7 @@ import { C as CoreDelegate, a as attachComponent, d as detachComponent } from '.
7
7
  import { e as clamp, g as getElementRoot, r as raf, b as inheritAttributes, h as hasLazyBuild } from './helpers-8KSQQGQy.js';
8
8
  import { c as createLockController } from './lock-controller-B-hirT0v.js';
9
9
  import { g as getCapacitor } from './capacitor-CFERIeaU.js';
10
- import { G as GESTURE, O as OVERLAY_GESTURE_PRIORITY, F as FOCUS_TRAP_DISABLE_CLASS, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-BOalOTUe.js';
10
+ import { G as GESTURE, O as OVERLAY_GESTURE_PRIORITY, F as FOCUS_TRAP_DISABLE_CLASS, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-BYcYBCrx.js';
11
11
  import { g as getClassMap } from './theme-DiVJyqlX.js';
12
12
  import { e as deepReady, w as waitForMount } from './index-Dp7GXH1z.js';
13
13
  import { b as getIonMode } from './ionic-global-CTSyufhF.js';
@@ -986,8 +986,9 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
986
986
  const contentAnimation = animation.childAnimations.find((ani) => ani.id === 'contentAnimation');
987
987
  const enableBackdrop = () => {
988
988
  // Respect explicit opt-out of focus trapping/backdrop interactions
989
- // If focusTrap is false, do not enable the backdrop or re-enable focus trap
990
- if (baseEl.focusTrap === false) {
989
+ // If focusTrap is false or showBackdrop is false, do not enable the backdrop or re-enable focus trap
990
+ const el = baseEl;
991
+ if (el.focusTrap === false || el.showBackdrop === false) {
991
992
  return;
992
993
  }
993
994
  baseEl.style.setProperty('pointer-events', 'auto');
@@ -1115,7 +1116,8 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
1115
1116
  * applied, so the modal content can still be interacted with.
1116
1117
  */
1117
1118
  const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
1118
- baseEl.focusTrap !== false;
1119
+ baseEl.focusTrap !== false &&
1120
+ baseEl.showBackdrop !== false;
1119
1121
  if (shouldEnableBackdrop) {
1120
1122
  enableBackdrop();
1121
1123
  }
@@ -1424,7 +1426,8 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
1424
1426
  * after the backdropBreakpoint value
1425
1427
  */
1426
1428
  const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
1427
- baseEl.focusTrap !== false;
1429
+ baseEl.focusTrap !== false &&
1430
+ baseEl.showBackdrop !== false;
1428
1431
  if (shouldEnableBackdrop) {
1429
1432
  enableBackdrop();
1430
1433
  }
@@ -2,7 +2,7 @@
2
2
  * (C) Ionic http://ionicframework.com - MIT License
3
3
  */
4
4
  import { r as registerInstance, c as createEvent, f as printIonWarning, h, d as Host, g as getElement } from './index-4DxY6_gG.js';
5
- import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as focusFirstDescendant, g as dismiss, h as eventMethod, F as FOCUS_TRAP_DISABLE_CLASS } from './overlays-BOalOTUe.js';
5
+ import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as focusFirstDescendant, g as dismiss, h as eventMethod, F as FOCUS_TRAP_DISABLE_CLASS } from './overlays-BYcYBCrx.js';
6
6
  import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate-BLEBgH06.js';
7
7
  import { g as getElementRoot, r as raf, f as addEventListener, h as hasLazyBuild } from './helpers-8KSQQGQy.js';
8
8
  import { c as createLockController } from './lock-controller-B-hirT0v.js';
@@ -3,7 +3,7 @@
3
3
  */
4
4
  import { r as registerInstance, h, i as forceUpdate, d as Host, g as getElement } from './index-4DxY6_gG.js';
5
5
  import { b as getIonMode } from './ionic-global-CTSyufhF.js';
6
- import { s as safeCall } from './overlays-BOalOTUe.js';
6
+ import { s as safeCall } from './overlays-BYcYBCrx.js';
7
7
  import { g as getClassMap } from './theme-DiVJyqlX.js';
8
8
  import './index-ZjP4CjeZ.js';
9
9
  import './helpers-8KSQQGQy.js';
@@ -5,7 +5,7 @@ import { r as registerInstance, c as createEvent, f as printIonWarning, h, d as
5
5
  import { c as createNotchController } from './notch-controller-lb417-kU.js';
6
6
  import { i as isOptionSelected, c as compareOptions } from './compare-with-utils-sObYyvOy.js';
7
7
  import { b as inheritAttributes, a as renderHiddenInput, n as focusVisibleElement } from './helpers-8KSQQGQy.js';
8
- import { c as popoverController, b as actionSheetController, a as alertController, m as modalController, s as safeCall } from './overlays-BOalOTUe.js';
8
+ import { c as popoverController, b as actionSheetController, a as alertController, m as modalController, s as safeCall } from './overlays-BYcYBCrx.js';
9
9
  import { i as isRTL } from './dir-C53feagD.js';
10
10
  import { h as hostContext, c as createColorClasses, g as getClassMap } from './theme-DiVJyqlX.js';
11
11
  import { w as watchForOptions } from './watch-options-Dtdm8lKC.js';
@@ -5,7 +5,7 @@ import { f as printIonWarning, r as registerInstance, c as createEvent, e as con
5
5
  import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config-Dx_6wPIJ.js';
6
6
  import { g as getElementRoot, r as raf } from './helpers-8KSQQGQy.js';
7
7
  import { c as createLockController } from './lock-controller-B-hirT0v.js';
8
- import { O as OVERLAY_GESTURE_PRIORITY, d as createDelegateController, e as createTriggerController, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall, G as GESTURE } from './overlays-BOalOTUe.js';
8
+ import { O as OVERLAY_GESTURE_PRIORITY, d as createDelegateController, e as createTriggerController, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall, G as GESTURE } from './overlays-BYcYBCrx.js';
9
9
  import { c as createColorClasses, g as getClassMap } from './theme-DiVJyqlX.js';
10
10
  import { b as getIonMode } from './ionic-global-CTSyufhF.js';
11
11
  import { c as createAnimation } from './animation-BvhAtgca.js';