@ionic/core 8.6.2 → 8.6.3-dev.11750971489.140836b0

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 (80) hide show
  1. package/components/action-sheet.js +8 -9
  2. package/components/alert.js +7 -8
  3. package/components/ion-app.js +3 -1
  4. package/components/ion-datetime.js +8 -2
  5. package/components/ion-loading.js +7 -8
  6. package/components/ion-menu.js +27 -5
  7. package/components/ion-reorder-group.js +1 -2
  8. package/components/ion-router.js +1 -0
  9. package/components/ion-searchbar.js +4 -6
  10. package/components/ion-toast.js +6 -7
  11. package/components/modal.js +26 -10
  12. package/components/popover.js +8 -7
  13. package/dist/cjs/ion-action-sheet.cjs.entry.js +8 -9
  14. package/dist/cjs/ion-alert.cjs.entry.js +7 -8
  15. package/dist/cjs/ion-app_8.cjs.entry.js +3 -1
  16. package/dist/cjs/ion-datetime_3.cjs.entry.js +8 -2
  17. package/dist/cjs/ion-loading.cjs.entry.js +7 -8
  18. package/dist/cjs/ion-menu_3.cjs.entry.js +27 -5
  19. package/dist/cjs/ion-modal.cjs.entry.js +26 -10
  20. package/dist/cjs/ion-popover.cjs.entry.js +8 -7
  21. package/dist/cjs/ion-reorder_2.cjs.entry.js +1 -2
  22. package/dist/cjs/ion-route_4.cjs.entry.js +1 -0
  23. package/dist/cjs/ion-searchbar.cjs.entry.js +4 -6
  24. package/dist/cjs/ion-toast.cjs.entry.js +6 -7
  25. package/dist/collection/components/action-sheet/action-sheet.js +11 -12
  26. package/dist/collection/components/alert/alert.js +10 -11
  27. package/dist/collection/components/app/app.js +8 -3
  28. package/dist/collection/components/datetime/datetime.js +23 -8
  29. package/dist/collection/components/loading/loading.js +10 -11
  30. package/dist/collection/components/menu/menu.js +62 -19
  31. package/dist/collection/components/modal/modal.js +35 -16
  32. package/dist/collection/components/popover/popover.js +18 -14
  33. package/dist/collection/components/reorder-group/reorder-group.js +2 -3
  34. package/dist/collection/components/router/router.js +5 -1
  35. package/dist/collection/components/searchbar/searchbar.js +5 -7
  36. package/dist/collection/components/toast/toast.js +9 -10
  37. package/dist/docs.json +138 -72
  38. package/dist/esm/ion-action-sheet.entry.js +8 -9
  39. package/dist/esm/ion-alert.entry.js +7 -8
  40. package/dist/esm/ion-app_8.entry.js +3 -1
  41. package/dist/esm/ion-datetime_3.entry.js +8 -2
  42. package/dist/esm/ion-loading.entry.js +7 -8
  43. package/dist/esm/ion-menu_3.entry.js +27 -5
  44. package/dist/esm/ion-modal.entry.js +26 -10
  45. package/dist/esm/ion-popover.entry.js +8 -7
  46. package/dist/esm/ion-reorder_2.entry.js +1 -2
  47. package/dist/esm/ion-route_4.entry.js +1 -0
  48. package/dist/esm/ion-searchbar.entry.js +4 -6
  49. package/dist/esm/ion-toast.entry.js +6 -7
  50. package/dist/ionic/ionic.esm.js +1 -1
  51. package/dist/ionic/{p-96389029.entry.js → p-01123ecf.entry.js} +1 -1
  52. package/dist/ionic/{p-cb787a4b.entry.js → p-03d21728.entry.js} +1 -1
  53. package/dist/ionic/{p-9e699d4a.entry.js → p-0d131a02.entry.js} +1 -1
  54. package/dist/ionic/{p-6b666996.entry.js → p-2d0eccfb.entry.js} +1 -1
  55. package/dist/ionic/{p-ead42a37.entry.js → p-5f671887.entry.js} +1 -1
  56. package/dist/ionic/p-69f91268.entry.js +4 -0
  57. package/dist/ionic/p-9e32212d.entry.js +4 -0
  58. package/dist/ionic/{p-2020aa51.entry.js → p-b758a177.entry.js} +1 -1
  59. package/dist/ionic/p-b9ba04ca.entry.js +4 -0
  60. package/dist/ionic/{p-cd12ed1c.entry.js → p-d8429eb4.entry.js} +1 -1
  61. package/dist/ionic/{p-3a4feac2.entry.js → p-e37d6c67.entry.js} +1 -1
  62. package/dist/types/components/action-sheet/action-sheet.d.ts +5 -6
  63. package/dist/types/components/alert/alert.d.ts +5 -6
  64. package/dist/types/components/app/app.d.ts +2 -0
  65. package/dist/types/components/datetime/datetime.d.ts +6 -0
  66. package/dist/types/components/loading/loading.d.ts +5 -6
  67. package/dist/types/components/menu/menu.d.ts +25 -3
  68. package/dist/types/components/modal/modal.d.ts +14 -6
  69. package/dist/types/components/popover/popover.d.ts +6 -5
  70. package/dist/types/components/reorder-group/reorder-group.d.ts +0 -1
  71. package/dist/types/components/router/router.d.ts +1 -0
  72. package/dist/types/components/searchbar/searchbar.d.ts +0 -2
  73. package/dist/types/components/toast/toast.d.ts +4 -5
  74. package/dist/types/components.d.ts +32 -18
  75. package/hydrate/index.js +106 -65
  76. package/hydrate/index.mjs +106 -65
  77. package/package.json +1 -1
  78. package/dist/ionic/p-29759454.entry.js +0 -4
  79. package/dist/ionic/p-7149db7e.entry.js +0 -4
  80. package/dist/ionic/p-bec79123.entry.js +0 -4
