@ionic/core 8.7.3-dev.11755622775.1fc05815 → 8.7.3-dev.11755697669.1be2024b

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. package/components/ion-datetime.js +4 -3
  2. package/components/ion-input.js +5 -36
  3. package/components/ion-textarea.js +4 -35
  4. package/components/overlays.js +15 -6
  5. package/components/picker-column-option.js +3 -3
  6. package/components/picker-column.js +3 -39
  7. package/dist/cjs/index.cjs.js +1 -1
  8. package/dist/cjs/ion-action-sheet.cjs.entry.js +1 -1
  9. package/dist/cjs/ion-alert.cjs.entry.js +1 -1
  10. package/dist/cjs/ion-datetime_3.cjs.entry.js +4 -4
  11. package/dist/cjs/ion-input.cjs.entry.js +5 -35
  12. package/dist/cjs/ion-loading.cjs.entry.js +1 -1
  13. package/dist/cjs/ion-menu_3.cjs.entry.js +1 -1
  14. package/dist/cjs/ion-modal.cjs.entry.js +1 -1
  15. package/dist/cjs/ion-picker-column-option.cjs.entry.js +3 -3
  16. package/dist/cjs/ion-picker-column.cjs.entry.js +3 -39
  17. package/dist/cjs/ion-popover.cjs.entry.js +1 -1
  18. package/dist/cjs/ion-select-modal.cjs.entry.js +1 -1
  19. package/dist/cjs/ion-select_3.cjs.entry.js +1 -1
  20. package/dist/cjs/ion-textarea.cjs.entry.js +4 -34
  21. package/dist/cjs/ion-toast.cjs.entry.js +1 -1
  22. package/dist/cjs/ionic.cjs.js +1 -1
  23. package/dist/cjs/loader.cjs.js +1 -1
  24. package/dist/cjs/{overlays-CglR7j-u.js → overlays-Ca4z9krz.js} +15 -6
  25. package/dist/collection/components/datetime/datetime.js +4 -3
  26. package/dist/collection/components/input/input.js +6 -37
  27. package/dist/collection/components/picker-column/picker-column.js +3 -39
  28. package/dist/collection/components/picker-column-option/picker-column-option.ios.css +2 -2
  29. package/dist/collection/components/picker-column-option/picker-column-option.js +1 -1
  30. package/dist/collection/components/picker-column-option/picker-column-option.md.css +2 -2
  31. package/dist/collection/components/textarea/textarea.js +5 -36
  32. package/dist/collection/utils/overlays.js +15 -6
  33. package/dist/docs.json +1 -1
  34. package/dist/esm/index.js +1 -1
  35. package/dist/esm/ion-action-sheet.entry.js +1 -1
  36. package/dist/esm/ion-alert.entry.js +1 -1
  37. package/dist/esm/ion-datetime_3.entry.js +4 -4
  38. package/dist/esm/ion-input.entry.js +5 -35
  39. package/dist/esm/ion-loading.entry.js +1 -1
  40. package/dist/esm/ion-menu_3.entry.js +1 -1
  41. package/dist/esm/ion-modal.entry.js +1 -1
  42. package/dist/esm/ion-picker-column-option.entry.js +3 -3
  43. package/dist/esm/ion-picker-column.entry.js +3 -39
  44. package/dist/esm/ion-popover.entry.js +1 -1
  45. package/dist/esm/ion-select-modal.entry.js +1 -1
  46. package/dist/esm/ion-select_3.entry.js +1 -1
  47. package/dist/esm/ion-textarea.entry.js +4 -34
  48. package/dist/esm/ion-toast.entry.js +1 -1
  49. package/dist/esm/ionic.js +1 -1
  50. package/dist/esm/loader.js +1 -1
  51. package/dist/esm/{overlays-ZX_4-t_r.js → overlays-C14Rvrme.js} +15 -6
  52. package/dist/ionic/index.esm.js +1 -1
  53. package/dist/ionic/ionic.esm.js +1 -1
  54. package/dist/ionic/{p-91d6ccb0.entry.js → p-05baca9e.entry.js} +1 -1
  55. package/dist/ionic/p-1488b7cc.entry.js +4 -0
  56. package/dist/ionic/{p-7bac2c5f.entry.js → p-1be8ffce.entry.js} +1 -1
  57. package/dist/ionic/p-2e296f4a.entry.js +4 -0
  58. package/dist/ionic/{p-ac434970.entry.js → p-31393988.entry.js} +1 -1
  59. package/dist/ionic/{p-982fe1c4.entry.js → p-3c51f2cd.entry.js} +1 -1
  60. package/dist/ionic/{p-92e8f208.entry.js → p-5b64a786.entry.js} +1 -1
  61. package/dist/ionic/{p-8d96a0cd.entry.js → p-6d655180.entry.js} +1 -1
  62. package/dist/ionic/p-8888efe4.entry.js +4 -0
  63. package/dist/ionic/p-DMk_cMN9.js +4 -0
  64. package/dist/ionic/{p-c575e7ce.entry.js → p-a67512ba.entry.js} +1 -1
  65. package/dist/ionic/{p-ab33ef20.entry.js → p-b1c70f1c.entry.js} +1 -1
  66. package/dist/ionic/p-b292804d.entry.js +4 -0
  67. package/dist/ionic/{p-f2884bc2.entry.js → p-b6432111.entry.js} +1 -1
  68. package/dist/ionic/p-c5210d3e.entry.js +4 -0
  69. package/dist/types/components/input/input.d.ts +0 -9
  70. package/dist/types/components/picker-column/picker-column.d.ts +0 -7
  71. package/dist/types/components/textarea/textarea.d.ts +0 -9
  72. package/hydrate/index.js +33 -96
  73. package/hydrate/index.mjs +33 -96
  74. package/package.json +1 -1
  75. package/dist/ionic/p-187aaf4a.entry.js +0 -4
  76. package/dist/ionic/p-1d5b934a.entry.js +0 -4
  77. package/dist/ionic/p-1e34d434.entry.js +0 -4
  78. package/dist/ionic/p-29032e49.entry.js +0 -4
  79. package/dist/ionic/p-CSwZyt05.js +0 -4
  80. package/dist/ionic/p-f456d176.entry.js +0 -4
