@ionic/core 8.6.3-dev.11751478001.1cb7436f → 8.6.3-nightly.20250620

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 (92) hide show
  1. package/components/action-sheet.js +9 -8
  2. package/components/alert.js +8 -7
  3. package/components/focus-visible.js +18 -27
  4. package/components/ion-app.js +1 -3
  5. package/components/ion-datetime.js +2 -8
  6. package/components/ion-loading.js +8 -7
  7. package/components/ion-menu.js +5 -27
  8. package/components/ion-reorder-group.js +2 -1
  9. package/components/ion-router.js +0 -1
  10. package/components/ion-searchbar.js +6 -4
  11. package/components/ion-select.js +3 -3
  12. package/components/ion-toast.js +7 -6
  13. package/components/modal.js +10 -26
  14. package/components/popover.js +7 -8
  15. package/dist/cjs/{focus-visible-ZV7jHMPt.js → focus-visible-CCvKiLh3.js} +18 -27
  16. package/dist/cjs/ion-action-sheet.cjs.entry.js +9 -8
  17. package/dist/cjs/ion-alert.cjs.entry.js +8 -7
  18. package/dist/cjs/ion-app_8.cjs.entry.js +2 -4
  19. package/dist/cjs/ion-datetime_3.cjs.entry.js +3 -9
  20. package/dist/cjs/ion-loading.cjs.entry.js +8 -7
  21. package/dist/cjs/ion-menu_3.cjs.entry.js +5 -27
  22. package/dist/cjs/ion-modal.cjs.entry.js +10 -26
  23. package/dist/cjs/ion-popover.cjs.entry.js +7 -8
  24. package/dist/cjs/ion-reorder_2.cjs.entry.js +2 -1
  25. package/dist/cjs/ion-route_4.cjs.entry.js +0 -1
  26. package/dist/cjs/ion-searchbar.cjs.entry.js +6 -4
  27. package/dist/cjs/ion-select_3.cjs.entry.js +3 -3
  28. package/dist/cjs/ion-toast.cjs.entry.js +7 -6
  29. package/dist/collection/components/action-sheet/action-sheet.js +12 -11
  30. package/dist/collection/components/alert/alert.js +11 -10
  31. package/dist/collection/components/app/app.js +3 -8
  32. package/dist/collection/components/datetime/datetime.js +8 -23
  33. package/dist/collection/components/loading/loading.js +11 -10
  34. package/dist/collection/components/menu/menu.js +19 -62
  35. package/dist/collection/components/modal/modal.js +16 -35
  36. package/dist/collection/components/popover/popover.js +14 -18
  37. package/dist/collection/components/reorder-group/reorder-group.js +3 -2
  38. package/dist/collection/components/router/router.js +1 -5
  39. package/dist/collection/components/searchbar/searchbar.js +7 -5
  40. package/dist/collection/components/select/select.js +3 -3
  41. package/dist/collection/components/toast/toast.js +10 -9
  42. package/dist/collection/utils/focus-visible.js +18 -27
  43. package/dist/docs.json +72 -138
  44. package/dist/esm/{focus-visible-DZ2gZBzK.js → focus-visible-BmVRXR1y.js} +18 -27
  45. package/dist/esm/ion-action-sheet.entry.js +9 -8
  46. package/dist/esm/ion-alert.entry.js +8 -7
  47. package/dist/esm/ion-app_8.entry.js +2 -4
  48. package/dist/esm/ion-datetime_3.entry.js +3 -9
  49. package/dist/esm/ion-loading.entry.js +8 -7
  50. package/dist/esm/ion-menu_3.entry.js +5 -27
  51. package/dist/esm/ion-modal.entry.js +10 -26
  52. package/dist/esm/ion-popover.entry.js +7 -8
  53. package/dist/esm/ion-reorder_2.entry.js +2 -1
  54. package/dist/esm/ion-route_4.entry.js +0 -1
  55. package/dist/esm/ion-searchbar.entry.js +6 -4
  56. package/dist/esm/ion-select_3.entry.js +3 -3
  57. package/dist/esm/ion-toast.entry.js +7 -6
  58. package/dist/ionic/ionic.esm.js +1 -1
  59. package/dist/ionic/{p-b758a177.entry.js → p-2020aa51.entry.js} +1 -1
  60. package/dist/ionic/p-29759454.entry.js +4 -0
  61. package/dist/ionic/{p-e37d6c67.entry.js → p-3a4feac2.entry.js} +1 -1
  62. package/dist/ionic/p-4ddc10ef.entry.js +4 -0
  63. package/dist/ionic/{p-2d0eccfb.entry.js → p-6b666996.entry.js} +1 -1
  64. package/dist/ionic/p-7149db7e.entry.js +4 -0
  65. package/dist/ionic/{p-2d46fbe7.entry.js → p-96389029.entry.js} +1 -1
  66. package/dist/ionic/{p-0d131a02.entry.js → p-9e699d4a.entry.js} +1 -1
  67. package/dist/ionic/p-BmVRXR1y.js +4 -0
  68. package/dist/ionic/p-bec79123.entry.js +4 -0
  69. package/dist/ionic/{p-03d21728.entry.js → p-cb787a4b.entry.js} +1 -1
  70. package/dist/ionic/{p-d8429eb4.entry.js → p-cd12ed1c.entry.js} +1 -1
  71. package/dist/ionic/{p-78a61b3f.entry.js → p-ead42a37.entry.js} +1 -1
  72. package/dist/types/components/action-sheet/action-sheet.d.ts +6 -5
  73. package/dist/types/components/alert/alert.d.ts +6 -5
  74. package/dist/types/components/app/app.d.ts +0 -2
  75. package/dist/types/components/datetime/datetime.d.ts +0 -6
  76. package/dist/types/components/loading/loading.d.ts +6 -5
  77. package/dist/types/components/menu/menu.d.ts +3 -25
  78. package/dist/types/components/modal/modal.d.ts +6 -14
  79. package/dist/types/components/popover/popover.d.ts +5 -6
  80. package/dist/types/components/reorder-group/reorder-group.d.ts +1 -0
  81. package/dist/types/components/router/router.d.ts +0 -1
  82. package/dist/types/components/searchbar/searchbar.d.ts +2 -0
  83. package/dist/types/components/toast/toast.d.ts +5 -4
  84. package/dist/types/components.d.ts +18 -32
  85. package/hydrate/index.js +86 -136
  86. package/hydrate/index.mjs +86 -136
  87. package/package.json +3 -3
  88. package/dist/ionic/p-69f91268.entry.js +0 -4
  89. package/dist/ionic/p-7d5cf8c1.entry.js +0 -4
  90. package/dist/ionic/p-9e32212d.entry.js +0 -4
  91. package/dist/ionic/p-DZ2gZBzK.js +0 -4
  92. package/dist/ionic/p-b9ba04ca.entry.js +0 -4