@@ -187,16 +187,15 @@ const ActionSheet = class {
187
187
  }
188
188
  /**
189
189
  * Dismiss the action sheet overlay after it has been presented.
190
+ * This is a no-op if the overlay has not been presented yet. If you want
191
+ * to remove an overlay from the DOM that was never presented, use the
192
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
190
193
  *
191
194
  * @param data Any data to emit in the dismiss events.
192
195
  * @param role The role of the element that is dismissing the action sheet.
193
196
  * This can be useful in a button handler for determining which button was
194
- * clicked to dismiss the action sheet.
195
- * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
196
- *
197
- * This is a no-op if the overlay has not been presented yet. If you want
198
- * to remove an overlay from the DOM that was never presented, use the
199
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
197
+ * clicked to dismiss the action sheet. Some examples include:
198
+ * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
200
199
  */
201
200
  async dismiss(data, role) {
202
201
  const unlock = await this.lockController.lock();
@@ -308,12 +307,12 @@ const ActionSheet = class {
308
307
  const cancelButton = allButtons.find((b) => b.role === 'cancel');
309
308
  const buttons = allButtons.filter((b) => b.role !== 'cancel');
310
309
  const headerID = `action-sheet-${overlayIndex}-header`;
311
- return (h(Host, Object.assign({ key: '7bbd202ca9e19727e7514abbe073687d982f80c3', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
310
+ return (h(Host, Object.assign({ key: '9fef156b2a1f09ca4a6c1fe1f37c374139bde03c', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
312
311
  zIndex: `${20000 + this.overlayIndex}`,
313
- }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '23344a9221a2e6720d7b9de5249dc37256cafa7b', tappable: this.backdropDismiss }), h("div", { key: 'fbc2ba15549c2ab04e759e82df6e177fd80cc0a6', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '748ee5235d0b4cb26d6f1b7589f77af2e37ad28a', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '7ce5fa236cf75e9b1e49c4725c9a811078706554', class: "action-sheet-container" }, h("div", { key: 'dc2251f3bcee4a93e3449f09621cbd2b65d329e9', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { key: '48d325c8a852f56ed57a9ada1a6709d05ba32ee2', id: headerID, class: {
312
+ }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), h("ion-backdrop", { key: '81cf3f7d19864e041813987b46d2d115b8466819', tappable: this.backdropDismiss }), h("div", { key: '791c6a976683646fc306a42c15c5078b6f06a45f', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'a350b489ef7852eab9dc2227ce6d92da27dd9bf9', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '69ba51ee13510c1a411d87cb4845b11b7302a36f', class: "action-sheet-container" }, h("div", { key: 'bded15b8306c36591e526f0f99e1eeabcbab3915', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { key: '06b5147c0f6d9180fe8f12e75c9b4a0310226adc', id: headerID, class: {
314
313
  'action-sheet-title': true,
315
314
  'action-sheet-has-sub-title': this.subHeader !== undefined,
316
- } }, header, this.subHeader && h("div", { key: '66093728052eb67f37a35f3232761ce4a08896f3', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { key: 'f4eb8e3e2885b85af5080df18d0de0bdd1d719de', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: '169f4eb09255aba85062baad49ceb151239fbfb7' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: '25fb8a466dd67ea94c79cfb4f9965527e1ce6d42', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: 'eb5b071e120a2c86afdf967af6a763a43044d1ca', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: '452ad7e1052b2c681e2d98de8193949755ad4d54' })))))), h("div", { key: 'e1cecf280c987c050d9445e2c458b903f153089b', tabindex: "0", "aria-hidden": "true" })));
315
+ } }, header, this.subHeader && h("div", { key: '54874362a75c679aba803bf4f8768f5404d2dd28', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), h("span", { class: "action-sheet-button-inner" }, b.icon && h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", null))))), cancelButton && (h("div", { key: '67b0de298eb424f3dea846a841b7a06d70e3930d', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: 'e7e3f9a5495eea9b97dbf885ef36944f2e420eff' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: 'f889d29ed6c3d14bbc1d805888351d87f5122377', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: '7c05cf424b38c37fd40aaeb42a494387291571fb', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: 'bed927b477dc2708a5123ef560274fca9819b3d6' })))))), h("div", { key: 'c5df1b11dc15a93892d57065d3dd5fbe02e43b39', tabindex: "0", "aria-hidden": "true" })));
317
316
  }
318
317
  get el() { return getElement(this); }
319
318
  static get watchers() { return {
@@ -357,16 +357,15 @@ const Alert = class {
357
357
  }
358
358
  /**
359
359
  * Dismiss the alert overlay after it has been presented.
360
+ * This is a no-op if the overlay has not been presented yet. If you want
361
+ * to remove an overlay from the DOM that was never presented, use the
362
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
360
363
  *
361
364
  * @param data Any data to emit in the dismiss events.
362
365
  * @param role The role of the element that is dismissing the alert.
363
366
  * This can be useful in a button handler for determining which button was
364
- * clicked to dismiss the alert.
365
- * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
366
- *
367
- * This is a no-op if the overlay has not been presented yet. If you want
368
- * to remove an overlay from the DOM that was never presented, use the
369
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
367
+ * clicked to dismiss the alert. Some examples include:
368
+ * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
370
369
  */
371
370
  async dismiss(data, role) {
372
371
  const unlock = await this.lockController.lock();
@@ -536,9 +535,9 @@ const Alert = class {
536
535
  * If neither are defined, do not set aria-labelledby.
537
536
  */
538
537
  const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
539
- return (h(Host, { key: 'f8ee04fe6a97a2585b302c8e1a9eea3b122e3479', tabindex: "-1", style: {
538
+ return (h(Host, { key: '6025440b9cd369d4fac89e7e4296c84a10a0b8e0', tabindex: "-1", style: {
540
539
  zIndex: `${20000 + overlayIndex}`,
541
- }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: 'e9592e879f51c27ef20016beec12c986be632cf3', tappable: this.backdropDismiss }), h("div", { key: '5e9425c3c8acdea6f8006389689c73220e2ce423', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: '615465703e357619681fc36ed7276591a6fe3787', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), h("div", { key: '934eba3759456cd4660e10f274edc7859f908461', class: "alert-head" }, header && (h("h2", { key: '7d5d98d71f81f59a2cba227121b6fa01e6cc53b6', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: 'e5f5d35748c58a98ee933eb15cb1dcaf8113e9a7', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: 'a5cb89ca02bfa9c4828e694cb0835493a9088b05', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: 'cacffc31c911882df73e6845d15c8bb2d4acab56', tabindex: "0", "aria-hidden": "true" })));
540
+ }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: '3cd5ca8b99cb95b11dd22ab41a820d841142896f', tappable: this.backdropDismiss }), h("div", { key: '4cc62ae6e21424057d22aeef1e8fc77011e77cd5', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: '364057a69f25aa88904df17bdcf7e5bf714e7830', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), h("div", { key: '78694e3c0db2d408df3899fb1a90859bcc8d14cc', class: "alert-head" }, header && (h("h2", { key: 'ec88ff3e4e1ea871b5975133fdcf4cac38b05e0f', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '9b09bc8bb68af255ef8b7d22587acc946148e544', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: '99abe815f75d2df7f1b77c0df9f3436724fea76f', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: 'a43d0c22c0e46b1ef911f92ffeb253d7911b85f7', tabindex: "0", "aria-hidden": "true" })));
542
541
  }
543
542
  get el() { return getElement(this); }
544
543
  static get watchers() { return {
@@ -70,6 +70,8 @@ const App = class {
70
70
  * a result of another user action. (Ex: We focus the first element
71
71
  * inside of a popover when the user presents it, but the popover is not always
72
72
  * presented as a result of keyboard action.)
73
+ *
74
+ * @param elements An array of HTML elements to set focus on.
73
75
  */
74
76
  async setFocus(elements) {
75
77
  if (this.focusVisible) {
@@ -78,7 +80,7 @@ const App = class {
78
80
  }
79
81
  render() {
80
82
  const mode = getIonMode(this);
81
- return (h(Host, { key: '03aa892f986330078d112b1e8b010df98fa7e39e', class: {
83
+ return (h(Host, { key: '9be440c65819e4fa67c2c3c6477ab40b3ad3eed3', class: {
82
84
  [mode]: true,
83
85
  'ion-page': true,
84
86
  'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
@@ -992,6 +992,8 @@ const Datetime = class {
992
992
  * Confirms the selected datetime value, updates the
993
993
  * `value` property, and optionally closes the popover
994
994
  * or modal that the datetime was presented in.
995
+ *
996
+ * @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
995
997
  */
996
998
  async confirm(closeOverlay = false) {
997
999
  const { isCalendarPicker, activeParts, preferWheel, workingParts } = this;
@@ -1025,6 +1027,8 @@ const Datetime = class {
1025
1027
  * Resets the internal state of the datetime but does not update the value.
1026
1028
  * Passing a valid ISO-8601 string will reset the state of the component to the provided date.
1027
1029
  * If no value is provided, the internal state will be reset to the clamped value of the min, max and today.
1030
+ *
1031
+ * @param startDate A valid [ISO-8601 string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#date_time_string_format) to reset the datetime state to.
1028
1032
  */
1029
1033
  async reset(startDate) {
1030
1034
  this.processValue(startDate);
@@ -1034,6 +1038,8 @@ const Datetime = class {
1034
1038
  * optionally closes the popover
1035
1039
  * or modal that the datetime was
1036
1040
  * presented in.
1041
+ *
1042
+ * @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
1037
1043
  */
1038
1044
  async cancel(closeOverlay = false) {
1039
1045
  this.ionCancel.emit();
@@ -1847,7 +1853,7 @@ const Datetime = class {
1847
1853
  const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
1848
1854
  const hasWheelVariant = hasDatePresentation && preferWheel;
1849
1855
  renderHiddenInput(true, el, name, formatValue(value), disabled);
1850
- return (h(Host, { key: '7ea46c27aa5fb01b748dd4d6eb2340ad13f65175', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
1856
+ return (h(Host, { key: '79677f5bc0fb32fb68569636bd76e68238e62eb8', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
1851
1857
  [mode]: true,
1852
1858
  ['datetime-readonly']: readonly,
1853
1859
  ['datetime-disabled']: disabled,
@@ -1857,7 +1863,7 @@ const Datetime = class {
1857
1863
  [`datetime-size-${size}`]: true,
1858
1864
  [`datetime-prefer-wheel`]: hasWheelVariant,
1859
1865
  [`datetime-grid`]: isGridStyle,
1860
- })) }, h("div", { key: '6964378424c58b053e23279d08eaedf28dfcc315', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
1866
+ })) }, h("div", { key: 'bf07b1e3c64af6e837663ff470bea93787a6e86f', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
1861
1867
  }
1862
1868
  get el() { return getElement(this); }
1863
1869
  static get watchers() { return {
@@ -225,16 +225,15 @@ const Loading = class {
225
225
  }
226
226
  /**
227
227
  * Dismiss the loading overlay after it has been presented.
228
+ * This is a no-op if the overlay has not been presented yet. If you want
229
+ * to remove an overlay from the DOM that was never presented, use the
230
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
228
231
  *
229
232
  * @param data Any data to emit in the dismiss events.
230
233
  * @param role The role of the element that is dismissing the loading.
231
234
  * This can be useful in a button handler for determining which button was
232
- * clicked to dismiss the loading.
233
- * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
234
- *
235
- * This is a no-op if the overlay has not been presented yet. If you want
236
- * to remove an overlay from the DOM that was never presented, use the
237
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
235
+ * clicked to dismiss the loading. Some examples include:
236
+ * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
238
237
  */
239
238
  async dismiss(data, role) {
240
239
  const unlock = await this.lockController.lock();
@@ -276,9 +275,9 @@ const Loading = class {
276
275
  * Otherwise, don't set aria-labelledby.
277
276
  */
278
277
  const ariaLabelledBy = message !== undefined ? msgId : null;
279
- return (h(Host, Object.assign({ key: '6369ed244c06c39aa338141bffacf7a861d7da1a', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
278
+ return (h(Host, Object.assign({ key: '4497183ce220242abe19ae15f328f9a92ccafbbc', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
280
279
  zIndex: `${40000 + this.overlayIndex}`,
281
- }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '1fd5fd8581d59eec321e534f9116f3ec0501010a', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'b4028045b0c8fbb9946136d85d939d55120b867c', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'b045fb0e61cc28e8163d45be18b431918dc27c80', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '2cf9df796f987d1251b3599d10a48ed87a1d0eb9', class: "loading-spinner" }, h("ion-spinner", { key: '371cd41655402326adcb1e2fe1481009a83243b2', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '2a5e5e66d22ee4c1cef0c93815ef023d47e7a8eb', tabindex: "0", "aria-hidden": "true" })));
280
+ }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: '231dec84e424a2dc358ce95b84d6035cf43e4dea', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: 'c9af29b6e6bb49a217396a5c874bbfb8835a926c', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'a8659863743cdeccbe1ba810eaabfd3ebfcb86f3', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '3b346f39bc71691bd8686556a1e142198a7b12fa', class: "loading-spinner" }, h("ion-spinner", { key: '8dc2bf1556e5138e262827f1516c59ecd09f3520', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '054164c0dbae9a0e0973dd3c8e28f5b771820310', tabindex: "0", "aria-hidden": "true" })));
282
281
  }
283
282
  get el() { return getElement(this); }
284
283
  static get watchers() { return {
@@ -240,7 +240,7 @@ const Menu = class {
240
240
  return Promise.resolve(this._isOpen);
241
241
  }
242
242
  /**
243
- * Returns `true` is the menu is active.
243
+ * Returns `true` if the menu is active.
244
244
  *
245
245
  * A menu is active when it can be opened or closed, meaning it's enabled
246
246
  * and it's not part of a `ion-split-pane`.
@@ -251,6 +251,10 @@ const Menu = class {
251
251
  /**
252
252
  * Opens the menu. If the menu is already open or it can't be opened,
253
253
  * it returns `false`.
254
+ *
255
+ * @param animated If `true`, the menu will animate when opening.
256
+ * If `false`, the menu will open instantly without animation.
257
+ * Defaults to `true`.
254
258
  */
255
259
  open(animated = true) {
256
260
  return this.setOpen(true, animated);
@@ -258,20 +262,38 @@ const Menu = class {
258
262
  /**
259
263
  * Closes the menu. If the menu is already closed or it can't be closed,
260
264
  * it returns `false`.
265
+ *
266
+ * @param animated If `true`, the menu will animate when closing. If `false`,
267
+ * the menu will close instantly without animation. Defaults to `true`.
268
+ * @param role The role of the element that is closing the menu.
269
+ * This can be useful in a button handler for determining which button was
270
+ * clicked to close the menu. Some examples include:
271
+ * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
261
272
  */
262
273
  close(animated = true, role) {
263
274
  return this.setOpen(false, animated, role);
264
275
  }
265
276
  /**
266
- * Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it.
277
+ * Toggles the menu. If the menu is already open, it will try to close,
278
+ * otherwise it will try to open it.
267
279
  * If the operation can't be completed successfully, it returns `false`.
280
+ *
281
+ * @param animated If `true`, the menu will animate when opening/closing.
282
+ * If `false`, the menu will open/close instantly without animation.
283
+ * Defaults to `true`.
268
284
  */
269
285
  toggle(animated = true) {
270
286
  return this.setOpen(!this._isOpen, animated);
271
287
  }
272
288
  /**
273
- * Opens or closes the button.
289
+ * Opens or closes the menu.
274
290
  * If the operation can't be completed successfully, it returns `false`.
291
+ *
292
+ * @param shouldOpen If `true`, the menu will open. If `false`, the menu
293
+ * will close.
294
+ * @param animated If `true`, the menu will animate when opening/closing.
295
+ * If `false`, the menu will open/close instantly without animation.
296
+ * @param role The role of the element that is closing the menu.
275
297
  */
276
298
  setOpen(shouldOpen, animated = true, role) {
277
299
  return menuController._setOpen(this, shouldOpen, animated, role);
@@ -636,14 +658,14 @@ const Menu = class {
636
658
  * the ionBackButton listener in the menu controller
637
659
  * will handle closing the menu when Escape is pressed.
638
660
  */
639
- return (h(Host, { key: '9e4ae9476a76781f1d228395c9af9e1c39ec82bb', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
661
+ return (h(Host, { key: 'a5c75aa40a34530b56ee3b98d706a5ac5ae300de', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
640
662
  [mode]: true,
641
663
  [`menu-type-${type}`]: true,
642
664
  'menu-enabled': !disabled,
643
665
  [`menu-side-${side}`]: true,
644
666
  'menu-pane-visible': isPaneVisible,
645
667
  'split-pane-side': hostContext('ion-split-pane', el),
646
- } }, h("div", { key: 'c6153589d872ac7e3fdf5eedfdb858eb64ccd713', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '9994aac4b22f17db34c9b8b2aa56b8710b9df645' })), h("ion-backdrop", { key: 'f09ac30cc4dd2dcb10628965e659dae5a23baf98', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
668
+ } }, h("div", { key: '3f5f70acd4d3ed6bb445122f4f01d73db738a75f', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, h("slot", { key: '3161326c9330e7f7441299c428b87a91b31a83e9' })), h("ion-backdrop", { key: '917b50f38489bdf03d0c642af8b4e4e172c7dc4c', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
647
669
  }
648
670
  get el() { return getElement(this); }
649
671
  static get watchers() { return {
@@ -1482,6 +1482,17 @@ const Modal = class {
1482
1482
  el.dispatchEvent(ev);
1483
1483
  }
1484
1484
  };
1485
+ /**
1486
+ * When the modal receives focus directly, pass focus to the handle
1487
+ * if it exists and is focusable, otherwise let the focus trap handle it.
1488
+ */
1489
+ this.onModalFocus = (ev) => {
1490
+ const { dragHandleEl, el } = this;
1491
+ // Only handle focus if the modal itself was focused (not a child element)
1492
+ if (ev.target === el && dragHandleEl && dragHandleEl.tabIndex !== -1) {
1493
+ dragHandleEl.focus();
1494
+ }
1495
+ };
1485
1496
  }
1486
1497
  onIsOpenChange(newValue, oldValue) {
1487
1498
  if (newValue === true && oldValue === false) {
@@ -1813,13 +1824,13 @@ const Modal = class {
1813
1824
  }
1814
1825
  /**
1815
1826
  * Dismiss the modal overlay after it has been presented.
1816
- *
1817
- * @param data Any data to emit in the dismiss events.
1818
- * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.
1819
- *
1820
1827
  * This is a no-op if the overlay has not been presented yet. If you want
1821
1828
  * to remove an overlay from the DOM that was never presented, use the
1822
1829
  * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
1830
+ *
1831
+ * @param data Any data to emit in the dismiss events.
1832
+ * @param role The role of the element that is dismissing the modal.
1833
+ * For example, `cancel` or `backdrop`.
1823
1834
  */
1824
1835
  async dismiss(data, role) {
1825
1836
  var _a;
@@ -1891,8 +1902,10 @@ const Modal = class {
1891
1902
  return eventMethod(this.el, 'ionModalWillDismiss');
1892
1903
  }
1893
1904
  /**
1894
- * Move a sheet style modal to a specific breakpoint. The breakpoint value must
1895
- * be a value defined in your `breakpoints` array.
1905
+ * Move a sheet style modal to a specific breakpoint.
1906
+ *
1907
+ * @param breakpoint The breakpoint value to move the sheet modal to.
1908
+ * Must be a value defined in your `breakpoints` array.
1896
1909
  */
1897
1910
  async setCurrentBreakpoint(breakpoint) {
1898
1911
  if (!this.isSheetModal) {
@@ -1951,18 +1964,21 @@ const Modal = class {
1951
1964
  const mode = getIonMode(this);
1952
1965
  const isCardModal = presentingElement !== undefined && mode === 'ios';
1953
1966
  const isHandleCycle = handleBehavior === 'cycle';
1954
- return (h(Host, Object.assign({ key: '0bcbdcfcd7d890eb599da3f97f21c317d34f8e0e', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
1967
+ const isSheetModalWithHandle = isSheetModal && showHandle;
1968
+ return (h(Host, Object.assign({ key: '8add05bb43a2cdb5e3cf180147d31eb85a018fe0', "no-router": true,
1969
+ // Allow the modal to be navigable when the handle is focusable
1970
+ tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
1955
1971
  zIndex: `${20000 + this.overlayIndex}`,
1956
- }, 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 }), h("ion-backdrop", { key: 'd72159e73daa5af7349aa9e8f695aa435eb43069', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'fd2d9b13676ae72473881649a397b6eacde03a03', class: "modal-shadow" }), h("div", Object.assign({ key: '908eccb1ad982dcde2dbcff0cbb18b6e60f8ba74',
1972
+ }, 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: '90a6605a9564a699d6f66cf71cf6b506796a2963', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'a97d071395333bf803c0a9347bda000cf7500d8d', class: "modal-shadow" }), h("div", Object.assign({ key: 'e7b7985c7414a13e3ba8dcecf497b76e92edf53e',
1957
1973
  /*
1958
1974
  role and aria-modal must be used on the
1959
1975
  same element. They must also be set inside the
1960
1976
  shadow DOM otherwise ion-button will not be highlighted
1961
1977
  when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
1962
1978
  */
1963
- role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '332dc0b40363a77c7be62331d9f26def91c790e9', class: "modal-handle",
1979
+ role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '8258b65570b11a8ee9c9df2537d6419cd2e34536', class: "modal-handle",
1964
1980
  // Prevents the handle from receiving keyboard focus when it does not cycle
1965
- tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), h("slot", { key: 'c32698350193c450327e97049daf8b8d1fda0d0e' }))));
1981
+ 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: '394370d0ed03ee03152f8f8abae7ff7664ca5c13' }))));
1966
1982
  }
1967
1983
  get el() { return getElement(this); }
1968
1984
  static get watchers() { return {
@@ -1261,6 +1261,8 @@ const Popover = class {
1261
1261
  * Developers can pass a mouse, touch, or pointer event
1262
1262
  * to position the popover relative to where that event
1263
1263
  * was dispatched.
1264
+ *
1265
+ * @param event The event to position the popover relative to.
1264
1266
  */
1265
1267
  async present(event) {
1266
1268
  const unlock = await this.lockController.lock();
@@ -1324,15 +1326,14 @@ const Popover = class {
1324
1326
  }
1325
1327
  /**
1326
1328
  * Dismiss the popover overlay after it has been presented.
1329
+ * This is a no-op if the overlay has not been presented yet. If you want
1330
+ * to remove an overlay from the DOM that was never presented, use the
1331
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
1327
1332
  *
1328
1333
  * @param data Any data to emit in the dismiss events.
1329
- * @param role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'.
1334
+ * @param role The role of the element that is dismissing the popover. For example, `cancel` or `backdrop`.
1330
1335
  * @param dismissParentPopover If `true`, dismissing this popover will also dismiss
1331
1336
  * a parent popover if this popover is nested. Defaults to `true`.
1332
- *
1333
- * This is a no-op if the overlay has not been presented yet. If you want
1334
- * to remove an overlay from the DOM that was never presented, use the
1335
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
1336
1337
  */
1337
1338
  async dismiss(data, role, dismissParentPopover = true) {
1338
1339
  const unlock = await this.lockController.lock();
@@ -1384,9 +1385,9 @@ const Popover = class {
1384
1385
  const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
1385
1386
  const desktop = isPlatform('desktop');
1386
1387
  const enableArrow = arrow && !parentPopover;
1387
- return (h(Host, Object.assign({ key: '1de4862099cfcb5035e78008e6dc7c1371846f9a', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
1388
+ return (h(Host, Object.assign({ key: '16866c02534968c982cf4730d2936d03a5107c8b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
1388
1389
  zIndex: `${20000 + this.overlayIndex}`,
1389
- }, 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: '981aa4e0102cb93312ffbd8243cdf2a0cdc60469', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: '1a28ed55e9d34ef78cf0eb0178643301fd2dd75d', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '1c206ea5eb3c0b5883a3d45c34cd22dd5ffe4b65', class: "popover-arrow", part: "arrow" }), h("div", { key: '5ba561486a328c0c7ab825995fdbfb7a196429a4', class: "popover-content", part: "content" }, h("slot", { key: '00fc244ce9dcc2dfc677e6c34b7c8e7a330b2b03' })))));
1390
+ }, 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: '0df258601a4d30df3c27aa8234a7d5e056c3ecbb', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), h("div", { key: 'f94e80ed996b957b5cd09b826472b4f60e8fcc78', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && h("div", { key: '185ce22f6386e8444a9cc7b8818dbfc16c463c99', class: "popover-arrow", part: "arrow" }), h("div", { key: '206202b299404e110de5397b229678cca18568d3', class: "popover-content", part: "content" }, h("slot", { key: 'ee543a0b92d6e35a837c0a0e4617c7b0fc4ad0b0' })))));
1390
1391
  }
1391
1392
  get el() { return getElement(this); }
1392
1393
  static get watchers() { return {
@@ -90,7 +90,6 @@ const ReorderGroup = class {
90
90
  }
91
91
  /**
92
92
  * Completes the reorder operation. Must be called by the `ionItemReorder` event.
93
- *
94
93
  * If a list of items is passed, the list will be reordered and returned in the
95
94
  * proper order.
96
95
  *
@@ -277,7 +276,7 @@ const ReorderGroup = class {
277
276
  }
278
277
  render() {
279
278
  const mode = getIonMode(this);
280
- return (h(Host, { key: 'f30613b361c5c3095b7928a92fb4b1e8d6eff600', class: {
279
+ return (h(Host, { key: 'dfcdc3a6aa1b2fba15f861ec868d6a11e667c9de', class: {
281
280
  [mode]: true,
282
281
  'reorder-enabled': !this.disabled,
283
282
  'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
@@ -674,6 +674,7 @@ const Router = class {
674
674
  *
675
675
  * @param path The path to navigate to.
676
676
  * @param direction The direction of the animation. Defaults to `"forward"`.
677
+ * @param animation A custom animation to use for the transition.
677
678
  */
678
679
  async push(path, direction = 'forward', animation) {
679
680
  var _a;
@@ -255,10 +255,8 @@ const Searchbar = class {
255
255
  /**
256
256
  * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global
257
257
  * `input.focus()`.
258
- *
259
258
  * Developers who wish to focus an input when a page enters
260
259
  * should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.
261
- *
262
260
  * Developers who wish to focus an input when an overlay is presented
263
261
  * should call `setFocus` after `didPresent` has resolved.
264
262
  *
@@ -437,8 +435,8 @@ const Searchbar = class {
437
435
  const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
438
436
  const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
439
437
  const shouldShowCancelButton = this.shouldShowCancelButton();
440
- const cancelButton = this.showCancelButton !== 'never' && (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" }, h("div", { key: '85df41676bed611467bd4df0002b08baee4f539c', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
441
- return (h(Host, { key: 'e1e30cdd79f9f54d5f2d27501012358bc46880e5', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
438
+ const cancelButton = this.showCancelButton !== 'never' && (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" }, h("div", { key: 'b3bbdcc033f3bd3441d619e4a252cef0dad4d07e', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
439
+ return (h(Host, { key: '074aa60e051bfb3225e87d44bbb6346c59c73574', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
442
440
  [mode]: true,
443
441
  'searchbar-animated': animated,
444
442
  'searchbar-disabled': this.disabled,
@@ -448,14 +446,14 @@ const Searchbar = class {
448
446
  'searchbar-has-focus': this.focused,
449
447
  'searchbar-should-show-clear': this.shouldShowClearButton(),
450
448
  'searchbar-should-show-cancel': this.shouldShowCancelButton(),
451
- }) }, h("div", { key: '7e9db147282a35bb1e3c9c6125b9a044e81ddde5', class: "searchbar-input-container" }, 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, h("ion-icon", { key: '048b00348456bd827ae734491c46a67bfb146227', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '71f64339bbfd54ebd26a0946c8ee9d726cd89c04', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
449
+ }) }, h("div", { key: '54f58a79fe36e85d9295157303f1be89c98bbdaf', class: "searchbar-input-container" }, 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, h("ion-icon", { key: '8b44dd90a3292c5cf872ef16a8520675f5673494', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '79d9cfed8f01268044f82811a35d323a12dca749', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
452
450
  /**
453
451
  * This prevents mobile browsers from
454
452
  * blurring the input when the clear
455
453
  * button is activated.
456
454
  */
457
455
  ev.preventDefault();
458
- }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '9b1a177b21951c1c95897a468b34bb7bbd63d137', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
456
+ }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: 'aa3b9fa8a61f853236783ac7bcd0b113ea65ece2', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
459
457
  }
460
458
  get el() { return getElement(this); }
461
459
  static get watchers() { return {
@@ -672,16 +672,15 @@ const Toast = class {
672
672
  }
673
673
  /**
674
674
  * Dismiss the toast overlay after it has been presented.
675
+ * This is a no-op if the overlay has not been presented yet. If you want
676
+ * to remove an overlay from the DOM that was never presented, use the
677
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
675
678
  *
676
679
  * @param data Any data to emit in the dismiss events.
677
680
  * @param role The role of the element that is dismissing the toast.
678
681
  * This can be useful in a button handler for determining which button was
679
682
  * clicked to dismiss the toast.
680
- * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
681
- *
682
- * This is a no-op if the overlay has not been presented yet. If you want
683
- * to remove an overlay from the DOM that was never presented, use the
684
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
683
+ * Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
685
684
  */
686
685
  async dismiss(data, role) {
687
686
  var _a, _b;
@@ -849,9 +848,9 @@ const Toast = class {
849
848
  if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
850
849
  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);
851
850
  }
852
- return (h(Host, Object.assign({ key: '425be734aee0eeef281ab1609a9f982ce8b5e852', tabindex: "-1" }, this.htmlAttributes, { style: {
851
+ return (h(Host, Object.assign({ key: 'd1ecd90c87700aad4685e230cdd430aa286b8791', tabindex: "-1" }, this.htmlAttributes, { style: {
853
852
  zIndex: `${60000 + this.overlayIndex}`,
854
- }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '7c3ad1a8df9e21fc30fc179c7edebeabcf3c6874', class: wrapperClass }, h("div", { key: 'f950c21e8d7bf92653e0bd52e820ed6b84fa8cf5', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '0266241927dbe16799adb57f9fc11bd5372877b2', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), 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')))));
853
+ }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '4bfc863417324de69e222054d5cf9c452038b41e', class: wrapperClass }, h("div", { key: '3417940afec0392e81b7d54c7cb00f3ab6c30d47', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '6bf878fbc85c01e1e5faa9d97d46255a6511a952', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), 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')))));
855
854
  }
856
855
  get el() { return getElement(this); }
857
856
  static get watchers() { return {