@@ -5,6 +5,7 @@ import { proxyCustomElement, HTMLElement, createEvent, writeTask, h, Host } from
5
5
  import { startFocusVisible } from './focus-visible.js';
6
6
  import { r as raf, g as getElementRoot, e as renderHiddenInput } from './helpers.js';
7
7
  import { a as printIonError, p as printIonWarning } from './index4.js';
8
+ import { F as FOCUS_TRAP_DISABLE_CLASS } from './overlays.js';
8
9
  import { i as isRTL } from './dir.js';
9
10
  import { c as createColorClasses } from './theme.js';
10
11
  import { c as chevronDown, f as caretUpSharp, g as chevronForward, h as caretDownSharp, a as chevronBack } from './index6.js';
@@ -1302,7 +1303,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
1302
1303
  const renderArray = forcePresentation === 'time-date'
1303
1304
  ? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)]
1304
1305
  : [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)];
1305
- return h("ion-picker", null, renderArray);
1306
+ return h("ion-picker", { class: FOCUS_TRAP_DISABLE_CLASS }, renderArray);
1306
1307
  }
1307
1308
  renderDatePickerColumns(forcePresentation) {
1308
1309
  return forcePresentation === 'date-time' || forcePresentation === 'time-date'
@@ -1859,7 +1860,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
1859
1860
  const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
1860
1861
  const hasWheelVariant = hasDatePresentation && preferWheel;
1861
1862
  renderHiddenInput(true, el, name, formatValue(value), disabled);
1862
- return (h(Host, { key: 'f35cf200ff05d33074576e3d2754d3b2a0735b96', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
1863
+ return (h(Host, { key: '57492534800ea059a7c2bbd9f0059cc0b75ae8d2', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
1863
1864
  [mode]: true,
1864
1865
  ['datetime-readonly']: readonly,
1865
1866
  ['datetime-disabled']: disabled,
@@ -1869,7 +1870,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
1869
1870
  [`datetime-size-${size}`]: true,
1870
1871
  [`datetime-prefer-wheel`]: hasWheelVariant,
1871
1872
  [`datetime-grid`]: isGridStyle,
1872
- })) }, h("div", { key: '859e9354a12bfa58ac3f964c2e66839f17071c00', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
1873
+ })) }, h("div", { key: '97dac5e5195635ac0bc5fb472b9d09e5c3c6bbc3', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
1873
1874
  }
1874
1875
  get el() { return this; }
1875
1876
  static get watchers() { return {
@@ -43,10 +43,6 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
43
43
  * is applied in both cases.
44
44
  */
45
45
  this.hasFocus = false;
46
- /**
47
- * Track validation state for proper aria-live announcements
48
- */
49
- this.isInvalid = false;
50
46
  /**
51
47
  * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
52
48
  * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
@@ -231,31 +227,10 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
231
227
  componentWillLoad() {
232
228
  this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['tabindex', 'title', 'data-form-type', 'dir']));
233
229
  }
234
- /**
235
- * Checks if the input is in an invalid state based on validation classes
236
- */
237
- checkValidationState() {
238
- return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
239
- }
240
230
  connectedCallback() {
241
231
  const { el } = this;
242
232
  this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
243
233
  this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
244
- // Watch for class changes to update validation state
245
- if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
246
- this.validationObserver = new MutationObserver(() => {
247
- const newIsInvalid = this.checkValidationState();
248
- if (this.isInvalid !== newIsInvalid) {
249
- this.isInvalid = newIsInvalid;
250
- }
251
- });
252
- this.validationObserver.observe(el, {
253
- attributes: true,
254
- attributeFilter: ['class'],
255
- });
256
- }
257
- // Always set initial state
258
- this.isInvalid = this.checkValidationState();
259
234
  this.debounceChanged();
260
235
  if (Build.isBrowser) {
261
236
  document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
@@ -292,11 +267,6 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
292
267
  this.notchController.destroy();
293
268
  this.notchController = undefined;
294
269
  }
295
- // Clean up validation observer to prevent memory leaks
296
- if (this.validationObserver) {
297
- this.validationObserver.disconnect();
298
- this.validationObserver = undefined;
299
- }
300
270
  }
301
271
  /**
302
272
  * Sets focus on the native `input` in `ion-input`. Use this method instead of the global
@@ -405,8 +375,8 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
405
375
  ];
406
376
  }
407
377
  getHintTextID() {
408
- const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
409
- if (isInvalid && errorText) {
378
+ const { el, helperText, errorText, helperTextId, errorTextId } = this;
379
+ if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
410
380
  return errorTextId;
411
381
  }
412
382
  if (helperText) {
@@ -519,7 +489,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
519
489
  * TODO(FW-5592): Remove hasStartEndSlots condition
520
490
  */
521
491
  const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
522
- return (h(Host, { key: '1b0cffa910aef4eac24438bf3158e51905e70788', class: createColorClasses(this.color, {
492
+ return (h(Host, { key: '41b2526627e7d2773a80f011b123284203a71ca0', class: createColorClasses(this.color, {
523
493
  [mode]: true,
524
494
  'has-value': hasValue,
525
495
  'has-focus': hasFocus,
@@ -530,14 +500,14 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
530
500
  'in-item': inItem,
531
501
  'in-item-color': hostContext('ion-item.ion-color', this.el),
532
502
  'input-disabled': disabled,
533
- }) }, h("label", { key: '24411a6cc190e2054015bca5e2827b96c65bba17', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '7fa7a7f6d2778e6efbebc6f2671d8a63048f76a8', class: "native-wrapper", onClick: this.onLabelClick }, h("slot", { key: '14f489e6026967ee1b2eee1519bad4230f028489', name: "start" }), h("input", Object.assign({ key: 'd0f5b756394aced0831e80e91313a417bda37e6f', 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.isInvalid ? 'true' : undefined }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '3e37003927082bbbfce4b3396a263969aa2289fc', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
503
+ }) }, h("label", { key: '9ab078363e32528102b441ad1791d83f86fdcbdc', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'e34b594980ec62e4c618e827fadf7669a39ad0d8', class: "native-wrapper", onClick: this.onLabelClick }, h("slot", { key: '12dc04ead5502e9e5736240e918bf9331bf7b5d9', name: "start" }), h("input", Object.assign({ key: 'df356eb4ced23109b2c0242f36dc043aba8782d6', 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: 'f79f68cabcd4ea99419331174a377827db0c0741', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
534
504
  /**
535
505
  * This prevents mobile browsers from
536
506
  * blurring the input when the clear
537
507
  * button is activated.
538
508
  */
539
509
  ev.preventDefault();
540
- }, onClick: this.clearTextInput }, h("ion-icon", { key: '269ccdfd95a8a5b39bf0587b1494b4badd5c65b3', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '5d93a350194c4197c01c5d54f50060e7f527f065', name: "end" })), shouldRenderHighlight && h("div", { key: 'fbdd13d41b37aa1e4608ba2535f7b833748eae3f', class: "input-highlight" })), this.renderBottomContent()));
510
+ }, onClick: this.clearTextInput }, h("ion-icon", { key: '237ec07ec2e10f08818a332bb596578c2c49f770', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '1f0a3624aa3e8dc3c307a6762230ab698768a5e5', name: "end" })), shouldRenderHighlight && h("div", { key: '8a8cbb82695a722a0010b53dd0b1f1f97534a20b', class: "input-highlight" })), this.renderBottomContent()));
541
511
  }
542
512
  get el() { return this; }
543
513
  static get watchers() { return {
@@ -586,7 +556,6 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
586
556
  "type": [1],
587
557
  "value": [1032],
588
558
  "hasFocus": [32],
589
- "isInvalid": [32],
590
559
  "setFocus": [64],
591
560
  "getInputElement": [64]
592
561
  }, [[2, "click", "onClickCapture"]], {
@@ -40,10 +40,6 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
40
40
  * is applied in both cases.
41
41
  */
42
42
  this.hasFocus = false;
43
- /**
44
- * Track validation state for proper aria-live announcements
45
- */
46
- this.isInvalid = false;
47
43
  /**
48
44
  * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
49
45
  * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
@@ -190,31 +186,10 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
190
186
  this.el.click();
191
187
  }
192
188
  }
193
- /**
194
- * Checks if the textarea is in an invalid state based on validation classes
195
- */
196
- checkValidationState() {
197
- return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
198
- }
199
189
  connectedCallback() {
200
190
  const { el } = this;
201
191
  this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
202
192
  this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
203
- // Watch for class changes to update validation state
204
- if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
205
- this.validationObserver = new MutationObserver(() => {
206
- const newIsInvalid = this.checkValidationState();
207
- if (this.isInvalid !== newIsInvalid) {
208
- this.isInvalid = newIsInvalid;
209
- }
210
- });
211
- this.validationObserver.observe(el, {
212
- attributes: true,
213
- attributeFilter: ['class'],
214
- });
215
- }
216
- // Always set initial state
217
- this.isInvalid = this.checkValidationState();
218
193
  this.debounceChanged();
219
194
  if (Build.isBrowser) {
220
195
  document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
@@ -236,11 +211,6 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
236
211
  this.notchController.destroy();
237
212
  this.notchController = undefined;
238
213
  }
239
- // Clean up validation observer to prevent memory leaks
240
- if (this.validationObserver) {
241
- this.validationObserver.disconnect();
242
- this.validationObserver = undefined;
243
- }
244
214
  }
245
215
  componentWillLoad() {
246
216
  this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['data-form-type', 'title', 'tabindex', 'dir']));
@@ -418,8 +388,8 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
418
388
  ];
