@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
@@ -185,16 +185,15 @@ const ActionSheet = /*@__PURE__*/ proxyCustomElement(class ActionSheet extends H
185
185
  }
186
186
  /**
187
187
  * Dismiss the action sheet overlay after it has been presented.
188
+ * This is a no-op if the overlay has not been presented yet. If you want
189
+ * to remove an overlay from the DOM that was never presented, use the
190
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
188
191
  *
189
192
  * @param data Any data to emit in the dismiss events.
190
193
  * @param role The role of the element that is dismissing the action sheet.
191
194
  * This can be useful in a button handler for determining which button was
192
- * clicked to dismiss the action sheet.
193
- * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
194
- *
195
- * This is a no-op if the overlay has not been presented yet. If you want
196
- * to remove an overlay from the DOM that was never presented, use the
197
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
195
+ * clicked to dismiss the action sheet. Some examples include:
196
+ * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
198
197
  */
199
198
  async dismiss(data, role) {
200
199
  const unlock = await this.lockController.lock();
@@ -306,12 +305,12 @@ const ActionSheet = /*@__PURE__*/ proxyCustomElement(class ActionSheet extends H
306
305
  const cancelButton = allButtons.find((b) => b.role === 'cancel');
307
306
  const buttons = allButtons.filter((b) => b.role !== 'cancel');
308
307
  const headerID = `action-sheet-${overlayIndex}-header`;
309
- return (h(Host, Object.assign({ key: '7bbd202ca9e19727e7514abbe073687d982f80c3', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
308
+ return (h(Host, Object.assign({ key: '9fef156b2a1f09ca4a6c1fe1f37c374139bde03c', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
310
309
  zIndex: `${20000 + this.overlayIndex}`,
311
- }, 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: {
310
+ }, 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: {
312
311
  'action-sheet-title': true,
313
312
  'action-sheet-has-sub-title': this.subHeader !== undefined,
314
- } }, 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" })));
313
+ } }, 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" })));
315
314
  }
316
315
  get el() { return this; }
317
316
  static get watchers() { return {
@@ -355,16 +355,15 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
355
355
  }
356
356
  /**
357
357
  * Dismiss the alert overlay after it has been presented.
358
+ * This is a no-op if the overlay has not been presented yet. If you want
359
+ * to remove an overlay from the DOM that was never presented, use the
360
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
358
361
  *
359
362
  * @param data Any data to emit in the dismiss events.
360
363
  * @param role The role of the element that is dismissing the alert.
361
364
  * This can be useful in a button handler for determining which button was
362
- * clicked to dismiss the alert.
363
- * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
364
- *
365
- * This is a no-op if the overlay has not been presented yet. If you want
366
- * to remove an overlay from the DOM that was never presented, use the
367
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
365
+ * clicked to dismiss the alert. Some examples include:
366
+ * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
368
367
  */
369
368
  async dismiss(data, role) {
370
369
  const unlock = await this.lockController.lock();
@@ -534,9 +533,9 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
534
533
  * If neither are defined, do not set aria-labelledby.
535
534
  */
536
535
  const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
537
- return (h(Host, { key: 'f8ee04fe6a97a2585b302c8e1a9eea3b122e3479', tabindex: "-1", style: {
536
+ return (h(Host, { key: '6025440b9cd369d4fac89e7e4296c84a10a0b8e0', tabindex: "-1", style: {
538
537
  zIndex: `${20000 + overlayIndex}`,
539
- }, 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" })));
538
+ }, 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" })));
540
539
  }
541
540
  get el() { return this; }
542
541
  static get watchers() { return {
@@ -61,6 +61,8 @@ const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
61
61
  * a result of another user action. (Ex: We focus the first element
62
62
  * inside of a popover when the user presents it, but the popover is not always
63
63
  * presented as a result of keyboard action.)
64
+ *
65
+ * @param elements An array of HTML elements to set focus on.
64
66
  */
65
67
  async setFocus(elements) {
66
68
  if (this.focusVisible) {
@@ -69,7 +71,7 @@ const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
69
71
  }
70
72
  render() {
71
73
  const mode = getIonMode(this);
72
- return (h(Host, { key: '03aa892f986330078d112b1e8b010df98fa7e39e', class: {
74
+ return (h(Host, { key: '9be440c65819e4fa67c2c3c6477ab40b3ad3eed3', class: {
73
75
  [mode]: true,
74
76
  'ion-page': true,
75
77
  'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
@@ -996,6 +996,8 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
996
996
  * Confirms the selected datetime value, updates the
997
997
  * `value` property, and optionally closes the popover
998
998
  * or modal that the datetime was presented in.
999
+ *
1000
+ * @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
999
1001
  */
1000
1002
  async confirm(closeOverlay = false) {
1001
1003
  const { isCalendarPicker, activeParts, preferWheel, workingParts } = this;
@@ -1029,6 +1031,8 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
1029
1031
  * Resets the internal state of the datetime but does not update the value.
1030
1032
  * Passing a valid ISO-8601 string will reset the state of the component to the provided date.
1031
1033
  * If no value is provided, the internal state will be reset to the clamped value of the min, max and today.
1034
+ *
1035
+ * @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.
1032
1036
  */
1033
1037
  async reset(startDate) {
1034
1038
  this.processValue(startDate);
@@ -1038,6 +1042,8 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
1038
1042
  * optionally closes the popover
1039
1043
  * or modal that the datetime was
1040
1044
  * presented in.
1045
+ *
1046
+ * @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
1041
1047
  */
1042
1048
  async cancel(closeOverlay = false) {
1043
1049
  this.ionCancel.emit();
@@ -1851,7 +1857,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
1851
1857
  const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
1852
1858
  const hasWheelVariant = hasDatePresentation && preferWheel;
1853
1859
  renderHiddenInput(true, el, name, formatValue(value), disabled);
1854
- return (h(Host, { key: '7ea46c27aa5fb01b748dd4d6eb2340ad13f65175', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
1860
+ return (h(Host, { key: '79677f5bc0fb32fb68569636bd76e68238e62eb8', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
1855
1861
  [mode]: true,
1856
1862
  ['datetime-readonly']: readonly,
1857
1863
  ['datetime-disabled']: disabled,
@@ -1861,7 +1867,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
1861
1867
  [`datetime-size-${size}`]: true,
1862
1868
  [`datetime-prefer-wheel`]: hasWheelVariant,
1863
1869
  [`datetime-grid`]: isGridStyle,
1864
- })) }, h("div", { key: '6964378424c58b053e23279d08eaedf28dfcc315', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
1870
+ })) }, h("div", { key: 'bf07b1e3c64af6e837663ff470bea93787a6e86f', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
1865
1871
  }
1866
1872
  get el() { return this; }
1867
1873
  static get watchers() { return {
@@ -226,16 +226,15 @@ const Loading = /*@__PURE__*/ proxyCustomElement(class Loading extends HTMLEleme
226
226
  }
227
227
  /**
228
228
  * Dismiss the loading overlay after it has been presented.
229
+ * This is a no-op if the overlay has not been presented yet. If you want
230
+ * to remove an overlay from the DOM that was never presented, use the
231
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
229
232
  *
230
233
  * @param data Any data to emit in the dismiss events.
231
234
  * @param role The role of the element that is dismissing the loading.
232
235
  * This can be useful in a button handler for determining which button was
233
- * clicked to dismiss the loading.
234
- * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
235
- *
236
- * This is a no-op if the overlay has not been presented yet. If you want
237
- * to remove an overlay from the DOM that was never presented, use the
238
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
236
+ * clicked to dismiss the loading. Some examples include:
237
+ * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
239
238
  */
240
239
  async dismiss(data, role) {
241
240
  const unlock = await this.lockController.lock();
@@ -277,9 +276,9 @@ const Loading = /*@__PURE__*/ proxyCustomElement(class Loading extends HTMLEleme
277
276
  * Otherwise, don't set aria-labelledby.
278
277
  */
279
278
  const ariaLabelledBy = message !== undefined ? msgId : null;
280
- return (h(Host, Object.assign({ key: '6369ed244c06c39aa338141bffacf7a861d7da1a', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
279
+ return (h(Host, Object.assign({ key: '4497183ce220242abe19ae15f328f9a92ccafbbc', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
281
280
  zIndex: `${40000 + this.overlayIndex}`,
282
- }, 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" })));
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: '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" })));
283
282
  }
284
283
  get el() { return this; }
285
284
  static get watchers() { return {
@@ -244,7 +244,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
244
244
  return Promise.resolve(this._isOpen);
245
245
  }
246
246
  /**
247
- * Returns `true` is the menu is active.
247
+ * Returns `true` if the menu is active.
248
248
  *
249
249
  * A menu is active when it can be opened or closed, meaning it's enabled
250
250
  * and it's not part of a `ion-split-pane`.
@@ -255,6 +255,10 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
255
255
  /**
256
256
  * Opens the menu. If the menu is already open or it can't be opened,
257
257
  * it returns `false`.
258
+ *
259
+ * @param animated If `true`, the menu will animate when opening.
260
+ * If `false`, the menu will open instantly without animation.
261
+ * Defaults to `true`.
258
262
  */
259
263
  open(animated = true) {
260
264
  return this.setOpen(true, animated);
@@ -262,20 +266,38 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
262
266
  /**
263
267
  * Closes the menu. If the menu is already closed or it can't be closed,
264
268
  * it returns `false`.
269
+ *
270
+ * @param animated If `true`, the menu will animate when closing. If `false`,
271
+ * the menu will close instantly without animation. Defaults to `true`.
272
+ * @param role The role of the element that is closing the menu.
273
+ * This can be useful in a button handler for determining which button was
274
+ * clicked to close the menu. Some examples include:
275
+ * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
265
276
  */
266
277
  close(animated = true, role) {
267
278
  return this.setOpen(false, animated, role);
268
279
  }
269
280
  /**
270
- * Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it.
281
+ * Toggles the menu. If the menu is already open, it will try to close,
282
+ * otherwise it will try to open it.
271
283
  * If the operation can't be completed successfully, it returns `false`.
284
+ *
285
+ * @param animated If `true`, the menu will animate when opening/closing.
286
+ * If `false`, the menu will open/close instantly without animation.
287
+ * Defaults to `true`.
272
288
  */
273
289
  toggle(animated = true) {
274
290
  return this.setOpen(!this._isOpen, animated);
275
291
  }
276
292
  /**
277
- * Opens or closes the button.
293
+ * Opens or closes the menu.
278
294
  * If the operation can't be completed successfully, it returns `false`.
295
+ *
296
+ * @param shouldOpen If `true`, the menu will open. If `false`, the menu
297
+ * will close.
298
+ * @param animated If `true`, the menu will animate when opening/closing.
299
+ * If `false`, the menu will open/close instantly without animation.
300
+ * @param role The role of the element that is closing the menu.
279
301
  */
280
302
  setOpen(shouldOpen, animated = true, role) {
281
303
  return menuController._setOpen(this, shouldOpen, animated, role);
@@ -640,14 +662,14 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
640
662
  * the ionBackButton listener in the menu controller
641
663
  * will handle closing the menu when Escape is pressed.
642
664
  */
643
- return (h(Host, { key: '9e4ae9476a76781f1d228395c9af9e1c39ec82bb', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
665
+ return (h(Host, { key: 'a5c75aa40a34530b56ee3b98d706a5ac5ae300de', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
644
666
  [mode]: true,
645
667
  [`menu-type-${type}`]: true,
646
668
  'menu-enabled': !disabled,
647
669
  [`menu-side-${side}`]: true,
648
670
  'menu-pane-visible': isPaneVisible,
649
671
  'split-pane-side': hostContext('ion-split-pane', el),
650
- } }, 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" })));
672
+ } }, 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" })));
651
673
  }
652
674
  get el() { return this; }
653
675
  static get watchers() { return {
@@ -60,7 +60,6 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
60
60
  }
61
61
  /**
62
62
  * Completes the reorder operation. Must be called by the `ionItemReorder` event.
63
- *
64
63
  * If a list of items is passed, the list will be reordered and returned in the
65
64
  * proper order.
66
65
  *
@@ -247,7 +246,7 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
247
246
  }
248
247
  render() {
249
248
  const mode = getIonMode(this);
250
- return (h(Host, { key: 'f30613b361c5c3095b7928a92fb4b1e8d6eff600', class: {
249
+ return (h(Host, { key: 'dfcdc3a6aa1b2fba15f861ec868d6a11e667c9de', class: {
251
250
  [mode]: true,
252
251
  'reorder-enabled': !this.disabled,
253
252
  'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
@@ -616,6 +616,7 @@ const Router = /*@__PURE__*/ proxyCustomElement(class Router extends HTMLElement
616
616
  *
617
617
  * @param path The path to navigate to.
618
618
  * @param direction The direction of the animation. Defaults to `"forward"`.
619
+ * @param animation A custom animation to use for the transition.
619
620
  */
620
621
  async push(path, direction = 'forward', animation) {
621
622
  var _a;
@@ -259,10 +259,8 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
259
259
  /**
260
260
  * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global
261
261
  * `input.focus()`.
262
- *
263
262
  * Developers who wish to focus an input when a page enters
264
263
  * should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.
265
- *
266
264
  * Developers who wish to focus an input when an overlay is presented
267
265
  * should call `setFocus` after `didPresent` has resolved.
268
266
  *
@@ -441,8 +439,8 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
441
439
  const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
442
440
  const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
443
441
  const shouldShowCancelButton = this.shouldShowCancelButton();
444
- 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))));
445
- return (h(Host, { key: 'e1e30cdd79f9f54d5f2d27501012358bc46880e5', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
442
+ 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))));
443
+ return (h(Host, { key: '074aa60e051bfb3225e87d44bbb6346c59c73574', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
446
444
  [mode]: true,
447
445
  'searchbar-animated': animated,
448
446
  'searchbar-disabled': this.disabled,
@@ -452,14 +450,14 @@ const Searchbar = /*@__PURE__*/ proxyCustomElement(class Searchbar extends HTMLE
452
450
  'searchbar-has-focus': this.focused,
453
451
  'searchbar-should-show-clear': this.shouldShowClearButton(),
454
452
  'searchbar-should-show-cancel': this.shouldShowCancelButton(),
455
- }) }, 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) => {
453
+ }) }, 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) => {
456
454
  /**
457
455
  * This prevents mobile browsers from
458
456
  * blurring the input when the clear
459
457
  * button is activated.
460
458
  */
461
459
  ev.preventDefault();
462
- }, 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));
460
+ }, 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));
463
461
  }
464
462
  get el() { return this; }
465
463
  static get watchers() { return {
@@ -677,16 +677,15 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
677
677
  }
678
678
  /**
679
679
  * Dismiss the toast overlay after it has been presented.
680
+ * This is a no-op if the overlay has not been presented yet. If you want
681
+ * to remove an overlay from the DOM that was never presented, use the
682
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
680
683
  *
681
684
  * @param data Any data to emit in the dismiss events.
682
685
  * @param role The role of the element that is dismissing the toast.
683
686
  * This can be useful in a button handler for determining which button was
684
687
  * clicked to dismiss the toast.
685
- * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
686
- *
687
- * This is a no-op if the overlay has not been presented yet. If you want
688
- * to remove an overlay from the DOM that was never presented, use the
689
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
688
+ * Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
690
689
  */
691
690
  async dismiss(data, role) {
692
691
  var _a, _b;
@@ -854,9 +853,9 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
854
853
  if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
855
854
  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);
856
855
  }
857
- return (h(Host, Object.assign({ key: '425be734aee0eeef281ab1609a9f982ce8b5e852', tabindex: "-1" }, this.htmlAttributes, { style: {
856
+ return (h(Host, Object.assign({ key: 'd1ecd90c87700aad4685e230cdd430aa286b8791', tabindex: "-1" }, this.htmlAttributes, { style: {
858
857
  zIndex: `${60000 + this.overlayIndex}`,
859
- }, 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')))));
858
+ }, 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')))));
860
859
  }
861
860
  get el() { return this; }
862
861
  static get watchers() { return {
@@ -1484,6 +1484,17 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
1484
1484
  el.dispatchEvent(ev);
1485
1485
  }
1486
1486
  };
1487
+ /**
1488
+ * When the modal receives focus directly, pass focus to the handle
1489
+ * if it exists and is focusable, otherwise let the focus trap handle it.
1490
+ */
1491
+ this.onModalFocus = (ev) => {
1492
+ const { dragHandleEl, el } = this;
1493
+ // Only handle focus if the modal itself was focused (not a child element)
1494
+ if (ev.target === el && dragHandleEl && dragHandleEl.tabIndex !== -1) {
1495
+ dragHandleEl.focus();
1496
+ }
1497
+ };
1487
1498
  }
1488
1499
  onIsOpenChange(newValue, oldValue) {
1489
1500
  if (newValue === true && oldValue === false) {
@@ -1815,13 +1826,13 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
1815
1826
  }
1816
1827
  /**
1817
1828
  * 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
- *
1822
1829
  * This is a no-op if the overlay has not been presented yet. If you want
1823
1830
  * to remove an overlay from the DOM that was never presented, use the
1824
1831
  * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
1832
+ *
1833
+ * @param data Any data to emit in the dismiss events.
1834
+ * @param role The role of the element that is dismissing the modal.
1835
+ * For example, `cancel` or `backdrop`.
1825
1836
  */
1826
1837
  async dismiss(data, role) {
1827
1838
  var _a;
@@ -1893,8 +1904,10 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
1893
1904
  return eventMethod(this.el, 'ionModalWillDismiss');
1894
1905
  }
1895
1906
  /**
1896
- * Move a sheet style modal to a specific breakpoint. The breakpoint value must
1897
- * be a value defined in your `breakpoints` array.
1907
+ * Move a sheet style modal to a specific breakpoint.
1908
+ *
1909
+ * @param breakpoint The breakpoint value to move the sheet modal to.
1910
+ * Must be a value defined in your `breakpoints` array.
1898
1911
  */
1899
1912
  async setCurrentBreakpoint(breakpoint) {
1900
1913
  if (!this.isSheetModal) {
@@ -1953,18 +1966,21 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
1953
1966
  const mode = getIonMode(this);
1954
1967
  const isCardModal = presentingElement !== undefined && mode === 'ios';
1955
1968
  const isHandleCycle = handleBehavior === 'cycle';
1956
- return (h(Host, Object.assign({ key: '0bcbdcfcd7d890eb599da3f97f21c317d34f8e0e', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
1969
+ const isSheetModalWithHandle = isSheetModal && showHandle;
1970
+ return (h(Host, Object.assign({ key: '8add05bb43a2cdb5e3cf180147d31eb85a018fe0', "no-router": true,
1971
+ // Allow the modal to be navigable when the handle is focusable
1972
+ tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
1957
1973
  zIndex: `${20000 + this.overlayIndex}`,
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, [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',
1974
+ }, 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',
1959
1975
  /*
1960
1976
  role and aria-modal must be used on the
1961
1977
  same element. They must also be set inside the
1962
1978
  shadow DOM otherwise ion-button will not be highlighted
1963
1979
  when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
1964
1980
  */
1965
- 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",
1981
+ 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",
1966
1982
  // Prevents the handle from receiving keyboard focus when it does not cycle
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" })), h("slot", { key: 'c32698350193c450327e97049daf8b8d1fda0d0e' }))));
1983
+ 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' }))));
1968
1984
  }
1969
1985
  get el() { return this; }
1970
1986
  static get watchers() { return {
@@ -1263,6 +1263,8 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
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.
1266
1268
  */
1267
1269
  async present(event) {
1268
1270
  const unlock = await this.lockController.lock();
@@ -1326,15 +1328,14 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
1326
1328
  }
1327
1329
  /**
1328
1330
  * 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.
1329
1334
  *
1330
1335
  * @param data Any data to emit in the dismiss events.
1331
- * @param role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'.
1336
+ * @param role The role of the element that is dismissing the popover. For example, `cancel` or `backdrop`.
1332
1337
  * @param dismissParentPopover If `true`, dismissing this popover will also dismiss
1333
1338
  * 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.
1338
1339
  */
1339
1340
  async dismiss(data, role, dismissParentPopover = true) {
1340
1341
  const unlock = await this.lockController.lock();
@@ -1386,9 +1387,9 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
1386
1387
  const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
1387
1388
  const desktop = isPlatform('desktop');
1388
1389
  const enableArrow = arrow && !parentPopover;
1389
- return (h(Host, Object.assign({ key: '1de4862099cfcb5035e78008e6dc7c1371846f9a', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
1390
+ return (h(Host, Object.assign({ key: '16866c02534968c982cf4730d2936d03a5107c8b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
1390
1391
  zIndex: `${20000 + this.overlayIndex}`,
1391
- }, 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' })))));
1392
+ }, 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' })))));
1392
1393
  }
1393
1394
  get el() { return this; }
1394
1395
  static get watchers() { return {
@@ -189,16 +189,15 @@ const ActionSheet = class {
189
189
  }
190
190
  /**
191
191
  * Dismiss the action sheet overlay after it has been presented.
192
+ * This is a no-op if the overlay has not been presented yet. If you want
193
+ * to remove an overlay from the DOM that was never presented, use the
194
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
192
195
  *
193
196
  * @param data Any data to emit in the dismiss events.
194
197
  * @param role The role of the element that is dismissing the action sheet.
195
198
  * This can be useful in a button handler for determining which button was
196
- * clicked to dismiss the action sheet.
197
- * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
198
- *
199
- * This is a no-op if the overlay has not been presented yet. If you want
200
- * to remove an overlay from the DOM that was never presented, use the
201
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
199
+ * clicked to dismiss the action sheet. Some examples include:
200
+ * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
202
201
  */
203
202
  async dismiss(data, role) {
204
203
  const unlock = await this.lockController.lock();
@@ -310,12 +309,12 @@ const ActionSheet = class {
310
309
  const cancelButton = allButtons.find((b) => b.role === 'cancel');
311
310
  const buttons = allButtons.filter((b) => b.role !== 'cancel');
312
311
  const headerID = `action-sheet-${overlayIndex}-header`;
313
- return (index.h(index.Host, Object.assign({ key: '7bbd202ca9e19727e7514abbe073687d982f80c3', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
312
+ return (index.h(index.Host, Object.assign({ key: '9fef156b2a1f09ca4a6c1fe1f37c374139bde03c', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
314
313
  zIndex: `${20000 + this.overlayIndex}`,
315
- }, class: Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), index.h("ion-backdrop", { key: '23344a9221a2e6720d7b9de5249dc37256cafa7b', tappable: this.backdropDismiss }), index.h("div", { key: 'fbc2ba15549c2ab04e759e82df6e177fd80cc0a6', tabindex: "0", "aria-hidden": "true" }), index.h("div", { key: '748ee5235d0b4cb26d6f1b7589f77af2e37ad28a', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, index.h("div", { key: '7ce5fa236cf75e9b1e49c4725c9a811078706554', class: "action-sheet-container" }, index.h("div", { key: 'dc2251f3bcee4a93e3449f09621cbd2b65d329e9', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (index.h("div", { key: '48d325c8a852f56ed57a9ada1a6709d05ba32ee2', id: headerID, class: {
314
+ }, class: Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), index.h("ion-backdrop", { key: '81cf3f7d19864e041813987b46d2d115b8466819', tappable: this.backdropDismiss }), index.h("div", { key: '791c6a976683646fc306a42c15c5078b6f06a45f', tabindex: "0", "aria-hidden": "true" }), index.h("div", { key: 'a350b489ef7852eab9dc2227ce6d92da27dd9bf9', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, index.h("div", { key: '69ba51ee13510c1a411d87cb4845b11b7302a36f', class: "action-sheet-container" }, index.h("div", { key: 'bded15b8306c36591e526f0f99e1eeabcbab3915', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (index.h("div", { key: '06b5147c0f6d9180fe8f12e75c9b4a0310226adc', id: headerID, class: {
316
315
  'action-sheet-title': true,
317
316
  'action-sheet-has-sub-title': this.subHeader !== undefined,
318
- } }, header, this.subHeader && index.h("div", { key: '66093728052eb67f37a35f3232761ce4a08896f3', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (index.h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), index.h("span", { class: "action-sheet-button-inner" }, b.icon && index.h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && index.h("ion-ripple-effect", null))))), cancelButton && (index.h("div", { key: 'f4eb8e3e2885b85af5080df18d0de0bdd1d719de', class: "action-sheet-group action-sheet-group-cancel" }, index.h("button", Object.assign({ key: '169f4eb09255aba85062baad49ceb151239fbfb7' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), index.h("span", { key: '25fb8a466dd67ea94c79cfb4f9965527e1ce6d42', class: "action-sheet-button-inner" }, cancelButton.icon && (index.h("ion-icon", { key: 'eb5b071e120a2c86afdf967af6a763a43044d1ca', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && index.h("ion-ripple-effect", { key: '452ad7e1052b2c681e2d98de8193949755ad4d54' })))))), index.h("div", { key: 'e1cecf280c987c050d9445e2c458b903f153089b', tabindex: "0", "aria-hidden": "true" })));
317
+ } }, header, this.subHeader && index.h("div", { key: '54874362a75c679aba803bf4f8768f5404d2dd28', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (index.h("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), index.h("span", { class: "action-sheet-button-inner" }, b.icon && index.h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && index.h("ion-ripple-effect", null))))), cancelButton && (index.h("div", { key: '67b0de298eb424f3dea846a841b7a06d70e3930d', class: "action-sheet-group action-sheet-group-cancel" }, index.h("button", Object.assign({ key: 'e7e3f9a5495eea9b97dbf885ef36944f2e420eff' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), index.h("span", { key: 'f889d29ed6c3d14bbc1d805888351d87f5122377', class: "action-sheet-button-inner" }, cancelButton.icon && (index.h("ion-icon", { key: '7c05cf424b38c37fd40aaeb42a494387291571fb', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && index.h("ion-ripple-effect", { key: 'bed927b477dc2708a5123ef560274fca9819b3d6' })))))), index.h("div", { key: 'c5df1b11dc15a93892d57065d3dd5fbe02e43b39', tabindex: "0", "aria-hidden": "true" })));
319
318
  }
320
319
  get el() { return index.getElement(this); }
321
320
  static get watchers() { return {
@@ -359,16 +359,15 @@ const Alert = class {
359
359
  }
360
360
  /**
361
361
  * Dismiss the alert overlay after it has been presented.
362
+ * This is a no-op if the overlay has not been presented yet. If you want
363
+ * to remove an overlay from the DOM that was never presented, use the
364
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
362
365
  *
363
366
  * @param data Any data to emit in the dismiss events.
364
367
  * @param role The role of the element that is dismissing the alert.
365
368
  * This can be useful in a button handler for determining which button was
366
- * clicked to dismiss the alert.
367
- * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
368
- *
369
- * This is a no-op if the overlay has not been presented yet. If you want
370
- * to remove an overlay from the DOM that was never presented, use the
371
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
369
+ * clicked to dismiss the alert. Some examples include:
370
+ * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
372
371
  */
373
372
  async dismiss(data, role) {
374
373
  const unlock = await this.lockController.lock();
@@ -538,9 +537,9 @@ const Alert = class {
538
537
  * If neither are defined, do not set aria-labelledby.
539
538
  */
540
539
  const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
541
- return (index.h(index.Host, { key: 'f8ee04fe6a97a2585b302c8e1a9eea3b122e3479', tabindex: "-1", style: {
540
+ return (index.h(index.Host, { key: '6025440b9cd369d4fac89e7e4296c84a10a0b8e0', tabindex: "-1", style: {
542
541
  zIndex: `${20000 + overlayIndex}`,
543
- }, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, index.h("ion-backdrop", { key: 'e9592e879f51c27ef20016beec12c986be632cf3', tappable: this.backdropDismiss }), index.h("div", { key: '5e9425c3c8acdea6f8006389689c73220e2ce423', tabindex: "0", "aria-hidden": "true" }), index.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), index.h("div", { key: '934eba3759456cd4660e10f274edc7859f908461', class: "alert-head" }, header && (index.h("h2", { key: '7d5d98d71f81f59a2cba227121b6fa01e6cc53b6', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (index.h("h2", { key: 'e5f5d35748c58a98ee933eb15cb1dcaf8113e9a7', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (index.h("h3", { key: 'a5cb89ca02bfa9c4828e694cb0835493a9088b05', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), index.h("div", { key: 'cacffc31c911882df73e6845d15c8bb2d4acab56', tabindex: "0", "aria-hidden": "true" })));
542
+ }, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, index.h("ion-backdrop", { key: '3cd5ca8b99cb95b11dd22ab41a820d841142896f', tappable: this.backdropDismiss }), index.h("div", { key: '4cc62ae6e21424057d22aeef1e8fc77011e77cd5', tabindex: "0", "aria-hidden": "true" }), index.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), index.h("div", { key: '78694e3c0db2d408df3899fb1a90859bcc8d14cc', class: "alert-head" }, header && (index.h("h2", { key: 'ec88ff3e4e1ea871b5975133fdcf4cac38b05e0f', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (index.h("h2", { key: '9b09bc8bb68af255ef8b7d22587acc946148e544', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (index.h("h3", { key: '99abe815f75d2df7f1b77c0df9f3436724fea76f', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), index.h("div", { key: 'a43d0c22c0e46b1ef911f92ffeb253d7911b85f7', tabindex: "0", "aria-hidden": "true" })));
544
543
  }
545
544
  get el() { return index.getElement(this); }
546
545
  static get watchers() { return {