@ionic/core 8.8.4-dev.11776246162.138c2737 → 8.8.4-dev.11776330355.18181725

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 (125) hide show
  1. package/components/index.js +1 -1
  2. package/components/ion-action-sheet.js +1 -1
  3. package/components/ion-alert.js +1 -1
  4. package/components/ion-datetime.js +1 -1
  5. package/components/ion-loading.js +1 -1
  6. package/components/ion-menu.js +1 -1
  7. package/components/ion-modal.js +1 -1
  8. package/components/ion-picker-legacy.js +1 -1
  9. package/components/ion-popover.js +1 -1
  10. package/components/ion-range.js +1 -1
  11. package/components/ion-select-modal.js +1 -1
  12. package/components/ion-select-popover.js +1 -1
  13. package/components/ion-select.js +1 -1
  14. package/components/ion-tab-bar.js +1 -1
  15. package/components/ion-toast.js +1 -1
  16. package/components/p-B6czg-mf.js +4 -0
  17. package/components/p-BGHaEUgp.js +4 -0
  18. package/components/{p-CEUppJkx.js → p-BR9Yxas9.js} +1 -1
  19. package/components/p-Ch9P0ikq.js +4 -0
  20. package/components/p-GytrfCp8.js +4 -0
  21. package/components/p-ZeIAjDcZ.js +4 -0
  22. package/components/{p-B36-MWK0.js → p-iwGbwewM.js} +1 -1
  23. package/dist/cjs/index.cjs.js +1 -1
  24. package/dist/cjs/ion-action-sheet.cjs.entry.js +5 -29
  25. package/dist/cjs/ion-alert.cjs.entry.js +4 -29
  26. package/dist/cjs/ion-datetime_3.cjs.entry.js +4 -28
  27. package/dist/cjs/ion-loading.cjs.entry.js +4 -29
  28. package/dist/cjs/ion-menu_3.cjs.entry.js +1 -1
  29. package/dist/cjs/ion-modal.cjs.entry.js +79 -176
  30. package/dist/cjs/ion-popover.cjs.entry.js +4 -90
  31. package/dist/cjs/ion-range.cjs.entry.js +8 -5
  32. package/dist/cjs/ion-select-modal.cjs.entry.js +1 -1
  33. package/dist/cjs/ion-select_3.cjs.entry.js +1 -1
  34. package/dist/cjs/ion-tab-bar_2.cjs.entry.js +1 -1
  35. package/dist/cjs/ion-toast.cjs.entry.js +4 -32
  36. package/dist/cjs/{overlays-BbhewSIQ.js → overlays-Dhoy6v_5.js} +4 -4
  37. package/dist/collection/components/action-sheet/action-sheet.js +4 -5
  38. package/dist/collection/components/alert/alert.js +3 -4
  39. package/dist/collection/components/loading/loading.js +3 -4
  40. package/dist/collection/components/modal/gestures/sheet.js +9 -71
  41. package/dist/collection/components/modal/modal.ionic.css +1 -1
  42. package/dist/collection/components/modal/modal.js +5 -6
  43. package/dist/collection/components/picker-legacy/picker.js +3 -4
  44. package/dist/collection/components/popover/popover.js +3 -4
  45. package/dist/collection/components/range/range.ionic.css +14 -10
  46. package/dist/collection/components/range/range.js +7 -4
  47. package/dist/collection/components/tab-bar/tab-bar.ionic.css +9 -0
  48. package/dist/collection/components/toast/toast.js +3 -4
  49. package/dist/collection/utils/overlays.js +5 -5
  50. package/dist/docs.json +1 -1
  51. package/dist/esm/index.js +1 -1
  52. package/dist/esm/ion-action-sheet.entry.js +5 -29
  53. package/dist/esm/ion-alert.entry.js +4 -29
  54. package/dist/esm/ion-datetime_3.entry.js +4 -28
  55. package/dist/esm/ion-loading.entry.js +4 -29
  56. package/dist/esm/ion-menu_3.entry.js +1 -1
  57. package/dist/esm/ion-modal.entry.js +80 -177
  58. package/dist/esm/ion-popover.entry.js +4 -90
  59. package/dist/esm/ion-range.entry.js +8 -5
  60. package/dist/esm/ion-select-modal.entry.js +1 -1
  61. package/dist/esm/ion-select_3.entry.js +1 -1
  62. package/dist/esm/ion-tab-bar_2.entry.js +1 -1
  63. package/dist/esm/ion-toast.entry.js +4 -32
  64. package/dist/esm/{overlays-VA-4NWjf.js → overlays-CvFHfO3y.js} +5 -5
  65. package/dist/ionic/index.esm.js +1 -1
  66. package/dist/ionic/ionic.esm.js +1 -1
  67. package/dist/ionic/{p-bae3ebe5.entry.js → p-2095969c.entry.js} +1 -1
  68. package/dist/ionic/p-3884bfa4.entry.js +4 -0
  69. package/dist/ionic/p-4b0f5ffd.entry.js +4 -0
  70. package/dist/ionic/p-57aeb097.entry.js +4 -0
  71. package/{components/p-CSexRbnt.js → dist/ionic/p-6be2b2d3.entry.js} +1 -1
  72. package/dist/ionic/p-6bffc700.entry.js +4 -0
  73. package/dist/ionic/{p-ba9f8cbb.entry.js → p-9acd3fd3.entry.js} +1 -1
  74. package/dist/ionic/p-BYtS2rae.js +4 -0
  75. package/dist/ionic/{p-0cb50208.entry.js → p-a283aa4d.entry.js} +1 -1
  76. package/dist/ionic/p-d954cd19.entry.js +4 -0
  77. package/dist/ionic/{p-1efe83c8.entry.js → p-db4f4eaf.entry.js} +1 -1
  78. package/dist/ionic/p-e9d6ce67.entry.js +4 -0
  79. package/dist/ionic/p-ef0c281a.entry.js +4 -0
  80. package/dist/types/components/modal/gestures/sheet.d.ts +1 -1
  81. package/dist/types/utils/overlays.d.ts +1 -1
  82. package/hydrate/index.js +110 -416
  83. package/hydrate/index.mjs +110 -416
  84. package/package.json +1 -1
  85. package/components/p-BDPU2685.js +0 -4
  86. package/components/p-BrNzoF1U.js +0 -4
  87. package/components/p-DNdBtsfu.js +0 -4
  88. package/components/p-Njik5v4C.js +0 -4
  89. package/dist/collection/components/action-sheet/animations/ionic.enter.js +0 -27
  90. package/dist/collection/components/action-sheet/animations/ionic.leave.js +0 -21
  91. package/dist/collection/components/alert/animations/ionic.enter.js +0 -28
  92. package/dist/collection/components/alert/animations/ionic.leave.js +0 -19
  93. package/dist/collection/components/loading/animations/ionic.enter.js +0 -28
  94. package/dist/collection/components/loading/animations/ionic.leave.js +0 -22
  95. package/dist/collection/components/modal/animations/ionic.enter.js +0 -40
  96. package/dist/collection/components/modal/animations/ionic.leave.js +0 -28
  97. package/dist/collection/components/picker-legacy/animations/ionic.enter.js +0 -27
  98. package/dist/collection/components/picker-legacy/animations/ionic.leave.js +0 -23
  99. package/dist/collection/components/popover/animations/ionic.enter.js +0 -91
  100. package/dist/collection/components/popover/animations/ionic.leave.js +0 -29
  101. package/dist/collection/components/toast/animations/ionic.enter.js +0 -33
  102. package/dist/collection/components/toast/animations/ionic.leave.js +0 -16
  103. package/dist/ionic/p-07b129d5.entry.js +0 -4
  104. package/dist/ionic/p-27edb91a.entry.js +0 -4
  105. package/dist/ionic/p-3d4c8528.entry.js +0 -4
  106. package/dist/ionic/p-6992d9d6.entry.js +0 -4
  107. package/dist/ionic/p-9dd4276b.entry.js +0 -4
  108. package/dist/ionic/p-BExfzy0B.js +0 -4
  109. package/dist/ionic/p-a3d794ba.entry.js +0 -4
  110. package/dist/ionic/p-cdfbe4cc.entry.js +0 -4
  111. package/dist/ionic/p-fa701753.entry.js +0 -4
  112. package/dist/types/components/action-sheet/animations/ionic.enter.d.ts +0 -5
  113. package/dist/types/components/action-sheet/animations/ionic.leave.d.ts +0 -5
  114. package/dist/types/components/alert/animations/ionic.enter.d.ts +0 -5
  115. package/dist/types/components/alert/animations/ionic.leave.d.ts +0 -5
  116. package/dist/types/components/loading/animations/ionic.enter.d.ts +0 -5
  117. package/dist/types/components/loading/animations/ionic.leave.d.ts +0 -5
  118. package/dist/types/components/modal/animations/ionic.enter.d.ts +0 -6
  119. package/dist/types/components/modal/animations/ionic.leave.d.ts +0 -6
  120. package/dist/types/components/picker-legacy/animations/ionic.enter.d.ts +0 -5
  121. package/dist/types/components/picker-legacy/animations/ionic.leave.d.ts +0 -5
  122. package/dist/types/components/popover/animations/ionic.enter.d.ts +0 -5
  123. package/dist/types/components/popover/animations/ionic.leave.d.ts +0 -5
  124. package/dist/types/components/toast/animations/ionic.enter.d.ts +0 -6
  125. package/dist/types/components/toast/animations/ionic.leave.d.ts +0 -5
