@ionic/core 8.7.18-dev.11769790854.11895f8f → 8.7.18-dev.11770238549.14c2a85f

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 (228) hide show
  1. package/components/ion-item-divider.js +2 -2
  2. package/components/ion-item-group.js +1 -1
  3. package/components/ion-item-option.js +2 -2
  4. package/components/ion-item-options.js +1 -1
  5. package/components/ion-item-sliding.js +1 -1
  6. package/components/ion-loading.js +2 -2
  7. package/components/ion-menu-button.js +2 -2
  8. package/components/ion-menu-toggle.js +2 -2
  9. package/components/ion-menu.js +2 -2
  10. package/components/ion-nav-link.js +1 -1
  11. package/components/ion-nav.js +1 -1
  12. package/components/ion-note.js +2 -2
  13. package/components/ion-picker-legacy.js +2 -2
  14. package/components/ion-progress-bar.js +1 -1
  15. package/components/ion-range.js +3 -3
  16. package/components/ion-refresher-content.js +1 -1
  17. package/components/ion-refresher.js +1 -1
  18. package/components/ion-reorder-group.js +1 -1
  19. package/components/ion-reorder.js +1 -1
  20. package/components/ion-router-link.js +2 -2
  21. package/components/ion-router-outlet.js +1 -1
  22. package/components/ion-row.js +1 -1
  23. package/components/ion-searchbar.js +4 -4
  24. package/components/ion-segment-button.js +2 -2
  25. package/components/ion-segment-content.js +1 -1
  26. package/components/ion-segment-view.js +2 -2
  27. package/components/ion-segment.js +2 -2
  28. package/components/ion-select-option.js +1 -1
  29. package/components/ion-select.js +2 -2
  30. package/components/ion-skeleton-text.js +2 -2
  31. package/components/ion-split-pane.js +2 -2
  32. package/components/ion-tab-bar.js +2 -2
  33. package/components/ion-tab-button.js +2 -2
  34. package/components/ion-tab.js +2 -2
  35. package/components/ion-tabs.js +1 -1
  36. package/components/ion-text.js +2 -2
  37. package/components/ion-textarea.js +2 -2
  38. package/components/ion-thumbnail.js +1 -1
  39. package/components/ion-toast.js +2 -2
  40. package/components/ion-toggle.js +3 -3
  41. package/components/label.js +2 -2
  42. package/components/list-header.js +2 -2
  43. package/components/modal.js +12 -220
  44. package/components/picker-column-option.js +2 -2
  45. package/components/picker-column2.js +2 -2
  46. package/components/popover.js +13 -85
  47. package/components/radio-group.js +1 -1
  48. package/components/radio.js +3 -3
  49. package/components/ripple-effect.js +1 -1
  50. package/components/select-modal.js +1 -1
  51. package/components/select-popover.js +1 -1
  52. package/components/spinner.js +1 -1
  53. package/components/title.js +2 -2
  54. package/components/toolbar.js +2 -2
  55. package/dist/cjs/ion-app_8.cjs.entry.js +5 -5
  56. package/dist/cjs/ion-avatar_3.cjs.entry.js +1 -1
  57. package/dist/cjs/ion-col_3.cjs.entry.js +1 -1
  58. package/dist/cjs/ion-datetime_3.cjs.entry.js +4 -4
  59. package/dist/cjs/ion-item-option_3.cjs.entry.js +4 -4
  60. package/dist/cjs/ion-item_8.cjs.entry.js +11 -11
  61. package/dist/cjs/ion-loading.cjs.entry.js +2 -2
  62. package/dist/cjs/ion-menu_3.cjs.entry.js +6 -6
  63. package/dist/cjs/ion-modal.cjs.entry.js +12 -220
  64. package/dist/cjs/ion-nav_2.cjs.entry.js +2 -2
  65. package/dist/cjs/ion-picker-column-option.cjs.entry.js +2 -2
  66. package/dist/cjs/ion-popover.cjs.entry.js +13 -85
  67. package/dist/cjs/ion-progress-bar.cjs.entry.js +1 -1
  68. package/dist/cjs/ion-radio_2.cjs.entry.js +4 -4
  69. package/dist/cjs/ion-range.cjs.entry.js +3 -3
  70. package/dist/cjs/ion-refresher_2.cjs.entry.js +2 -2
  71. package/dist/cjs/ion-reorder_2.cjs.entry.js +2 -2
  72. package/dist/cjs/ion-ripple-effect.cjs.entry.js +1 -1
  73. package/dist/cjs/ion-route_4.cjs.entry.js +2 -2
  74. package/dist/cjs/ion-searchbar.cjs.entry.js +4 -4
  75. package/dist/cjs/ion-segment-content.cjs.entry.js +1 -1
  76. package/dist/cjs/ion-segment-view.cjs.entry.js +2 -2
  77. package/dist/cjs/ion-segment_2.cjs.entry.js +4 -4
  78. package/dist/cjs/ion-select-modal.cjs.entry.js +1 -1
  79. package/dist/cjs/ion-select_3.cjs.entry.js +4 -4
  80. package/dist/cjs/ion-spinner.cjs.entry.js +1 -1
  81. package/dist/cjs/ion-split-pane.cjs.entry.js +2 -2
  82. package/dist/cjs/ion-tab-bar_2.cjs.entry.js +4 -4
  83. package/dist/cjs/ion-tab_2.cjs.entry.js +3 -3
  84. package/dist/cjs/ion-text.cjs.entry.js +2 -2
  85. package/dist/cjs/ion-textarea.cjs.entry.js +2 -2
  86. package/dist/cjs/ion-toast.cjs.entry.js +2 -2
  87. package/dist/cjs/ion-toggle.cjs.entry.js +3 -3
  88. package/dist/collection/components/item-divider/item-divider.js +2 -2
  89. package/dist/collection/components/item-group/item-group.js +1 -1
  90. package/dist/collection/components/item-option/item-option.js +2 -2
  91. package/dist/collection/components/item-options/item-options.js +1 -1
  92. package/dist/collection/components/item-sliding/item-sliding.js +1 -1
  93. package/dist/collection/components/label/label.js +2 -2
  94. package/dist/collection/components/list-header/list-header.js +2 -2
  95. package/dist/collection/components/loading/loading.js +2 -2
  96. package/dist/collection/components/menu/menu.js +2 -2
  97. package/dist/collection/components/menu-button/menu-button.js +2 -2
  98. package/dist/collection/components/menu-toggle/menu-toggle.js +2 -2
  99. package/dist/collection/components/modal/gestures/sheet.js +1 -3
  100. package/dist/collection/components/modal/gestures/swipe-to-close.js +1 -3
  101. package/dist/collection/components/modal/modal.ios.css +4 -0
  102. package/dist/collection/components/modal/modal.js +7 -215
  103. package/dist/collection/components/modal/modal.md.css +4 -0
  104. package/dist/collection/components/nav/nav.js +1 -1
  105. package/dist/collection/components/nav-link/nav-link.js +1 -1
  106. package/dist/collection/components/note/note.js +2 -2
  107. package/dist/collection/components/picker-column-option/picker-column-option.js +2 -2
  108. package/dist/collection/components/picker-legacy/picker.js +2 -2
  109. package/dist/collection/components/picker-legacy-column/picker-column.js +2 -2
  110. package/dist/collection/components/popover/animations/ios.enter.js +5 -21
  111. package/dist/collection/components/popover/animations/md.enter.js +5 -30
  112. package/dist/collection/components/popover/popover.js +2 -2
  113. package/dist/collection/components/popover/utils.js +1 -32
  114. package/dist/collection/components/progress-bar/progress-bar.js +1 -1
  115. package/dist/collection/components/radio/radio.js +3 -3
  116. package/dist/collection/components/radio-group/radio-group.js +1 -1
  117. package/dist/collection/components/range/range.js +3 -3
  118. package/dist/collection/components/refresher/refresher.js +1 -1
  119. package/dist/collection/components/refresher-content/refresher-content.js +1 -1
  120. package/dist/collection/components/reorder/reorder.js +1 -1
  121. package/dist/collection/components/reorder-group/reorder-group.js +1 -1
  122. package/dist/collection/components/ripple-effect/ripple-effect.js +1 -1
  123. package/dist/collection/components/router-link/router-link.js +2 -2
  124. package/dist/collection/components/router-outlet/router-outlet.js +1 -1
  125. package/dist/collection/components/row/row.js +1 -1
  126. package/dist/collection/components/searchbar/searchbar.js +4 -4
  127. package/dist/collection/components/segment/segment.js +2 -2
  128. package/dist/collection/components/segment-button/segment-button.js +2 -2
  129. package/dist/collection/components/segment-content/segment-content.js +1 -1
  130. package/dist/collection/components/segment-view/segment-view.js +2 -2
  131. package/dist/collection/components/select/select.js +2 -2
  132. package/dist/collection/components/select-modal/select-modal.js +1 -1
  133. package/dist/collection/components/select-option/select-option.js +1 -1
  134. package/dist/collection/components/select-popover/select-popover.js +1 -1
  135. package/dist/collection/components/skeleton-text/skeleton-text.js +2 -2
  136. package/dist/collection/components/spinner/spinner.js +1 -1
  137. package/dist/collection/components/split-pane/split-pane.js +2 -2
  138. package/dist/collection/components/tab/tab.js +2 -2
  139. package/dist/collection/components/tab-bar/tab-bar.js +2 -2
  140. package/dist/collection/components/tab-button/tab-button.js +2 -2
  141. package/dist/collection/components/tabs/tabs.js +1 -1
  142. package/dist/collection/components/text/text.js +2 -2
  143. package/dist/collection/components/textarea/textarea.js +2 -2
  144. package/dist/collection/components/thumbnail/thumbnail.js +1 -1
  145. package/dist/collection/components/title/title.js +2 -2
  146. package/dist/collection/components/toast/toast.js +2 -2
  147. package/dist/collection/components/toggle/toggle.js +3 -3
  148. package/dist/collection/components/toolbar/toolbar.js +2 -2
  149. package/dist/docs.json +1 -1
  150. package/dist/esm/ion-app_8.entry.js +5 -5
  151. package/dist/esm/ion-avatar_3.entry.js +1 -1
  152. package/dist/esm/ion-col_3.entry.js +1 -1
  153. package/dist/esm/ion-datetime_3.entry.js +4 -4
  154. package/dist/esm/ion-item-option_3.entry.js +4 -4
  155. package/dist/esm/ion-item_8.entry.js +11 -11
  156. package/dist/esm/ion-loading.entry.js +2 -2
  157. package/dist/esm/ion-menu_3.entry.js +6 -6
  158. package/dist/esm/ion-modal.entry.js +12 -220
  159. package/dist/esm/ion-nav_2.entry.js +2 -2
  160. package/dist/esm/ion-picker-column-option.entry.js +2 -2
  161. package/dist/esm/ion-popover.entry.js +13 -85
  162. package/dist/esm/ion-progress-bar.entry.js +1 -1
  163. package/dist/esm/ion-radio_2.entry.js +4 -4
  164. package/dist/esm/ion-range.entry.js +3 -3
  165. package/dist/esm/ion-refresher_2.entry.js +2 -2
  166. package/dist/esm/ion-reorder_2.entry.js +2 -2
  167. package/dist/esm/ion-ripple-effect.entry.js +1 -1
  168. package/dist/esm/ion-route_4.entry.js +2 -2
  169. package/dist/esm/ion-searchbar.entry.js +4 -4
  170. package/dist/esm/ion-segment-content.entry.js +1 -1
  171. package/dist/esm/ion-segment-view.entry.js +2 -2
  172. package/dist/esm/ion-segment_2.entry.js +4 -4
  173. package/dist/esm/ion-select-modal.entry.js +1 -1
  174. package/dist/esm/ion-select_3.entry.js +4 -4
  175. package/dist/esm/ion-spinner.entry.js +1 -1
  176. package/dist/esm/ion-split-pane.entry.js +2 -2
  177. package/dist/esm/ion-tab-bar_2.entry.js +4 -4
  178. package/dist/esm/ion-tab_2.entry.js +3 -3
  179. package/dist/esm/ion-text.entry.js +2 -2
  180. package/dist/esm/ion-textarea.entry.js +2 -2
  181. package/dist/esm/ion-toast.entry.js +2 -2
  182. package/dist/esm/ion-toggle.entry.js +3 -3
  183. package/dist/ionic/ionic.esm.js +1 -1
  184. package/dist/ionic/{p-074839fc.entry.js → p-01e27965.entry.js} +1 -1
  185. package/dist/ionic/p-0ca0fe9c.entry.js +4 -0
  186. package/dist/ionic/{p-316c0420.entry.js → p-221a3d8c.entry.js} +1 -1
  187. package/dist/ionic/{p-3a6caca9.entry.js → p-2668188b.entry.js} +1 -1
  188. package/dist/ionic/{p-d3014190.entry.js → p-2bd1ea35.entry.js} +1 -1
  189. package/dist/ionic/{p-a127bee2.entry.js → p-30333874.entry.js} +1 -1
  190. package/dist/ionic/{p-0e8c8a10.entry.js → p-31db96da.entry.js} +1 -1
  191. package/dist/ionic/{p-1647c46c.entry.js → p-363d1209.entry.js} +1 -1
  192. package/dist/ionic/p-3ec563c1.entry.js +4 -0
  193. package/dist/ionic/{p-c19af093.entry.js → p-42db6404.entry.js} +1 -1
  194. package/dist/ionic/{p-db82892c.entry.js → p-46a38cfd.entry.js} +1 -1
  195. package/dist/ionic/{p-eb024a5b.entry.js → p-4eec1a5e.entry.js} +1 -1
  196. package/dist/ionic/{p-0dfa5a37.entry.js → p-530fcd71.entry.js} +1 -1
  197. package/dist/ionic/{p-72c38b88.entry.js → p-5c8f7253.entry.js} +1 -1
  198. package/dist/ionic/{p-172a579f.entry.js → p-5d6fb6e3.entry.js} +1 -1
  199. package/dist/ionic/{p-dbbe606a.entry.js → p-652318c3.entry.js} +1 -1
  200. package/dist/ionic/{p-2a939845.entry.js → p-6f37536a.entry.js} +1 -1
  201. package/dist/ionic/{p-4e41ea20.entry.js → p-72af946b.entry.js} +1 -1
  202. package/dist/ionic/p-7f98e710.entry.js +4 -0
  203. package/dist/ionic/{p-6d070558.entry.js → p-82d5bb3d.entry.js} +1 -1
  204. package/dist/ionic/p-906bb44d.entry.js +4 -0
  205. package/dist/ionic/{p-2dbb90cb.entry.js → p-97eb0812.entry.js} +1 -1
  206. package/dist/ionic/{p-31f7095f.entry.js → p-a4a9f5ae.entry.js} +1 -1
  207. package/dist/ionic/{p-86f53961.entry.js → p-b8551510.entry.js} +1 -1
  208. package/dist/ionic/p-bc293244.entry.js +4 -0
  209. package/dist/ionic/{p-d126e8d3.entry.js → p-bce86e56.entry.js} +1 -1
  210. package/dist/ionic/{p-02d76786.entry.js → p-be263062.entry.js} +1 -1
  211. package/dist/ionic/{p-639dd543.entry.js → p-c175d792.entry.js} +1 -1
  212. package/dist/ionic/{p-020af078.entry.js → p-cc2a9936.entry.js} +1 -1
  213. package/dist/ionic/{p-1ccd6829.entry.js → p-e338f669.entry.js} +1 -1
  214. package/dist/ionic/{p-6241ce47.entry.js → p-eaf3f5ff.entry.js} +1 -1
  215. package/dist/ionic/{p-f8f22cc0.entry.js → p-fb0271ae.entry.js} +1 -1
  216. package/dist/ionic/{p-370e4237.entry.js → p-fbb00634.entry.js} +1 -1
  217. package/dist/types/components/modal/gestures/sheet.d.ts +1 -1
  218. package/dist/types/components/modal/gestures/swipe-to-close.d.ts +1 -1
  219. package/dist/types/components/modal/modal.d.ts +0 -47
  220. package/dist/types/components/popover/utils.d.ts +0 -2
  221. package/hydrate/index.js +112 -392
  222. package/hydrate/index.mjs +112 -392
  223. package/package.json +2 -4
  224. package/dist/ionic/p-51a60e0f.entry.js +0 -4
  225. package/dist/ionic/p-94de5cfa.entry.js +0 -4
  226. package/dist/ionic/p-dd1aef77.entry.js +0 -4
  227. package/dist/ionic/p-ec9ca3fe.entry.js +0 -4
  228. package/dist/ionic/p-ef4256eb.entry.js +0 -4