419
389
  }
420
390
  getHintTextID() {
421
- const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
422
- if (isInvalid && errorText) {
391
+ const { el, helperText, errorText, helperTextId, errorTextId } = this;
392
+ if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
423
393
  return errorTextId;
424
394
  }
425
395
  if (helperText) {
@@ -478,7 +448,7 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
478
448
  * TODO(FW-5592): Remove hasStartEndSlots condition
479
449
  */
480
450
  const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
481
- return (h(Host, { key: 'de258335fde7fa934cf3bd58c469525440457468', class: createColorClasses(this.color, {
451
+ return (h(Host, { key: 'd9f2ede0107987fc42c99e310cd2336bad5a5755', class: createColorClasses(this.color, {
482
452
  [mode]: true,
483
453
  'has-value': hasValue,
484
454
  'has-focus': hasFocus,
@@ -487,7 +457,7 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
487
457
  [`textarea-shape-${shape}`]: shape !== undefined,
488
458
  [`textarea-label-placement-${labelPlacement}`]: true,
489
459
  'textarea-disabled': disabled,
490
- }) }, h("label", { key: '79fc87122871d45316b1c5fd0a467bf85351e804', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '2375888a47557b41ea3b3bf8eae1fd3f2a4032bd', class: "textarea-wrapper-inner" }, h("div", { key: 'c5af683527a870bd85256b6de8a7d216283403dd', class: "start-slot-wrapper" }, h("slot", { key: 'd972e5784403c5cc6ed067ae578ce23ff8303e1e', name: "start" })), h("div", { key: '1092067609d912a76a8679767611e4ca3e071c6f', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: 'cd23a4bad4d5b460830340009d24d0618f14fd73', 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.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), h("div", { key: 'c91a5456f4490ef8699f2e44b4a6c64f6084f5fd', class: "end-slot-wrapper" }, h("slot", { key: 'b71ba7ba0d74091e81784432dcffa832b66f3f25', name: "end" }))), shouldRenderHighlight && h("div", { key: '757c3287e1cea5ee851227407685a437f8408c54', class: "textarea-highlight" })), this.renderBottomContent()));
460
+ }) }, h("label", { key: '9de598b95237462bb3bccffaefe83afbb43554b8', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'e33c426c6541d723ccc246bb404c03687726ff83', class: "textarea-wrapper-inner" }, h("div", { key: '521e11af9d54d281b0a2b1c25bcfc6f742c18296', class: "start-slot-wrapper" }, h("slot", { key: '515523f6ca3ce0e5dd08f3275c21a190fb1ca177', name: "start" })), h("div", { key: '916e01e00de8400ae00ef06bc1fb62d8be2eee08', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '810271e6532d90e27dab1fcb26546113c1ce9cb0', 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: '80aca9ea9546dca9d38efd291a6b0be384bb6978', class: "end-slot-wrapper" }, h("slot", { key: '407fab16c66a9f4a542369bfecc0d9afa0065977', name: "end" }))), shouldRenderHighlight && h("div", { key: 'f00523a6698fac8a1996e04303487bef01d10f25', class: "textarea-highlight" })), this.renderBottomContent()));
491
461
  }