@@ -8,7 +8,7 @@ var caretLeft = require('./caret-left-CxZXLRv5.js');
8
8
  var caretRight = require('./caret-right-CRCgv98E.js');
9
9
  var focusVisible = require('./focus-visible-BIj-I3-C.js');
10
10
  var helpers = require('./helpers-DJYxKN5U.js');
11
- var overlays = require('./overlays-BbhewSIQ.js');
11
+ var overlays = require('./overlays-Dhoy6v_5.js');
12
12
  var dir = require('./dir-Cn0z1rJH.js');
13
13
  var theme = require('./theme-IlOsGAz7.js');
14
14
  var index$1 = require('./index-DqmRDbxg.js');
@@ -2045,30 +2045,6 @@ Datetime.style = {
2045
2045
  md: datetimeMdCss()
2046
2046
  };
2047
2047
 
2048
- /**
2049
- * Ionic Picker Enter Animation
2050
- */
2051
- const ionicEnterAnimation = (baseEl) => {
2052
- const baseAnimation = animation.createAnimation();
2053
- const backdropAnimation = animation.createAnimation();
2054
- const wrapperAnimation = animation.createAnimation();
2055
- backdropAnimation
2056
- .addElement(baseEl.querySelector('ion-backdrop'))
2057
- .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
2058
- .beforeStyles({
2059
- 'pointer-events': 'none',
2060
- })
2061
- .afterClearStyles(['pointer-events']);
2062
- wrapperAnimation
2063
- .addElement(baseEl.querySelector('.picker-wrapper'))
2064
- .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
2065
- return baseAnimation
2066
- .addElement(baseEl)
2067
- .easing('cubic-bezier(.36,.66,.04,1)')
2068
- .duration(400)
2069
- .addAnimation([backdropAnimation, wrapperAnimation]);
2070
- };
2071
-
2072
2048
  /**
2073
2049
  * iOS Picker Enter Animation
2074
2050
  */