@@ -2,7 +2,6 @@
2
2
  * (C) Ionic http://ionicframework.com - MIT License
3
3
  */
4
4
  import { r as registerInstance, c as createEvent, f as printIonWarning, w as writeTask, e as config, h, d as Host, g as getElement } from './index-C8IsBmNU.js';
5
- import { w as win } from './index-ZjP4CjeZ.js';
6
5
  import { f as findClosestIonContent, i as isIonContent, d as disableContentScrollY, r as resetContentScrollY, a as findIonContent, p as printIonContentErrorMsg } from './index-Bs3kT4bc.js';
7
6
  import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate-BYawdMXj.js';
8
7
  import { e as clamp, g as getElementRoot, r as raf, b as inheritAttributes, h as hasLazyBuild } from './helpers-DEn3pfjm.js';
@@ -16,6 +15,7 @@ import { KEYBOARD_DID_OPEN } from './keyboard-ywgs5efA.js';
16
15
  import { c as createAnimation } from './animation-Dt8bGnA-.js';
17
16
  import { g as getTimeGivenProgression } from './cubic-bezier-hHmYLOfE.js';
18
17
  import { createGesture } from './index-CfgBF1SE.js';
18
+ import { w as win } from './index-ZjP4CjeZ.js';
19
19
  import './hardware-back-button-CPLxO-Ev.js';
