voyager-ionic-core 8.3.1 → 8.3.4

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 (121) hide show
  1. package/components/action-sheet.js +2 -2
  2. package/components/alert.js +1 -1
  3. package/components/backdrop.js +1 -1
  4. package/components/ion-app.js +1 -2
  5. package/components/ion-input.js +20 -5
  6. package/components/ion-loading.js +1 -1
  7. package/components/ion-picker-legacy.js +1 -1
  8. package/components/ion-segment.js +19 -6
  9. package/components/ion-textarea.js +19 -4
  10. package/components/overlays.js +62 -7
  11. package/dist/cjs/index.cjs.js +1 -1
  12. package/dist/cjs/ion-action-sheet.cjs.entry.js +3 -3
  13. package/dist/cjs/ion-alert.cjs.entry.js +2 -2
  14. package/dist/cjs/ion-app_8.cjs.entry.js +1 -2
  15. package/dist/cjs/ion-backdrop.cjs.entry.js +1 -1
  16. package/dist/cjs/ion-datetime_3.cjs.entry.js +2 -2
  17. package/dist/cjs/ion-input.cjs.entry.js +20 -5
  18. package/dist/cjs/ion-loading.cjs.entry.js +2 -2
  19. package/dist/cjs/ion-menu_3.cjs.entry.js +1 -1
  20. package/dist/cjs/ion-modal.cjs.entry.js +1 -1
  21. package/dist/cjs/ion-popover.cjs.entry.js +1 -1
  22. package/dist/cjs/ion-segment_2.cjs.entry.js +19 -6
  23. package/dist/cjs/ion-select_3.cjs.entry.js +1 -1
  24. package/dist/cjs/ion-textarea.cjs.entry.js +19 -4
  25. package/dist/cjs/ion-toast.cjs.entry.js +1 -1
  26. package/dist/cjs/{overlays-0123d7d4.js → overlays-ba0f6986.js} +62 -7
  27. package/dist/collection/components/action-sheet/action-sheet.js +2 -2
  28. package/dist/collection/components/alert/alert.js +1 -1
  29. package/dist/collection/components/app/app.js +3 -7
  30. package/dist/collection/components/backdrop/backdrop.js +1 -1
  31. package/dist/collection/components/input/input.js +20 -5
  32. package/dist/collection/components/loading/loading.js +1 -1
  33. package/dist/collection/components/picker-legacy/picker.js +1 -1
  34. package/dist/collection/components/segment/segment.js +19 -6
  35. package/dist/collection/components/textarea/textarea.js +19 -4
  36. package/dist/collection/utils/overlays.js +62 -7
  37. package/dist/docs.json +41 -2
  38. package/dist/esm/index.js +1 -1
  39. package/dist/esm/ion-action-sheet.entry.js +3 -3
  40. package/dist/esm/ion-alert.entry.js +2 -2
  41. package/dist/esm/ion-app_8.entry.js +1 -2
  42. package/dist/esm/ion-backdrop.entry.js +1 -1
  43. package/dist/esm/ion-datetime_3.entry.js +2 -2
  44. package/dist/esm/ion-input.entry.js +20 -5
  45. package/dist/esm/ion-loading.entry.js +2 -2
  46. package/dist/esm/ion-menu_3.entry.js +1 -1
  47. package/dist/esm/ion-modal.entry.js +1 -1
  48. package/dist/esm/ion-popover.entry.js +1 -1
  49. package/dist/esm/ion-segment_2.entry.js +19 -6
  50. package/dist/esm/ion-select_3.entry.js +1 -1
  51. package/dist/esm/ion-textarea.entry.js +19 -4
  52. package/dist/esm/ion-toast.entry.js +1 -1
  53. package/dist/esm/{overlays-9c75ec54.js → overlays-ae10d43d.js} +62 -7
  54. package/dist/esm-es5/index.js +1 -1
  55. package/dist/esm-es5/ion-action-sheet.entry.js +1 -1
  56. package/dist/esm-es5/ion-alert.entry.js +1 -1
  57. package/dist/esm-es5/ion-app_8.entry.js +1 -1
  58. package/dist/esm-es5/ion-backdrop.entry.js +1 -1
  59. package/dist/esm-es5/ion-datetime_3.entry.js +1 -1
  60. package/dist/esm-es5/ion-input.entry.js +1 -1
  61. package/dist/esm-es5/ion-loading.entry.js +1 -1
  62. package/dist/esm-es5/ion-menu_3.entry.js +1 -1
  63. package/dist/esm-es5/ion-modal.entry.js +1 -1
  64. package/dist/esm-es5/ion-popover.entry.js +1 -1
  65. package/dist/esm-es5/ion-segment_2.entry.js +1 -1
  66. package/dist/esm-es5/ion-select_3.entry.js +1 -1
  67. package/dist/esm-es5/ion-textarea.entry.js +1 -1
  68. package/dist/esm-es5/ion-toast.entry.js +1 -1
  69. package/dist/esm-es5/overlays-ae10d43d.js +4 -0
  70. package/dist/ionic/index.esm.js +1 -1
  71. package/dist/ionic/ionic.esm.js +1 -1
  72. package/dist/ionic/p-04fc24ee.system.js +4 -0
  73. package/dist/ionic/{p-ecb57d24.system.entry.js → p-0790b342.system.entry.js} +1 -1
  74. package/dist/ionic/{p-100b83fd.system.entry.js → p-110e03be.system.entry.js} +1 -1
  75. package/dist/ionic/p-148b8abb.entry.js +4 -0
  76. package/dist/ionic/{p-4b0fedb7.system.entry.js → p-18105026.system.entry.js} +1 -1
  77. package/dist/ionic/p-322c5fb4.system.js +1 -1
  78. package/dist/ionic/{p-d57661a1.entry.js → p-41c89b8d.entry.js} +1 -1
  79. package/dist/ionic/p-44d1539c.system.entry.js +4 -0
  80. package/dist/ionic/{p-772dacba.system.entry.js → p-53add985.system.entry.js} +1 -1
  81. package/dist/ionic/{p-08127172.entry.js → p-5800e441.entry.js} +1 -1
  82. package/dist/ionic/p-5c831f49.js +4 -0
  83. package/dist/ionic/p-60cc7986.entry.js +4 -0
  84. package/dist/ionic/{p-a72fb8a1.system.entry.js → p-63d65dbc.system.entry.js} +1 -1
  85. package/dist/ionic/p-6ceb04b5.entry.js +4 -0
  86. package/dist/ionic/{p-9fef1364.entry.js → p-6d50faff.entry.js} +1 -1
  87. package/dist/ionic/{p-a4d51b8d.system.js → p-79b12fda.system.js} +1 -1
  88. package/dist/ionic/{p-8ed31163.system.entry.js → p-79e7be3a.system.entry.js} +1 -1
  89. package/dist/ionic/p-82ab7ccb.entry.js +4 -0
  90. package/dist/ionic/{p-22c020db.system.entry.js → p-857ca696.system.entry.js} +1 -1
  91. package/dist/ionic/{p-9c23044d.entry.js → p-87a4407b.entry.js} +1 -1
  92. package/dist/ionic/{p-2b7c93b4.entry.js → p-9895e7f3.entry.js} +1 -1
  93. package/dist/ionic/p-9910f786.entry.js +4 -0
  94. package/dist/ionic/{p-5e66bcf2.entry.js → p-9e208825.entry.js} +1 -1
  95. package/dist/ionic/p-a89dac49.entry.js +4 -0
  96. package/dist/ionic/{p-85f73bdd.system.entry.js → p-ad9b5007.system.entry.js} +1 -1
  97. package/dist/ionic/{p-755b27f0.system.entry.js → p-be715dd3.system.entry.js} +1 -1
  98. package/dist/ionic/{p-ed6962d3.system.entry.js → p-be71fe0f.system.entry.js} +1 -1
  99. package/dist/ionic/{p-cff5585e.system.entry.js → p-c71f301f.system.entry.js} +1 -1
  100. package/dist/ionic/{p-a41699db.entry.js → p-d58f21d2.entry.js} +1 -1
  101. package/dist/ionic/{p-f50ae0d5.system.entry.js → p-d754c709.system.entry.js} +1 -1
  102. package/dist/ionic/p-dda5c73d.entry.js +4 -0
  103. package/dist/ionic/{p-9cc3bcc5.system.entry.js → p-f0ab13a8.system.entry.js} +1 -1
  104. package/dist/types/components/app/app.d.ts +0 -1
  105. package/dist/types/components/input/input.d.ts +3 -0
  106. package/dist/types/components/textarea/textarea.d.ts +3 -0
  107. package/dist/types/components.d.ts +3 -0
  108. package/hydrate/index.js +127 -30
  109. package/hydrate/index.mjs +127 -30
  110. package/package.json +1 -1
  111. package/dist/esm-es5/overlays-9c75ec54.js +0 -4
  112. package/dist/ionic/p-0fa0c92b.entry.js +0 -4
  113. package/dist/ionic/p-16207409.system.entry.js +0 -4
  114. package/dist/ionic/p-2c4bdd9d.entry.js +0 -4
  115. package/dist/ionic/p-854f9b64.entry.js +0 -4
  116. package/dist/ionic/p-98871496.system.js +0 -4
  117. package/dist/ionic/p-a440397c.js +0 -4
  118. package/dist/ionic/p-ab8a2ff1.entry.js +0 -4
  119. package/dist/ionic/p-b4c950f8.entry.js +0 -4
  120. package/dist/ionic/p-bfa2e81c.entry.js +0 -4
  121. package/dist/ionic/p-d77e12ca.entry.js +0 -4