@@ -2234,7 +2210,7 @@ const Picker = class {
2234
2210
  async present() {
2235
2211
  const unlock = await this.lockController.lock();
2236
2212
  await this.delegateController.attachViewToDom();
2237
- await overlays.present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, ionicEnterAnimation, undefined);
2213
+ await overlays.present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
2238
2214
  if (this.duration > 0) {
2239
2215
  this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
2240
2216
  }
@@ -2319,11 +2295,11 @@ const Picker = class {
2319
2295
  render() {
2320
2296
  const { htmlAttributes } = this;
2321
2297
  const theme$1 = ionicGlobal.getIonTheme(this);
2322
- return (index.h(index.Host, Object.assign({ key: '8db0e1a6cb7697efcc5d5a4a80f3dc3435760c1d', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
2298
+ return (index.h(index.Host, Object.assign({ key: 'efcc823fad9cb37c1379bef4f4b84c6461f3a3a6', "aria-modal": "true", tabindex: "-1" }, htmlAttributes, { style: {
2323
2299
  zIndex: `${20000 + this.overlayIndex}`,
2324
2300
  }, class: Object.assign({ [theme$1]: true,
2325
2301
  // Used internally for styling
2326
- [`picker-${theme$1}`]: true, 'overlay-hidden': true }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), index.h("ion-backdrop", { key: 'c32c446147dff1e8b53fcf6885bdaa504d134d06', visible: this.showBackdrop, tappable: this.backdropDismiss }), index.h("div", { key: '87c9eeeed6869569b0da65d720289f14f76d0cba', tabindex: "0", "aria-hidden": "true" }), index.h("div", { key: '17a1250e5ce1dc176a39d7480587c56aa11f0247', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, index.h("div", { key: '4d4043aae3373d2f271e8e1320ba72f726eb2338', class: "picker-toolbar" }, this.buttons.map((b) => (index.h("div", { class: buttonWrapperClass(b) }, index.h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), index.h("div", { key: '954edc5d83380d04025ec8029194ad0f9c6778ff', class: "picker-columns" }, index.h("div", { key: 'f3c7f7bbb784b8076eebe984e7dd057d78c9824f', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => index.h("ion-picker-legacy-column", { col: c })), index.h("div", { key: '63dcf6a252024984cb3eaca133805343b324fdb1', class: "picker-below-highlight" }))), index.h("div", { key: 'e07eb1a59edf5d94fc487114c2d8b923fd768696', tabindex: "0", "aria-hidden": "true" })));
2302
+ [`picker-${theme$1}`]: true, 'overlay-hidden': true }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), index.h("ion-backdrop", { key: '3f44bf34e039210ae149c590c393ee9f7fb85da0', visible: this.showBackdrop, tappable: this.backdropDismiss }), index.h("div", { key: 'c2a51a89c525b1a22cbc8583cd30f41c3c356d4f', tabindex: "0", "aria-hidden": "true" }), index.h("div", { key: '23837ffe309d0aad9b8ea09d7ac94d21040ef0d7', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, index.h("div", { key: '91ba7e553d570768142715ded4bcc27fceedbce4', class: "picker-toolbar" }, this.buttons.map((b) => (index.h("div", { class: buttonWrapperClass(b) }, index.h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), index.h("div", { key: '22661cafeb555f1435ec1e0a122404a48136095b', class: "picker-columns" }, index.h("div", { key: '5f3db32468b8c60f63c70d81a27b18cce6f2e259', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => index.h("ion-picker-legacy-column", { col: c })), index.h("div", { key: '1bae6b170125b1671a480506ba73636b42b65909', class: "picker-below-highlight" }))), index.h("div", { key: '91beb94ce537122fbd6cd0c2bd3c00f908d0fefe', tabindex: "0", "aria-hidden": "true" })));
2327
2303
  }
2328
2304
  get el() { return index.getElement(this); }
2329
2305
  static get watchers() { return {
@@ -7,7 +7,7 @@ var index = require('./index-CzcLEdQ5.js');
7
7
  var config = require('./config-B0utyWaD.js');
8
8
  var helpers = require('./helpers-DJYxKN5U.js');
9
9
  var lockController = require('./lock-controller-aDB9wrEf.js');
10
- var overlays = require('./overlays-BbhewSIQ.js');
10
+ var overlays = require('./overlays-Dhoy6v_5.js');
11
11
  var theme = require('./theme-IlOsGAz7.js');
12
12
  var ionicGlobal = require('./ionic-global-CSEbHD_F.js');
13
13
  var animation = require('./animation-DknMeJ3x.js');
@@ -15,31 +15,6 @@ require('./focus-visible-BIj-I3-C.js');
15
15
  require('./framework-delegate-Dx9FrqAC.js');
16
16
  require('./gesture-controller-dtqlP_q4.js');
17
17
 
18
- /**
19
- * Ionic Loading Enter Animation
20
- */
21
- const ionicEnterAnimation = (baseEl) => {
22
- const baseAnimation = animation.createAnimation();
23
- const backdropAnimation = animation.createAnimation();
24
- const wrapperAnimation = animation.createAnimation();
25
- backdropAnimation
26
- .addElement(baseEl.querySelector('ion-backdrop'))
27
- .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
28
- .beforeStyles({
29
- 'pointer-events': 'none',
30
- })
31
- .afterClearStyles(['pointer-events']);
32
- wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper')).keyframes([
33
- { offset: 0, opacity: 0.01, transform: 'scale(1.1)' },
34
- { offset: 1, opacity: 1, transform: 'scale(1)' },
35
- ]);
36
- return baseAnimation
37
- .addElement(baseEl)
38
- .easing('ease-in-out')
39
- .duration(200)
40
- .addAnimation([backdropAnimation, wrapperAnimation]);
41
- };
42
-
43
18
  /**
44
19
  * iOS Loading Enter Animation
45
20
  */
@@ -246,7 +221,7 @@ const Loading = class {
246
221
  async present() {
247
222
  const unlock = await this.lockController.lock();
248
223
  await this.delegateController.attachViewToDom();
249
- await overlays.present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation, ionicEnterAnimation);
224
+ await overlays.present(this, 'loadingEnter', iosEnterAnimation, mdEnterAnimation);
250
225
  if (this.duration > 0) {
251
226
  this.durationTimeout = setTimeout(() => this.dismiss(), this.duration + 10);
252
227
  }
@@ -304,9 +279,9 @@ const Loading = class {
304
279
  * Otherwise, don't set aria-labelledby.
305
280
  */
306
281
  const ariaLabelledBy = message !== undefined ? msgId : null;
307
- return (index.h(index.Host, Object.assign({ key: '89d1abcbc147e33c7bfc7bb3ef8f46ae82c12349', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
282
+ return (index.h(index.Host, Object.assign({ key: '0c475f8e28e680e28e09317557795fc56e0835d8', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
308
283
  zIndex: `${40000 + this.overlayIndex}`,
309
- }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [theme$1]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), index.h("ion-backdrop", { key: '1f30f752a8cd8d6310d22ed4f515f39f8c14c05d', visible: this.showBackdrop, tappable: this.backdropDismiss }), index.h("div", { key: '5d5be9f63b62499231a605bcaa6ef83c1efaeee1', tabindex: "0", "aria-hidden": "true" }), index.h("div", { key: '001f8cd91d32c13116309d6bf452acee3fb2e529', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (index.h("div", { key: '40ce912631c9d3faf60110214a040e496a86a5c8', class: "loading-spinner" }, index.h("ion-spinner", { key: '7954e5bef56f42c0b80ca420091a2db10484dd74', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), index.h("div", { key: '86355f8e1eae0c428e63a69c4de1b1090bef2ebc', tabindex: "0", "aria-hidden": "true" })));
284
+ }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [theme$1]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), index.h("ion-backdrop", { key: 'd7e88feb6df8edbc326a84d07b294618f7ce6adc', visible: this.showBackdrop, tappable: this.backdropDismiss }), index.h("div", { key: 'f9622f45b2d9e913c325b228a1e6ed03cf2b98e8', tabindex: "0", "aria-hidden": "true" }), index.h("div", { key: 'f4dfdce70c4515878b247d0cc116b5cec2cf79a4', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (index.h("div", { key: '6d4475e00c444eb3d217813ae8cc1a02a97b969e', class: "loading-spinner" }, index.h("ion-spinner", { key: 'd9ad8dd56ec7677c18d06936c1a1b21a0a6a87a8', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), index.h("div", { key: 'bd3159e18f33ec25d3480d47ce33fa7dfd1f1460', tabindex: "0", "aria-hidden": "true" })));
310
285
  }
311
286
  get el() { return index.getElement(this); }
312
287
  static get watchers() { return {
@@ -5,7 +5,7 @@
5
5
 
6
6
  var index = require('./index-CzcLEdQ5.js');
7
7
  var cubicBezier = require('./cubic-bezier-DAjy1V-e.js');
8
- var overlays = require('./overlays-BbhewSIQ.js');
8
+ var overlays = require('./overlays-Dhoy6v_5.js');
9
9
  var gestureController = require('./gesture-controller-dtqlP_q4.js');
10
10
  var ionicGlobal = require('./ionic-global-CSEbHD_F.js');
11
11
  var helpers = require('./helpers-DJYxKN5U.js');
@@ -9,7 +9,7 @@ var frameworkDelegate = require('./framework-delegate-Dx9FrqAC.js');
9
9
  var helpers = require('./helpers-DJYxKN5U.js');
10
10
  var lockController = require('./lock-controller-aDB9wrEf.js');
11
11
  var capacitor = require('./capacitor-BnRBm_ys.js');
12
- var overlays = require('./overlays-BbhewSIQ.js');
12
+ var overlays = require('./overlays-Dhoy6v_5.js');
13
13
  var theme = require('./theme-IlOsGAz7.js');
14
14
  var index$3 = require('./index-D_mPAIqF.js');
15
15
  var ionicGlobal = require('./ionic-global-CSEbHD_F.js');
@@ -128,104 +128,6 @@ const setCardStatusBarDefault = (defaultStyle = Style.Default) => {
128
128
  StatusBar.setStyle({ style: defaultStyle });
129
129
  };
130
130
 
131
- const createSheetEnterAnimation = (opts) => {
132
- const { currentBreakpoint, backdropBreakpoint, expandToScroll, staticBackdropOpacity } = opts;
133
- /**
134
- * If the backdropBreakpoint is undefined, then the backdrop
135
- * should always fade in. If the backdropBreakpoint came before the
136
- * current breakpoint, then the backdrop should be fading in.
137
- */
138
- const shouldShowBackdrop = backdropBreakpoint === undefined || backdropBreakpoint < currentBreakpoint;
139
- let initialBackdrop = '0';
140
- if (staticBackdropOpacity) {
141
- initialBackdrop = 'calc(var(--backdrop-opacity)';
142
- }
143
- else if (shouldShowBackdrop) {
144
- initialBackdrop = `calc(var(--backdrop-opacity) * ${currentBreakpoint})`;
145
- }
146
- const backdropAnimation = animation.createAnimation('backdropAnimation').fromTo('opacity', 0, initialBackdrop);
147
- if (shouldShowBackdrop) {
148
- backdropAnimation
149
- .beforeStyles({
150
- 'pointer-events': 'none',
151
- })
152
- .afterClearStyles(['pointer-events']);
153
- }
154
- const wrapperAnimation = animation.createAnimation('wrapperAnimation').keyframes([
155
- { offset: 0, opacity: 1, transform: 'translateY(100%)' },
156
- { offset: 1, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
157
- ]);
158
- /**
159
- * This allows the content to be scrollable at any breakpoint.
160
- */
161
- const contentAnimation = !expandToScroll
162
- ? animation.createAnimation('contentAnimation').keyframes([
163
- { offset: 0, opacity: 1, maxHeight: `${(1 - currentBreakpoint) * 100}%` },
164
- { offset: 1, opacity: 1, maxHeight: `${currentBreakpoint * 100}%` },
165
- ])
166
- : undefined;
167
- return { wrapperAnimation, backdropAnimation, contentAnimation };
168
- };
169
- const createSheetLeaveAnimation = (opts) => {
170
- const { currentBreakpoint, backdropBreakpoint } = opts;
171
- /**
172
- * Backdrop does not always fade in from 0 to 1 if backdropBreakpoint
173
- * is defined, so we need to account for that offset by figuring out
174
- * what the current backdrop value should be.
175
- */
176
- const backdropValue = `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(currentBreakpoint, backdropBreakpoint)})`;
177
- const defaultBackdrop = [
178
- { offset: 0, opacity: backdropValue },
179
- { offset: 1, opacity: 0 },
180
- ];
181
- const customBackdrop = [
182
- { offset: 0, opacity: backdropValue },
183
- { offset: backdropBreakpoint, opacity: 0 },
184
- { offset: 1, opacity: 0 },
185
- ];
186
- const backdropAnimation = animation.createAnimation('backdropAnimation').keyframes(backdropBreakpoint !== 0 ? customBackdrop : defaultBackdrop);
187
- const wrapperAnimation = animation.createAnimation('wrapperAnimation').keyframes([
188
- { offset: 0, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
189
- { offset: 1, opacity: 1, transform: `translateY(100%)` },
190
- ]);
191
- return { wrapperAnimation, backdropAnimation };
192
- };
193
-
194
- const createEnterAnimation$2 = () => {
195
- const backdropAnimation = animation.createAnimation()
196
- .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
197
- .beforeStyles({
198
- 'pointer-events': 'none',
199
- })
200
- .afterClearStyles(['pointer-events']);
201
- const wrapperAnimation = animation.createAnimation().keyframes([
202
- { offset: 0, opacity: 0.01, transform: 'translateY(40px)' },
203
- { offset: 1, opacity: 1, transform: `translateY(0px)` },
204
- ]);
205
- return { backdropAnimation, wrapperAnimation, contentAnimation: undefined };
206
- };
207
- /**
208
- * Ionic Modal Enter Animation
209
- */
210
- const ionicEnterAnimation = (baseEl, opts) => {
211
- const { currentBreakpoint, expandToScroll } = opts;
212
- const root = helpers.getElementRoot(baseEl);
213
- const { wrapperAnimation, backdropAnimation, contentAnimation } = currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation$2();
214
- backdropAnimation.addElement(root.querySelector('ion-backdrop'));
215
- wrapperAnimation.addElement(root.querySelector('.modal-wrapper'));
216
- // The content animation is only added if scrolling is enabled for
217
- // all the breakpoints.
218
- !expandToScroll && (contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.addElement(baseEl.querySelector('.ion-page')));
219
- backdropAnimation.duration(300).easing('ease-out');
220
- wrapperAnimation.duration(400).easing('cubic-bezier(0.32, 0.68, 0, 1)');
221
- contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.duration(400).easing('cubic-bezier(0.32, 0.68, 0, 1)');
222
- const baseAnimation = animation.createAnimation().addElement(baseEl).addAnimation([backdropAnimation, wrapperAnimation]);
223
- if (contentAnimation) {
224
- baseAnimation.addAnimation(contentAnimation);
225
- }
226
- return baseAnimation;
227
- };
228
-
229
131
  const handleCanDismiss = async (el, animation) => {
230
132
  /**
231
133
  * If canDismiss is not a function
@@ -652,6 +554,69 @@ const calculateProgress = (el, deltaY) => {
652
554
  return Math.max(0, Math.min(1, roundedProgress));
653
555
  };
654
556
 
557
+ const createSheetEnterAnimation = (opts) => {
558
+ const { currentBreakpoint, backdropBreakpoint, expandToScroll, staticBackdropOpacity } = opts;
559
+ /**
560
+ * If the backdropBreakpoint is undefined, then the backdrop
561
+ * should always fade in. If the backdropBreakpoint came before the
562
+ * current breakpoint, then the backdrop should be fading in.
563
+ */
564
+ const shouldShowBackdrop = backdropBreakpoint === undefined || backdropBreakpoint < currentBreakpoint;
565
+ let initialBackdrop = '0';
566
+ if (staticBackdropOpacity) {
567
+ initialBackdrop = 'calc(var(--backdrop-opacity)';
568
+ }
569
+ else if (shouldShowBackdrop) {
570
+ initialBackdrop = `calc(var(--backdrop-opacity) * ${currentBreakpoint})`;
571
+ }
572
+ const backdropAnimation = animation.createAnimation('backdropAnimation').fromTo('opacity', 0, initialBackdrop);
573
+ if (shouldShowBackdrop) {
574
+ backdropAnimation
575
+ .beforeStyles({
576
+ 'pointer-events': 'none',
577
+ })
578
+ .afterClearStyles(['pointer-events']);
579
+ }
580
+ const wrapperAnimation = animation.createAnimation('wrapperAnimation').keyframes([
581
+ { offset: 0, opacity: 1, transform: 'translateY(100%)' },
582
+ { offset: 1, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
583
+ ]);
584
+ /**
585
+ * This allows the content to be scrollable at any breakpoint.
586
+ */
587
+ const contentAnimation = !expandToScroll
588
+ ? animation.createAnimation('contentAnimation').keyframes([
589
+ { offset: 0, opacity: 1, maxHeight: `${(1 - currentBreakpoint) * 100}%` },
590
+ { offset: 1, opacity: 1, maxHeight: `${currentBreakpoint * 100}%` },
591
+ ])
592
+ : undefined;
593
+ return { wrapperAnimation, backdropAnimation, contentAnimation };
594
+ };
595
+ const createSheetLeaveAnimation = (opts) => {
596
+ const { currentBreakpoint, backdropBreakpoint } = opts;
597
+ /**
598
+ * Backdrop does not always fade in from 0 to 1 if backdropBreakpoint
599
+ * is defined, so we need to account for that offset by figuring out
600
+ * what the current backdrop value should be.
601
+ */
602
+ const backdropValue = `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(currentBreakpoint, backdropBreakpoint)})`;
603
+ const defaultBackdrop = [
604
+ { offset: 0, opacity: backdropValue },
605
+ { offset: 1, opacity: 0 },
606
+ ];
607
+ const customBackdrop = [
608
+ { offset: 0, opacity: backdropValue },
609
+ { offset: backdropBreakpoint, opacity: 0 },
610
+ { offset: 1, opacity: 0 },
611
+ ];
612
+ const backdropAnimation = animation.createAnimation('backdropAnimation').keyframes(backdropBreakpoint !== 0 ? customBackdrop : defaultBackdrop);
613
+ const wrapperAnimation = animation.createAnimation('wrapperAnimation').keyframes([
614
+ { offset: 0, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
615
+ { offset: 1, opacity: 1, transform: `translateY(100%)` },
616
+ ]);
617
+ return { wrapperAnimation, backdropAnimation };
618
+ };
619
+
655
620
  const createEnterAnimation$1 = () => {
656
621
  const backdropAnimation = animation.createAnimation()
657
622
  .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
@@ -1042,16 +1007,16 @@ const mdLeaveAnimation = (baseEl, opts) => {
1042
1007
  return baseAnimation;
1043
1008
  };
1044
1009
 
1045
- const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange, isIonicTheme, onDragStart, onDragMove, onDragEnd) => {
1010
+ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange, staticBackdropOpacity, onDragStart, onDragMove, onDragEnd) => {
1046
1011
  // Defaults for the sheet swipe animation
1047
1012
  const defaultBackdrop = [
1048
1013
  { offset: 0, opacity: 'var(--backdrop-opacity)' },
1049
- { offset: 1, opacity: isIonicTheme ? 'var(--backdrop-opacity)' : 0.01 },
1014
+ { offset: 1, opacity: staticBackdropOpacity ? 'var(--backdrop-opacity)' : 0.01 },
1050
1015
  ];
1051
1016
  const customBackdrop = [
1052
1017
  { offset: 0, opacity: 'var(--backdrop-opacity)' },
1053
- { offset: 1 - backdropBreakpoint, opacity: isIonicTheme ? 'var(--backdrop-opacity)' : 0 },
1054
- { offset: 1, opacity: isIonicTheme ? 'var(--backdrop-opacity)' : 0 },
1018
+ { offset: 1 - backdropBreakpoint, opacity: staticBackdropOpacity ? 'var(--backdrop-opacity)' : 0 },
1019
+ { offset: 1, opacity: staticBackdropOpacity ? 'var(--backdrop-opacity)' : 0 },
1055
1020
  ];
1056
1021
  const SheetDefaults = {
1057
1022
  WRAPPER_KEYFRAMES: [
@@ -1374,9 +1339,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
1374
1339
  : step;
1375
1340
  offset = helpers.clamp(0.0001, processedStep, maxStep);
1376
1341
  animation.progressStep(offset);
1377
- const snapBreakpoint = isIonicTheme
1378
- ? calculateIonicSnapBreakpoint(detail.deltaY, detail.velocityY, detail.currentY)
1379
- : calculateSnapBreakpoint(detail.deltaY);
1342
+ const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
1380
1343
  const eventDetail = {
1381
1344
  currentY: detail.currentY,
1382
1345
  deltaY: detail.deltaY,
@@ -1387,9 +1350,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
1387
1350
  onDragMove(eventDetail);
1388
1351
  };
1389
1352
  const onEnd = (detail) => {
1390
- const snapBreakpoint = isIonicTheme
1391
- ? calculateIonicSnapBreakpoint(detail.deltaY, detail.velocityY, detail.currentY)
1392
- : calculateSnapBreakpoint(detail.deltaY);
1353
+ const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
1393
1354
  const eventDetail = {
1394
1355
  currentY: detail.currentY,
1395
1356
  deltaY: detail.deltaY,
@@ -1436,14 +1397,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
1436
1397
  */
1437
1398
  const shouldPreventDismiss = canDismiss && breakpoint === 0;
1438
1399
  const snapToBreakpoint = shouldPreventDismiss ? currentBreakpoint : breakpoint;
1439
- /**
1440
- * Detect snap-back behavior: when the snap target is the same as the current breakpoint,
1441
- * the user released before crossing the threshold to a new breakpoint.
1442
- * Apply different timing and easing for snap-back vs. snap-to-new.
1443
- */
1444
- const isSnapBack = snapToBreakpoint === currentBreakpoint;
1445
- const duration = isIonicTheme ? (isSnapBack ? 300 : 400) : 500;
1446
- const easing = isSnapBack ? 'cubic-bezier(0.34, 1.4, 0.64, 1)' : 'cubic-bezier(0.32, 0.68, 0, 1)';
1447
1400
  const shouldRemainOpen = snapToBreakpoint !== 0;
1448
1401
  currentBreakpoint = 0;
1449
1402
  /**
@@ -1458,13 +1411,13 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
1458
1411
  backdropAnimation.keyframes([
1459
1412
  {
1460
1413
  offset: 0,
1461
- opacity: isIonicTheme
1414
+ opacity: staticBackdropOpacity
1462
1415
  ? 'var(--backdrop-opacity)'
1463
1416
  : `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(1 - breakpointOffset, backdropBreakpoint)})`,
1464
1417
  },
1465
1418
  {
1466
1419
  offset: 1,
1467
- opacity: isIonicTheme
1420
+ opacity: staticBackdropOpacity
1468
1421
  ? 'var(--backdrop-opacity)'
1469
1422
  : `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(snapToBreakpoint, backdropBreakpoint)})`,
1470
1423
  },
@@ -1484,12 +1437,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
1484
1437
  }
1485
1438
  animation.progressStep(0);
1486
1439
  }
1487
- /**
1488
- * Apply the appropriate easing curve for this snap behavior.
1489
- */
1490
- if (isIonicTheme) {
1491
- animation.easing(easing);
1492
- }
1493
1440
  /**
1494
1441
  * Gesture should remain disabled until the
1495
1442
  * snapping animation completes.
@@ -1579,7 +1526,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
1579
1526
  * be added every time onEnd runs.
1580
1527
  */
1581
1528
  }, { oneTimeCallback: true })
1582
- .progressEnd(1, 0, animated ? duration : 0);
1529
+ .progressEnd(1, 0, animated ? 500 : 0);
1583
1530
  });
1584
1531
  };
1585
1532
  /**
@@ -1610,50 +1557,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
1610
1557
  });
1611
1558
  return snapBreakpoint;
1612
1559
  };
1613
- /**
1614
- * Calculates the Ionic-specific snap breakpoint using velocity-based logic.
1615
- * This provides a more intuitive and responsive sheet behavior for the Ionic theme.
1616
- *
1617
- * Rules:
1618
- * 1. Fast downward flick (> 500 px/s) always dismisses, regardless of position
1619
- * 2. Fast upward flick (> 400 px/s) snaps to the next breakpoint above
1620
- * 3. If dragged 40% below current snap point without fast upward flick, dismisses
1621
- * 4. Otherwise, falls back to position-based snap (closest breakpoint)
1622
- *
1623
- * @param deltaY The change in Y position since gesture started
1624
- * @param velocityY The velocity in pixels per millisecond
1625
- * @param currentY The current Y position of the gesture
1626
- * @returns The snap breakpoint value
1627
- */
1628
- const calculateIonicSnapBreakpoint = (deltaY, velocityY, currentY) => {
1629
- // Convert velocity from px/ms to px/s for easier threshold comparison
1630
- const velocityYPerSecond = velocityY * 1000;
1631
- // Calculate current progress (0 = fully closed, 1 = fully expanded)
1632
- const currentProgress = calculateProgress(currentY);
1633
- // Rule 1: Fast downward flick always dismisses
1634
- if (velocityYPerSecond > 500) {
1635
- return minBreakpoint;
1636
- }
1637
- // Rule 2: Fast upward flick moves to next breakpoint above
1638
- if (velocityYPerSecond < -400) {
1639
- // Find next breakpoint above current position
1640
- const nextBreakpoint = breakpoints.find((bp) => bp > currentProgress);
1641
- // If no breakpoint above, stay at max breakpoint
1642
- return nextBreakpoint !== null && nextBreakpoint !== void 0 ? nextBreakpoint : maxBreakpoint;
1643
- }
1644
- // Rule 3: 40% dismissal rule (only if not flicking up and 0 breakpoint exists)
1645
- if (minBreakpoint === 0 && currentBreakpoint > 0) {
1646
- // Calculate how far we've moved below the current snap point
1647
- const distanceBelowSnap = currentBreakpoint - currentProgress;
1648
- const percentageBelowSnap = distanceBelowSnap / currentBreakpoint;
1649
- // If dragged more than 40% below and not flicking up, dismiss
1650
- if (percentageBelowSnap > 0.4 && velocityYPerSecond <= 400) {
1651
- return 0;
1652
- }
1653
- }
1654
- // Rule 4: Fallback to position-based snap (existing logic)
1655
- return calculateSnapBreakpoint(deltaY);
1656
- };
1657
1560
  /**
1658
1561
  * Calculates the progress of the swipe gesture.
1659
1562
  *
@@ -1902,7 +1805,7 @@ const clearSafeAreaOverrides = (hostEl) => {
1902
1805
  hostEl.style.removeProperty('--ion-safe-area-right');
1903
1806
  };
1904
1807
 
1905
- const modalIonicCss = () => `:host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-width:0;--border-style:none;--border-color:transparent;--box-shadow:none;right:0;left:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}.modal-handle{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;cursor:pointer;z-index:11}.modal-handle::before{position:absolute;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:""}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--background:var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));--box-shadow:var(--token-elevation-3, 0px 2px 7px 0px rgba(0, 0, 0, 0.05), 0px 6px 32px 0px rgba(0, 0, 0, 0.16));--backdrop-opacity:0.7;color:var(--token-text-default, var(--token-primitives-neutral-1200, #242424))}:host(.modal-round){--border-radius:var(--token-border-radius-1000, var(--token-scale-1000, 40px))}:host(.modal-soft){--border-radius:var(--token-border-radius-400, var(--token-scale-400, 16px))}:host(.modal-rectangular){--border-radius:var(--token-border-radius-0, var(--token-scale-0, 0px))}:host(.select-modal.modal-default){--max-height:45%;--max-width:calc(100% - (var(--token-space-400, var(--token-scale-400, 16px)) * 2));--min-height:340px}.modal-handle{right:0px;left:0px;top:var(--token-space-300, var(--token-scale-300, 12px));border-radius:var(--token-border-radius-100, var(--token-scale-100, 4px));width:var(--token-scale-1100, 44px);height:var(--token-scale-100, 4px);background-color:var(--token-primitives-neutral-300, #e0e0e0)}.modal-handle::before{-webkit-padding-start:var(--token-space-100, var(--token-scale-100, 4px));padding-inline-start:var(--token-space-100, var(--token-scale-100, 4px));-webkit-padding-end:var(--token-space-100, var(--token-scale-100, 4px));padding-inline-end:var(--token-space-100, var(--token-scale-100, 4px));padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:var(--token-space-100, var(--token-scale-100, 4px))}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + var(--token-scale-250, 10px)))}`;
1808
+ const modalIonicCss = () => `:host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-width:0;--border-style:none;--border-color:transparent;--box-shadow:none;right:0;left:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}.modal-handle{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;cursor:pointer;z-index:11}.modal-handle::before{position:absolute;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:""}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--background:var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));--box-shadow:var(--token-elevation-3, 0px 2px 7px 0px rgba(0, 0, 0, 0.05), 0px 6px 32px 0px rgba(0, 0, 0, 0.16));--backdrop-opacity:1;color:var(--token-text-default, var(--token-primitives-neutral-1200, #242424))}:host(.modal-round){--border-radius:var(--token-border-radius-1000, var(--token-scale-1000, 40px))}:host(.modal-soft){--border-radius:var(--token-border-radius-400, var(--token-scale-400, 16px))}:host(.modal-rectangular){--border-radius:var(--token-border-radius-0, var(--token-scale-0, 0px))}:host(.select-modal.modal-default){--max-height:45%;--max-width:calc(100% - (var(--token-space-400, var(--token-scale-400, 16px)) * 2));--min-height:340px}.modal-handle{right:0px;left:0px;top:var(--token-space-300, var(--token-scale-300, 12px));border-radius:var(--token-border-radius-100, var(--token-scale-100, 4px));width:var(--token-scale-1100, 44px);height:var(--token-scale-100, 4px);background-color:var(--token-primitives-neutral-300, #e0e0e0)}.modal-handle::before{-webkit-padding-start:var(--token-space-100, var(--token-scale-100, 4px));padding-inline-start:var(--token-space-100, var(--token-scale-100, 4px));-webkit-padding-end:var(--token-space-100, var(--token-scale-100, 4px));padding-inline-end:var(--token-space-100, var(--token-scale-100, 4px));padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:var(--token-space-100, var(--token-scale-100, 4px))}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + var(--token-scale-250, 10px)))}`;
1906
1809
 
1907
1810
  const modalIosCss = () => `:host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-width:0;--border-style:none;--border-color:transparent;--box-shadow:none;right:0;left:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}.modal-handle{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;cursor:pointer;z-index:11}.modal-handle::before{position:absolute;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:""}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--background:var(--ion-background-color, #fff);--border-radius:0;--backdrop-opacity:0;color:var(--ion-text-color, #000)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{right:0px;left:0px;top:5px;border-radius:8px;width:36px;height:5px;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be))}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;width:36px;height:5px}:host(.modal-sheet){--height:calc(100% - (var(--ion-modal-offset-top, 0px) + 10px))}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}`;
1908
1811
 
@@ -2342,7 +2245,7 @@ const Modal = class {
2342
2245
  this.statusBarStyle = await StatusBar.getStyle();
2343
2246
  setCardStatusBarDark();
2344
2247
  }
2345
- await overlays.present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, ionicEnterAnimation, {
2248
+ await overlays.present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
2346
2249
  presentingEl: presentingElement,
2347
2250
  currentBreakpoint: this.initialBreakpoint,
2348
2251
  backdropBreakpoint: this.backdropBreakpoint,
@@ -3029,20 +2932,20 @@ const Modal = class {
3029
2932
  const isHandleCycle = handleBehavior === 'cycle';
3030
2933
  const shape = this.getShape();
3031
2934
  const isSheetModalWithHandle = isSheetModal && showHandle;
3032
- return (index$2.h(index$2.Host, Object.assign({ key: '3011c8f49c1ccb6c20c01db35b59fe4f6e22ec01', "no-router": true,
2935
+ return (index$2.h(index$2.Host, Object.assign({ key: '4b323edb66d28260c34b31fd2af8f4ae53a7ef90', "no-router": true,
3033
2936
  // Allow the modal to be navigable when the handle is focusable
3034
2937
  tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
3035
2938
  zIndex: `${20000 + this.overlayIndex}`,
3036
- }, class: Object.assign({ [theme$1]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-${shape}`]: shape !== undefined, [`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$2.h("ion-backdrop", { key: 'ab99fb4ff1b335b06d5676890012dfe3cd1a1a01', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), theme$1 === 'ios' && index$2.h("div", { key: '95d4c79c4455c6a5ae6d581fa9dfaabdbee8c567', class: "modal-shadow" }), index$2.h("div", Object.assign({ key: '2d7d2406cdb986c69ef52708d33eca67d8a877f8',
2939
+ }, class: Object.assign({ [theme$1]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-${shape}`]: shape !== undefined, [`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$2.h("ion-backdrop", { key: '6059e348dc3d020f995577dde1b7949bdb2c0f2f', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), theme$1 === 'ios' && index$2.h("div", { key: '5a08a99dfc3de51ac7516fc76fdba3672f84db71', class: "modal-shadow" }), index$2.h("div", Object.assign({ key: 'a7a841a5b2f740fbf576b82b82782aa235b701ee',
3037
2940
  /*
3038
2941
  role and aria-modal must be used on the
3039
2942
  same element. They must also be set inside the
3040
2943
  shadow DOM otherwise ion-button will not be highlighted
3041
2944
  when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
3042
2945
  */
3043
- role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (index$2.h("button", { key: 'ccec8bfc314763bd6dd868b69fbfdc085f5957c9', class: "modal-handle",
2946
+ role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (index$2.h("button", { key: 'ca5567e9ab3e9e80b41314d396106faf2da09ffe', class: "modal-handle",
3044
2947
  // Prevents the handle from receiving keyboard focus when it does not cycle
3045
- 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$2.h("slot", { key: '38469e3447b46983783627d697e12cadcef614fa', onSlotchange: this.onSlotChange }))));
2948
+ 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$2.h("slot", { key: 'da5471ea4292166798d3f949e79e7b3e55a0e83f', onSlotchange: this.onSlotChange }))));
3046
2949
  }
3047
2950
  get el() { return index$2.getElement(this); }
3048
2951
  static get watchers() { return {