@ionic/core 8.6.3-dev.11751378808.12cc4a5c → 8.6.3-nightly.20250619

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 (84) hide show
  1. package/components/action-sheet.js +9 -8
  2. package/components/alert.js +8 -7
  3. package/components/ion-app.js +1 -3
  4. package/components/ion-datetime.js +2 -8
  5. package/components/ion-loading.js +8 -7
  6. package/components/ion-menu.js +5 -27
  7. package/components/ion-reorder-group.js +2 -1
  8. package/components/ion-router.js +0 -1
  9. package/components/ion-searchbar.js +6 -4
  10. package/components/ion-toast.js +7 -6
  11. package/components/modal.js +14 -242
  12. package/components/popover.js +7 -8
  13. package/dist/cjs/ion-action-sheet.cjs.entry.js +9 -8
  14. package/dist/cjs/ion-alert.cjs.entry.js +8 -7
  15. package/dist/cjs/ion-app_8.cjs.entry.js +1 -3
  16. package/dist/cjs/ion-datetime_3.cjs.entry.js +2 -8
  17. package/dist/cjs/ion-loading.cjs.entry.js +8 -7
  18. package/dist/cjs/ion-menu_3.cjs.entry.js +5 -27
  19. package/dist/cjs/ion-modal.cjs.entry.js +14 -242
  20. package/dist/cjs/ion-popover.cjs.entry.js +7 -8
  21. package/dist/cjs/ion-reorder_2.cjs.entry.js +2 -1
  22. package/dist/cjs/ion-route_4.cjs.entry.js +0 -1
  23. package/dist/cjs/ion-searchbar.cjs.entry.js +6 -4
  24. package/dist/cjs/ion-toast.cjs.entry.js +7 -6
  25. package/dist/collection/components/action-sheet/action-sheet.js +12 -11
  26. package/dist/collection/components/alert/alert.js +11 -10
  27. package/dist/collection/components/app/app.js +3 -8
  28. package/dist/collection/components/datetime/datetime.js +8 -23
  29. package/dist/collection/components/loading/loading.js +11 -10
  30. package/dist/collection/components/menu/menu.js +19 -62
  31. package/dist/collection/components/modal/animations/ios.enter.js +2 -2
  32. package/dist/collection/components/modal/animations/ios.leave.js +2 -2
  33. package/dist/collection/components/modal/modal.js +16 -118
  34. package/dist/collection/components/popover/popover.js +14 -18
  35. package/dist/collection/components/reorder-group/reorder-group.js +3 -2
  36. package/dist/collection/components/router/router.js +1 -5
  37. package/dist/collection/components/searchbar/searchbar.js +7 -5
  38. package/dist/collection/components/toast/toast.js +10 -9
  39. package/dist/docs.json +72 -138
  40. package/dist/esm/ion-action-sheet.entry.js +9 -8
  41. package/dist/esm/ion-alert.entry.js +8 -7
  42. package/dist/esm/ion-app_8.entry.js +1 -3
  43. package/dist/esm/ion-datetime_3.entry.js +2 -8
  44. package/dist/esm/ion-loading.entry.js +8 -7
  45. package/dist/esm/ion-menu_3.entry.js +5 -27
  46. package/dist/esm/ion-modal.entry.js +14 -242
  47. package/dist/esm/ion-popover.entry.js +7 -8
  48. package/dist/esm/ion-reorder_2.entry.js +2 -1
  49. package/dist/esm/ion-route_4.entry.js +0 -1
  50. package/dist/esm/ion-searchbar.entry.js +6 -4
  51. package/dist/esm/ion-toast.entry.js +7 -6
  52. package/dist/ionic/ionic.esm.js +1 -1
  53. package/dist/ionic/{p-b758a177.entry.js → p-2020aa51.entry.js} +1 -1
  54. package/dist/ionic/p-29759454.entry.js +4 -0
  55. package/dist/ionic/{p-e37d6c67.entry.js → p-3a4feac2.entry.js} +1 -1
  56. package/dist/ionic/{p-2d0eccfb.entry.js → p-6b666996.entry.js} +1 -1
  57. package/dist/ionic/p-7149db7e.entry.js +4 -0
  58. package/dist/ionic/{p-01123ecf.entry.js → p-96389029.entry.js} +1 -1
  59. package/dist/ionic/{p-0d131a02.entry.js → p-9e699d4a.entry.js} +1 -1
  60. package/dist/ionic/p-bec79123.entry.js +4 -0
  61. package/dist/ionic/{p-03d21728.entry.js → p-cb787a4b.entry.js} +1 -1
  62. package/dist/ionic/{p-d8429eb4.entry.js → p-cd12ed1c.entry.js} +1 -1
  63. package/dist/ionic/{p-5f671887.entry.js → p-ead42a37.entry.js} +1 -1
  64. package/dist/types/components/action-sheet/action-sheet.d.ts +6 -5
  65. package/dist/types/components/alert/alert.d.ts +6 -5
  66. package/dist/types/components/app/app.d.ts +0 -2
  67. package/dist/types/components/datetime/datetime.d.ts +0 -6
  68. package/dist/types/components/loading/loading.d.ts +6 -5
  69. package/dist/types/components/menu/menu.d.ts +3 -25
  70. package/dist/types/components/modal/modal.d.ts +6 -20
  71. package/dist/types/components/popover/popover.d.ts +5 -6
  72. package/dist/types/components/reorder-group/reorder-group.d.ts +1 -0
  73. package/dist/types/components/router/router.d.ts +0 -1
  74. package/dist/types/components/searchbar/searchbar.d.ts +2 -0
  75. package/dist/types/components/toast/toast.d.ts +5 -4
  76. package/dist/types/components.d.ts +18 -32
  77. package/hydrate/index.js +69 -322
  78. package/hydrate/index.mjs +69 -322
  79. package/package.json +3 -3
  80. package/dist/collection/components/modal/animations/ios.transition.js +0 -143
  81. package/dist/ionic/p-69f91268.entry.js +0 -4
  82. package/dist/ionic/p-6f74a187.entry.js +0 -4
  83. package/dist/ionic/p-b9ba04ca.entry.js +0 -4
  84. package/dist/types/components/modal/animations/ios.transition.d.ts +0 -14