492
462
  get el() { return this; }
493
463
  static get watchers() { return {
@@ -529,7 +499,6 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
529
499
  "labelPlacement": [1, "label-placement"],
530
500
  "shape": [1],
531
501
  "hasFocus": [32],
532
- "isInvalid": [32],
533
502
  "setFocus": [64],
534
503
  "getInputElement": [64]
535
504
  }, [[2, "click", "onClickCapture"]], {
@@ -496,16 +496,20 @@ const setRootAriaHidden = (hidden = false) => {
496
496
  }
497
497
  if (hidden) {
498
498
  viewContainer.setAttribute('aria-hidden', 'true');
499
+ viewContainer.setAttribute('inert', '');
499
500
  }
500
501
  else {
501
502
  viewContainer.removeAttribute('aria-hidden');
503
+ viewContainer.removeAttribute('inert');
502
504
  }
503
505
  };
504
506
  const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
505
- var _a, _b;
507
+ var _a, _b, _c;
506
508
  if (overlay.presented) {
507
509
  return;
508
510
  }
511
+ console.log("presenting overlay...");
512
+ (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
509
513
  /**
510
514
  * Due to accessibility guidelines, toasts do not have
511
515
  * focus traps.
@@ -521,7 +525,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
521
525
  hideAnimatingOverlayFromScreenReaders(overlay.el);
522
526
  overlay.presented = true;
523
527
  overlay.willPresent.emit();
524
- (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
528
+ (_b = overlay.willPresentShorthand) === null || _b === void 0 ? void 0 : _b.emit();
525
529
  const mode = getIonMode(overlay);
526
530
  // get the user's animation fn if one was provided
527
531
  const animationBuilder = overlay.enterAnimation
@@ -530,7 +534,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
530
534
  const completed = await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
531
535
  if (completed) {
532
536
  overlay.didPresent.emit();
533
- (_b = overlay.didPresentShorthand) === null || _b === void 0 ? void 0 : _b.emit();
537
+ (_c = overlay.didPresentShorthand) === null || _c === void 0 ? void 0 : _c.emit();
534
538
  }
535
539
  /**
536
540
  * When an overlay that steals focus
@@ -565,6 +569,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
565
569
  * screen readers.
566
570
  */
567
571
  overlay.el.removeAttribute('aria-hidden');
572
+ overlay.el.removeAttribute('inert');
568
573
  };
569
574
  /**
570
575
  * When an overlay component is dismissed,
@@ -616,10 +621,11 @@ const restoreElementFocus = async (overlayEl) => {
616
621
  }
617
622
  };
618
623
  const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnimation, opts) => {
619
- var _a, _b;
624
+ var _a, _b, _c;
620
625
  if (!overlay.presented) {
621
626
  return false;
622
627
  }
628
+ (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
623
629
  const presentedOverlays = doc !== undefined ? getPresentedOverlays(doc) : [];
624
630
  /**
625
631
  * For accessibility, toasts lack focus traps and don't receive
@@ -653,7 +659,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
653
659
  // Overlay contents should not be clickable during dismiss
654
660
  overlay.el.style.setProperty('pointer-events', 'none');
655
661
  overlay.willDismiss.emit({ data, role });
656
- (_a = overlay.willDismissShorthand) === null || _a === void 0 ? void 0 : _a.emit({ data, role });
662
+ (_b = overlay.willDismissShorthand) === null || _b === void 0 ? void 0 : _b.emit({ data, role });
657
663
  const mode = getIonMode(overlay);
658
664
  const animationBuilder = overlay.leaveAnimation
659
665
  ? overlay.leaveAnimation
@@ -663,7 +669,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
663
669
  await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
664
670
  }
665
671
  overlay.didDismiss.emit({ data, role });
666
- (_b = overlay.didDismissShorthand) === null || _b === void 0 ? void 0 : _b.emit({ data, role });
672
+ (_c = overlay.didDismissShorthand) === null || _c === void 0 ? void 0 : _c.emit({ data, role });
667
673
  // Get a reference to all animations currently assigned to this overlay
668
674
  // Then tear them down to return the overlay to its initial visual state
669
675
  const animations = activeAnimations.get(overlay) || [];
@@ -913,6 +919,7 @@ const hideAnimatingOverlayFromScreenReaders = (overlay) => {
913
919
  * This is done at the end of the `present` method.
914
920
  */
915
921
  overlay.setAttribute('aria-hidden', 'true');
922
+ overlay.setAttribute('inert', '');
916
923
  }