20
20
  import './gesture-controller-BTEOs1at.js';
21
21
  import './keyboard-CUw4ekVy.js';
@@ -247,7 +247,7 @@ const calculateSpringStep = (t) => {
247
247
  const SwipeToCloseDefaults = {
248
248
  MIN_PRESENTING_SCALE: 0.915,
249
249
  };
250
- const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss, onGestureMove) => {
250
+ const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss) => {
251
251
  /**
252
252
  * The step value at which a card modal
253
253
  * is eligible for dismissing via gesture.
@@ -404,8 +404,6 @@ const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss, onG
404
404
  const processedStep = isAttemptingDismissWithCanDismiss ? calculateSpringStep(step / maxStep) : step;
405
405
  const clampedStep = clamp(0.0001, processedStep, maxStep);
406
406
  animation.progressStep(clampedStep);
407
- // Notify modal of position change for safe-area updates
408
- onGestureMove === null || onGestureMove === void 0 ? void 0 : onGestureMove();
409
407
  /**
410
408
  * When swiping down half way, the status bar style
411
409
  * should be reset to its default value.
@@ -949,7 +947,7 @@ const mdLeaveAnimation = (baseEl, opts) => {
949
947
  return baseAnimation;
950
948
  };
951
949
 
952
- const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange, onGestureMove) => {
950
+ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange) => {
953
951
  // Defaults for the sheet swipe animation
954
952
  const defaultBackdrop = [
955
953
  { offset: 0, opacity: 'var(--backdrop-opacity)' },
@@ -1280,8 +1278,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
1280
1278
  : step;
1281
1279
  offset = clamp(0.0001, processedStep, maxStep);
1282
1280
  animation.progressStep(offset);
1283
- // Notify modal of position change for safe-area updates
1284
- onGestureMove === null || onGestureMove === void 0 ? void 0 : onGestureMove();
1285
1281
  };
1286
1282
  const onEnd = (detail) => {
1287
1283
  /**
@@ -1476,9 +1472,9 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
1476
1472
  };
1477
1473
  };
1478
1474
 
1479
- const modalIosCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right: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;color:var(--ion-text-color, #000);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}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.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;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}: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{--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}";
1475
+ const modalIosCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right: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;color:var(--ion-text-color, #000);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}@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{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.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;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}: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{--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}";
1480
1476
 
1481
- const modalMdCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right: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;color:var(--ion-text-color, #000);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}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.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;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}: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{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0, 40px, 0);transform:translate3d(0, 40px, 0);opacity:0.01}";
1477
+ const modalMdCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right: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;color:var(--ion-text-color, #000);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}@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{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.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;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}: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{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0, 40px, 0);transform:translate3d(0, 40px, 0);opacity:0.01}";
1482
1478
 
1483
1479
  const Modal = class {
1484
1480
  constructor(hostRef) {
@@ -1501,10 +1497,6 @@ const Modal = class {
1501
1497
  this.inline = false;
1502
1498
  // Whether or not modal is being dismissed via gesture
1503
1499
  this.gestureAnimationDismissing = false;
1504
- // Whether to skip coordinate-based safe-area detection (for fullscreen phone modals)
1505
- this.skipSafeAreaCoordinateDetection = false;
1506
- // Track previous safe-area state to avoid redundant DOM writes
1507
- this.prevSafeAreaState = { top: false, bottom: false, left: false, right: false };
1508
1500
  this.presented = false;
1509
1501
  /** @internal */
1510
1502
  this.hasController = false;
@@ -1695,10 +1687,7 @@ const Modal = class {
1695
1687
  }
1696
1688
  }