package/hydrate/index.js CHANGED
@@ -7539,15 +7539,16 @@ class ActionSheet {
7539
7539
  }
7540
7540
  /**
7541
7541
  * Dismiss the action sheet overlay after it has been presented.
7542
- * This is a no-op if the overlay has not been presented yet. If you want
7543
- * to remove an overlay from the DOM that was never presented, use the
7544
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
7545
7542
  *
7546
7543
  * @param data Any data to emit in the dismiss events.
7547
7544
  * @param role The role of the element that is dismissing the action sheet.
7548
7545
  * This can be useful in a button handler for determining which button was
7549
- * clicked to dismiss the action sheet. Some examples include:
7550
- * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
7546
+ * clicked to dismiss the action sheet.
7547
+ * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
7548
+ *
7549
+ * This is a no-op if the overlay has not been presented yet. If you want
7550
+ * to remove an overlay from the DOM that was never presented, use the
7551
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
7551
7552
  */
7552
7553
  async dismiss(data, role) {
7553
7554
  const unlock = await this.lockController.lock();
@@ -7659,12 +7660,12 @@ class ActionSheet {
7659
7660
  const cancelButton = allButtons.find((b) => b.role === 'cancel');
7660
7661
  const buttons = allButtons.filter((b) => b.role !== 'cancel');
7661
7662
  const headerID = `action-sheet-${overlayIndex}-header`;
7662
- return (hAsync(Host, Object.assign({ key: '9fef156b2a1f09ca4a6c1fe1f37c374139bde03c', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
7663
+ return (hAsync(Host, Object.assign({ key: '7bbd202ca9e19727e7514abbe073687d982f80c3', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
7663
7664
  zIndex: `${20000 + this.overlayIndex}`,
7664
- }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), hAsync("ion-backdrop", { key: '81cf3f7d19864e041813987b46d2d115b8466819', tappable: this.backdropDismiss }), hAsync("div", { key: '791c6a976683646fc306a42c15c5078b6f06a45f', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'a350b489ef7852eab9dc2227ce6d92da27dd9bf9', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: '69ba51ee13510c1a411d87cb4845b11b7302a36f', class: "action-sheet-container" }, hAsync("div", { key: 'bded15b8306c36591e526f0f99e1eeabcbab3915', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (hAsync("div", { key: '06b5147c0f6d9180fe8f12e75c9b4a0310226adc', id: headerID, class: {
7665
+ }, class: Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), hAsync("ion-backdrop", { key: '23344a9221a2e6720d7b9de5249dc37256cafa7b', tappable: this.backdropDismiss }), hAsync("div", { key: 'fbc2ba15549c2ab04e759e82df6e177fd80cc0a6', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '748ee5235d0b4cb26d6f1b7589f77af2e37ad28a', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: '7ce5fa236cf75e9b1e49c4725c9a811078706554', class: "action-sheet-container" }, hAsync("div", { key: 'dc2251f3bcee4a93e3449f09621cbd2b65d329e9', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (hAsync("div", { key: '48d325c8a852f56ed57a9ada1a6709d05ba32ee2', id: headerID, class: {
7665
7666
  'action-sheet-title': true,
7666
7667
  'action-sheet-has-sub-title': this.subHeader !== undefined,
7667
- } }, header, this.subHeader && hAsync("div", { key: '54874362a75c679aba803bf4f8768f5404d2dd28', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (hAsync("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass$3(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), hAsync("span", { class: "action-sheet-button-inner" }, b.icon && hAsync("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && hAsync("ion-ripple-effect", null))))), cancelButton && (hAsync("div", { key: '67b0de298eb424f3dea846a841b7a06d70e3930d', class: "action-sheet-group action-sheet-group-cancel" }, hAsync("button", Object.assign({ key: 'e7e3f9a5495eea9b97dbf885ef36944f2e420eff' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass$3(cancelButton), onClick: () => this.buttonClick(cancelButton) }), hAsync("span", { key: 'f889d29ed6c3d14bbc1d805888351d87f5122377', class: "action-sheet-button-inner" }, cancelButton.icon && (hAsync("ion-icon", { key: '7c05cf424b38c37fd40aaeb42a494387291571fb', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && hAsync("ion-ripple-effect", { key: 'bed927b477dc2708a5123ef560274fca9819b3d6' })))))), hAsync("div", { key: 'c5df1b11dc15a93892d57065d3dd5fbe02e43b39', tabindex: "0", "aria-hidden": "true" })));
7668
+ } }, header, this.subHeader && hAsync("div", { key: '66093728052eb67f37a35f3232761ce4a08896f3', class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (hAsync("button", Object.assign({}, b.htmlAttributes, { type: "button", id: b.id, class: buttonClass$3(b), onClick: () => this.buttonClick(b), disabled: b.disabled }), hAsync("span", { class: "action-sheet-button-inner" }, b.icon && hAsync("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && hAsync("ion-ripple-effect", null))))), cancelButton && (hAsync("div", { key: 'f4eb8e3e2885b85af5080df18d0de0bdd1d719de', class: "action-sheet-group action-sheet-group-cancel" }, hAsync("button", Object.assign({ key: '169f4eb09255aba85062baad49ceb151239fbfb7' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass$3(cancelButton), onClick: () => this.buttonClick(cancelButton) }), hAsync("span", { key: '25fb8a466dd67ea94c79cfb4f9965527e1ce6d42', class: "action-sheet-button-inner" }, cancelButton.icon && (hAsync("ion-icon", { key: 'eb5b071e120a2c86afdf967af6a763a43044d1ca', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && hAsync("ion-ripple-effect", { key: '452ad7e1052b2c681e2d98de8193949755ad4d54' })))))), hAsync("div", { key: 'e1cecf280c987c050d9445e2c458b903f153089b', tabindex: "0", "aria-hidden": "true" })));
7668
7669
  }
7669
7670
  get el() { return getElement(this); }
7670
7671
  static get watchers() { return {
@@ -8217,15 +8218,16 @@ class Alert {
8217
8218
  }
8218
8219
  /**
8219
8220
  * Dismiss the alert overlay after it has been presented.
8220
- * This is a no-op if the overlay has not been presented yet. If you want
8221
- * to remove an overlay from the DOM that was never presented, use the
8222
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
8223
8221
  *
8224
8222
  * @param data Any data to emit in the dismiss events.
8225
8223
  * @param role The role of the element that is dismissing the alert.
8226
8224
  * This can be useful in a button handler for determining which button was
8227
- * clicked to dismiss the alert. Some examples include:
8228
- * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
8225
+ * clicked to dismiss the alert.
8226
+ * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
8227
+ *
8228
+ * This is a no-op if the overlay has not been presented yet. If you want
8229
+ * to remove an overlay from the DOM that was never presented, use the
8230
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
8229
8231
  */
8230
8232
  async dismiss(data, role) {
8231
8233
  const unlock = await this.lockController.lock();
@@ -8393,9 +8395,9 @@ class Alert {
8393
8395
  * If neither are defined, do not set aria-labelledby.
8394
8396
  */
8395
8397
  const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
8396
- return (hAsync(Host, { key: '6025440b9cd369d4fac89e7e4296c84a10a0b8e0', tabindex: "-1", style: {
8398
+ return (hAsync(Host, { key: 'f8ee04fe6a97a2585b302c8e1a9eea3b122e3479', tabindex: "-1", style: {
8397
8399
  zIndex: `${20000 + overlayIndex}`,
8398
- }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, hAsync("ion-backdrop", { key: '3cd5ca8b99cb95b11dd22ab41a820d841142896f', tappable: this.backdropDismiss }), hAsync("div", { key: '4cc62ae6e21424057d22aeef1e8fc77011e77cd5', tabindex: "0", "aria-hidden": "true" }), hAsync("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), hAsync("div", { key: '78694e3c0db2d408df3899fb1a90859bcc8d14cc', class: "alert-head" }, header && (hAsync("h2", { key: 'ec88ff3e4e1ea871b5975133fdcf4cac38b05e0f', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (hAsync("h2", { key: '9b09bc8bb68af255ef8b7d22587acc946148e544', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (hAsync("h3", { key: '99abe815f75d2df7f1b77c0df9f3436724fea76f', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("div", { key: 'a43d0c22c0e46b1ef911f92ffeb253d7911b85f7', tabindex: "0", "aria-hidden": "true" })));
8400
+ }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, hAsync("ion-backdrop", { key: 'e9592e879f51c27ef20016beec12c986be632cf3', tappable: this.backdropDismiss }), hAsync("div", { key: '5e9425c3c8acdea6f8006389689c73220e2ce423', tabindex: "0", "aria-hidden": "true" }), hAsync("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), hAsync("div", { key: '934eba3759456cd4660e10f274edc7859f908461', class: "alert-head" }, header && (hAsync("h2", { key: '7d5d98d71f81f59a2cba227121b6fa01e6cc53b6', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (hAsync("h2", { key: 'e5f5d35748c58a98ee933eb15cb1dcaf8113e9a7', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (hAsync("h3", { key: 'a5cb89ca02bfa9c4828e694cb0835493a9088b05', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("div", { key: 'cacffc31c911882df73e6845d15c8bb2d4acab56', tabindex: "0", "aria-hidden": "true" })));
8399
8401
  }
8400
8402
  get el() { return getElement(this); }
8401
8403
  static get watchers() { return {
@@ -8464,8 +8466,6 @@ class App {
8464
8466
  * a result of another user action. (Ex: We focus the first element
8465
8467
  * inside of a popover when the user presents it, but the popover is not always
8466
8468
  * presented as a result of keyboard action.)
8467
- *
8468
- * @param elements An array of HTML elements to set focus on.
8469
8469
  */
8470
8470
  async setFocus(elements) {
8471
8471
  if (this.focusVisible) {
@@ -8474,7 +8474,7 @@ class App {
8474
8474
  }
8475
8475
  render() {
8476
8476
  const mode = getIonMode$1(this);
8477
- return (hAsync(Host, { key: '9be440c65819e4fa67c2c3c6477ab40b3ad3eed3', class: {
8477
+ return (hAsync(Host, { key: '03aa892f986330078d112b1e8b010df98fa7e39e', class: {
8478
8478
  [mode]: true,
8479
8479
  'ion-page': true,
8480
8480
  'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
@@ -10414,44 +10414,33 @@ const FOCUS_KEYS = [
10414
10414
  ];
10415
10415
  const startFocusVisible = (rootEl) => {
10416
10416
  let currentFocus = [];
10417
- // Tracks if the last interaction was a pointer event (mouse, touch, pen)
10418
- // Used to distinguish between pointer and keyboard navigation for focus styling
10419
- let hadPointerEvent = false;
10417
+ let keyboardMode = true;
10420
10418
  const ref = rootEl ? rootEl.shadowRoot : document;
10421
10419
  const root = rootEl ? rootEl : document.body;
10422
- // Adds or removes the focused class for styling
10423
10420
  const setFocus = (elements) => {
10424
10421
  currentFocus.forEach((el) => el.classList.remove(ION_FOCUSED));
10425
10422
  elements.forEach((el) => el.classList.add(ION_FOCUSED));
10426
10423
  currentFocus = elements;
10427
10424
  };
10428
- // Do not set focus on pointer interactions
10429
- const pointerDown = (ev) => {
10430
- if (ev instanceof PointerEvent && ev.pointerType !== '') {
10431
- hadPointerEvent = true;
10432
- // Reset after the event loop so only the immediate focusin is suppressed
10433
- setTimeout(() => {
10434
- hadPointerEvent = false;
10435
- }, 0);
10436
- }
10425
+ const pointerDown = () => {
10426
+ keyboardMode = false;
10427
+ setFocus([]);
10437
10428
  };
10438
- // Clear hadPointerEvent so keyboard navigation shows focus
10439
- // Also, clear focus if the key is not a navigation key
10440
10429
  const onKeydown = (ev) => {
10441
- hadPointerEvent = false;
10442
- const keyboardEvent = ev;
10443
- if (!FOCUS_KEYS.includes(keyboardEvent.key)) {
10430
+ keyboardMode = FOCUS_KEYS.includes(ev.key);
10431
+ if (!keyboardMode) {
10444
10432
  setFocus([]);
10445
10433
  }
10446
10434
  };
10447
- // Set focus if the last interaction was NOT a pointer event
10448
- // This works around iOS/Safari bugs where keydown is not fired for Tab
10449
10435
  const onFocusin = (ev) => {
10450
- const target = ev.target;
10451
- if (target.classList.contains(ION_FOCUSABLE) && !hadPointerEvent) {
10452
- const toFocus = ev
10453
- .composedPath()
10454
- .filter((el) => el instanceof HTMLElement && el.classList.contains(ION_FOCUSABLE));
10436
+ if (keyboardMode && ev.composedPath !== undefined) {
10437
+ const toFocus = ev.composedPath().filter((el) => {
10438
+ // TODO(FW-2832): type
10439
+ if (el.classList) {
10440
+ return el.classList.contains(ION_FOCUSABLE);
10441
+ }
10442
+ return false;
10443
+ });
10455
10444
  setFocus(toFocus);
10456
10445
  }
10457
10446
  };
@@ -10463,12 +10452,14 @@ const startFocusVisible = (rootEl) => {
10463
10452
  ref.addEventListener('keydown', onKeydown);
10464
10453
  ref.addEventListener('focusin', onFocusin);
10465
10454
  ref.addEventListener('focusout', onFocusout);
10466
- ref.addEventListener('pointerdown', pointerDown, { passive: true });
10455
+ ref.addEventListener('touchstart', pointerDown, { passive: true });
10456
+ ref.addEventListener('mousedown', pointerDown);
10467
10457
  const destroy = () => {
10468
10458
  ref.removeEventListener('keydown', onKeydown);
10469
10459
  ref.removeEventListener('focusin', onFocusin);
10470
10460
  ref.removeEventListener('focusout', onFocusout);
10471
- ref.removeEventListener('pointerdown', pointerDown);
10461
+ ref.removeEventListener('touchstart', pointerDown);
10462
+ ref.removeEventListener('mousedown', pointerDown);
10472
10463
  };
10473
10464
  return {
10474
10465
  destroy,
@@ -13103,8 +13094,6 @@ class Datetime {
13103
13094
  * Confirms the selected datetime value, updates the
13104
13095
  * `value` property, and optionally closes the popover
13105
13096
  * or modal that the datetime was presented in.
13106
- *
13107
- * @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
13108
13097
  */
13109
13098
  async confirm(closeOverlay = false) {
13110
13099
  const { isCalendarPicker, activeParts, preferWheel, workingParts } = this;
@@ -13138,8 +13127,6 @@ class Datetime {
13138
13127
  * Resets the internal state of the datetime but does not update the value.
13139
13128
  * Passing a valid ISO-8601 string will reset the state of the component to the provided date.
13140
13129
  * If no value is provided, the internal state will be reset to the clamped value of the min, max and today.
13141
- *
13142
- * @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.
13143
13130
  */
13144
13131
  async reset(startDate) {
13145
13132
  this.processValue(startDate);
@@ -13149,8 +13136,6 @@ class Datetime {
13149
13136
  * optionally closes the popover
13150
13137
  * or modal that the datetime was
13151
13138
  * presented in.
13152
- *
13153
- * @param closeOverlay If `true`, closes the parent overlay. Defaults to `false`.
13154
13139
  */
13155
13140
  async cancel(closeOverlay = false) {
13156
13141
  this.ionCancel.emit();
@@ -13964,7 +13949,7 @@ class Datetime {
13964
13949
  const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
13965
13950
  const hasWheelVariant = hasDatePresentation && preferWheel;
13966
13951
  renderHiddenInput(true, el, name, formatValue(value), disabled);
13967
- return (hAsync(Host, { key: '79677f5bc0fb32fb68569636bd76e68238e62eb8', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
13952
+ return (hAsync(Host, { key: '7ea46c27aa5fb01b748dd4d6eb2340ad13f65175', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
13968
13953
  [mode]: true,
13969
13954
  ['datetime-readonly']: readonly,
13970
13955
  ['datetime-disabled']: disabled,
@@ -13974,7 +13959,7 @@ class Datetime {
13974
13959
  [`datetime-size-${size}`]: true,
13975
13960
  [`datetime-prefer-wheel`]: hasWheelVariant,
13976
13961
  [`datetime-grid`]: isGridStyle,
13977
- })) }, hAsync("div", { key: 'bf07b1e3c64af6e837663ff470bea93787a6e86f', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
13962
+ })) }, hAsync("div", { key: '6964378424c58b053e23279d08eaedf28dfcc315', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
13978
13963
  }
13979
13964
  get el() { return getElement(this); }
13980
13965
  static get watchers() { return {
@@ -19022,15 +19007,16 @@ class Loading {
19022
19007
  }
19023
19008
  /**
19024
19009
  * Dismiss the loading overlay after it has been presented.
19025
- * This is a no-op if the overlay has not been presented yet. If you want
19026
- * to remove an overlay from the DOM that was never presented, use the
19027
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
19028
19010
  *
19029
19011
  * @param data Any data to emit in the dismiss events.
19030
19012
  * @param role The role of the element that is dismissing the loading.
19031
19013
  * This can be useful in a button handler for determining which button was
19032
- * clicked to dismiss the loading. Some examples include:
19033
- * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
19014
+ * clicked to dismiss the loading.
19015
+ * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
19016
+ *
19017
+ * This is a no-op if the overlay has not been presented yet. If you want
19018
+ * to remove an overlay from the DOM that was never presented, use the
19019
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
19034
19020
  */
19035
19021
  async dismiss(data, role) {
19036
19022
  const unlock = await this.lockController.lock();
@@ -19072,9 +19058,9 @@ class Loading {
19072
19058
  * Otherwise, don't set aria-labelledby.
19073
19059
  */
19074
19060
  const ariaLabelledBy = message !== undefined ? msgId : null;
19075
- return (hAsync(Host, Object.assign({ key: '4497183ce220242abe19ae15f328f9a92ccafbbc', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
19061
+ return (hAsync(Host, Object.assign({ key: '6369ed244c06c39aa338141bffacf7a861d7da1a', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
19076
19062
  zIndex: `${40000 + this.overlayIndex}`,
19077
- }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), hAsync("ion-backdrop", { key: '231dec84e424a2dc358ce95b84d6035cf43e4dea', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'c9af29b6e6bb49a217396a5c874bbfb8835a926c', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'a8659863743cdeccbe1ba810eaabfd3ebfcb86f3', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: '3b346f39bc71691bd8686556a1e142198a7b12fa', class: "loading-spinner" }, hAsync("ion-spinner", { key: '8dc2bf1556e5138e262827f1516c59ecd09f3520', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: '054164c0dbae9a0e0973dd3c8e28f5b771820310', tabindex: "0", "aria-hidden": "true" })));
19063
+ }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), hAsync("ion-backdrop", { key: '1fd5fd8581d59eec321e534f9116f3ec0501010a', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: 'b4028045b0c8fbb9946136d85d939d55120b867c', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'b045fb0e61cc28e8163d45be18b431918dc27c80', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: '2cf9df796f987d1251b3599d10a48ed87a1d0eb9', class: "loading-spinner" }, hAsync("ion-spinner", { key: '371cd41655402326adcb1e2fe1481009a83243b2', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: '2a5e5e66d22ee4c1cef0c93815ef023d47e7a8eb', tabindex: "0", "aria-hidden": "true" })));
19078
19064
  }
19079
19065
  get el() { return getElement(this); }
19080
19066
  static get watchers() { return {
@@ -19702,7 +19688,7 @@ class Menu {
19702
19688
  return Promise.resolve(this._isOpen);
19703
19689
  }
19704
19690
  /**
19705
- * Returns `true` if the menu is active.
19691
+ * Returns `true` is the menu is active.
19706
19692
  *
19707
19693
  * A menu is active when it can be opened or closed, meaning it's enabled
19708
19694
  * and it's not part of a `ion-split-pane`.
@@ -19713,10 +19699,6 @@ class Menu {
19713
19699
  /**
19714
19700
  * Opens the menu. If the menu is already open or it can't be opened,
19715
19701
  * it returns `false`.
19716
- *
19717
- * @param animated If `true`, the menu will animate when opening.
19718
- * If `false`, the menu will open instantly without animation.
19719
- * Defaults to `true`.
19720
19702
  */
19721
19703
  open(animated = true) {
19722
19704
  return this.setOpen(true, animated);
@@ -19724,38 +19706,20 @@ class Menu {
19724
19706
  /**
19725
19707
  * Closes the menu. If the menu is already closed or it can't be closed,
19726
19708
  * it returns `false`.
19727
- *
19728
- * @param animated If `true`, the menu will animate when closing. If `false`,
19729
- * the menu will close instantly without animation. Defaults to `true`.
19730
- * @param role The role of the element that is closing the menu.
19731
- * This can be useful in a button handler for determining which button was
19732
- * clicked to close the menu. Some examples include:
19733
- * `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
19734
19709
  */
19735
19710
  close(animated = true, role) {
19736
19711
  return this.setOpen(false, animated, role);
19737
19712
  }
19738
19713
  /**
19739
- * Toggles the menu. If the menu is already open, it will try to close,
19740
- * otherwise it will try to open it.
19714
+ * Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it.
19741
19715
  * If the operation can't be completed successfully, it returns `false`.
19742
- *
19743
- * @param animated If `true`, the menu will animate when opening/closing.
19744
- * If `false`, the menu will open/close instantly without animation.
19745
- * Defaults to `true`.
19746
19716
  */
19747
19717
  toggle(animated = true) {
19748
19718
  return this.setOpen(!this._isOpen, animated);
19749
19719
  }
19750
19720
  /**
19751
- * Opens or closes the menu.
19721
+ * Opens or closes the button.
19752
19722
  * If the operation can't be completed successfully, it returns `false`.
19753
- *
19754
- * @param shouldOpen If `true`, the menu will open. If `false`, the menu
19755
- * will close.
19756
- * @param animated If `true`, the menu will animate when opening/closing.
19757
- * If `false`, the menu will open/close instantly without animation.
19758
- * @param role The role of the element that is closing the menu.
19759
19723
  */
19760
19724
  setOpen(shouldOpen, animated = true, role) {
19761
19725
  return menuController._setOpen(this, shouldOpen, animated, role);
@@ -20120,14 +20084,14 @@ class Menu {
20120
20084
  * the ionBackButton listener in the menu controller
20121
20085
  * will handle closing the menu when Escape is pressed.
20122
20086
  */
20123
- return (hAsync(Host, { key: 'a5c75aa40a34530b56ee3b98d706a5ac5ae300de', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
20087
+ return (hAsync(Host, { key: '9e4ae9476a76781f1d228395c9af9e1c39ec82bb', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
20124
20088
  [mode]: true,
20125
20089
  [`menu-type-${type}`]: true,
20126
20090
  'menu-enabled': !disabled,
20127
20091
  [`menu-side-${side}`]: true,
20128
20092
  'menu-pane-visible': isPaneVisible,
20129
20093
  'split-pane-side': hostContext('ion-split-pane', el),
20130
- } }, hAsync("div", { key: '3f5f70acd4d3ed6bb445122f4f01d73db738a75f', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: '3161326c9330e7f7441299c428b87a91b31a83e9' })), hAsync("ion-backdrop", { key: '917b50f38489bdf03d0c642af8b4e4e172c7dc4c', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
20094
+ } }, hAsync("div", { key: 'c6153589d872ac7e3fdf5eedfdb858eb64ccd713', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: '9994aac4b22f17db34c9b8b2aa56b8710b9df645' })), hAsync("ion-backdrop", { key: 'f09ac30cc4dd2dcb10628965e659dae5a23baf98', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
20131
20095
  }
20132
20096
  get el() { return getElement(this); }
20133
20097
  static get watchers() { return {
@@ -22132,17 +22096,6 @@ class Modal {
22132
22096
  el.dispatchEvent(ev);
22133
22097
  }
22134
22098
  };
22135
- /**
22136
- * When the modal receives focus directly, pass focus to the handle
22137
- * if it exists and is focusable, otherwise let the focus trap handle it.
22138
- */
22139
- this.onModalFocus = (ev) => {
22140
- const { dragHandleEl, el } = this;
22141
- // Only handle focus if the modal itself was focused (not a child element)
22142
- if (ev.target === el && dragHandleEl && dragHandleEl.tabIndex !== -1) {
22143
- dragHandleEl.focus();
22144
- }
22145
- };
22146
22099
  }
22147
22100
  onIsOpenChange(newValue, oldValue) {
22148
22101
  if (newValue === true && oldValue === false) {
@@ -22474,13 +22427,13 @@ class Modal {
22474
22427
  }
22475
22428
  /**
22476
22429
  * Dismiss the modal overlay after it has been presented.
22430
+ *
22431
+ * @param data Any data to emit in the dismiss events.
22432
+ * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.
22433
+ *
22477
22434
  * This is a no-op if the overlay has not been presented yet. If you want
22478
22435
  * to remove an overlay from the DOM that was never presented, use the
22479
22436
  * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
22480
- *
22481
- * @param data Any data to emit in the dismiss events.
22482
- * @param role The role of the element that is dismissing the modal.
22483
- * For example, `cancel` or `backdrop`.
22484
22437
  */
22485
22438
  async dismiss(data, role) {
22486
22439
  var _a;
@@ -22552,10 +22505,8 @@ class Modal {
22552
22505
  return eventMethod(this.el, 'ionModalWillDismiss');
22553
22506
  }
22554
22507
  /**
22555
- * Move a sheet style modal to a specific breakpoint.
22556
- *
22557
- * @param breakpoint The breakpoint value to move the sheet modal to.
22558
- * Must be a value defined in your `breakpoints` array.
22508
+ * Move a sheet style modal to a specific breakpoint. The breakpoint value must
22509
+ * be a value defined in your `breakpoints` array.
22559
22510
  */
22560
22511
  async setCurrentBreakpoint(breakpoint) {
22561
22512
  if (!this.isSheetModal) {
@@ -22614,21 +22565,18 @@ class Modal {
22614
22565
  const mode = getIonMode$1(this);
22615
22566
  const isCardModal = presentingElement !== undefined && mode === 'ios';
22616
22567
  const isHandleCycle = handleBehavior === 'cycle';
22617
- const isSheetModalWithHandle = isSheetModal && showHandle;
22618
- return (hAsync(Host, Object.assign({ key: '8add05bb43a2cdb5e3cf180147d31eb85a018fe0', "no-router": true,
22619
- // Allow the modal to be navigable when the handle is focusable
22620
- tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
22568
+ return (hAsync(Host, Object.assign({ key: '0bcbdcfcd7d890eb599da3f97f21c317d34f8e0e', "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
22621
22569
  zIndex: `${20000 + this.overlayIndex}`,
22622
- }, 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 }), hAsync("ion-backdrop", { key: '90a6605a9564a699d6f66cf71cf6b506796a2963', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: 'a97d071395333bf803c0a9347bda000cf7500d8d', class: "modal-shadow" }), hAsync("div", Object.assign({ key: 'e7b7985c7414a13e3ba8dcecf497b76e92edf53e',
22570
+ }, 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 }), hAsync("ion-backdrop", { key: 'd72159e73daa5af7349aa9e8f695aa435eb43069', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: 'fd2d9b13676ae72473881649a397b6eacde03a03', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '908eccb1ad982dcde2dbcff0cbb18b6e60f8ba74',
22623
22571
  /*
22624
22572
  role and aria-modal must be used on the
22625
22573
  same element. They must also be set inside the
22626
22574
  shadow DOM otherwise ion-button will not be highlighted
22627
22575
  when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
22628
22576
  */
22629
- role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '8258b65570b11a8ee9c9df2537d6419cd2e34536', class: "modal-handle",
22577
+ role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '332dc0b40363a77c7be62331d9f26def91c790e9', class: "modal-handle",
22630
22578
  // Prevents the handle from receiving keyboard focus when it does not cycle
22631
- 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) })), hAsync("slot", { key: '394370d0ed03ee03152f8f8abae7ff7664ca5c13' }))));
22579
+ tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle" })), hAsync("slot", { key: 'c32698350193c450327e97049daf8b8d1fda0d0e' }))));
22632
22580
  }
22633
22581
  get el() { return getElement(this); }
22634
22582
  static get watchers() { return {
@@ -26855,8 +26803,6 @@ class Popover {
26855
26803
  * Developers can pass a mouse, touch, or pointer event
26856
26804
  * to position the popover relative to where that event
26857
26805
  * was dispatched.
26858
- *
26859
- * @param event The event to position the popover relative to.
26860
26806
  */
26861
26807
  async present(event) {
26862
26808
  const unlock = await this.lockController.lock();
@@ -26920,14 +26866,15 @@ class Popover {
26920
26866
  }
26921
26867
  /**
26922
26868
  * Dismiss the popover overlay after it has been presented.
26923
- * This is a no-op if the overlay has not been presented yet. If you want
26924
- * to remove an overlay from the DOM that was never presented, use the
26925
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
26926
26869
  *
26927
26870
  * @param data Any data to emit in the dismiss events.
26928
- * @param role The role of the element that is dismissing the popover. For example, `cancel` or `backdrop`.
26871
+ * @param role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'.
26929
26872
  * @param dismissParentPopover If `true`, dismissing this popover will also dismiss
26930
26873
  * a parent popover if this popover is nested. Defaults to `true`.
26874
+ *
26875
+ * This is a no-op if the overlay has not been presented yet. If you want
26876
+ * to remove an overlay from the DOM that was never presented, use the
26877
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
26931
26878
  */
26932
26879
  async dismiss(data, role, dismissParentPopover = true) {
26933
26880
  const unlock = await this.lockController.lock();
@@ -26979,9 +26926,9 @@ class Popover {
26979
26926
  const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
26980
26927
  const desktop = isPlatform('desktop');
26981
26928
  const enableArrow = arrow && !parentPopover;
26982
- return (hAsync(Host, Object.assign({ key: '16866c02534968c982cf4730d2936d03a5107c8b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
26929
+ return (hAsync(Host, Object.assign({ key: '1de4862099cfcb5035e78008e6dc7c1371846f9a', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
26983
26930
  zIndex: `${20000 + this.overlayIndex}`,
26984
- }, 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 && hAsync("ion-backdrop", { key: '0df258601a4d30df3c27aa8234a7d5e056c3ecbb', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: 'f94e80ed996b957b5cd09b826472b4f60e8fcc78', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '185ce22f6386e8444a9cc7b8818dbfc16c463c99', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '206202b299404e110de5397b229678cca18568d3', class: "popover-content", part: "content" }, hAsync("slot", { key: 'ee543a0b92d6e35a837c0a0e4617c7b0fc4ad0b0' })))));
26931
+ }, 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 && hAsync("ion-backdrop", { key: '981aa4e0102cb93312ffbd8243cdf2a0cdc60469', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: '1a28ed55e9d34ef78cf0eb0178643301fd2dd75d', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '1c206ea5eb3c0b5883a3d45c34cd22dd5ffe4b65', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '5ba561486a328c0c7ab825995fdbfb7a196429a4', class: "popover-content", part: "content" }, hAsync("slot", { key: '00fc244ce9dcc2dfc677e6c34b7c8e7a330b2b03' })))));
26985
26932
  }
26986
26933
  get el() { return getElement(this); }
26987
26934
  static get watchers() { return {
@@ -29561,6 +29508,7 @@ class ReorderGroup {
29561
29508
  }
29562
29509
  /**
29563
29510
  * Completes the reorder operation. Must be called by the `ionItemReorder` event.
29511
+ *
29564
29512
  * If a list of items is passed, the list will be reordered and returned in the
29565
29513
  * proper order.
29566
29514
  *
@@ -29747,7 +29695,7 @@ class ReorderGroup {
29747
29695
  }
29748
29696
  render() {
29749
29697
  const mode = getIonMode$1(this);
29750
- return (hAsync(Host, { key: 'dfcdc3a6aa1b2fba15f861ec868d6a11e667c9de', class: {
29698
+ return (hAsync(Host, { key: 'f30613b361c5c3095b7928a92fb4b1e8d6eff600', class: {
29751
29699
  [mode]: true,
29752
29700
  'reorder-enabled': !this.disabled,
29753
29701
  'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
@@ -30586,7 +30534,6 @@ class Router {
30586
30534
  *
30587
30535
  * @param path The path to navigate to.
30588
30536
  * @param direction The direction of the animation. Defaults to `"forward"`.
30589
- * @param animation A custom animation to use for the transition.
30590
30537
  */
30591
30538
  async push(path, direction = 'forward', animation) {
30592
30539
  var _a;
@@ -31316,8 +31263,10 @@ class Searchbar {
31316
31263
  /**
31317
31264
  * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global
31318
31265
  * `input.focus()`.
31266
+ *
31319
31267
  * Developers who wish to focus an input when a page enters
31320
31268
  * should call `setFocus()` in the `ionViewDidEnter()` lifecycle method.
31269
+ *
31321
31270
  * Developers who wish to focus an input when an overlay is presented
31322
31271
  * should call `setFocus` after `didPresent` has resolved.
31323
31272
  *
@@ -31496,8 +31445,8 @@ class Searchbar {
31496
31445
  const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
31497
31446
  const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
31498
31447
  const shouldShowCancelButton = this.shouldShowCancelButton();
31499
- const cancelButton = this.showCancelButton !== 'never' && (hAsync("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" }, hAsync("div", { key: 'b3bbdcc033f3bd3441d619e4a252cef0dad4d07e', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
31500
- return (hAsync(Host, { key: '074aa60e051bfb3225e87d44bbb6346c59c73574', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
31448
+ const cancelButton = this.showCancelButton !== 'never' && (hAsync("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" }, hAsync("div", { key: '85df41676bed611467bd4df0002b08baee4f539c', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
31449
+ return (hAsync(Host, { key: 'e1e30cdd79f9f54d5f2d27501012358bc46880e5', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
31501
31450
  [mode]: true,
31502
31451
  'searchbar-animated': animated,
31503
31452
  'searchbar-disabled': this.disabled,
@@ -31507,14 +31456,14 @@ class Searchbar {
31507
31456
  'searchbar-has-focus': this.focused,
31508
31457
  'searchbar-should-show-clear': this.shouldShowClearButton(),
31509
31458
  'searchbar-should-show-cancel': this.shouldShowCancelButton(),
31510
- }) }, hAsync("div", { key: '54f58a79fe36e85d9295157303f1be89c98bbdaf', class: "searchbar-input-container" }, hAsync("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, hAsync("ion-icon", { key: '8b44dd90a3292c5cf872ef16a8520675f5673494', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: '79d9cfed8f01268044f82811a35d323a12dca749', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
31459
+ }) }, hAsync("div", { key: '7e9db147282a35bb1e3c9c6125b9a044e81ddde5', class: "searchbar-input-container" }, hAsync("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, hAsync("ion-icon", { key: '048b00348456bd827ae734491c46a67bfb146227', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: '71f64339bbfd54ebd26a0946c8ee9d726cd89c04', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
31511
31460
  /**
31512
31461
  * This prevents mobile browsers from
31513
31462
  * blurring the input when the clear
31514
31463
  * button is activated.
31515
31464
  */
31516
31465
  ev.preventDefault();
31517
- }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: 'aa3b9fa8a61f853236783ac7bcd0b113ea65ece2', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
31466
+ }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: '9b1a177b21951c1c95897a468b34bb7bbd63d137', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
31518
31467
  }
31519
31468
  get el() { return getElement(this); }
31520
31469
  static get watchers() { return {
@@ -32653,7 +32602,7 @@ class Select {
32653
32602
  const scrollSelectedIntoView = () => {
32654
32603
  const indexOfSelected = this.childOpts.findIndex((o) => o.value === this.value);
32655
32604
  if (indexOfSelected > -1) {
32656
- const selectedItem = overlay.querySelector(`.select-interface-option:nth-of-type(${indexOfSelected + 1})`);
32605
+ const selectedItem = overlay.querySelector(`.select-interface-option:nth-child(${indexOfSelected + 1})`);
32657
32606
  if (selectedItem) {
32658
32607
  /**
32659
32608
  * Browsers such as Firefox do not
@@ -33173,7 +33122,7 @@ class Select {
33173
33122
  * TODO(FW-5592): Remove hasStartEndSlots condition
33174
33123
  */
33175
33124
  const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
33176
- return (hAsync(Host, { key: 'c03fb65e8fc9f9aab295e07b282377d57d910519', onClick: this.onClick, class: createColorClasses$1(this.color, {
33125
+ return (hAsync(Host, { key: 'e33253af9b9daa14460c7c259fb138b4d2b875ae', onClick: this.onClick, class: createColorClasses$1(this.color, {
33177
33126
  [mode]: true,
33178
33127
  'in-item': inItem,
33179
33128
  'in-item-color': hostContext('ion-item.ion-color', el),
@@ -33191,7 +33140,7 @@ class Select {
33191
33140
  [`select-justify-${justify}`]: justifyEnabled,
33192
33141
  [`select-shape-${shape}`]: shape !== undefined,
33193
33142
  [`select-label-placement-${labelPlacement}`]: true,
33194
- }) }, hAsync("label", { key: '0d0c8ec55269adcac625f2899a547f4e7f3e3741', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: 'f6dfc93c0e23cbe75a2947abde67d842db2dad78', class: "select-wrapper-inner" }, hAsync("slot", { key: '957bfadf9f101f519091419a362d3abdc2be66f6', name: "start" }), hAsync("div", { key: 'ca349202a484e7f2e884533fd330f0b136754f7d', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: 'f0e62a6533ff1c8f62bd2d27f60b23385c4fa9ed', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: 'fb840d46bafafb09898ebeebbe8c181906a3d8a2', class: "select-highlight" })), this.renderBottomContent()));
33143
+ }) }, hAsync("label", { key: '03303b7131c77a78a933e8e496e7251b6b5c485b', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: '9037674db6a0adc189e887c9048f817d5afdf635', class: "select-wrapper-inner" }, hAsync("slot", { key: '7c9226c838ba4bcf5bc0b234fa1613ce335cf73d', name: "start" }), hAsync("div", { key: 'a7432c3efb5c65f88a5e4b0d35c5a433fa4e949d', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), hAsync("slot", { key: '028e683df26a8f573d7670da76e0ad26d21c83e0', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && hAsync("div", { key: '20341bcae3753048ce905d2aceffa5351a0db125', class: "select-highlight" })), this.renderBottomContent()));
33195
33144
  }
33196
33145
  get el() { return getElement(this); }
33197
33146
  static get watchers() { return {
@@ -35391,15 +35340,16 @@ class Toast {
35391
35340
  }
35392
35341
  /**
35393
35342
  * Dismiss the toast overlay after it has been presented.
35394
- * This is a no-op if the overlay has not been presented yet. If you want
35395
- * to remove an overlay from the DOM that was never presented, use the
35396
- * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
35397
35343
  *
35398
35344
  * @param data Any data to emit in the dismiss events.
35399
35345
  * @param role The role of the element that is dismissing the toast.
35400
35346
  * This can be useful in a button handler for determining which button was
35401
35347
  * clicked to dismiss the toast.
35402
- * Some examples include: `"cancel"`, `"destructive"`, `"selected"`, and `"backdrop"`.
35348
+ * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
35349
+ *
35350
+ * This is a no-op if the overlay has not been presented yet. If you want
35351
+ * to remove an overlay from the DOM that was never presented, use the
35352
+ * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
35403
35353
  */
35404
35354
  async dismiss(data, role) {
35405
35355
  var _a, _b;
@@ -35567,9 +35517,9 @@ class Toast {
35567
35517
  if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
35568
35518
  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);
35569
35519
  }
35570
- return (hAsync(Host, Object.assign({ key: 'd1ecd90c87700aad4685e230cdd430aa286b8791', tabindex: "-1" }, this.htmlAttributes, { style: {
35520
+ return (hAsync(Host, Object.assign({ key: '425be734aee0eeef281ab1609a9f982ce8b5e852', tabindex: "-1" }, this.htmlAttributes, { style: {
35571
35521
  zIndex: `${60000 + this.overlayIndex}`,
35572
- }, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: '4bfc863417324de69e222054d5cf9c452038b41e', class: wrapperClass }, hAsync("div", { key: '3417940afec0392e81b7d54c7cb00f3ab6c30d47', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: '6bf878fbc85c01e1e5faa9d97d46255a6511a952', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("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')))));
35522
+ }, class: createColorClasses$1(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), hAsync("div", { key: '7c3ad1a8df9e21fc30fc179c7edebeabcf3c6874', class: wrapperClass }, hAsync("div", { key: 'f950c21e8d7bf92653e0bd52e820ed6b84fa8cf5', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (hAsync("ion-icon", { key: '0266241927dbe16799adb57f9fc11bd5372877b2', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), hAsync("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')))));
35573
35523
  }
35574
35524
  get el() { return getElement(this); }
35575
35525
  static get watchers() { return {