917
924
  };
918
925
  /**
@@ -940,6 +947,7 @@ const hideUnderlyingOverlaysFromScreenReaders = (newTopMostOverlay) => {
940
947
  */
941
948
  if (nextPresentedOverlay.hasAttribute('aria-hidden') || nextPresentedOverlay.tagName !== 'ION-TOAST') {
942
949
  presentedOverlay.setAttribute('aria-hidden', 'true');
950
+ presentedOverlay.setAttribute('inert', '');
943
951
  }
944
952
  }
945
953
  };
@@ -961,6 +969,7 @@ const revealOverlaysToScreenReaders = () => {
961
969
  * overlay too so focus can move there since focus is never automatically moved to the Toast.
962
970
  */
963
971
  currentOverlay.removeAttribute('aria-hidden');
972
+ currentOverlay.removeAttribute('inert');
964
973
  /**
965
974
  * If we found a non-Toast element then we can just remove aria-hidden and stop searching entirely
966
975
  * since this overlay should always receive focus. As a result, all underlying overlays should still
@@ -6,9 +6,9 @@ import { d as inheritAttributes } from './helpers.js';
6
6
  import { c as createColorClasses } from './theme.js';
7
7
  import { b as getIonMode } from './ionic-global.js';
8
8
 
9
- const pickerColumnOptionIosCss = "button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) button{cursor:default}";
9
+ const pickerColumnOptionIosCss = ".picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}";
10
10
 
11
- const pickerColumnOptionMdCss = "button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) button{cursor:default}:host(.option-active){color:var(--ion-color-base)}";
11
+ const pickerColumnOptionMdCss = ".picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}:host(.option-active){color:var(--ion-color-base)}";
12
12
 
13
13
  const PickerColumnOption = /*@__PURE__*/ proxyCustomElement(class PickerColumnOption extends HTMLElement {
14
14
  constructor() {
@@ -102,7 +102,7 @@ const PickerColumnOption = /*@__PURE__*/ proxyCustomElement(class PickerColumnOp
102
102
  return (h(Host, { key: 'f816729941aabcb31ddfdce3ffe2e2139030d715', class: createColorClasses(color, {
103
103
  [mode]: true,
104
104
  ['option-disabled']: disabled,
105
- }) }, h("button", { key: '48dff7833bb60fc8331cd353a0885e6affa683d1', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, h("slot", { key: 'f9224d0e7b7aa6c05b29abfdcfe0f30ad6ee3141' }))));
105
+ }) }, h("div", { key: 'd942de84fd14d7dc06b1e5cf4f7920d1dc3c6371', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, h("slot", { key: 'b0df5717b42209e649097209a01476e1a66f5c5c' }))));
106
106
  }
107
107
  get el() { return this; }
108
108
  static get watchers() { return {
@@ -409,23 +409,6 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
409
409
  var _a;
410
410
  return el ? (_a = el.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : el.innerText : '';
411
411
  };
412
- /**
413
- * Render an element that overlays the column. This element is for assistive
414
- * tech to allow users to navigate the column up/down. This element should receive
415
- * focus as it listens for synthesized keyboard events as required by the
416
- * slider role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role
417
- */
418
- this.renderAssistiveFocusable = () => {
419
- const { activeItem } = this;
420
- const valueText = this.getOptionValueText(activeItem);
421
- /**
422
- * When using the picker, the valuetext provides important context that valuenow
423
- * does not. Additionally, using non-zero valuemin/valuemax values can cause
424
- * WebKit to incorrectly announce numeric valuetext values (such as a year
425
- * like "2024") as percentages: https://bugs.webkit.org/show_bug.cgi?id=273126
426
- */
427
- return (h("div", { ref: (el) => (this.assistiveFocusable = el), class: "assistive-focusable", role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": valueText, "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }));
428
- };
429
412
  }
430
413
  ariaLabelChanged(newValue) {
431
414
  this.ariaLabel = newValue;
@@ -566,33 +549,14 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
566
549
  render() {
567
550
  const { color, disabled, isActive, numericInput } = this;
568
551
  const mode = getIonMode(this);
569
- return (h(Host, { key: 'ea0280355b2f87895bf7dddd289ccf473aa759f3', class: createColorClasses(color, {
552
+ return (h(Host, { key: 'db903fd415f8a2d91994dececca481c1af8ba6a9', class: createColorClasses(color, {
570
553
  [mode]: true,
571
554
  ['picker-column-active']: isActive,
572
555
  ['picker-column-numeric-input']: numericInput,
573
556
  ['picker-column-disabled']: disabled,
574
- }) }, this.renderAssistiveFocusable(), h("slot", { key: '482992131cdeb85b1f61430d7fe1322a16345769', name: "prefix" }), h("div", { key: '43f7f80d621d411ef366b3ca1396299e8c9a0c97', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
557
+ }) }, h("slot", { key: '02ce9e1dd7df91afcd50b06416552bcffb5dec98', name: "prefix" }), h("div", { key: '6dfd7d2429bec19244a6b1afb4448121963a031b', class: "picker-opts", ref: (el) => {
575
558
  this.scrollEl = el;
576
- },
577
- /**
578
- * When an element has an overlay scroll style and
579
- * a fixed height, Firefox will focus the scrollable
580
- * container if the content exceeds the container's
581
- * dimensions.
582
- *
583
- * This causes keyboard navigation to focus to this
584
- * element instead of going to the next element in
585
- * the tab order.
586
- *
587
- * The desired behavior is for the user to be able to
588
- * focus the assistive focusable element and tab to
589
- * the next element in the tab order. Instead of tabbing
590
- * to this element.
591
- *
592
- * To prevent this, we set the tabIndex to -1. This
593
- * will match the behavior of the other browsers.
594
- */
595
- tabIndex: -1 }, h("div", { key: '13a9ee686132af32240710730765de4c0003a9e8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'dbccba4920833cfcebe9b0fc763458ec3053705a', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '682b43f83a5ea2e46067457f3af118535e111edb', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: 'd27e1e1dc0504b2f4627a29912a05bb91e8e413a' }), h("div", { key: '61c948dbb9cf7469aed3018542bc0954211585ba', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'cf46c277fbee65e35ff44ce0d53ce12aa9cbf9db', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'bbc0e2d491d3f836ab849493ade2f7fa6ad9244e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'd25cbbe14b2914fe7b878d43b4e3f4a8c8177d24', name: "suffix" })));
559
+ }, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, h("div", { key: 'e30ce0b9cefbfe4d4441fa33acf595da31855c3f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '8be2bd293c12c6ba720d9b31d0d561a96f42e97d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '8afdcddddabbf646fbb55cb0ba4448309a2c1dd9', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '6aa0dacc34d6848575ad5b122b9046982308ca43' }), h("div", { key: '92ec8a357414c1b779b11d1dd18fb87a7ee63982', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'b89457cb74b5907c25594ff6720ac54ca537e933', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '5bbc92e6bc24de08e39873bf08c5b668373ac0f8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'd7bf2b519214f0f3576a4ca79844ad97827dd97f', name: "suffix" })));
596
560
  }
597
561
  get el() { return this; }
598
562
  static get watchers() { return {
@@ -15,7 +15,7 @@ var index$2 = require('./index-DNh170BW.js');
15
15
  var config = require('./config-CKhELRRu.js');
16
16
  var theme = require('./theme-CeDs6Hcv.js');
17
17
  var index$3 = require('./index-D24wggHR.js');
18
- var overlays = require('./overlays-CglR7j-u.js');
18
+ var overlays = require('./overlays-Ca4z9krz.js');
19
19
  require('./index-DkNv4J_i.js');
20
20
  require('./gesture-controller-dtqlP_q4.js');
21
21
  require('./hardware-back-button-BxdNu76F.js');
@@ -7,7 +7,7 @@ var index = require('./index-DNh170BW.js');
7
7
  var buttonActive = require('./button-active-BzZenWWH.js');
8
8
  var helpers = require('./helpers-DgwmcYAu.js');
9
9
  var lockController = require('./lock-controller-aDB9wrEf.js');
10
- var overlays = require('./overlays-CglR7j-u.js');
10
+ var overlays = require('./overlays-Ca4z9krz.js');
11
11
  var theme = require('./theme-CeDs6Hcv.js');
12
12
  var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
13
13
  var animation = require('./animation-ZJ1lAkZD.js');
@@ -8,7 +8,7 @@ var config = require('./config-CKhELRRu.js');
8
8
  var buttonActive = require('./button-active-BzZenWWH.js');
9
9
  var helpers = require('./helpers-DgwmcYAu.js');
10
10
  var lockController = require('./lock-controller-aDB9wrEf.js');
11
- var overlays = require('./overlays-CglR7j-u.js');
11
+ var overlays = require('./overlays-Ca4z9krz.js');
12
12
  var theme = require('./theme-CeDs6Hcv.js');
13
13
  var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
14
14
  var animation = require('./animation-ZJ1lAkZD.js');
@@ -6,13 +6,13 @@
6
6
  var index = require('./index-DNh170BW.js');
7
7
  var focusVisible = require('./focus-visible-CCvKiLh3.js');
8
8
  var helpers = require('./helpers-DgwmcYAu.js');
9
+ var overlays = require('./overlays-Ca4z9krz.js');
9
10
  var dir = require('./dir-Cn0z1rJH.js');
10
11
  var theme = require('./theme-CeDs6Hcv.js');
11
12
  var index$1 = require('./index-DqmRDbxg.js');
12
13
  var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
13
14
  var data = require('./data-DW6ofvJ8.js');
14
15
  var lockController = require('./lock-controller-aDB9wrEf.js');
15
- var overlays = require('./overlays-CglR7j-u.js');
16
16
  var animation = require('./animation-ZJ1lAkZD.js');
17
17
  var haptic = require('./haptic-ClPPQ_PS.js');
18
18
  require('./index-DkNv4J_i.js');
@@ -1301,7 +1301,7 @@ const Datetime = class {
1301
1301
  const renderArray = forcePresentation === 'time-date'
1302
1302
  ? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)]
1303
1303
  : [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)];
1304
- return index.h("ion-picker", null, renderArray);
1304
+ return index.h("ion-picker", { class: overlays.FOCUS_TRAP_DISABLE_CLASS }, renderArray);
1305
1305
  }
1306
1306
  renderDatePickerColumns(forcePresentation) {
1307
1307
  return forcePresentation === 'date-time' || forcePresentation === 'time-date'
@@ -1858,7 +1858,7 @@ const Datetime = class {
1858
1858
  const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
1859
1859
  const hasWheelVariant = hasDatePresentation && preferWheel;
1860
1860
  helpers.renderHiddenInput(true, el, name, data.formatValue(value), disabled);
1861
- return (index.h(index.Host, { key: 'f35cf200ff05d33074576e3d2754d3b2a0735b96', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
1861
+ return (index.h(index.Host, { key: '57492534800ea059a7c2bbd9f0059cc0b75ae8d2', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
1862
1862
  [mode]: true,
1863
1863
  ['datetime-readonly']: readonly,
1864
1864
  ['datetime-disabled']: disabled,
@@ -1868,7 +1868,7 @@ const Datetime = class {
1868
1868
  [`datetime-size-${size}`]: true,
1869
1869
  [`datetime-prefer-wheel`]: hasWheelVariant,
1870
1870
  [`datetime-grid`]: isGridStyle,
1871
- })) }, index.h("div", { key: '859e9354a12bfa58ac3f964c2e66839f17071c00', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
1871
+ })) }, index.h("div", { key: '97dac5e5195635ac0bc5fb472b9d09e5c3c6bbc3', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
1872
1872
  }
1873
1873
  get el() { return index.getElement(this); }
1874
1874
  static get watchers() { return {
@@ -44,10 +44,6 @@ const Input = class {
44
44
  * is applied in both cases.
45
45
  */
46
46
  this.hasFocus = false;
47
- /**
48
- * Track validation state for proper aria-live announcements
49
- */
50
- this.isInvalid = false;
51
47
  /**
52
48
  * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
53
49
  * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
@@ -232,31 +228,10 @@ const Input = class {
232
228
  componentWillLoad() {
233
229
  this.inheritedAttributes = Object.assign(Object.assign({}, helpers.inheritAriaAttributes(this.el)), helpers.inheritAttributes(this.el, ['tabindex', 'title', 'data-form-type', 'dir']));
234
230
  }
235
- /**
236
- * Checks if the input is in an invalid state based on validation classes
237
- */
238
- checkValidationState() {
239
- return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
240
- }
241
231
  connectedCallback() {
242
232
  const { el } = this;
243
233
  this.slotMutationController = input_utils.createSlotMutationController(el, ['label', 'start', 'end'], () => index.forceUpdate(this));
244
234
  this.notchController = notchController.createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
245
- // Watch for class changes to update validation state
246
- if (typeof MutationObserver !== 'undefined') {
247
- this.validationObserver = new MutationObserver(() => {
248
- const newIsInvalid = this.checkValidationState();
249
- if (this.isInvalid !== newIsInvalid) {
250
- this.isInvalid = newIsInvalid;
251
- }
252
- });
253
- this.validationObserver.observe(el, {
254
- attributes: true,
255
- attributeFilter: ['class'],
256
- });
257
- }
258
- // Always set initial state
259
- this.isInvalid = this.checkValidationState();
260
235
  this.debounceChanged();
261
236
  {
262
237
  document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
@@ -293,11 +268,6 @@ const Input = class {
293
268
  this.notchController.destroy();
294
269
  this.notchController = undefined;
295
270
  }
296
- // Clean up validation observer to prevent memory leaks
297
- if (this.validationObserver) {
298
- this.validationObserver.disconnect();
299
- this.validationObserver = undefined;
300
- }
301
271
  }
302
272
  /**
303
273
  * Sets focus on the native `input` in `ion-input`. Use this method instead of the global
@@ -406,8 +376,8 @@ const Input = class {
406
376
  ];
407
377
  }
408
378
  getHintTextID() {
409
- const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
410
- if (isInvalid && errorText) {
379
+ const { el, helperText, errorText, helperTextId, errorTextId } = this;
380
+ if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
411
381
  return errorTextId;
412
382
  }
413
383
  if (helperText) {
@@ -520,7 +490,7 @@ const Input = class {
520
490
  * TODO(FW-5592): Remove hasStartEndSlots condition
521
491
  */
522
492
  const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
523
- return (index.h(index.Host, { key: '1b0cffa910aef4eac24438bf3158e51905e70788', class: theme.createColorClasses(this.color, {
493
+ return (index.h(index.Host, { key: '41b2526627e7d2773a80f011b123284203a71ca0', class: theme.createColorClasses(this.color, {
524
494
  [mode]: true,
525
495
  'has-value': hasValue,
526
496
  'has-focus': hasFocus,
@@ -531,14 +501,14 @@ const Input = class {
531
501
  'in-item': inItem,
532
502
  'in-item-color': theme.hostContext('ion-item.ion-color', this.el),
533
503
  'input-disabled': disabled,
534
- }) }, index.h("label", { key: '24411a6cc190e2054015bca5e2827b96c65bba17', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), index.h("div", { key: '7fa7a7f6d2778e6efbebc6f2671d8a63048f76a8', class: "native-wrapper", onClick: this.onLabelClick }, index.h("slot", { key: '14f489e6026967ee1b2eee1519bad4230f028489', name: "start" }), index.h("input", Object.assign({ key: 'd0f5b756394aced0831e80e91313a417bda37e6f', 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.isInvalid ? 'true' : undefined }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (index.h("button", { key: '3e37003927082bbbfce4b3396a263969aa2289fc', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
504
+ }) }, index.h("label", { key: '9ab078363e32528102b441ad1791d83f86fdcbdc', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), index.h("div", { key: 'e34b594980ec62e4c618e827fadf7669a39ad0d8', class: "native-wrapper", onClick: this.onLabelClick }, index.h("slot", { key: '12dc04ead5502e9e5736240e918bf9331bf7b5d9', name: "start" }), index.h("input", Object.assign({ key: 'df356eb4ced23109b2c0242f36dc043aba8782d6', 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 && (index.h("button", { key: 'f79f68cabcd4ea99419331174a377827db0c0741', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
535
505
  /**
536
506
  * This prevents mobile browsers from
537
507
  * blurring the input when the clear
538
508
  * button is activated.
539
509
  */
540
510
  ev.preventDefault();
541
- }, onClick: this.clearTextInput }, index.h("ion-icon", { key: '269ccdfd95a8a5b39bf0587b1494b4badd5c65b3', "aria-hidden": "true", icon: clearIconData }))), index.h("slot", { key: '5d93a350194c4197c01c5d54f50060e7f527f065', name: "end" })), shouldRenderHighlight && index.h("div", { key: 'fbdd13d41b37aa1e4608ba2535f7b833748eae3f', class: "input-highlight" })), this.renderBottomContent()));
511
+ }, onClick: this.clearTextInput }, index.h("ion-icon", { key: '237ec07ec2e10f08818a332bb596578c2c49f770', "aria-hidden": "true", icon: clearIconData }))), index.h("slot", { key: '1f0a3624aa3e8dc3c307a6762230ab698768a5e5', name: "end" })), shouldRenderHighlight && index.h("div", { key: '8a8cbb82695a722a0010b53dd0b1f1f97534a20b', class: "input-highlight" })), this.renderBottomContent()));
542
512
  }
543
513
  get el() { return index.getElement(this); }
544
514
  static get watchers() { return {
@@ -7,7 +7,7 @@ var index = require('./index-DNh170BW.js');
7
7
  var config = require('./config-CKhELRRu.js');
8
8
  var helpers = require('./helpers-DgwmcYAu.js');
9
9
  var lockController = require('./lock-controller-aDB9wrEf.js');
10
- var overlays = require('./overlays-CglR7j-u.js');
10
+ var overlays = require('./overlays-Ca4z9krz.js');
11
11
  var theme = require('./theme-CeDs6Hcv.js');
12
12
  var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
13
13
  var animation = require('./animation-ZJ1lAkZD.js');
@@ -5,7 +5,7 @@
5
5
 
6
6
  var index = require('./index-DNh170BW.js');
7
7
  var cubicBezier = require('./cubic-bezier-DAjy1V-e.js');
8
- var overlays = require('./overlays-CglR7j-u.js');
8
+ var overlays = require('./overlays-Ca4z9krz.js');
9
9
  var gestureController = require('./gesture-controller-dtqlP_q4.js');
10
10
  var hardwareBackButton = require('./hardware-back-button-BxdNu76F.js');
11
11
  var helpers = require('./helpers-DgwmcYAu.js');