1697
1689
  onWindowResize() {
1698
- // Invalidate safe-area cache on resize (device rotation may change values)
1699
- this.cachedSafeAreas = undefined;
1700
- this.updateSafeAreaOverrides();
1701
- // Only handle view transition for iOS card modals when no custom animations are provided
1690
+ // Only handle resize for iOS card modals when no custom animations are provided
1702
1691
  if (getIonMode(this) !== 'ios' || !this.presentingElement || this.enterAnimation || this.leaveAnimation) {
1703
1692
  return;
1704
1693
  }
@@ -1721,8 +1710,6 @@ const Modal = class {
1721
1710
  this.triggerController.removeClickListener();
1722
1711
  this.cleanupViewTransitionListener();
1723
1712
  this.cleanupParentRemovalObserver();
1724
- // Reset safe-area state to handle removal without dismiss (e.g., framework unmount)
1725
- this.resetSafeAreaState();
1726
1713
  }
1727
1714
  componentWillLoad() {
1728
1715
  var _a;
@@ -1882,8 +1869,6 @@ const Modal = class {
1882
1869
  else if (!this.keepContentsMounted) {
1883
1870
  await waitForMount();
1884
1871
  }
1885
- // Predict safe-area needs based on modal configuration to avoid visual snap
1886
- this.setInitialSafeAreaOverrides(presentingElement);
1887
1872
  writeTask(() => this.el.classList.add('show-modal'));
1888
1873
  const hasCardModal = presentingElement !== undefined;
1889
1874
  /**
@@ -1945,8 +1930,6 @@ const Modal = class {
1945
1930
  else if (hasCardModal) {
1946
1931
  this.initSwipeToClose();
1947
1932
  }
1948
- // Now that animation is complete, update safe-area based on actual position
1949
- this.updateSafeAreaOverrides();
1950
1933
  // Initialize view transition listener for iOS card modals
1951
1934
  this.initViewTransitionListener();
1952
1935
  // Initialize parent removal observer
@@ -1998,7 +1981,7 @@ const Modal = class {
1998
1981
  await this.dismiss(undefined, GESTURE);
1999
1982
  this.gestureAnimationDismissing = false;
2000
1983
  });
2001
- }, () => this.updateSafeAreaOverrides());
1984
+ });
2002
1985
  this.gesture.enable(true);
2003
1986
  }
2004
1987
  initSheetGesture() {
@@ -2019,8 +2002,7 @@ const Modal = class {
2019
2002
  this.currentBreakpoint = breakpoint;
2020
2003
  this.ionBreakpointDidChange.emit({ breakpoint });
2021
2004
  }
2022
- this.updateSafeAreaOverrides();
2023
- }, () => this.updateSafeAreaOverrides());
2005
+ });
2024
2006
  this.gesture = gesture;
2025
2007
  this.moveSheetToBreakpoint = moveSheetToBreakpoint;
2026
2008
  this.gesture.enable(true);
@@ -2098,194 +2080,6 @@ const Modal = class {
2098
2080
  // Clear the cached reference
2099
2081
  this.cachedPageParent = undefined;
2100
2082
  }
2101
- /**
2102
- * Sets initial safe-area overrides based on modal configuration before
2103
- * the modal becomes visible. This predicts whether the modal will touch
2104
- * screen edges to avoid a visual snap after animation completes.
2105
- */
2106
- setInitialSafeAreaOverrides(presentingElement) {
2107
- const style = this.el.style;
2108
- const mode = getIonMode(this);
2109
- const isSheetModal = this.breakpoints !== undefined && this.initialBreakpoint !== undefined;
2110
- // Card modals only exist in iOS mode - in MD mode, presentingElement is ignored
2111
- const isCardModal = presentingElement !== undefined && mode === 'ios';
2112
- const isTablet = window.innerWidth >= 768;
2113
- // Sheet modals always touch bottom edge, never top/left/right
2114
- if (isSheetModal) {
2115
- style.setProperty('--ion-safe-area-top', '0px');
2116
- style.setProperty('--ion-safe-area-left', '0px');
2117
- style.setProperty('--ion-safe-area-right', '0px');
2118
- return;
2119
- }
2120
- // Card modals have rounded top corners
2121
- if (isCardModal) {
2122
- style.setProperty('--ion-safe-area-top', '0px');
2123
- if (isTablet) {
2124
- // On tablets, card modals are inset from all edges
2125
- this.zeroAllSafeAreas();
2126
- }
2127
- else {
2128
- // On phones, card modals still extend to the bottom edge
2129
- style.setProperty('--ion-safe-area-left', '0px');
2130
- style.setProperty('--ion-safe-area-right', '0px');
2131
- this.applyFullscreenSafeArea();
2132
- }
2133
- return;
2134
- }
2135
- // Check if modal is fullscreen via CSS custom properties
2136
- // This applies to both phone and tablet sizes - custom modals may have
2137
- // non-fullscreen dimensions even on phones (e.g., --height: 70%)
2138
- const computedStyle = getComputedStyle(this.el);
2139
- const width = computedStyle.getPropertyValue('--width').trim();
2140
- const height = computedStyle.getPropertyValue('--height').trim();
2141
- const isFullscreen = width === '100%' && height === '100%';
2142
- if (isFullscreen) {
2143
- this.applyFullscreenSafeArea();
2144
- }
2145
- else if (isTablet) {
2146
- // Centered dialog on tablet doesn't touch edges
2147
- this.zeroAllSafeAreas();
2148
- }
2149
- else ;
2150
- }
2151
- /**
2152
- * Applies safe-area handling for fullscreen modals.
2153
- * Adds wrapper padding when no footer is present to prevent
2154
- * content from overlapping system navigation areas.
2155
- */
2156
- applyFullscreenSafeArea() {
2157
- this.skipSafeAreaCoordinateDetection = true;
2158
- this.updateFooterPadding();
2159
- // Watch for dynamic footer additions/removals (e.g., async data loading)
2160
- // Use subtree:true to support wrapped footers in framework components
2161
- // (e.g., <my-footer><ion-footer>...</ion-footer></my-footer>)
2162
- if (!this.footerObserver && win !== undefined && 'MutationObserver' in win) {
2163
- this.footerObserver = new MutationObserver(() => this.updateFooterPadding());
2164
- this.footerObserver.observe(this.el, { childList: true, subtree: true });
2165
- }
2166
- }
2167
- /**
2168
- * Updates wrapper and shadow padding based on footer presence.
2169
- * Called initially and when footer is dynamically added/removed.
2170
- * Both elements must be styled identically to prevent visual mismatches.
2171
- */
2172
- updateFooterPadding() {
2173
- if (!this.wrapperEl)
2174
- return;
2175
- const hasFooter = this.el.querySelector('ion-footer') !== null;
2176
- // Apply to both wrapper and shadow to keep them in sync
2177
- const elements = [this.wrapperEl, this.shadowEl].filter(Boolean);
2178
- if (hasFooter) {
2179
- elements.forEach((el) => {
2180
- el.style.removeProperty('padding-bottom');
2181
- el.style.removeProperty('box-sizing');
2182
- });
2183
- }
2184
- else {
2185
- elements.forEach((el) => {
2186
- el.style.setProperty('padding-bottom', 'var(--ion-safe-area-bottom, 0px)');
2187
- el.style.setProperty('box-sizing', 'border-box');
2188
- });
2189
- }
2190
- }
2191
- /**
2192
- * Sets all safe-area CSS variables to 0px for modals that
2193
- * don't touch screen edges.
2194
- */
2195
- zeroAllSafeAreas() {
2196
- const style = this.el.style;
2197
- style.setProperty('--ion-safe-area-top', '0px');
2198
- style.setProperty('--ion-safe-area-bottom', '0px');
2199
- style.setProperty('--ion-safe-area-left', '0px');
2200
- style.setProperty('--ion-safe-area-right', '0px');
2201
- }
2202
- /**
2203
- * Resets all safe-area related state and styles.
2204
- * Called during dismiss and disconnectedCallback to ensure clean state
2205
- * for re-presentation of inline modals.
2206
- */
2207
- resetSafeAreaState() {
2208
- var _a;
2209
- this.skipSafeAreaCoordinateDetection = false;
2210
- this.cachedSafeAreas = undefined;
2211
- this.prevSafeAreaState = { top: false, bottom: false, left: false, right: false };
2212
- (_a = this.footerObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
2213
- this.footerObserver = undefined;
2214
- // Clear wrapper and shadow styles that may have been set for safe-area handling
2215
- [this.wrapperEl, this.shadowEl].forEach((el) => {
2216
- if (el) {
2217
- el.style.removeProperty('padding-bottom');
2218
- el.style.removeProperty('box-sizing');
2219
- }
2220
- });
2221
- // Clear safe-area CSS variable overrides
2222
- const style = this.el.style;
2223
- style.removeProperty('--ion-safe-area-top');
2224
- style.removeProperty('--ion-safe-area-bottom');
2225
- style.removeProperty('--ion-safe-area-left');
2226
- style.removeProperty('--ion-safe-area-right');
2227
- }
2228
- /**
2229
- * Gets the root safe-area values from the document element.
2230
- * Uses cached values during gestures to avoid getComputedStyle calls.
2231
- */
2232
- getSafeAreaValues() {
2233
- if (!this.cachedSafeAreas) {
2234
- const rootStyle = getComputedStyle(document.documentElement);
2235
- this.cachedSafeAreas = {
2236
- top: parseFloat(rootStyle.getPropertyValue('--ion-safe-area-top')) || 0,
2237
- bottom: parseFloat(rootStyle.getPropertyValue('--ion-safe-area-bottom')) || 0,
2238
- left: parseFloat(rootStyle.getPropertyValue('--ion-safe-area-left')) || 0,
2239
- right: parseFloat(rootStyle.getPropertyValue('--ion-safe-area-right')) || 0,
2240
- };
2241
- }
2242
- return this.cachedSafeAreas;
2243
- }
2244
- /**
2245
- * Updates safe-area CSS variable overrides based on whether the modal
2246
- * extends into each safe-area region. Called after animation
2247
- * and during gestures to handle dynamic position changes.
2248
- *
2249
- * Optimized to avoid redundant DOM writes by tracking previous state.
2250
- */
2251
- updateSafeAreaOverrides() {
2252
- if (this.skipSafeAreaCoordinateDetection) {
2253
- return;
2254
- }
2255
- const wrapper = this.wrapperEl;
2256
- if (!wrapper) {
2257
- return;
2258
- }
2259
- const rect = wrapper.getBoundingClientRect();
2260
- const safeAreas = this.getSafeAreaValues();
2261
- const extendsIntoTop = rect.top < safeAreas.top;
2262
- const extendsIntoBottom = rect.bottom > window.innerHeight - safeAreas.bottom;
2263
- const extendsIntoLeft = rect.left < safeAreas.left;
2264
- const extendsIntoRight = rect.right > window.innerWidth - safeAreas.right;
2265
- // Only update DOM when state actually changes
2266
- const prev = this.prevSafeAreaState;
2267
- const style = this.el.style;
2268
- if (extendsIntoTop !== prev.top) {
2269
- extendsIntoTop ? style.removeProperty('--ion-safe-area-top') : style.setProperty('--ion-safe-area-top', '0px');
2270
- prev.top = extendsIntoTop;
2271
- }
2272
- if (extendsIntoBottom !== prev.bottom) {
2273
- extendsIntoBottom
2274
- ? style.removeProperty('--ion-safe-area-bottom')
2275
- : style.setProperty('--ion-safe-area-bottom', '0px');
2276
- prev.bottom = extendsIntoBottom;
2277
- }
2278
- if (extendsIntoLeft !== prev.left) {
2279
- extendsIntoLeft ? style.removeProperty('--ion-safe-area-left') : style.setProperty('--ion-safe-area-left', '0px');
2280
- prev.left = extendsIntoLeft;
2281
- }
2282
- if (extendsIntoRight !== prev.right) {
2283
- extendsIntoRight
2284
- ? style.removeProperty('--ion-safe-area-right')
2285
- : style.setProperty('--ion-safe-area-right', '0px');
2286
- prev.right = extendsIntoRight;
2287
- }
2288
- }
2289
2083
  sheetOnDismiss() {
2290
2084
  /**
2291
2085
  * While the gesture animation is finishing
@@ -2378,8 +2172,6 @@ const Modal = class {
2378
2172
  }
2379
2173
  this.currentBreakpoint = undefined;
2380
2174
  this.animation = undefined;
2381
- // Reset safe-area state for potential re-presentation
2382
- this.resetSafeAreaState();
2383
2175
  unlock();
2384
2176
  return dismissed;
2385
2177
  }
@@ -2629,20 +2421,20 @@ const Modal = class {
2629
2421
  const isCardModal = presentingElement !== undefined && mode === 'ios';
2630
2422
  const isHandleCycle = handleBehavior === 'cycle';
2631
2423
  const isSheetModalWithHandle = isSheetModal && showHandle;
2632
- return (h(Host, Object.assign({ key: '8f42c71ec9c9270b4218ca7eec57ca998871ac07', "no-router": true,
2424
+ return (h(Host, Object.assign({ key: '978ba9cc81464b2d9b4caaf36285d5f7bf7e568d', "no-router": true,
2633
2425
  // Allow the modal to be navigable when the handle is focusable
2634
2426
  tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
2635
2427
  zIndex: `${20000 + this.overlayIndex}`,
2636
- }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '2f7b08b019c66cbfceacafa9a68b91f8da1f4084', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '6b0d1ae90e8483332f74371be5dcbd0a7b2661ba', class: "modal-shadow", ref: (el) => (this.shadowEl = el) }), h("div", Object.assign({ key: 'c96f671fb25e5de45231ea65ac52500547b2e262',
2428
+ }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), h("ion-backdrop", { key: '9f95566d8e0c06bb9607f514484848c250f35f1f', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '91ff26d4f3ab4367f3a2940f51c6a5a3d4c972c3', class: "modal-shadow" }), h("div", Object.assign({ key: '064b2dba13854505a4eb1f5e54296ac79cb7a2bd',
2637
2429
  /*
2638
2430
  role and aria-modal must be used on the
2639
2431
  same element. They must also be set inside the
2640
2432
  shadow DOM otherwise ion-button will not be highlighted
2641
2433
  when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
2642
2434
  */
2643
- role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: 'e07419b01a588c0ba62ed9607c843cac7bd26337', class: "modal-handle",
2435
+ role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: 'b579b08b114022032d078a527111456ceefc7b35', class: "modal-handle",
2644
2436
  // Prevents the handle from receiving keyboard focus when it does not cycle
2645
- tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '65f35079df8eb8b6cd262e3a08297866715ce7ea', onSlotchange: this.onSlotChange }))));
2437
+ tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: 'dacea58475b72d9c0209934ff31f3be6b9ac8c85', onSlotchange: this.onSlotChange }))));
2646
2438
  }