@@ -242,7 +242,7 @@ const Menu = class {
242
242
  return Promise.resolve(this._isOpen);
243
243
  }
244
244
  /**
245
- * Returns `true` if the menu is active.
245
+ * Returns `true` is the menu is active.
246
246
  *
247
247
  * A menu is active when it can be opened or closed, meaning it's enabled
248
248
  * and it's not part of a `ion-split-pane`.
@@ -253,10 +253,6 @@ const Menu = class {
253
253
  /**
254
254
  * Opens the menu. If the menu is already open or it can't be opened,
255
255
  * it returns `false`.
256
- *
257
- * @param animated If `true`, the menu will animate when opening.
258
- * If `false`, the menu will open instantly without animation.
259
- * Defaults to `true`.
260
256
  */
261
257
  open(animated = true) {
262
258
  return this.setOpen(true, animated);
@@ -264,38 +260,20 @@ const Menu = class {
264
260
  /**
265
261
  * Closes the menu. If the menu is already closed or it can't be closed,
266
262
  * it returns `false`.
267
- *
268
- * @param animated If `true`, the menu will animate when closing. If `false`,
269
- * the menu will close instantly without animation. Defaults to `true`.
270
- * @param role The role of the element that is closing the menu.
271
- * This can be useful in a button handler for determining which button was
272
- * clicked to close the menu. Some examples include:
273
- * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
274
263
  */
275
264
  close(animated = true, role) {
276
265
  return this.setOpen(false, animated, role);
277
266
  }
278
267
  /**
279
- * Toggles the menu. If the menu is already open, it will try to close,
280
- * otherwise it will try to open it.
268
+ * Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it.
281
269
  * If the operation can't be completed successfully, it returns `false`.
282
- *
283
- * @param animated If `true`, the menu will animate when opening/closing.
284
- * If `false`, the menu will open/close instantly without animation.
285
- * Defaults to `true`.
286
270
  */
287
271
  toggle(animated = true) {
288
272
  return this.setOpen(!this._isOpen, animated);
289
273
  }
290
274
  /**
291
- * Opens or closes the menu.
275
+ * Opens or closes the button.
292
276
  * If the operation can't be completed successfully, it returns `false`.
293
- *
294
- * @param shouldOpen If `true`, the menu will open. If `false`, the menu
295
- * will close.
296
- * @param animated If `true`, the menu will animate when opening/closing.
297
- * If `false`, the menu will open/close instantly without animation.
298
- * @param role The role of the element that is closing the menu.
299
277
  */
300
278
  setOpen(shouldOpen, animated = true, role) {
301
279
  return index$1.menuController._setOpen(this, shouldOpen, animated, role);
@@ -660,14 +638,14 @@ const Menu = class {
660
638
  * the ionBackButton listener in the menu controller
661
639
  * will handle closing the menu when Escape is pressed.
662
640
  */
663
- return (index.h(index.Host, { key: 'a5c75aa40a34530b56ee3b98d706a5ac5ae300de', onKeyDown: hardwareBackButton.shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
641
+ return (index.h(index.Host, { key: '9e4ae9476a76781f1d228395c9af9e1c39ec82bb', onKeyDown: hardwareBackButton.shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
664
642
  [mode]: true,
665
643
  [`menu-type-${type}`]: true,
666
644
  'menu-enabled': !disabled,
667
645
  [`menu-side-${side}`]: true,
668
646
  'menu-pane-visible': isPaneVisible,
669
647
  'split-pane-side': theme.hostContext('ion-split-pane', el),
670
- } }, index.h("div", { key: '3f5f70acd4d3ed6bb445122f4f01d73db738a75f', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, index.h("slot", { key: '3161326c9330e7f7441299c428b87a91b31a83e9' })), index.h("ion-backdrop", { key: '917b50f38489bdf03d0c642af8b4e4e172c7dc4c', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
648
+ } }, index.h("div", { key: 'c6153589d872ac7e3fdf5eedfdb858eb64ccd713', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, index.h("slot", { key: '9994aac4b22f17db34c9b8b2aa56b8710b9df645' })), index.h("ion-backdrop", { key: 'f09ac30cc4dd2dcb10628965e659dae5a23baf98', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
671
649
  }
672
650
  get el() { return index.getElement(this); }
673
651
  static get watchers() { return {
@@ -589,7 +589,7 @@ const iosEnterAnimation = (baseEl, opts) => {
589
589
  baseAnimation.addAnimation(contentAnimation);
590
590
  }
591
591
  if (presentingEl) {
592
- const isPortrait = window.innerWidth < 768;
592
+ const isMobile = window.innerWidth < 768;
593
593
  const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
594
594
  const presentingElRoot = helpers.getElementRoot(presentingEl);
595
595
  const presentingAnimation = animation.createAnimation().beforeStyles({
@@ -598,7 +598,7 @@ const iosEnterAnimation = (baseEl, opts) => {
598
598
  overflow: 'hidden',
599
599
  });
600
600
  const bodyEl = document.body;
601
- if (isPortrait) {
601
+ if (isMobile) {
602
602
  /**
603
603
  * Fallback for browsers that does not support `max()` (ex: Firefox)
604
604
  * No need to worry about statusbar padding since engines like Gecko
@@ -676,7 +676,7 @@ const iosLeaveAnimation = (baseEl, opts, duration = 500) => {
676
676
  .duration(duration)
677
677
  .addAnimation(wrapperAnimation);
678
678
  if (presentingEl) {
679
- const isPortrait = window.innerWidth < 768;
679
+ const isMobile = window.innerWidth < 768;
680
680
  const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
681
681
  const presentingElRoot = helpers.getElementRoot(presentingEl);
682
682
  const presentingAnimation = animation.createAnimation()
@@ -694,7 +694,7 @@ const iosLeaveAnimation = (baseEl, opts, duration = 500) => {
694
694
  }
695
695
  });
696
696
  const bodyEl = document.body;
697
- if (isPortrait) {
697
+ if (isMobile) {
698
698
  const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
699
699
  const modalTransform = hasCardModal ? '-10px' : transformOffset;
700
700
  const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
@@ -741,144 +741,6 @@ const iosLeaveAnimation = (baseEl, opts, duration = 500) => {
741
741
  return baseAnimation;
742
742
  };
743
743
 
744
- /**
745
- * Transition animation from portrait view to landscape view
746
- * This handles the case where a card modal is open in portrait view
747
- * and the user switches to landscape view
748
- */
749
- const portraitToLandscapeTransition = (baseEl, opts, duration = 300) => {
750
- const { presentingEl } = opts;
751
- if (!presentingEl) {
752
- // No transition needed for non-card modals
753
- return animation.createAnimation('portrait-to-landscape-transition');
754
- }
755
- const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
756
- const presentingElRoot = helpers.getElementRoot(presentingEl);
757
- const bodyEl = document.body;
758
- const baseAnimation = animation.createAnimation('portrait-to-landscape-transition')
759
- .addElement(baseEl)
760
- .easing('cubic-bezier(0.32,0.72,0,1)')
761
- .duration(duration);
762
- const presentingAnimation = animation.createAnimation().beforeStyles({
763
- transform: 'translateY(0)',
764
- 'transform-origin': 'top center',
765
- overflow: 'hidden',
766
- });
767
- if (!hasCardModal) {
768
- // Non-card modal: transition from portrait state to landscape state
769
- // Portrait: presentingEl has transform and body has black background
770
- // Landscape: no transform, no body background, modal wrapper opacity changes
771
- const root = helpers.getElementRoot(baseEl);
772
- const wrapperAnimation = animation.createAnimation()
773
- .addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow'))
774
- .fromTo('opacity', '1', '1'); // Keep wrapper visible in landscape
775
- const backdropAnimation = animation.createAnimation()
776
- .addElement(root.querySelector('ion-backdrop'))
777
- .fromTo('opacity', 'var(--backdrop-opacity)', 'var(--backdrop-opacity)'); // Keep backdrop visible
778
- // Animate presentingEl from portrait state back to normal
779
- const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
780
- const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
781
- const fromTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
782
- presentingAnimation
783
- .addElement(presentingEl)
784
- .afterStyles({
785
- transform: 'translateY(0px) scale(1)',
786
- 'border-radius': '0px',
787
- })
788
- .beforeAddWrite(() => bodyEl.style.setProperty('background-color', ''))
789
- .fromTo('transform', fromTransform, 'translateY(0px) scale(1)')
790
- .fromTo('filter', 'contrast(0.85)', 'contrast(1)')
791
- .fromTo('border-radius', '10px 10px 0 0', '0px');
792
- baseAnimation.addAnimation([presentingAnimation, wrapperAnimation, backdropAnimation]);
793
- }
794
- else {
795
- // Card modal: transition from portrait card state to landscape card state
796
- const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
797
- const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
798
- const fromTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
799
- const toTransform = `translateY(-10px) scale(${toPresentingScale})`;
800
- presentingAnimation
801
- .addElement(presentingElRoot.querySelector('.modal-wrapper'))
802
- .fromTo('transform', fromTransform, toTransform)
803
- .fromTo('filter', 'contrast(0.85)', 'contrast(0.85)'); // Keep same contrast for card
804
- const shadowAnimation = animation.createAnimation()
805
- .addElement(presentingElRoot.querySelector('.modal-shadow'))
806
- .fromTo('opacity', '0', '0') // Shadow stays hidden in landscape for card modals
807
- .fromTo('transform', fromTransform, toTransform);
808
- baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
809
- }
810
- return baseAnimation;
811
- };
812
- /**
813
- * Transition animation from landscape view to portrait view
814
- * This handles the case where a card modal is open in landscape view
815
- * and the user switches to portrait view
816
- */
817
- const landscapeToPortraitTransition = (baseEl, opts, duration = 300) => {
818
- const { presentingEl } = opts;
819
- if (!presentingEl) {
820
- // No transition needed for non-card modals
821
- return animation.createAnimation('landscape-to-portrait-transition');
822
- }
823
- const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
824
- const presentingElRoot = helpers.getElementRoot(presentingEl);
825
- const bodyEl = document.body;
826
- const baseAnimation = animation.createAnimation('landscape-to-portrait-transition')
827
- .addElement(baseEl)
828
- .easing('cubic-bezier(0.32,0.72,0,1)')
829
- .duration(duration);
830
- const presentingAnimation = animation.createAnimation().beforeStyles({
831
- transform: 'translateY(0)',
832
- 'transform-origin': 'top center',
833
- overflow: 'hidden',
834
- });
835
- if (!hasCardModal) {
836
- // Non-card modal: transition from landscape state to portrait state
837
- const root = helpers.getElementRoot(baseEl);
838
- const wrapperAnimation = animation.createAnimation()
839
- .addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow'))
840
- .fromTo('opacity', '1', '1'); // Keep wrapper visible
841
- const backdropAnimation = animation.createAnimation()
842
- .addElement(root.querySelector('ion-backdrop'))
843
- .fromTo('opacity', 'var(--backdrop-opacity)', 'var(--backdrop-opacity)'); // Keep backdrop visible
844
- // Animate presentingEl from normal state to portrait state
845
- const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
846
- const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
847
- const toTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
848
- presentingAnimation
849
- .addElement(presentingEl)
850
- .afterStyles({
851
- transform: toTransform,
852
- 'border-radius': '10px 10px 0 0',
853
- filter: 'contrast(0.85)',
854
- overflow: 'hidden',
855
- 'transform-origin': 'top center',
856
- })
857
- .beforeAddWrite(() => bodyEl.style.setProperty('background-color', 'black'))
858
- .fromTo('transform', 'translateY(0px) scale(1)', toTransform)
859
- .fromTo('filter', 'contrast(1)', 'contrast(0.85)')
860
- .fromTo('border-radius', '0px', '10px 10px 0 0');
861
- baseAnimation.addAnimation([presentingAnimation, wrapperAnimation, backdropAnimation]);
862
- }
863
- else {
864
- // Card modal: transition from landscape card state to portrait card state
865
- const toPresentingScale = SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
866
- const transformOffset = !CSS.supports('width', 'max(0px, 1px)') ? '30px' : 'max(30px, var(--ion-safe-area-top))';
867
- const fromTransform = `translateY(-10px) scale(${toPresentingScale})`;
868
- const toTransform = `translateY(${transformOffset}) scale(${toPresentingScale})`;
869
- presentingAnimation
870
- .addElement(presentingElRoot.querySelector('.modal-wrapper'))
871
- .fromTo('transform', fromTransform, toTransform)
872
- .fromTo('filter', 'contrast(0.85)', 'contrast(0.85)'); // Keep same contrast for card
873
- const shadowAnimation = animation.createAnimation()
874
- .addElement(presentingElRoot.querySelector('.modal-shadow'))
875
- .fromTo('opacity', '0', '0') // Shadow stays hidden
876
- .fromTo('transform', fromTransform, toTransform);
877
- baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
878
- }
879
- return baseAnimation;
880
- };
881
-
882
744
  const createEnterAnimation = () => {
883
745
  const backdropAnimation = animation.createAnimation()
884
746
  .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
@@ -1622,17 +1484,6 @@ const Modal = class {
1622
1484
  el.dispatchEvent(ev);
1623
1485
  }
1624
1486
  };
1625
- /**
1626
- * When the modal receives focus directly, pass focus to the handle
1627
- * if it exists and is focusable, otherwise let the focus trap handle it.
1628
- */
1629
- this.onModalFocus = (ev) => {
1630
- const { dragHandleEl, el } = this;
1631
- // Only handle focus if the modal itself was focused (not a child element)
1632
- if (ev.target === el && dragHandleEl && dragHandleEl.tabIndex !== -1) {
1633
- dragHandleEl.focus();
1634
- }
1635
- };
1636
1487
  }
1637
1488
  onIsOpenChange(newValue, oldValue) {
1638
1489
  if (newValue === true && oldValue === false) {
@@ -1660,7 +1511,6 @@ const Modal = class {
1660
1511
  }
1661
1512
  disconnectedCallback() {
1662
1513
  this.triggerController.removeClickListener();
1663
- this.cleanupViewTransitionListener();
1664
1514
  }
1665
1515
  componentWillLoad() {
1666
1516
  var _a;
@@ -1871,8 +1721,6 @@ const Modal = class {
1871
1721
  else if (hasCardModal) {
1872
1722
  this.initSwipeToClose();
1873
1723
  }
1874
- // Initialize view transition listener for iOS card modals
1875
- this.initViewTransitionListener();
1876
1724
  unlock();
1877
1725
  }
1878
1726
  initSwipeToClose() {
@@ -1967,13 +1815,13 @@ const Modal = class {
1967
1815
  }
1968
1816
  /**
1969
1817
  * Dismiss the modal overlay after it has been presented.
1818
+ *
1819
+ * @param data Any data to emit in the dismiss events.
1820
+ * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.
1821
+ *
1970
1822
  * This is a no-op if the overlay has not been presented yet. If you want
1971
1823
  * to remove an overlay from the DOM that was never presented, use the
1972
1824
  * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
1973
- *
1974
- * @param data Any data to emit in the dismiss events.
1975
- * @param role The role of the element that is dismissing the modal.
1976
- * For example, `cancel` or `backdrop`.
1977
1825
  */
1978
1826
  async dismiss(data, role) {
1979
1827
  var _a;
@@ -2026,7 +1874,6 @@ const Modal = class {
2026
1874
  if (this.gesture) {
2027
1875
  this.gesture.destroy();
2028
1876
  }
2029
- this.cleanupViewTransitionListener();
2030
1877
  }
2031
1878
  this.currentBreakpoint = undefined;
2032
1879
  this.animation = undefined;
@@ -2046,10 +1893,8 @@ const Modal = class {
2046
1893
  return overlays.eventMethod(this.el, 'ionModalWillDismiss');
2047
1894
  }
2048
1895
  /**
2049
- * Move a sheet style modal to a specific breakpoint.
2050
- *
2051
- * @param breakpoint The breakpoint value to move the sheet modal to.
2052
- * Must be a value defined in your `breakpoints` array.
1896
+ * Move a sheet style modal to a specific breakpoint. The breakpoint value must
1897
+ * be a value defined in your `breakpoints` array.
2053
1898
  */
2054
1899
  async setCurrentBreakpoint(breakpoint) {
2055
1900
  if (!this.isSheetModal) {
@@ -2102,97 +1947,24 @@ const Modal = class {
2102
1947
  await this.setCurrentBreakpoint(nextBreakpoint);
2103
1948
  return true;
2104
1949
  }
2105
- initViewTransitionListener() {
2106
- // Only enable for iOS card modals when no custom animations are provided
2107
- if (index$3.getIonMode(this) !== 'ios' || !this.presentingElement || this.enterAnimation || this.leaveAnimation) {
2108
- return;
2109
- }
2110
- // Set initial view state
2111
- this.currentViewIsPortrait = window.innerWidth < 768;
2112
- // Create debounced resize handler
2113
- let resizeTimeout;
2114
- this.resizeListener = () => {
2115
- clearTimeout(resizeTimeout);
2116
- resizeTimeout = setTimeout(() => {
2117
- this.handleViewTransition();
2118
- }, 100); // Debounce for 100ms to avoid excessive calls
2119
- };
2120
- window.addEventListener('resize', this.resizeListener);
2121
- }
2122
- handleViewTransition() {
2123
- const isPortrait = window.innerWidth < 768;
2124
- // Only transition if view state actually changed
2125
- if (this.currentViewIsPortrait === isPortrait) {
2126
- return;
2127
- }
2128
- // Cancel any ongoing transition animation
2129
- if (this.viewTransitionAnimation) {
2130
- this.viewTransitionAnimation.destroy();
2131
- this.viewTransitionAnimation = undefined;
2132
- }
2133
- const { presentingElement } = this;
2134
- if (!presentingElement) {
2135
- return;
2136
- }
2137
- // Create transition animation
2138
- let transitionAnimation;
2139
- if (this.currentViewIsPortrait && !isPortrait) {
2140
- // Portrait to landscape transition
2141
- transitionAnimation = portraitToLandscapeTransition(this.el, {
2142
- presentingEl: presentingElement});
2143
- }
2144
- else {
2145
- // Landscape to portrait transition
2146
- transitionAnimation = landscapeToPortraitTransition(this.el, {
2147
- presentingEl: presentingElement});
2148
- }
2149
- // Update state and play animation
2150
- this.currentViewIsPortrait = isPortrait;
2151
- this.viewTransitionAnimation = transitionAnimation;
2152
- transitionAnimation.play().then(() => {
2153
- this.viewTransitionAnimation = undefined;
2154
- });
2155
- }
2156
- cleanupViewTransitionListener() {
2157
- const hasCardView = !!this.resizeListener;
2158
- if (this.resizeListener) {
2159
- window.removeEventListener('resize', this.resizeListener);
2160
- this.resizeListener = undefined;
2161
- }
2162
- if (this.viewTransitionAnimation) {
2163
- this.viewTransitionAnimation.destroy();
2164
- this.viewTransitionAnimation = undefined;
2165
- }
2166
- if (hasCardView) {
2167
- // If we had a card view, let's trigger the view transition
2168
- // one last time to make sure we're in the right state.
2169
- // This will prevent tricky things like resizing the modal causing
2170
- // it to dismiss programatically too quickly and preventing the view transition
2171
- // from being applied.
2172
- this.handleViewTransition();
2173
- }
2174
- }
2175
1950
  render() {
2176
1951
  const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = this;
2177
1952
  const showHandle = handle !== false && isSheetModal;
2178
1953
  const mode = index$3.getIonMode(this);
2179
1954
  const isCardModal = presentingElement !== undefined && mode === 'ios';
2180
1955
  const isHandleCycle = handleBehavior === 'cycle';
2181
- const isSheetModalWithHandle = isSheetModal && showHandle;
2182
- return (index$3.h(index$3.Host, Object.assign({ key: '857fbf50b5d0b43c1f1a335d740649cedf1d6e2b', "no-router": true,
2183
- // Allow the modal to be navigable when the handle is focusable
2184
- tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
1956
+ return (index$3.h(index$3.Host, Object.assign({ key: '0bcbdcfcd7d890eb599da3f97f21c317d34f8e0e', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
2185
1957
  zIndex: `${20000 + this.overlayIndex}`,
2186
- }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), index$3.h("ion-backdrop", { key: '07b6143d368748194e4b209b48c7d9efbeed12e0', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && index$3.h("div", { key: '14eaf25ad683ca5c7369e69908ea93401dd5536b', class: "modal-shadow" }), index$3.h("div", Object.assign({ key: '9b996da27066c8dfdce8fcf3abdff65948010b5e',
1958
+ }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle }), index$3.h("ion-backdrop", { key: 'd72159e73daa5af7349aa9e8f695aa435eb43069', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && index$3.h("div", { key: 'fd2d9b13676ae72473881649a397b6eacde03a03', class: "modal-shadow" }), index$3.h("div", Object.assign({ key: '908eccb1ad982dcde2dbcff0cbb18b6e60f8ba74',
2187
1959
  /*
2188
1960
  role and aria-modal must be used on the
2189
1961
  same element. They must also be set inside the
2190
1962
  shadow DOM otherwise ion-button will not be highlighted
2191
1963
  when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
2192
1964
  */
2193
- role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (index$3.h("button", { key: 'd3b429aa40e094548a5eeaa295f4cb1b1f921339', class: "modal-handle",
1965
+ role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (index$3.h("button", { key: '332dc0b40363a77c7be62331d9f26def91c790e9', class: "modal-handle",
2194
1966
  // Prevents the handle from receiving keyboard focus when it does not cycle
2195
- tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), index$3.h("slot", { key: '86160fcdf92d6ca2a9afe5c801efb89c32ce2cc1' }))));
1967
+ tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), index$3.h("slot", { key: 'c32698350193c450327e97049daf8b8d1fda0d0e' }))));
2196
1968
  }
2197
1969
  get el() { return index$3.getElement(this); }
2198
1970
  static get watchers() { return {
@@ -1263,8 +1263,6 @@ const Popover = class {
1263
1263
  * Developers can pass a mouse, touch, or pointer event
1264
1264
  * to position the popover relative to where that event
1265
1265
  * was dispatched.
1266
- *
1267
- * @param event The event to position the popover relative to.
1268
1266
  */
1269
1267
  async present(event) {
1270
1268
  const unlock = await this.lockController.lock();
@@ -1328,14 +1326,15 @@ const Popover = class {
1328
1326
  }
1329
1327
  /**
1330
1328
  * Dismiss the popover overlay after it has been presented.
1331
- * This is a no-op if the overlay has not been presented yet. If you want
1332
- * to remove an overlay from the DOM that was never presented, use the
1333
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
1334
1329
  *
1335
1330
  * @param data Any data to emit in the dismiss events.
1336
- * @param role The role of the element that is dismissing the popover. For example, `cancel` or `backdrop`.
1331
+ * @param role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'.
1337
1332
  * @param dismissParentPopover If `true`, dismissing this popover will also dismiss
1338
1333
  * a parent popover if this popover is nested. Defaults to `true`.
1334
+ *
1335
+ * This is a no-op if the overlay has not been presented yet. If you want
1336
+ * to remove an overlay from the DOM that was never presented, use the
1337
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
1339
1338
  */
1340
1339
  async dismiss(data, role, dismissParentPopover = true) {
1341
1340
  const unlock = await this.lockController.lock();
@@ -1387,9 +1386,9 @@ const Popover = class {
1387
1386
  const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
1388
1387
  const desktop = index.isPlatform('desktop');
1389
1388
  const enableArrow = arrow && !parentPopover;
1390
- return (index.h(index.Host, Object.assign({ key: '16866c02534968c982cf4730d2936d03a5107c8b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
1389
+ return (index.h(index.Host, Object.assign({ key: '1de4862099cfcb5035e78008e6dc7c1371846f9a', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
1391
1390
  zIndex: `${20000 + this.overlayIndex}`,
1392
- }, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && index.h("ion-backdrop", { key: '0df258601a4d30df3c27aa8234a7d5e056c3ecbb', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), index.h("div", { key: 'f94e80ed996b957b5cd09b826472b4f60e8fcc78', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && index.h("div", { key: '185ce22f6386e8444a9cc7b8818dbfc16c463c99', class: "popover-arrow", part: "arrow" }), index.h("div", { key: '206202b299404e110de5397b229678cca18568d3', class: "popover-content", part: "content" }, index.h("slot", { key: 'ee543a0b92d6e35a837c0a0e4617c7b0fc4ad0b0' })))));
1391
+ }, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && index.h("ion-backdrop", { key: '981aa4e0102cb93312ffbd8243cdf2a0cdc60469', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), index.h("div", { key: '1a28ed55e9d34ef78cf0eb0178643301fd2dd75d', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && index.h("div", { key: '1c206ea5eb3c0b5883a3d45c34cd22dd5ffe4b65', class: "popover-arrow", part: "arrow" }), index.h("div", { key: '5ba561486a328c0c7ab825995fdbfb7a196429a4', class: "popover-content", part: "content" }, index.h("slot", { key: '00fc244ce9dcc2dfc677e6c34b7c8e7a330b2b03' })))));
1393
1392
  }
1394
1393
  get el() { return index.getElement(this); }
1395
1394
  static get watchers() { return {
@@ -92,6 +92,7 @@ const ReorderGroup = class {
92
92
  }
93
93
  /**
94
94
  * Completes the reorder operation. Must be called by the `ionItemReorder` event.
95
+ *
95
96
  * If a list of items is passed, the list will be reordered and returned in the
96
97
  * proper order.
97
98
  *
@@ -278,7 +279,7 @@ const ReorderGroup = class {
278
279
  }
279
280
  render() {
280
281
  const mode = index.getIonMode(this);
281
- return (index.h(index.Host, { key: 'dfcdc3a6aa1b2fba15f861ec868d6a11e667c9de', class: {
282
+ return (index.h(index.Host, { key: 'f30613b361c5c3095b7928a92fb4b1e8d6eff600', class: {
282
283
  [mode]: true,
283
284
  'reorder-enabled': !this.disabled,
284
285
  'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
@@ -676,7 +676,6 @@ const Router = class {
676
676
  *
677
677
  * @param path The path to navigate to.
678
678
  * @param direction The direction of the animation. Defaults to `"forward"`.
679
- * @param animation A custom animation to use for the transition.
680
679
  */
681
680
  async push(path, direction = 'forward', animation) {
682
681
  var _a;
@@ -257,8 +257,10 @@ const Searchbar = class {
257
257
  /**
258
258
  * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global
259
259
  * `input.focus()`.
260
+ *
260
261
  * Developers who wish to focus an input when a page enters
261
262
  * should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.
263
+ *
262
264
  * Developers who wish to focus an input when an overlay is presented
263
265
  * should call `setFocus` after `didPresent` has resolved.
264
266
  *
@@ -437,8 +439,8 @@ const Searchbar = class {
437
439
  const clearIcon = this.clearIcon || (mode === 'ios' ? index$1.closeCircle : index$1.closeSharp);
438
440
  const searchIcon = this.searchIcon || (mode === 'ios' ? index$1.searchOutline : index$1.searchSharp);
439
441
  const shouldShowCancelButton = this.shouldShowCancelButton();
440
- const cancelButton = this.showCancelButton !== 'never' && (index.h("button", { key: '19e18775856db87daeb4b9e3d7bca0461915a0df', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, index.h("div", { key: 'b3bbdcc033f3bd3441d619e4a252cef0dad4d07e', "aria-hidden": "true" }, mode === 'md' ? (index.h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
441
- return (index.h(index.Host, { key: '074aa60e051bfb3225e87d44bbb6346c59c73574', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
442
+ const cancelButton = this.showCancelButton !== 'never' && (index.h("button", { key: '5835c36fcb0b52aec956538202a783f6c194d853', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, index.h("div", { key: '85df41676bed611467bd4df0002b08baee4f539c', "aria-hidden": "true" }, mode === 'md' ? (index.h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
443
+ return (index.h(index.Host, { key: 'e1e30cdd79f9f54d5f2d27501012358bc46880e5', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
442
444
  [mode]: true,
443
445
  'searchbar-animated': animated,
444
446
  'searchbar-disabled': this.disabled,
@@ -448,14 +450,14 @@ const Searchbar = class {
448
450
  'searchbar-has-focus': this.focused,
449
451
  'searchbar-should-show-clear': this.shouldShowClearButton(),
450
452
  'searchbar-should-show-cancel': this.shouldShowCancelButton(),
451
- }) }, index.h("div", { key: '54f58a79fe36e85d9295157303f1be89c98bbdaf', class: "searchbar-input-container" }, index.h("input", Object.assign({ key: 'f991a37fcf54d26b7ad10d89084764e03d97b9de', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, index.h("ion-icon", { key: '8b44dd90a3292c5cf872ef16a8520675f5673494', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), index.h("button", { key: '79d9cfed8f01268044f82811a35d323a12dca749', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
453
+ }) }, index.h("div", { key: '7e9db147282a35bb1e3c9c6125b9a044e81ddde5', class: "searchbar-input-container" }, index.h("input", Object.assign({ key: '02f08da21326b78d6cd249d54deab96fd8472ba8', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, index.h("ion-icon", { key: '048b00348456bd827ae734491c46a67bfb146227', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), index.h("button", { key: '71f64339bbfd54ebd26a0946c8ee9d726cd89c04', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
452
454
  /**
453
455
  * This prevents mobile browsers from
454
456
  * blurring the input when the clear
455
457
  * button is activated.
456
458
  */
457
459
  ev.preventDefault();
458
- }, onClick: () => this.onClearInput(true) }, index.h("ion-icon", { key: 'aa3b9fa8a61f853236783ac7bcd0b113ea65ece2', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
460
+ }, onClick: () => this.onClearInput(true) }, index.h("ion-icon", { key: '9b1a177b21951c1c95897a468b34bb7bbd63d137', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
459
461
  }
460
462
  get el() { return index.getElement(this); }
461
463
  static get watchers() { return {
@@ -674,15 +674,16 @@ const Toast = class {
674
674
  }
675
675
  /**
676
676
  * Dismiss the toast overlay after it has been presented.
677
- * This is a no-op if the overlay has not been presented yet. If you want
678
- * to remove an overlay from the DOM that was never presented, use the
679
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
680
677
  *
681
678
  * @param data Any data to emit in the dismiss events.
682
679
  * @param role The role of the element that is dismissing the toast.
683
680
  * This can be useful in a button handler for determining which button was
684
681
  * clicked to dismiss the toast.
685
- * Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
682
+ * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
683
+ *
684
+ * This is a no-op if the overlay has not been presented yet. If you want
685
+ * to remove an overlay from the DOM that was never presented, use the
686
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
686
687
  */
687
688
  async dismiss(data, role) {
688
689
  var _a, _b;
@@ -850,9 +851,9 @@ const Toast = class {
850
851
  if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
851
852
  index$1.printIonWarning('[ion-toast] - This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
852
853
  }
853
- return (index$1.h(index$1.Host, Object.assign({ key: 'd1ecd90c87700aad4685e230cdd430aa286b8791', tabindex: "-1" }, this.htmlAttributes, { style: {
854
+ return (index$1.h(index$1.Host, Object.assign({ key: '425be734aee0eeef281ab1609a9f982ce8b5e852', tabindex: "-1" }, this.htmlAttributes, { style: {
854
855
  zIndex: `${60000 + this.overlayIndex}`,
855
- }, class: theme.createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), index$1.h("div", { key: '4bfc863417324de69e222054d5cf9c452038b41e', class: wrapperClass }, index$1.h("div", { key: '3417940afec0392e81b7d54c7cb00f3ab6c30d47', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (index$1.h("ion-icon", { key: '6bf878fbc85c01e1e5faa9d97d46255a6511a952', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), index$1.h("div", { key: '54b500348a9c37660c3aff37436d9188e4374947', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
856
+ }, class: theme.createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), index$1.h("div", { key: '7c3ad1a8df9e21fc30fc179c7edebeabcf3c6874', class: wrapperClass }, index$1.h("div", { key: 'f950c21e8d7bf92653e0bd52e820ed6b84fa8cf5', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (index$1.h("ion-icon", { key: '0266241927dbe16799adb57f9fc11bd5372877b2', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), index$1.h("div", { key: '9ef4b87bad672af6a5b693af61375564daf1eeeb', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
856
857
  }
857
858
  get el() { return index$1.getElement(this); }
858
859
  static get watchers() { return {