@@ -427,9 +427,19 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
427
427
  if (overlay.presented) {
428
428
  return;
429
429
  }
430
- setRootAriaHidden(true);
430
+ /**
431
+ * Due to accessibility guidelines, toasts do not have
432
+ * focus traps.
433
+ *
434
+ * All other overlays should have focus traps to prevent
435
+ * the keyboard focus from leaving the overlay.
436
+ */
437
+ if (overlay.el.tagName !== 'ION-TOAST') {
438
+ setRootAriaHidden(true);
439
+ }
431
440
  document.body.classList.add(BACKDROP_NO_SCROLL);
432
- hideOverlaysFromScreenReaders(overlay.el);
441
+ hideUnderlyingOverlaysFromScreenReaders(overlay.el);
442
+ hideAnimatingOverlayFromScreenReaders(overlay.el);
433
443
  overlay.presented = true;
434
444
  overlay.willPresent.emit();
435
445
  (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -469,6 +479,11 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
469
479
  * it would still have aria-hidden on being presented again.
470
480
  * Removing it here ensures the overlay is visible to screen
471
481
  * readers.
482
+ *
483
+ * If this overlay was being presented, then it was hidden
484
+ * from screen readers during the animation. Now that the
485
+ * animation is complete, we can reveal the overlay to
486
+ * screen readers.
472
487
  */
473
488
  overlay.el.removeAttribute('aria-hidden');
474
489
  };
@@ -526,17 +541,35 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
526
541
  if (!overlay.presented) {
527
542
  return false;
528
543
  }
529
- const lastOverlay = doc !== undefined && getPresentedOverlays(doc).length === 1;
530
544
  /**
531
- * If this is the last visible overlay then
532
- * we want to re-add the root to the accessibility tree.
545
+ * For accessibility, toasts lack focus traps and don’t receive
546
+ * `aria-hidden` on the root element when presented.
547
+ *
548
+ * All other overlays use focus traps to keep keyboard focus
549
+ * within the overlay, setting `aria-hidden` on the root element
550
+ * to enhance accessibility.
551
+ *
552
+ * Therefore, we must remove `aria-hidden` from the root element
553
+ * when the last non-toast overlay is dismissed.
533
554
  */
