@ionic/core 8.7.5-dev.11758652700.103435a3 → 8.7.5-nightly.20250919

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 (48) hide show
  1. package/components/modal.js +2 -12
  2. package/components/overlays.js +17 -39
  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 +3 -13
  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-czPyT6xP.js → overlays-v_jc1Hok.js} +17 -39
  15. package/dist/collection/components/modal/gestures/sheet.js +2 -12
  16. package/dist/collection/utils/overlays.js +17 -39
  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 +3 -13
  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-BYcYBCrx.js → overlays-BJaRj3Rj.js} +17 -39
  30. package/dist/ionic/index.esm.js +1 -1
  31. package/dist/ionic/ionic.esm.js +1 -1
  32. package/dist/ionic/{p-1f68cb59.entry.js → p-095073c6.entry.js} +1 -1
  33. package/dist/ionic/{p-568efea2.entry.js → p-1ab0fc21.entry.js} +1 -1
  34. package/dist/ionic/p-2060feb1.entry.js +4 -0
  35. package/dist/ionic/{p-63852736.entry.js → p-22a0f820.entry.js} +1 -1
  36. package/dist/ionic/{p-117e7a3f.entry.js → p-5a9be5a3.entry.js} +1 -1
  37. package/dist/ionic/{p-25e5e5cc.entry.js → p-60ff6bf6.entry.js} +1 -1
  38. package/dist/ionic/{p-0e1904a0.entry.js → p-89c2e0a3.entry.js} +1 -1
  39. package/dist/ionic/p-CoDfkBuk.js +4 -0
  40. package/dist/ionic/{p-0793aea6.entry.js → p-b17f0554.entry.js} +1 -1
  41. package/dist/ionic/{p-90f4cc71.entry.js → p-cd93c119.entry.js} +1 -1
  42. package/dist/ionic/p-dc8d0bb9.entry.js +4 -0
  43. package/hydrate/index.js +21 -53
  44. package/hydrate/index.mjs +21 -53
  45. package/package.json +1 -1
  46. package/dist/ionic/p-6e43c86a.entry.js +0 -4
  47. package/dist/ionic/p-746cd400.entry.js +0 -4
  48. package/dist/ionic/p-Cnh7O81W.js +0 -4
@@ -984,12 +984,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
984
984
  const backdropAnimation = animation.childAnimations.find((ani) => ani.id === 'backdropAnimation');
985
985
  const contentAnimation = animation.childAnimations.find((ani) => ani.id === 'contentAnimation');
986
986
  const enableBackdrop = () => {
987
- // Respect explicit opt-out of focus trapping/backdrop interactions
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) {
991
- return;
992
- }
993
987
  baseEl.style.setProperty('pointer-events', 'auto');
994
988
  backdropEl.style.setProperty('pointer-events', 'auto');
995
989
  /**
@@ -1114,9 +1108,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
1114
1108
  * ion-backdrop and .modal-wrapper always have pointer-events: auto
1115
1109
  * applied, so the modal content can still be interacted with.
1116
1110
  */
1117
- const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
1118
- baseEl.focusTrap !== false &&
1119
- baseEl.showBackdrop !== false;
1111
+ const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint;
1120
1112
  if (shouldEnableBackdrop) {
1121
1113
  enableBackdrop();
1122
1114
  }
@@ -1424,9 +1416,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
1424
1416
  * Backdrop should become enabled
1425
1417
  * after the backdropBreakpoint value
1426
1418
  */
1427
- const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
1428
- baseEl.focusTrap !== false &&
1429
- baseEl.showBackdrop !== false;
1419
+ const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint;
1430
1420
  if (shouldEnableBackdrop) {
1431
1421
  enableBackdrop();
1432
1422
  }
@@ -496,9 +496,11 @@ const setRootAriaHidden = (hidden = false) => {
496
496
  }
497
497
  if (hidden) {
498
498
  viewContainer.setAttribute('aria-hidden', 'true');
499
+ viewContainer.setAttribute('inert', '');
499
500
  }