2647
2439
  get el() { return getElement(this); }
2648
2440
  static get watchers() { return {
@@ -895,7 +895,7 @@ const Nav = class {
895
895
  }
896
896
  }
897
897
  render() {
898
- return h("slot", { key: '8067c9835d255daec61f33dba200fd3a6ff839a0' });
898
+ return h("slot", { key: 'a549286b51b1bb23c9ef51f71148452228d0ab14' });
899
899
  }
900
900
  get el() { return getElement(this); }
901
901
  static get watchers() { return {
@@ -937,7 +937,7 @@ const NavLink = class {
937
937
  };
938
938
  }
939
939
  render() {
940
- return h(Host, { key: '6dbb1ad4f351e9215375aac11ab9b53762e07a08', onClick: this.onClick });
940
+ return h(Host, { key: 'd4d80feb51c0d92b0bedf6952c892f9df3002046', onClick: this.onClick });
941
941
  }
942
942
  get el() { return getElement(this); }
943
943
  };
@@ -97,10 +97,10 @@ const PickerColumnOption = class {
97
97
  render() {
98
98
  const { color, disabled, ariaLabel } = this;
99
99
  const mode = getIonMode(this);
100
- return (h(Host, { key: 'f816729941aabcb31ddfdce3ffe2e2139030d715', class: createColorClasses(color, {
100
+ return (h(Host, { key: 'c45a1c14a351bf57d7113671164852349be5aa8a', class: createColorClasses(color, {
101
101
  [mode]: true,
102
102
  ['option-disabled']: disabled,
103
- }) }, h("div", { key: 'd942de84fd14d7dc06b1e5cf4f7920d1dc3c6371', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, h("slot", { key: 'b0df5717b42209e649097209a01476e1a66f5c5c' }))));
103
+ }) }, h("div", { key: '824930b658c6e3fb493ac4c6c2451d38c6bc4829', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, h("slot", { key: '019df4dcf46e629bdbebcd46ed3ab29669feab27' }))));
104
104
  }
105
105
  get el() { return getElement(this); }
106
106
  static get watchers() { return {
@@ -658,8 +658,6 @@ const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyW
658
658
  let bottom;
659
659
  let originX = contentOriginX;
660
660
  let originY = contentOriginY;
661
- let checkSafeAreaTop = false;
662
- let checkSafeAreaBottom = false;
663
661
  let checkSafeAreaLeft = false;
664
662
  let checkSafeAreaRight = false;
665
663
  const triggerTop = triggerCoordinates
@@ -704,18 +702,10 @@ const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyW
704
702
  * We chose 12 here so that the popover position looks a bit nicer as
705
703
  * it is not right up against the edge of the screen.
706
704
  */
707
- top = Math.max(bodyPadding, triggerTop - contentHeight - triggerHeight - (arrowHeight - 1));
705
+ top = Math.max(12, triggerTop - contentHeight - triggerHeight - (arrowHeight - 1));
708
706
  arrowTop = top + contentHeight;
709
707
  originY = 'bottom';
710
708
  addPopoverBottomClass = true;
711
- /**
712
- * If the popover is positioned near the top edge, account for safe area.
713
- * This ensures the popover doesn't overlap with status bars or notches.
714
- */
715
- if (top <= bodyPadding + safeAreaMargin) {
716
- checkSafeAreaTop = true;
717
- top = bodyPadding;
718
- }
719
709
  /**
720
710
  * If not enough room for popover to appear
721
711
  * above trigger, then cut it off.
@@ -723,35 +713,14 @@ const calculateWindowAdjustment = (side, coordTop, coordLeft, bodyPadding, bodyW
723
713
  }
724
714
  else {
725
715
  bottom = bodyPadding;
726
- /**
727
- * When the popover is pinned to the bottom, account for safe area.
728
- * This ensures the popover doesn't overlap with home indicators
729
- * or navigation bars (e.g., Android API 36+ edge-to-edge).
730
- */
731
- checkSafeAreaBottom = true;
732
716
  }
733
717
  }
734
- /**
735
- * Final check: If the popover extends into any safe-area region,
736
- * ensure the corresponding flag is set regardless of side.
737
- * This handles cases where a side-positioned popover (left/right)
738
- * still needs bottom safe-area padding because it extends into that region.
739
- */
740
- const popoverBottom = bottom !== undefined ? bodyHeight - bottom : top + contentHeight;
741
- if (popoverBottom + safeAreaMargin > bodyHeight) {
742
- checkSafeAreaBottom = true;
743
- }
744
- if (top < safeAreaMargin) {
745
- checkSafeAreaTop = true;
746
- }
747
718
  return {
748
719
  top,
749
720
  left,
750
721
  bottom,
751
722
  originX,
752
723
  originY,
753
- checkSafeAreaTop,
754
- checkSafeAreaBottom,
755
724
  checkSafeAreaLeft,
756
725
  checkSafeAreaRight,
757
726
  arrowTop,
@@ -812,7 +781,7 @@ const iosEnterAnimation = (baseEl, opts) => {
812
781
  const results = getPopoverPosition(isRTL, contentWidth, contentHeight, arrowWidth, arrowHeight, reference, side, align, defaultPosition, trigger, ev);
813
782
  const padding = size === 'cover' ? 0 : POPOVER_IOS_BODY_PADDING;
814
783
  const margin = size === 'cover' ? 0 : 25;
815
- const { originX, originY, top, left, bottom, checkSafeAreaTop, checkSafeAreaBottom, checkSafeAreaLeft, checkSafeAreaRight, arrowTop, arrowLeft, addPopoverBottomClass, } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, margin, results.originX, results.originY, results.referenceCoordinates, results.arrowTop, results.arrowLeft, arrowHeight);
784
+ const { originX, originY, top, left, bottom, checkSafeAreaLeft, checkSafeAreaRight, arrowTop, arrowLeft, addPopoverBottomClass, } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, margin, results.originX, results.originY, results.referenceCoordinates, results.arrowTop, results.arrowLeft, arrowHeight);
816
785
  const baseAnimation = createAnimation();
817
786
  const backdropAnimation = createAnimation();
818
787
  const contentAnimation = createAnimation();
@@ -842,35 +811,19 @@ const iosEnterAnimation = (baseEl, opts) => {
842
811
  if (addPopoverBottomClass) {
843
812
  baseEl.classList.add('popover-bottom');
844
813
  }
845
- /**
846
- * Safe area CSS variable adjustments.
847
- * When the popover is positioned near an edge, we add the corresponding
848
- * safe-area inset to ensure the popover doesn't overlap with system UI
849
- * (status bars, home indicators, navigation bars on Android API 36+, etc.)
850
- */
851
- const safeAreaTop = ' + var(--ion-safe-area-top, 0)';
852
- const safeAreaBottom = ' + var(--ion-safe-area-bottom, 0)';
814
+ if (bottom !== undefined) {
815
+ contentEl.style.setProperty('bottom', `${bottom}px`);
816
+ }
853
817
  const safeAreaLeft = ' + var(--ion-safe-area-left, 0)';
854
818
  const safeAreaRight = ' - var(--ion-safe-area-right, 0)';
855
- let topValue = `${top}px`;
856
- let bottomValue = bottom !== undefined ? `${bottom}px` : undefined;
857
819
  let leftValue = `${left}px`;
858
- if (checkSafeAreaTop) {
859
- topValue = `${top}px${safeAreaTop}`;
860
- }
861
- if (checkSafeAreaBottom && bottomValue !== undefined) {
862
- bottomValue = `${bottom}px${safeAreaBottom}`;
863
- }
864
820
  if (checkSafeAreaLeft) {
865
821
  leftValue = `${left}px${safeAreaLeft}`;
866
822
  }
867
823
  if (checkSafeAreaRight) {
868
824
  leftValue = `${left}px${safeAreaRight}`;
869
825
  }
870
- if (bottomValue !== undefined) {
871
- contentEl.style.setProperty('bottom', `calc(${bottomValue})`);
872
- }
873
- contentEl.style.setProperty('top', `calc(${topValue} + var(--offset-y, 0))`);
826
+ contentEl.style.setProperty('top', `calc(${top}px + var(--offset-y, 0))`);
874
827
  contentEl.style.setProperty('left', `calc(${leftValue} + var(--offset-x, 0))`);
875
828
  contentEl.style.setProperty('transform-origin', `${originY} ${originX}`);
876
829
  if (arrowEl !== null) {
@@ -946,32 +899,7 @@ const mdEnterAnimation = (baseEl, opts) => {
946
899
  };
947
900
  const results = getPopoverPosition(isRTL, contentWidth, contentHeight, 0, 0, reference, side, align, defaultPosition, trigger, ev);
948
901
  const padding = size === 'cover' ? 0 : POPOVER_MD_BODY_PADDING;
949
- const { originX, originY, top, left, bottom, checkSafeAreaTop, checkSafeAreaBottom, checkSafeAreaLeft, checkSafeAreaRight, } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, 0, results.originX, results.originY, results.referenceCoordinates);
950
- /**
951
- * Safe area CSS variable adjustments.
952
- * When the popover is positioned near an edge, we add the corresponding
953
- * safe-area inset to ensure the popover doesn't overlap with system UI
954
- * (status bars, home indicators, navigation bars on Android API 36+, etc.)
955
- */
956
- const safeAreaTop = ' + var(--ion-safe-area-top, 0)';
957
- const safeAreaBottom = ' + var(--ion-safe-area-bottom, 0)';
958
- const safeAreaLeft = ' + var(--ion-safe-area-left, 0)';
959
- const safeAreaRight = ' - var(--ion-safe-area-right, 0)';
960
- let topValue = `${top}px`;
961
- let bottomValue = bottom !== undefined ? `${bottom}px` : undefined;
962
- let leftValue = `${left}px`;
963
- if (checkSafeAreaTop) {
964
- topValue = `${top}px${safeAreaTop}`;
965
- }
966
- if (checkSafeAreaBottom && bottomValue !== undefined) {
967
- bottomValue = `${bottom}px${safeAreaBottom}`;
968
- }
969
- if (checkSafeAreaLeft) {
970
- leftValue = `${left}px${safeAreaLeft}`;
971
- }
972
- if (checkSafeAreaRight) {
973
- leftValue = `${left}px${safeAreaRight}`;
974
- }
902
+ const { originX, originY, top, left, bottom } = calculateWindowAdjustment(side, results.top, results.left, padding, bodyWidth, bodyHeight, contentWidth, contentHeight, 0, results.originX, results.originY, results.referenceCoordinates);
975
903
  const baseAnimation = createAnimation();
976
904
  const backdropAnimation = createAnimation();
977
905
  const wrapperAnimation = createAnimation();
@@ -988,13 +916,13 @@ const mdEnterAnimation = (baseEl, opts) => {
988
916
  contentAnimation
989
917
  .addElement(contentEl)
990
918
  .beforeStyles({
991
- top: `calc(${topValue} + var(--offset-y, 0px))`,
992
- left: `calc(${leftValue} + var(--offset-x, 0px))`,
919
+ top: `calc(${top}px + var(--offset-y, 0px))`,
920
+ left: `calc(${left}px + var(--offset-x, 0px))`,
993
921
  'transform-origin': `${originY} ${originX}`,
994
922
  })
995
923
  .beforeAddWrite(() => {
996
- if (bottomValue !== undefined) {
997
- contentEl.style.setProperty('bottom', `calc(${bottomValue})`);
924
+ if (bottom !== undefined) {
925
+ contentEl.style.setProperty('bottom', `${bottom}px`);
998
926
  }
999
927
  })
1000
928
  .fromTo('transform', 'scale(0.8)', 'scale(1)');
@@ -1492,9 +1420,9 @@ const Popover = class {
1492
1420
  const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
1493
1421
  const desktop = isPlatform('desktop');
1494
1422
  const enableArrow = arrow && !parentPopover;
1495
- return (h(Host, Object.assign({ key: '42863f748c93f709d433931d969230137b37d42d', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
1423
+ return (h(Host, Object.assign({ key: '2edd8333c630efbce59071f8a383e4326e928dbc', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
1496
1424
  zIndex: `${20000 + this.overlayIndex}`,
1497
- }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: '22b6d82178b52158b76ab3fd9a7dd738fd6e4bbf', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'b76335c64e992a964ed3fb91d17a992c3474b4cd', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '018c846c32e7ff7fa010528e6b37a17e5f03c84c', class: "popover-arrow", part: "arrow" }), h("div", { key: '350c468c80052da3a07768bceab98fe159c35a43', class: "popover-content", part: "content" }, h("slot", { key: '686443c17ac9873d33905c1cdb67e6d6da675282' })))));
1425
+ }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && h("ion-backdrop", { key: 'aac4e68b08197534375e8ea3f8c9ea0c10ab2af4', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'b7f4ebf57d4148b32856b0075d286f454be8de5d', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '607d94c28d73e8e957175a7c0f6e8a99ec4dcd53', class: "popover-arrow", part: "arrow" }), h("div", { key: '4366a5a5de550c09895e923f345583508e1ec30c', class: "popover-content", part: "content" }, h("slot", { key: 'eb7886fbc99c15b667b7d825d24f1c12d9380f03' })))));
1498
1426
  }
1499
1427
  get el() { return getElement(this); }
1500
1428
  static get watchers() { return {
@@ -40,7 +40,7 @@ const ProgressBar = class {
40
40
  const mode = getIonMode(this);
41
41
  // If the progress is displayed as a solid bar.
42
42
  const progressSolid = buffer === 1;
43
- return (h(Host, { key: 'dc69693b5d2dcb2b6e4296d7cb85bc27507f3fa6', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
43
+ return (h(Host, { key: 'c859e48f3d24a458239e36d925e5dc003ed07c6b', role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: createColorClasses(color, {
44
44
  [mode]: true,
45
45
  [`progress-bar-${type}`]: true,
46
46
  'progress-paused': paused,
@@ -136,7 +136,7 @@ const Radio = class {
136
136
  const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
137
137
  const mode = getIonMode(this);
138
138
  const inItem = hostContext('ion-item', el);
139
- return (h(Host, { key: '3353b28172b7f837d4b38964169b5b5f4ba02788', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
139
+ return (h(Host, { key: 'af5dc59ed528150872e907ed1036e3e2decba939', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
140
140
  [mode]: true,
141
141
  'in-item': inItem,
142
142
  'radio-checked': checked,
@@ -147,10 +147,10 @@ const Radio = class {
147
147
  // Focus and active styling should not apply when the radio is in an item
148
148
  'ion-activatable': !inItem,
149
149
  'ion-focusable': !inItem,
150
- }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '418a0a48366ff900e97da123abf665bbbda87fb7', class: "radio-wrapper" }, h("div", { key: '6e5acdd8c8f5d0ad26632a65396afef8094153d1', class: {
150
+ }), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '1312aba3259a87fe23a6911cdfa477e309469c8b', class: "radio-wrapper" }, h("div", { key: 'b342aa27e240a300836d2a135658d346b95daf09', class: {
151
151
  'label-text-wrapper': true,
152
152
  'label-text-wrapper-hidden': !hasLabel,
153
- }, part: "label" }, h("slot", { key: '10b157162cd283d624153c747679609cf0bbf11e' })), h("div", { key: '4c45cca95cb105cd6df1025a26e3c045272184a0', class: "native-wrapper" }, this.renderRadioControl()))));
153
+ }, part: "label" }, h("slot", { key: '0a4613d29aa783d1882cf889377f7e4fd4fea51d' })), h("div", { key: '191faea79dc4cd8befc4b873f5bd9f5af8ca2acc', class: "native-wrapper" }, this.renderRadioControl()))));
154
154
  }
155
155
  get el() { return getElement(this); }
156
156
  static get watchers() { return {
@@ -403,7 +403,7 @@ const RadioGroup = class {
403
403
  const { label, labelId, el, name, value } = this;
404
404
  const mode = getIonMode(this);
405
405
  renderHiddenInput(true, el, name, value, false);
406
- return (h(Host, { key: 'db593b3ed511e9395e3c7bfd91b787328692cd6d', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, class: mode }, this.renderHintText(), h("div", { key: '85045b45a0100a45f3b9a35d1c5a25ec63d525c4', class: "radio-group-wrapper" }, h("slot", { key: '53dacb87ce62398e78771fb2efaf839ab922d946' }))));
406
+ return (h(Host, { key: 'db593b3ed511e9395e3c7bfd91b787328692cd6d', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, class: mode }, this.renderHintText(), h("slot", { key: 'd683b01c1ba34fe843c4b320bce4661a117472a5' })));
407
407
  }
408
408
  get el() { return getElement(this); }
409
409
  static get watchers() { return {