534
- if (lastOverlay) {
555
+ const overlaysNotToast = doc !== undefined ? getPresentedOverlays(doc).filter((o) => o.tagName !== 'ION-TOAST') : [];
556
+ const lastOverlayNotToast = overlaysNotToast.length === 1 && overlaysNotToast[0].id === overlay.el.id;
557
+ /**
558
+ * If this is the last visible overlay that is not a toast
559
+ * then we want to re-add the root to the accessibility tree.
560
+ */
561
+ if (lastOverlayNotToast) {
535
562
  setRootAriaHidden(false);
536
563
  document.body.classList.remove(BACKDROP_NO_SCROLL);
537
564
  }
538
565
  overlay.presented = false;
539
566
  try {
567
+ /**
568
+ * There is no need to show the overlay to screen readers during
569
+ * the dismiss animation. This is because the overlay will be removed
570
+ * from the DOM after the animation is complete.
571
+ */
572
+ hideAnimatingOverlayFromScreenReaders(overlay.el);
540
573
  // Overlay contents should not be clickable during dismiss
541
574
  overlay.el.style.setProperty('pointer-events', 'none');
542
575
  overlay.willDismiss.emit({ data, role });
@@ -771,6 +804,28 @@ export const createTriggerController = () => {
771
804
  removeClickListener,
772
805
  };
773
806
  };
807
+ /**
808
+ * The overlay that is being animated also needs to hide from screen
809
+ * readers during its animation. This ensures that assistive technologies
810
+ * like TalkBack do not announce or interact with the content until the
811
+ * animation is complete, avoiding confusion for users.
812
+ *
813
+ * If the overlay is being presented, it prevents focus rings from appearing
814
+ * in incorrect positions due to the transition (specifically `transform`
815
+ * styles), ensuring that when aria-hidden is removed, the focus rings are
816
+ * correctly displayed in the final location of the elements.
817
+ *
818
+ * @param overlay - The overlay that is being animated.
819
+ */
820
+ const hideAnimatingOverlayFromScreenReaders = (overlay) => {
821
+ if (doc === undefined)
822
+ return;
823
+ /**
824
+ * Once the animation is complete, this attribute will be removed.
825
+ * This is done at the end of the `present` method.
826
+ */
827
+ overlay.setAttribute('aria-hidden', 'true');
828
+ };
774
829
  /**
775
830
  * Ensure that underlying overlays have aria-hidden if necessary so that screen readers
776
831
  * cannot move focus to these elements. Note that we cannot rely on focus/focusin/focusout
@@ -781,7 +836,7 @@ export const createTriggerController = () => {
781
836
  * @param newTopMostOverlay - The overlay that is being presented. Since the overlay has not been
782
837
  * fully presented yet at the time this function is called it will not be included in the getPresentedOverlays result.
783
838
  */
784
- const hideOverlaysFromScreenReaders = (newTopMostOverlay) => {
839
+ const hideUnderlyingOverlaysFromScreenReaders = (newTopMostOverlay) => {
785
840
  var _a;
786
841
  if (doc === undefined)
787
842
  return;
package/dist/docs.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2024-09-29T17:58:33",
2
+ "timestamp": "2024-10-31T13:44:28",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.20.0",
@@ -2202,7 +2202,46 @@
2202
2202
  "docsTags": [],
2203
2203
  "usage": {},
2204
2204
  "props": [],
2205
- "methods": [],
2205
+ "methods": [
2206
+ {
2207
+ "name": "setFocus",
2208
+ "returns": {
2209
+ "type": "Promise<void>",
2210
+ "docs": ""
2211
+ },
2212
+ "complexType": {
2213
+ "signature": "(elements: HTMLElement[]) => Promise<void>",
2214
+ "parameters": [
2215
+ {
2216
+ "name": "elements",
2217
+ "type": "HTMLElement[]",
2218
+ "docs": ""
2219
+ }
2220
+ ],
2221
+ "references": {
2222
+ "Promise": {
2223
+ "location": "global",
2224
+ "id": "global::Promise"
2225
+ },
2226
+ "HTMLElement": {
2227
+ "location": "global",
2228
+ "id": "global::HTMLElement"
2229
+ }
2230
+ },
2231
+ "return": "Promise<void>"
2232
+ },
2233
+ "signature": "setFocus(elements: HTMLElement[]) => Promise<void>",
2234
+ "parameters": [
2235
+ {
2236
+ "name": "elements",
2237
+ "type": "HTMLElement[]",
2238
+ "docs": ""
2239
+ }
2240
+ ],
2241
+ "docs": "Used to set focus on an element that uses `ion-focusable`.\nDo not use this if focusing the element as a result of a keyboard\nevent as the focus utility should handle this for us. This method\nshould be used when we want to programmatically focus an element as\na result of another user action. (Ex: We focus the first element\ninside of a popover when the user presents it, but the popover is not always\npresented as a result of keyboard action.)",
2242
+ "docsTags": []
2243
+ }
2244
+ ],
2206
2245
  "events": [],
2207
2246
  "listeners": [],
2208
2247
  "styles": [],
package/dist/esm/index.js CHANGED
@@ -12,7 +12,7 @@ export { c as componentOnReady } from './helpers-da915de8.js';
12
12
  export { I as IonicSafeString, g as getMode, s as setupConfig } from './config-49c88215.js';
13
13
  export { o as openURL } from './theme-01f3f29c.js';
14
14
  export { m as menuController } from './index-fe1782b1.js';
15
- export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-9c75ec54.js';
15
+ export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-ae10d43d.js';
16
16
  import './index-a5d50daf.js';
17
17
  import './index-28849c61.js';
18
18
  import './index-9b0d46f4.js';
@@ -5,7 +5,7 @@ import { r as registerInstance, d as createEvent, e as readTask, h, f as Host, i
5
5
  import { c as createButtonActiveGesture } from './button-active-f6503382.js';
6
6
  import { r as raf } from './helpers-da915de8.js';
7
7
  import { c as createLockController } from './lock-controller-316928be.js';
8
- import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-9c75ec54.js';
8
+ import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-ae10d43d.js';
9
9
  import { g as getClassMap } from './theme-01f3f29c.js';
10
10
  import { b as getIonMode } from './ionic-global-c81d82ab.js';
11
11
  import { c as createAnimation } from './animation-eab5a4ca.js';
@@ -298,10 +298,10 @@ const ActionSheet = class {
298
298
  const headerID = `action-sheet-${overlayIndex}-header`;
299
299
  return (h(Host, Object.assign({ key: '7bbd202ca9e19727e7514abbe073687d982f80c3', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1" }, htmlAttributes, { style: {
300
300
  zIndex: `${20000 + this.overlayIndex}`,
301
- }, 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: 'd46361bb5cdc32a7922dcf76b566f358a6174bfa', tabindex: "0" }), h("div", { key: '136c3f2e77c8a2eac8e9ae4bb13d735e1d62598d', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '6168ea8b2be42020b2edeb8ff3a0f3d1254be37a', class: "action-sheet-container" }, h("div", { key: '29b9e6619dc54574733a704d6bf885839151bd84', class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (h("div", { key: '536ce764bfddb3816ea3512d90f4acef2ccb8589', id: headerID, class: {
301
+ }, 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: {
302
302
  'action-sheet-title': true,
303
303
  'action-sheet-has-sub-title': this.subHeader !== undefined,
304
- } }, header, this.subHeader && h("div", { key: '6d888219145824fd36cdfe0d3c8388bbf2769777', 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: '46f98f0ed5a9bdb3e35feb9ae71c4489c17b7d77', class: "action-sheet-group action-sheet-group-cancel" }, h("button", Object.assign({ key: 'e3c457bced8ad5f692e48de26e65f731fd631b4f' }, cancelButton.htmlAttributes, { type: "button", class: buttonClass(cancelButton), onClick: () => this.buttonClick(cancelButton) }), h("span", { key: '4cba6dc559f734ecc852e024959210cd0dd25354', class: "action-sheet-button-inner" }, cancelButton.icon && (h("ion-icon", { key: '9df64989aad1b4d1e75edf4d37ab208965cfe37f', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && h("ion-ripple-effect", { key: '558089275a29177cefdb2e38eefc9b5c8b62872b' })))))), h("div", { key: 'fa4df6e043b00a6e4126dbc71cb344cfc2b2e7bc', tabindex: "0" })));
304
+ } }, 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" })));
305
305
  }
306
306
  get el() { return getElement(this); }
307
307
  static get watchers() { return {
@@ -6,7 +6,7 @@ import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './conf
6
6
  import { c as createButtonActiveGesture } from './button-active-f6503382.js';
7
7
  import { r as raf } from './helpers-da915de8.js';
8
8
  import { c as createLockController } from './lock-controller-316928be.js';
9
- import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-9c75ec54.js';
9
+ import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-ae10d43d.js';
10
10
  import { g as getClassMap } from './theme-01f3f29c.js';
11
11
  import { c as config, b as getIonMode } from './ionic-global-c81d82ab.js';
12
12
  import { c as createAnimation } from './animation-eab5a4ca.js';
@@ -496,7 +496,7 @@ const Alert = class {
496
496
  const ariaLabelledBy = header ? hdrId : subHeader ? subHdrId : null;
497
497
  return (h(Host, Object.assign({ key: 'c7d53f48b359f2bc3480a2e1ba34948fc9378fb0', role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "-1" }, htmlAttributes, { style: {
498
498
  zIndex: `${20000 + overlayIndex}`,
499
- }, 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: '18c7e6b5d63435d9a6a82bda951158e7e1af6e92', tappable: this.backdropDismiss }), h("div", { key: 'e35e1a4b81286976c8a6bab570c986f3196b21f4', tabindex: "0" }), h("div", { key: '9089864c80d96ed834bf723f3de863cf1c4a5b97', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: 'dd600f02c84352059c6cdf98821b9c9a831bcdcb', class: "alert-head" }, header && (h("h2", { key: '11afb605e1ccefc889fbdd2533d491bea8fbf183', id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { key: 'e53b0613d09d26e5a2cd7c9c6e63ec2535625ce5', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: 'cef60ec8b34c9aec8bc698f16f55324d1ce67c72', tabindex: "0" })));
499
+ }, 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: '18c7e6b5d63435d9a6a82bda951158e7e1af6e92', tappable: this.backdropDismiss }), h("div", { key: '8ea08a2a70239e817442c12596f51b108aca428c', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '215ca5d72b8b180788e9748f5f22de01fa5a152a', class: "alert-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, h("div", { key: '9880acd318428d4b5d670c67dd156477877f99f2', class: "alert-head" }, header && (h("h2", { key: '612dec8dc9bfdcb36e1e4655dc214b7c229b20c8', id: hdrId, class: "alert-title" }, header)), subHeader && (h("h2", { key: 'e3c54c80a1cd9399595064b5a0a887c16fdc8ff8', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '9062655e906b5caf36df6f742fd412552ae510be', tabindex: "0", "aria-hidden": "true" })));
500
500
  }
501
501
  get el() { return getElement(this); }
502
502
  static get watchers() { return {
@@ -66,7 +66,6 @@ const App = class {
66
66
  }
67
67
  }
68
68
  /**
69
- * @internal
70
69
  * Used to set focus on an element that uses `ion-focusable`.
71
70
  * Do not use this if focusing the element as a result of a keyboard
72
71
  * event as the focus utility should handle this for us. This method
@@ -82,7 +81,7 @@ const App = class {
82
81
  }
83
82
  render() {
84
83
  const mode = getIonMode(this);
85
- return (h(Host, { key: 'a562850f242d9d45573e35efdd4bd178254677ef', class: {
84
+ return (h(Host, { key: 'e95cdeb2709edbc74f4e6ebf77cb110154605b72', class: {
86
85
  [mode]: true,
87
86
  'ion-page': true,
88
87
  'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
@@ -32,7 +32,7 @@ const Backdrop = class {
32
32
  }
33
33
  render() {
34
34
  const mode = getIonMode(this);
35
- return (h(Host, { key: 'c803b4302c8e722064feb03dafe3cb6e190b4f2b', tabindex: "-1", "aria-hidden": "true", class: {
35
+ return (h(Host, { key: 'fe191068e2aaadfdbe7a463c08d227a1b36d7a98', "aria-hidden": "true", class: {
36
36
  [mode]: true,
37
37
  'backdrop-hide': !this.visible,
38
38
  'backdrop-no-tappable': !this.tappable,
@@ -11,7 +11,7 @@ import { c as chevronBack, o as chevronForward, l as chevronDown, p as caretUpSh
11
11
  import { b as getIonMode } from './ionic-global-c81d82ab.js';
12
12
  import { g as generateDayAriaLabel, a as getDay, i as isBefore, b as isAfter, c as isSameDay, d as getPreviousMonth, e as getNextMonth, v as validateParts, f as getPartsFromCalendarDay, h as getNextYear, j as getPreviousYear, k as getEndOfWeek, l as getStartOfWeek, m as getPreviousDay, n as getNextDay, o as getPreviousWeek, p as getNextWeek, q as parseMinParts, r as parseMaxParts, s as parseDate, w as warnIfValueOutOfBounds, t as convertToArrayOfNumbers, u as convertDataToISO, x as getToday, y as getClosestValidDate, z as generateMonths, A as getNumDaysInMonth, B as getCombinedDateColumnData, C as getMonthColumnData, D as getDayColumnData, E as getYearColumnData, F as isMonthFirstLocale, G as getTimeColumnsData, H as isLocaleDayPeriodRTL, I as getDaysOfWeek, J as getMonthAndYear, K as getDaysOfMonth, L as getHourCycle, M as getLocalizedTime, N as getLocalizedDateTime, O as formatValue, P as clampDate, Q as parseAmPm, R as calculateHourFromAMPM } from './data-ae11fd43.js';
13
13
  import { c as createLockController } from './lock-controller-316928be.js';
14
- import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-9c75ec54.js';
14
+ import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-ae10d43d.js';
15
15
  import { c as createAnimation } from './animation-eab5a4ca.js';
16
16
  import { b as hapticSelectionChanged, h as hapticSelectionEnd, a as hapticSelectionStart } from './haptic-ac164e4c.js';
17
17
  import './index-a5d50daf.js';
@@ -2030,7 +2030,7 @@ const Picker = class {
2030
2030
  zIndex: `${20000 + this.overlayIndex}`,
2031
2031
  }, class: Object.assign({ [mode]: true,
2032
2032
  // Used internally for styling
2033
- [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: 'da4224447bdbcfbadd1bd63ebe7a7bfdb8aa3129', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '211475c859b7acf4d64556905c45993201d92d43', tabindex: "0" }), h("div", { key: 'c3b3674038155809caea84ae6348ff0d66897a64', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: 'a21757da70dc7864945a5751d9da3ca4bf87897b', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: '0220da1854d09ef22d2d9a32eaa3c3b222be5a0a', class: "picker-columns" }, h("div", { key: '55757c165ba9e38e56b4dee76a9b13d3ff8b21e6', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '160092a46a48287bf75e5dfe3502f1755a2d0c70', class: "picker-below-highlight" }))), h("div", { key: 'e212db6cca7d75fc0eda0baf4312dd51b9b7a4ef', tabindex: "0" })));
2033
+ [`picker-${mode}`]: true, 'overlay-hidden': true }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonPickerWillDismiss: this.dispatchCancelHandler }), h("ion-backdrop", { key: 'da4224447bdbcfbadd1bd63ebe7a7bfdb8aa3129', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '65eba425990a21be00fdac90de20a630d284cf97', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'd78ada360801b2c051baa030751f3d83ac81e697', class: "picker-wrapper ion-overlay-wrapper", role: "dialog" }, h("div", { key: 'd5bd9ddfbdbdaf42048a1496e7939eb3aee6da65', class: "picker-toolbar" }, this.buttons.map((b) => (h("div", { class: buttonWrapperClass(b) }, h("button", { type: "button", onClick: () => this.buttonClick(b), class: buttonClass(b) }, b.text))))), h("div", { key: '96ee1e3ec77c57174b1a93135b66bea6b7002555', class: "picker-columns" }, h("div", { key: 'e11b1c238f350e65bde2ee67eee9d71c830e74e7', class: "picker-above-highlight" }), this.presented && this.columns.map((c) => h("ion-picker-legacy-column", { col: c })), h("div", { key: '4d5fc7c723185111ec01fd34ef95a897c301238d', class: "picker-below-highlight" }))), h("div", { key: '899bcad97609c1d971c1b886551db5ba0248a9f4', tabindex: "0", "aria-hidden": "true" })));
2034
2034
  }
2035
2035
  get el() { return getElement(this); }
2036
2036
  static get watchers() { return {
@@ -25,6 +25,8 @@ const Input = class {
25
25
  this.ionBlur = createEvent(this, "ionBlur", 7);
26
26
  this.ionFocus = createEvent(this, "ionFocus", 7);
27
27
  this.inputId = `ion-input-${inputIds++}`;
28
+ this.helperTextId = `${this.inputId}-helper-text`;
29
+ this.errorTextId = `${this.inputId}-error-text`;
28
30
  this.inheritedAttributes = {};
29
31
  this.isComposing = false;
30
32
  /**
@@ -297,8 +299,21 @@ const Input = class {
297
299
  * Renders the helper text or error text values
298
300
  */
299
301
  renderHintText() {
300
- const { helperText, errorText } = this;
301
- return [h("div", { class: "helper-text" }, helperText), h("div", { class: "error-text" }, errorText)];
302
+ const { helperText, errorText, helperTextId, errorTextId } = this;
303
+ return [
304
+ h("div", { id: helperTextId, class: "helper-text" }, helperText),
305
+ h("div", { id: errorTextId, class: "error-text" }, errorText),
306
+ ];
307
+ }
308
+ getHintTextID() {
309
+ const { el, helperText, errorText, helperTextId, errorTextId } = this;
310
+ if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
311
+ return errorTextId;
312
+ }
313
+ if (helperText) {
314
+ return helperTextId;
315
+ }
316
+ return undefined;
302
317
  }
303
318
  renderCounter() {
304
319
  const { counter, maxlength, counterFormatter, value } = this;
@@ -405,7 +420,7 @@ const Input = class {
405
420
  * TODO(FW-5592): Remove hasStartEndSlots condition
406
421
  */
407
422
  const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
408
- return (h(Host, { key: '907ce98a82b5cfae5a08504cd79e00a2330b7444', class: createColorClasses(this.color, {
423
+ return (h(Host, { key: 'cdde9963d71685e6a4f3f3b3bc52e75d022435cb', class: createColorClasses(this.color, {
409
424
  [mode]: true,
410
425
  'has-value': hasValue,
411
426
  'has-focus': hasFocus,
@@ -416,7 +431,7 @@ const Input = class {
416
431
  'in-item': inItem,
417
432
  'in-item-color': hostContext('ion-item.ion-color', this.el),
418
433
  'input-disabled': disabled,
419
- }) }, h("label", { key: '59d5bb45d2a5b828bba0ed8687a632a551e2f4d8', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'f93f129d08246d0e9a601c100d718534d6403853', class: "native-wrapper" }, h("slot", { key: '54eeb1a6bace662b7eb0d7e27180ea3d7e3a3729', name: "start" }), h("input", Object.assign({ key: 'b3e0be55bc1a4a539ae3b0fdcf7fc078723cca16', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '5f6373504a6d0d074bfbf875c794d45ea2748175', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
434
+ }) }, h("label", { key: '4412791c93405f20e50e50363879265180b6078f', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '5c71c43ef3eeb44dde76ed64ce10763834c8fbc7', class: "native-wrapper" }, h("slot", { key: '1d86b58dc299a4208dd02ccdc9ceaea7576698c3', name: "start" }), h("input", Object.assign({ key: '7fc932174485f7d09e6a797dfd49ea11fbad71b6', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '46de455e4e308b8d7640b04778f7c7559b4124c6', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
420
435
  /**
421
436
  * This prevents mobile browsers from
422
437
  * blurring the input when the clear
@@ -431,7 +446,7 @@ const Input = class {
431
446
  * for screen readers as it means users would be unable to swipe past the clear button.
432
447
  */
433
448
  ev.stopPropagation();
434
- }, onClick: this.clearTextInput }, h("ion-icon", { key: '230d77973aa83458ceb32bf52e3abe9bc322cfe6', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '9d69ac6e8a3c4b2b303dba2478f82695d5755ed2', name: "end" })), shouldRenderHighlight && h("div", { key: 'ac61f16237ce731e0745ab72d0fc3f066252464a', class: "input-highlight" })), this.renderBottomContent()));
449
+ }, onClick: this.clearTextInput }, h("ion-icon", { key: '375e860a20e1807ce0db0e1934a0650fe9929966', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '859d47a1b88aa8377479e5d11e52a6a1c1c30e7e', name: "end" })), shouldRenderHighlight && h("div", { key: 'd2d4286b348107e33247b5c0afda0f8bd697ecee', class: "input-highlight" })), this.renderBottomContent()));
435
450
  }
436
451
  get el() { return getElement(this); }
437
452
  static get watchers() { return {
@@ -5,7 +5,7 @@ import { r as registerInstance, d as createEvent, h, f as Host, i as getElement
5
5
  import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config-49c88215.js';
6
6
  import { r as raf } from './helpers-da915de8.js';
7
7
  import { c as createLockController } from './lock-controller-316928be.js';
8
- import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-9c75ec54.js';
8
+ import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-ae10d43d.js';
9
9
  import { g as getClassMap } from './theme-01f3f29c.js';
10
10
  import { c as config, b as getIonMode } from './ionic-global-c81d82ab.js';
11
11
  import { c as createAnimation } from './animation-eab5a4ca.js';
@@ -263,7 +263,7 @@ const Loading = class {
263
263
  const ariaLabelledBy = message !== undefined ? msgId : null;
264
264
  return (h(Host, Object.assign({ key: 'fb3d2cd7cd0539ed6540d8be50e243c7916b3ca2', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1" }, htmlAttributes, { style: {
265
265
  zIndex: `${40000 + this.overlayIndex}`,
266
- }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'c8bd30782f3040b1b80e88aa924861e439d40754', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '4ebfbb67c92e8eb56c27dd7c199b35bf6be1cf63', tabindex: "0" }), h("div", { key: '9492723cd87f1ef75534e449d4bc2b2deb0cb3cc', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: 'd9eb42454e48c82704d974a68b80ceb4de990417', class: "loading-spinner" }, h("ion-spinner", { key: 'cdb046bad89872f4208ae466979315652766bf3a', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '412d1bb537dafa6e6863d07ddc15f5969fe0617d', tabindex: "0" })));
266
+ }, onIonBackdropTap: this.onBackdropTap, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'loading-translucent': this.translucent }) }), h("ion-backdrop", { key: 'c8bd30782f3040b1b80e88aa924861e439d40754', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '7ad4447fafa49aa861d311221b8c2e8171b4c610', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '1879df0d895eb8ee20ccdc94dd35d708c1140b91', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '220f292c136681f5fa91f94669aac75b15e490ce', class: "loading-spinner" }, h("ion-spinner", { key: 'd599084a1426d941bdd080a988d8ad5b9589b823', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'e443897b353a48e0c72718dba04d83d7c5070d73', tabindex: "0", "aria-hidden": "true" })));
267
267
  }
268
268
  get el() { return getElement(this); }
269
269
  static get watchers() { return {
@@ -3,7 +3,7 @@
3
3
  */
4
4
  import { r as registerInstance, d as createEvent, h, f as Host, i as getElement } from './index-28849c61.js';
5
5
  import { g as getTimeGivenProgression } from './cubic-bezier-fe2083dc.js';
6
- import { o as getPresentedOverlay, n as focusFirstDescendant, q as focusLastDescendant } from './overlays-9c75ec54.js';
6
+ import { o as getPresentedOverlay, n as focusFirstDescendant, q as focusLastDescendant } from './overlays-ae10d43d.js';
7
7
  import { G as GESTURE_CONTROLLER } from './gesture-controller-314a54f6.js';
8
8
  import { shouldUseCloseWatcher } from './hardware-back-button-06ef3c3e.js';
9
9
  import { n as isEndSide, i as inheritAriaAttributes, m as assert, j as clamp } from './helpers-da915de8.js';
@@ -8,7 +8,7 @@ import { g as getElementRoot, j as clamp, r as raf, h as inheritAttributes, k as
8
8
  import { c as createLockController } from './lock-controller-316928be.js';
9
9
  import { p as printIonWarning } from './index-9b0d46f4.js';
10
10
  import { g as getCapacitor } from './capacitor-59395cbd.js';
11
- import { G as GESTURE, O as OVERLAY_GESTURE_PRIORITY, F as FOCUS_TRAP_DISABLE_CLASS, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-9c75ec54.js';
11
+ import { G as GESTURE, O as OVERLAY_GESTURE_PRIORITY, F as FOCUS_TRAP_DISABLE_CLASS, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-ae10d43d.js';
12
12
  import { g as getClassMap } from './theme-01f3f29c.js';
13
13
  import { e as deepReady, w as waitForMount } from './index-3ad7f18b.js';
14
14
  import { b as getIonMode, c as config } from './ionic-global-c81d82ab.js';
@@ -2,7 +2,7 @@
2
2
  * (C) Ionic http://ionicframework.com - MIT License
3
3
  */
4
4
  import { r as registerInstance, d as createEvent, h, f as Host, i as getElement } from './index-28849c61.js';
5
- import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as focusFirstDescendant, g as dismiss, h as eventMethod, F as FOCUS_TRAP_DISABLE_CLASS } from './overlays-9c75ec54.js';
5
+ import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as focusFirstDescendant, g as dismiss, h as eventMethod, F as FOCUS_TRAP_DISABLE_CLASS } from './overlays-ae10d43d.js';
6
6
  import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate-63d1a679.js';
7
7
  import { r as raf, g as getElementRoot, a as addEventListener, k as hasLazyBuild } from './helpers-da915de8.js';
8
8
  import { c as createLockController } from './lock-controller-316928be.js';
@@ -284,21 +284,34 @@ const Segment = class {
284
284
  */
285
285
  const centeredX = activeButtonLeft - scrollContainerBox.width / 2 + activeButtonBox.width / 2;
286
286
  /**
287
- * We intentionally use scrollBy here instead of scrollIntoView
287
+ * newScrollPosition is the absolute scroll position that the
288
+ * container needs to move to in order to center the active button.
289
+ * It is calculated by adding the current scroll position
290
+ * (scrollLeft) to the offset needed to center the button
291
+ * (centeredX).
292
+ */
293
+ const newScrollPosition = el.scrollLeft + centeredX;
294
+ /**
295
+ * We intentionally use scrollTo here instead of scrollIntoView
288
296
  * to avoid a WebKit bug where accelerated animations break
289
297
  * when using scrollIntoView. Using scrollIntoView will cause the
290
298
  * segment container to jump during the transition and then snap into place.
291
299
  * This is because scrollIntoView can potentially cause parent element
292
- * containers to also scroll. scrollBy does not have this same behavior, so
300
+ * containers to also scroll. scrollTo does not have this same behavior, so
293
301
  * we use this API instead.
294
302
  *
303
+ * scrollTo is used instead of scrollBy because there is a
304
+ * Webkit bug that causes scrollBy to not work smoothly when
305
+ * the active button is near the edge of the scroll container.
306
+ * This leads to the buttons to jump around during the transition.
307
+ *
295
308
  * Note that if there is not enough scrolling space to center the element
296
309
  * within the scroll container, the browser will attempt
297
310
  * to center by as much as it can.
298
311
  */
299
- el.scrollBy({
312
+ el.scrollTo({
300
313
  top: 0,
301
- left: centeredX,
314
+ left: newScrollPosition,
302
315
  behavior: smoothScroll ? 'smooth' : 'instant',
303
316
  });
304
317
  }
@@ -427,14 +440,14 @@ const Segment = class {
427
440
  }
428
441
  render() {
429
442
  const mode = getIonMode(this);
430
- return (h(Host, { key: 'ad0946134c8d465b760ad792655f1cb9922db520', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
443
+ return (h(Host, { key: 'f1f7103b4c298e037df850ac809a1a7c6e9987a7', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
431
444
  [mode]: true,
432
445
  'in-toolbar': hostContext('ion-toolbar', this.el),
433
446
  'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
434
447
  'segment-activated': this.activated,
435
448
  'segment-disabled': this.disabled,
436
449
  'segment-scrollable': this.scrollable,
437
- }) }, h("slot", { key: 'dcdb425bcda0d60acb7c317e5e671ed462715b4a', onSlotchange: this.onSlottedItemsChange })));
450
+ }) }, h("slot", { key: '6efdb318b13da8d21687084aa0761728fdf12579', onSlotchange: this.onSlottedItemsChange })));
438
451
  }
439
452
  get el() { return getElement(this); }
440
453
  static get watchers() { return {
@@ -5,7 +5,7 @@ import { r as registerInstance, d as createEvent, h, f as Host, i as getElement,
5
5
  import { c as createNotchController } from './notch-controller-55b09e11.js';
6
6
  import { i as isOptionSelected, c as compareOptions } from './compare-with-utils-a96ff2ea.js';
7
7
  import { h as inheritAttributes, f as focusVisibleElement, d as renderHiddenInput } from './helpers-da915de8.js';
8
- import { c as popoverController, b as actionSheetController, a as alertController, s as safeCall } from './overlays-9c75ec54.js';
8
+ import { c as popoverController, b as actionSheetController, a as alertController, s as safeCall } from './overlays-ae10d43d.js';
9
9
  import { i as isRTL } from './dir-babeabeb.js';
10
10
  import { h as hostContext, c as createColorClasses, g as getClassMap } from './theme-01f3f29c.js';
11
11
  import { w as watchForOptions } from './watch-options-c2911ace.js';
@@ -24,6 +24,8 @@ const Textarea = class {
24
24
  this.ionBlur = createEvent(this, "ionBlur", 7);
25
25
  this.ionFocus = createEvent(this, "ionFocus", 7);
26
26
  this.inputId = `ion-textarea-${textareaIds++}`;
27
+ this.helperTextId = `${this.inputId}-helper-text`;
28
+ this.errorTextId = `${this.inputId}-error-text`;
27
29
  /**
28
30
  * `true` if the textarea was cleared as a result of the user typing
29
31
  * with `clearOnEdit` enabled.
@@ -311,8 +313,21 @@ const Textarea = class {
311
313
  * Renders the helper text or error text values
312
314
  */
313
315
  renderHintText() {
314
- const { helperText, errorText } = this;
315
- return [h("div", { class: "helper-text" }, helperText), h("div", { class: "error-text" }, errorText)];
316
+ const { helperText, errorText, helperTextId, errorTextId } = this;
317
+ return [
318
+ h("div", { id: helperTextId, class: "helper-text" }, helperText),
319
+ h("div", { id: errorTextId, class: "error-text" }, errorText),
320
+ ];
321
+ }
322
+ getHintTextID() {
323
+ const { el, helperText, errorText, helperTextId, errorTextId } = this;
324
+ if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
325
+ return errorTextId;
326
+ }
327
+ if (helperText) {
328
+ return helperTextId;
329
+ }
330
+ return undefined;
316
331
  }
317
332
  renderCounter() {
318
333
  const { counter, maxlength, counterFormatter, value } = this;
@@ -365,7 +380,7 @@ const Textarea = class {
365
380
  * TODO(FW-5592): Remove hasStartEndSlots condition
366
381
  */
367
382
  const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
368
- return (h(Host, { key: '37595a18d77dea1a337ac1c672e5f08a4128111d', class: createColorClasses(this.color, {
383
+ return (h(Host, { key: 'e8a5b5727c6a018bbd6f5507b690bc5f0959e352', class: createColorClasses(this.color, {
369
384
  [mode]: true,
370
385
  'has-value': hasValue,
371
386
  'has-focus': hasFocus,
@@ -374,7 +389,7 @@ const Textarea = class {
374
389
  [`textarea-shape-${shape}`]: shape !== undefined,
375
390
  [`textarea-label-placement-${labelPlacement}`]: true,
376
391
  'textarea-disabled': disabled,
377
- }) }, h("label", { key: '67342758743e5a40448a32ff695876d39778621f', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'a994be8264bf5652811cf816d79a04178954e83f', class: "textarea-wrapper-inner" }, h("div", { key: 'e09c93ebcd5b3d227d51e682ca23dfc7fd7027ad', class: "start-slot-wrapper" }, h("slot", { key: 'd39758f21f19ae70aea21e9a9a7b7c20991fe593', name: "start" })), h("div", { key: '6a4e10e53de4bb235ee30def4c9ae5bdee888816', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '9e254e551f124d972e9bc6b09ef0f2bb55890be5', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), h("div", { key: 'a66aa2d2bc4778a0bec56a8b9ec9052a832eb3b2', class: "end-slot-wrapper" }, h("slot", { key: '8e6a90b4475de32e23afc593da4108610dcca663', name: "end" }))), shouldRenderHighlight && h("div", { key: '6da03205a8daff45581b20f0af3938634a9d5f8c', class: "textarea-highlight" })), this.renderBottomContent()));
392
+ }) }, h("label", { key: '48e889571e2d3e7e150b038e4b4b15862b418288', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '6c6c7872ae4d351d8b8d772ad18ce3ba7a0e9a87', class: "textarea-wrapper-inner" }, h("div", { key: '03aef5dfa59af0fa78a3e5c92e0ed72396717d72', class: "start-slot-wrapper" }, h("slot", { key: '39aee9faebb0f1d10de5a5817fd9d9771b074b96', name: "start" })), h("div", { key: '738e8ff603f4c9b9083b3139db861f4b7ec20f79', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '7763fb4f8ffe94635167331c70d21d661544c4f8', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes), value)), h("div", { key: 'b3af9ec0982c6dbd381afaa02df153d7e90471be', class: "end-slot-wrapper" }, h("slot", { key: '60f99bcd49a5ec2e1fa6e3e77809aefeb9d2d0d6', name: "end" }))), shouldRenderHighlight && h("div", { key: '6a7f45639ba027f4da573adae53f1197a6dec383', class: "textarea-highlight" })), this.renderBottomContent()));
378
393
  }
379
394
  get el() { return getElement(this); }
380
395
  static get watchers() { return {
@@ -6,7 +6,7 @@ import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './conf
6
6
  import { g as getElementRoot, r as raf } from './helpers-da915de8.js';
7
7
  import { c as createLockController } from './lock-controller-316928be.js';
8
8
  import { p as printIonWarning } from './index-9b0d46f4.js';
9
- import { O as OVERLAY_GESTURE_PRIORITY, d as createDelegateController, e as createTriggerController, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall, G as GESTURE } from './overlays-9c75ec54.js';
9
+ import { O as OVERLAY_GESTURE_PRIORITY, d as createDelegateController, e as createTriggerController, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall, G as GESTURE } from './overlays-ae10d43d.js';
10
10
  import { c as createColorClasses, g as getClassMap } from './theme-01f3f29c.js';
11
11
  import { c as config, b as getIonMode } from './ionic-global-c81d82ab.js';
12
12
  import { c as createAnimation } from './animation-eab5a4ca.js';