500
501
  else {
501
502
  viewContainer.removeAttribute('aria-hidden');
503
+ viewContainer.removeAttribute('inert');
502
504
  }
503
505
  };
504
506
  const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
@@ -522,34 +524,14 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
522
524
  * focus traps.
523
525
  *
524
526
  * All other overlays should have focus traps to prevent
525
- * the keyboard focus from leaving the overlay unless
526
- * developers explicitly opt out (for example, sheet
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.
527
+ * the keyboard focus from leaving the overlay.
536
528
  */
537
- const overlayEl = overlay.el;
538
- const shouldTrapFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
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;
542
- overlay.presented = true;
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
- }
529
+ if (overlay.el.tagName !== 'ION-TOAST') {
530
+ setRootAriaHidden(true);
551
531
  document.body.classList.add(BACKDROP_NO_SCROLL);
552
532
  }
533
+ overlay.presented = true;
534
+ overlay.willPresent.emit();
553
535
  (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
554
536
  const mode = getIonMode(overlay);
555
537
  // get the user's animation fn if one was provided
@@ -646,24 +628,20 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
646
628
  * For accessibility, toasts lack focus traps and don't receive
647
629
  * `aria-hidden` on the root element when presented.
648
630
  *
649
- * Overlays that opt into focus trapping set `aria-hidden`
650
- * on the root element to keep keyboard focus and pointer
651
- * events inside the overlay. We must remove `aria-hidden`
652
- * from the root element when the last focus-trapping overlay
653
- * is dismissed.
631
+ * All other overlays use focus traps to keep keyboard focus
632
+ * within the overlay, setting `aria-hidden` on the root element
633
+ * to enhance accessibility.
634
+ *
635
+ * Therefore, we must remove `aria-hidden` from the root element
636
+ * when the last non-toast overlay is dismissed.
654
637
  */
655
- const overlaysLockingRoot = presentedOverlays.filter((o) => {
656
- const el = o;
657
- return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && el.showBackdrop !== false;
658
- });
659
- const overlayEl = overlay.el;
660
- const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && overlayEl.showBackdrop !== false;
638
+ const overlaysNotToast = presentedOverlays.filter((o) => o.tagName !== 'ION-TOAST');
639
+ const lastOverlayNotToast = overlaysNotToast.length === 1 && overlaysNotToast[0].id === overlay.el.id;
661
640
  /**
662
- * If this is the last visible overlay that is trapping focus
641
+ * If this is the last visible overlay that is not a toast
663
642
  * then we want to re-add the root to the accessibility tree.
664
643
  */
665
- const lastOverlayTrappingFocus = locksRoot && overlaysLockingRoot.length === 1 && overlaysLockingRoot[0].id === overlayEl.id;
666
- if (lastOverlayTrappingFocus) {
644
+ if (lastOverlayNotToast) {
667
645
  setRootAriaHidden(false);
668
646
  document.body.classList.remove(BACKDROP_NO_SCROLL);
669
647
  }
@@ -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-czPyT6xP.js');
18
+ var overlays = require('./overlays-v_jc1Hok.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-czPyT6xP.js');
10
+ var overlays = require('./overlays-v_jc1Hok.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-czPyT6xP.js');
11
+ var overlays = require('./overlays-v_jc1Hok.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-czPyT6xP.js');
9
+ var overlays = require('./overlays-v_jc1Hok.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-czPyT6xP.js');
10
+ var overlays = require('./overlays-v_jc1Hok.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-czPyT6xP.js');
8
+ var overlays = require('./overlays-v_jc1Hok.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-czPyT6xP.js');
12
+ var overlays = require('./overlays-v_jc1Hok.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');
@@ -987,12 +987,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
987
987
  const backdropAnimation = animation.childAnimations.find((ani) => ani.id === 'backdropAnimation');
988
988
  const contentAnimation = animation.childAnimations.find((ani) => ani.id === 'contentAnimation');
989
989
  const enableBackdrop = () => {
990
- // Respect explicit opt-out of focus trapping/backdrop interactions
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) {
994
- return;
995
- }
996
990
  baseEl.style.setProperty('pointer-events', 'auto');
997
991
  backdropEl.style.setProperty('pointer-events', 'auto');
998
992
  /**
@@ -1117,9 +1111,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
1117
1111
  * ion-backdrop and .modal-wrapper always have pointer-events: auto
1118
1112
  * applied, so the modal content can still be interacted with.
1119
1113
  */
1120
- const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
1121
- baseEl.focusTrap !== false &&
1122
- baseEl.showBackdrop !== false;
1114
+ const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint;
1123
1115
  if (shouldEnableBackdrop) {
1124
1116
  enableBackdrop();
1125
1117
  }
@@ -1427,9 +1419,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
1427
1419
  * Backdrop should become enabled
1428
1420
  * after the backdropBreakpoint value
1429
1421
  */
1430
- const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
1431
- baseEl.focusTrap !== false &&
1432
- baseEl.showBackdrop !== false;
1422
+ const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint;
1433
1423
  if (shouldEnableBackdrop) {
1434
1424
  enableBackdrop();
1435
1425
  }
@@ -4,7 +4,7 @@
4
4
  'use strict';
5
5
 
6
6
  var index = require('./index-DNh170BW.js');
7
- var overlays = require('./overlays-czPyT6xP.js');
7
+ var overlays = require('./overlays-v_jc1Hok.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-czPyT6xP.js');
8
+ var overlays = require('./overlays-v_jc1Hok.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-czPyT6xP.js');
10
+ var overlays = require('./overlays-v_jc1Hok.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-czPyT6xP.js');
10
+ var overlays = require('./overlays-v_jc1Hok.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,9 +498,11 @@ const setRootAriaHidden = (hidden = false) => {
498
498
  }
499
499
  if (hidden) {
500
500
  viewContainer.setAttribute('aria-hidden', 'true');
501
+ viewContainer.setAttribute('inert', '');
501
502
  }
502
503
  else {
503
504
  viewContainer.removeAttribute('aria-hidden');
505
+ viewContainer.removeAttribute('inert');
504
506
  }
505
507
  };
506
508
  const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
@@ -524,34 +526,14 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
524
526
  * focus traps.
525
527
  *
526
528
  * All other overlays should have focus traps to prevent
527
- * the keyboard focus from leaving the overlay unless
528
- * developers explicitly opt out (for example, sheet
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.
529
+ * the keyboard focus from leaving the overlay.
538
530
  */
539
- const overlayEl = overlay.el;
540
- const shouldTrapFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
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;
544
- overlay.presented = true;
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
- }
531
+ if (overlay.el.tagName !== 'ION-TOAST') {
532
+ setRootAriaHidden(true);
553
533
  document.body.classList.add(gestureController.BACKDROP_NO_SCROLL);
554
534
  }
535
+ overlay.presented = true;
536
+ overlay.willPresent.emit();
555
537
  (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
556
538
  const mode = ionicGlobal.getIonMode(overlay);
557
539
  // get the user's animation fn if one was provided
@@ -648,24 +630,20 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
648
630
  * For accessibility, toasts lack focus traps and don't receive
649
631
  * `aria-hidden` on the root element when presented.
650
632
  *
651
- * Overlays that opt into focus trapping set `aria-hidden`
652
- * on the root element to keep keyboard focus and pointer
653
- * events inside the overlay. We must remove `aria-hidden`
654
- * from the root element when the last focus-trapping overlay
655
- * is dismissed.
633
+ * All other overlays use focus traps to keep keyboard focus
634
+ * within the overlay, setting `aria-hidden` on the root element
635
+ * to enhance accessibility.
636
+ *
637
+ * Therefore, we must remove `aria-hidden` from the root element
638
+ * when the last non-toast overlay is dismissed.
656
639
  */
657
- const overlaysLockingRoot = presentedOverlays.filter((o) => {
658
- const el = o;
659
- return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && el.showBackdrop !== false;
660
- });
661
- const overlayEl = overlay.el;
662
- const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && overlayEl.showBackdrop !== false;
640
+ const overlaysNotToast = presentedOverlays.filter((o) => o.tagName !== 'ION-TOAST');
641
+ const lastOverlayNotToast = overlaysNotToast.length === 1 && overlaysNotToast[0].id === overlay.el.id;
663
642
  /**
664
- * If this is the last visible overlay that is trapping focus
643
+ * If this is the last visible overlay that is not a toast
665
644
  * then we want to re-add the root to the accessibility tree.
666
645
  */
667
- const lastOverlayTrappingFocus = locksRoot && overlaysLockingRoot.length === 1 && overlaysLockingRoot[0].id === overlayEl.id;
668
- if (lastOverlayTrappingFocus) {
646
+ if (lastOverlayNotToast) {
669
647
  setRootAriaHidden(false);
670
648
  document.body.classList.remove(gestureController.BACKDROP_NO_SCROLL);
671
649
  }
@@ -45,12 +45,6 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
45
45
  const backdropAnimation = animation.childAnimations.find((ani) => ani.id === 'backdropAnimation');
46
46
  const contentAnimation = animation.childAnimations.find((ani) => ani.id === 'contentAnimation');
47
47
  const enableBackdrop = () => {
48
- // Respect explicit opt-out of focus trapping/backdrop interactions
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) {
52
- return;
53
- }
54
48
  baseEl.style.setProperty('pointer-events', 'auto');
55
49
  backdropEl.style.setProperty('pointer-events', 'auto');
56
50
  /**
@@ -175,9 +169,7 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
175
169
  * ion-backdrop and .modal-wrapper always have pointer-events: auto
176
170
  * applied, so the modal content can still be interacted with.
177
171
  */
178
- const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
179
- baseEl.focusTrap !== false &&
180
- baseEl.showBackdrop !== false;
172
+ const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint;
181
173
  if (shouldEnableBackdrop) {
182
174
  enableBackdrop();
183
175
  }
@@ -485,9 +477,7 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
485
477
  * Backdrop should become enabled
486
478
  * after the backdropBreakpoint value
487
479
  */
488
- const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
489
- baseEl.focusTrap !== false &&
490
- baseEl.showBackdrop !== false;
480
+ const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint;
491
481
  if (shouldEnableBackdrop) {
492
482
  enableBackdrop();
493
483
  }
@@ -417,9 +417,11 @@ export const setRootAriaHidden = (hidden = false) => {
417
417
  }
418
418
  if (hidden) {
419
419
  viewContainer.setAttribute('aria-hidden', 'true');
420
+ viewContainer.setAttribute('inert', '');
420
421
  }
421
422
  else {
422
423
  viewContainer.removeAttribute('aria-hidden');
424
+ viewContainer.removeAttribute('inert');
423
425
  }
424
426
  };
425
427
  export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
@@ -443,34 +445,14 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
443
445
  * focus traps.
444
446
  *
445
447
  * All other overlays should have focus traps to prevent
446
- * the keyboard focus from leaving the overlay unless
447
- * developers explicitly opt out (for example, sheet
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.
448
+ * the keyboard focus from leaving the overlay.
457
449
  */
458
- const overlayEl = overlay.el;
459
- const shouldTrapFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
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;
463
- overlay.presented = true;
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
- }
450
+ if (overlay.el.tagName !== 'ION-TOAST') {
451
+ setRootAriaHidden(true);
472
452
  document.body.classList.add(BACKDROP_NO_SCROLL);
473
453
  }
454
+ overlay.presented = true;
455
+ overlay.willPresent.emit();
474
456
  (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
475
457
  const mode = getIonMode(overlay);
476
458
  // get the user's animation fn if one was provided
@@ -567,24 +549,20 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
567
549
  * For accessibility, toasts lack focus traps and don't receive
568
550
  * `aria-hidden` on the root element when presented.
569
551
  *
570
- * Overlays that opt into focus trapping set `aria-hidden`
571
- * on the root element to keep keyboard focus and pointer
572
- * events inside the overlay. We must remove `aria-hidden`
573
- * from the root element when the last focus-trapping overlay
574
- * is dismissed.
552
+ * All other overlays use focus traps to keep keyboard focus
553
+ * within the overlay, setting `aria-hidden` on the root element
554
+ * to enhance accessibility.
555
+ *
556
+ * Therefore, we must remove `aria-hidden` from the root element
557
+ * when the last non-toast overlay is dismissed.
575
558
  */
576
- const overlaysLockingRoot = presentedOverlays.filter((o) => {
577
- const el = o;
578
- return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && el.showBackdrop !== false;
579
- });
580
- const overlayEl = overlay.el;
581
- const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && overlayEl.showBackdrop !== false;
559
+ const overlaysNotToast = presentedOverlays.filter((o) => o.tagName !== 'ION-TOAST');
560
+ const lastOverlayNotToast = overlaysNotToast.length === 1 && overlaysNotToast[0].id === overlay.el.id;
582
561
  /**
583
- * If this is the last visible overlay that is trapping focus
562
+ * If this is the last visible overlay that is not a toast
584
563
  * then we want to re-add the root to the accessibility tree.
585
564
  */
586
- const lastOverlayTrappingFocus = locksRoot && overlaysLockingRoot.length === 1 && overlaysLockingRoot[0].id === overlayEl.id;
587
- if (lastOverlayTrappingFocus) {
565
+ if (lastOverlayNotToast) {
588
566
  setRootAriaHidden(false);
589
567
  document.body.classList.remove(BACKDROP_NO_SCROLL);
590
568
  }
package/dist/docs.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2025-09-23T18:40:04",
2
+ "timestamp": "2025-09-19T06:10:10",
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-BYcYBCrx.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-BJaRj3Rj.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-BYcYBCrx.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-BJaRj3Rj.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-BYcYBCrx.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-BJaRj3Rj.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-BYcYBCrx.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-BJaRj3Rj.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-BYcYBCrx.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-BJaRj3Rj.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-BYcYBCrx.js';
6
+ import { o as getPresentedOverlay, B as BACKDROP, n as focusFirstDescendant, q as focusLastDescendant, G as GESTURE } from './overlays-BJaRj3Rj.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-BYcYBCrx.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-BJaRj3Rj.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';
@@ -985,12 +985,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
985
985
  const backdropAnimation = animation.childAnimations.find((ani) => ani.id === 'backdropAnimation');
986
986
  const contentAnimation = animation.childAnimations.find((ani) => ani.id === 'contentAnimation');
987
987
  const enableBackdrop = () => {
988
- // Respect explicit opt-out of focus trapping/backdrop interactions
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) {
992
- return;
993
- }
994
988
  baseEl.style.setProperty('pointer-events', 'auto');
995
989
  backdropEl.style.setProperty('pointer-events', 'auto');
996
990
  /**
@@ -1115,9 +1109,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
1115
1109
  * ion-backdrop and .modal-wrapper always have pointer-events: auto
1116
1110
  * applied, so the modal content can still be interacted with.
1117
1111
  */
1118
- const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
1119
- baseEl.focusTrap !== false &&
1120
- baseEl.showBackdrop !== false;
1112
+ const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint;
1121
1113
  if (shouldEnableBackdrop) {
1122
1114
  enableBackdrop();
1123
1115
  }
@@ -1425,9 +1417,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
1425
1417
  * Backdrop should become enabled
1426
1418
  * after the backdropBreakpoint value
1427
1419
  */
1428
- const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
1429
- baseEl.focusTrap !== false &&
1430
- baseEl.showBackdrop !== false;
1420
+ const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint;
1431
1421
  if (shouldEnableBackdrop) {
1432
1422
  enableBackdrop();
1433
1423
  }
@@ -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-BYcYBCrx.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-BJaRj3Rj.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-BYcYBCrx.js';
6
+ import { s as safeCall } from './overlays-BJaRj3Rj.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-BYcYBCrx.js';
8
+ import { c as popoverController, b as actionSheetController, a as alertController, m as modalController, s as safeCall } from './overlays-BJaRj3Rj.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';