@ionic/core 8.7.3-dev.11755006024.11261c64 → 8.7.3-dev.11755195979.1ec83531

package/dist/collection/components/textarea/textarea.js

@@ -37,6 +37,10 @@ export class Textarea {
          * is applied in both cases.
          */
         this.hasFocus = false;
+        /**
+         * Track validation state for proper aria-live announcements
+         */
+        this.isInvalid = false;
         /**
          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
          * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
@@ -183,10 +187,31 @@ export class Textarea {
             this.el.click();
         }
     }
+    /**
+     * Checks if the textarea is in an invalid state based on validation classes
+     */
+    checkValidationState() {
+        return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
+    }
     connectedCallback() {
         const { el } = this;
         this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
+        // Watch for class changes to update validation state
+        if (Build.isBrowser) {
+            this.validationObserver = new MutationObserver(() => {
+                const newIsInvalid = this.checkValidationState();
+                if (this.isInvalid !== newIsInvalid) {
+                    this.isInvalid = newIsInvalid;
+                }
+            });
+            this.validationObserver.observe(el, {
+                attributes: true,
+                attributeFilter: ['class'],
+            });
+            // Set initial state
+            this.isInvalid = this.checkValidationState();
+        }
         this.debounceChanged();
         if (Build.isBrowser) {
             document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
@@ -208,6 +233,11 @@ export class Textarea {
             this.notchController.destroy();
             this.notchController = undefined;
         }
+        // Clean up validation observer to prevent memory leaks
+        if (this.validationObserver) {
+            this.validationObserver.disconnect();
+            this.validationObserver = undefined;
+        }
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['data-form-type', 'title', 'tabindex', 'dir']));
@@ -378,15 +408,15 @@ export class Textarea {
      * Renders the helper text or error text values
      */
     renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         return [
             h("div", { id: helperTextId, class: "helper-text" }, helperText),
-            h("div", { id: errorTextId, class: "error-text" }, errorText),
+            h("div", { id: errorTextId, class: "error-text", role: isInvalid && errorText ? 'alert' : undefined, "aria-live": isInvalid && errorText ? 'polite' : 'off', "aria-atomic": "true" }, isInvalid && errorText ? errorText : ''),
         ];
     }
     getHintTextID() {
-        const { el, helperText, errorText, helperTextId, errorTextId } = this;
-        if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
+        const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
+        if (isInvalid && errorText) {
             return errorTextId;
         }
         if (helperText) {
@@ -445,7 +475,7 @@ export class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'd9f2ede0107987fc42c99e310cd2336bad5a5755', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'b67193cbdbd70844901e7f58346cb6021ea8ff9b', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -454,7 +484,7 @@ export class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, 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()));
+            }) }, h("label", { key: '11cb5c9eefd6c82f0d94a283f65e3bfea7cfd31f', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'f23c54b1d02b07ae54a729a1c871788b804031fe', class: "textarea-wrapper-inner" }, h("div", { key: 'd467679b2132c67307eacf29f0cb9cffe9fa3f70', class: "start-slot-wrapper" }, h("slot", { key: 'e75629aeb663218b24598803a400c0755bbc0958', name: "start" })), h("div", { key: 'dacfbeaee43984034a59375adcda329e5cf73de4', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: 'cee91118b3d2fa7f6b0660bab8384cd508e432b1', 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: '7802d173e3e338776ae2a095037191fdfe771dda', class: "end-slot-wrapper" }, h("slot", { key: '1b721a633799701fab2527b046c03ee23fa30c2e', name: "end" }))), shouldRenderHighlight && h("div", { key: 'ae2836d8d7ab9a1a6e70c3c17bbf99e30835c39d', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -1025,7 +1055,8 @@ export class Textarea {
     }
     static get states() {
         return {
-            "hasFocus": {}
+            "hasFocus": {},
+            "isInvalid": {}
         };
     }
     static get events() {

package/dist/collection/utils/overlays.js

@@ -11,6 +11,7 @@ import { CoreDelegate } from "./framework-delegate";
 import { BACKDROP_NO_SCROLL } from "./gesture/gesture-controller";
 import { OVERLAY_BACK_BUTTON_PRIORITY } from "./hardware-back-button";
 import { addEventListener, componentOnReady, focusVisibleElement, getElementRoot, removeEventListener, } from "./helpers";
+import { isPlatform } from "./platform";
 let lastOverlayIndex = 0;
 let lastId = 0;
 export const activeAnimations = new WeakMap();
@@ -438,6 +439,8 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
         setRootAriaHidden(true);
         document.body.classList.add(BACKDROP_NO_SCROLL);
     }
+    hideUnderlyingOverlaysFromScreenReaders(overlay.el);
+    hideAnimatingOverlayFromScreenReaders(overlay.el);
     overlay.presented = true;
     overlay.willPresent.emit();
     (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
@@ -563,6 +566,12 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
     }
     overlay.presented = false;
     try {
+        /**
+         * There is no need to show the overlay to screen readers during
+         * the dismiss animation. This is because the overlay will be removed
+         * from the DOM after the animation is complete.
+         */
+        hideAnimatingOverlayFromScreenReaders(overlay.el);
         // Overlay contents should not be clickable during dismiss
         overlay.el.style.setProperty('pointer-events', 'none');
         overlay.willDismiss.emit({ data, role });
@@ -601,6 +610,7 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
         printIonError(`[${overlay.el.tagName.toLowerCase()}] - `, err);
     }
     overlay.el.remove();
+    revealOverlaysToScreenReaders();
     return true;
 };
 const getAppRoot = (doc) => {
@@ -796,4 +806,91 @@ export const createTriggerController = () => {
         removeClickListener,
     };
 };
+/**
+ * The overlay that is being animated also needs to hide from screen
+ * readers during its animation. This ensures that assistive technologies
+ * like TalkBack do not announce or interact with the content until the
+ * animation is complete, avoiding confusion for users.
+ *
+ * When the overlay is presented on an Android device, TalkBack's focus rings
+ * may appear in the wrong position due to the transition (specifically
+ * `transform` styles). This occurs because the focus rings are initially
+ * displayed at the starting position of the elements before the transition
+ * begins. This workaround ensures the focus rings do not appear in the
+ * incorrect location.
+ *
+ * If this solution is applied to iOS devices, then it leads to a bug where
+ * the overlays cannot be accessed by screen readers. This is due to
+ * VoiceOver not being able to update the accessibility tree when the
+ * `aria-hidden` is removed.
+ *
+ * @param overlay - The overlay that is being animated.
+ */
+const hideAnimatingOverlayFromScreenReaders = (overlay) => {
+    if (doc === undefined)
+        return;
+    if (isPlatform('android')) {
+        /**
+         * Once the animation is complete, this attribute will be removed.
+         * This is done at the end of the `present` method.
+         */
+        overlay.setAttribute('aria-hidden', 'true');
+    }
+};
+/**
+ * Ensure that underlying overlays have aria-hidden if necessary so that screen readers
+ * cannot move focus to these elements. Note that we cannot rely on focus/focusin/focusout
+ * events here because those events do not fire when the screen readers moves to a non-focusable
+ * element such as text.
+ * Without this logic screen readers would be able to move focus outside of the top focus-trapped overlay.
+ *
+ * @param newTopMostOverlay - The overlay that is being presented. Since the overlay has not been
+ * fully presented yet at the time this function is called it will not be included in the getPresentedOverlays result.
+ */
+const hideUnderlyingOverlaysFromScreenReaders = (newTopMostOverlay) => {
+    var _a;
+    if (doc === undefined)
+        return;
+    const overlays = getPresentedOverlays(doc);
+    for (let i = overlays.length - 1; i >= 0; i--) {
+        const presentedOverlay = overlays[i];
+        const nextPresentedOverlay = (_a = overlays[i + 1]) !== null && _a !== void 0 ? _a : newTopMostOverlay;
+        /**
+         * If next overlay has aria-hidden then all remaining overlays will have it too.
+         * Or, if the next overlay is a Toast that does not have aria-hidden then current overlay
+         * should not have aria-hidden either so focus can remain in the current overlay.
+         */
+        if (nextPresentedOverlay.hasAttribute('aria-hidden') || nextPresentedOverlay.tagName !== 'ION-TOAST') {
+            presentedOverlay.setAttribute('aria-hidden', 'true');
+        }
+    }
+};
+/**
+ * When dismissing an overlay we need to reveal the new top-most overlay to screen readers.
+ * If the top-most overlay is a Toast we potentially need to reveal more overlays since
+ * focus is never automatically moved to the Toast.
+ */
+const revealOverlaysToScreenReaders = () => {
+    if (doc === undefined)
+        return;
+    const overlays = getPresentedOverlays(doc);
+    for (let i = overlays.length - 1; i >= 0; i--) {
+        const currentOverlay = overlays[i];
+        /**
+         * If the current we are looking at is a Toast then we can remove aria-hidden.
+         * However, we potentially need to keep looking at the overlay stack because there
+         * could be more Toasts underneath. Additionally, we need to unhide the closest non-Toast
+         * overlay too so focus can move there since focus is never automatically moved to the Toast.
+         */
+        currentOverlay.removeAttribute('aria-hidden');
+        /**
+         * If we found a non-Toast element then we can just remove aria-hidden and stop searching entirely
+         * since this overlay should always receive focus. As a result, all underlying overlays should still
+         * be hidden from screen readers.
+         */
+        if (currentOverlay.tagName !== 'ION-TOAST') {
+            break;
+        }
+    }
+};
 export const FOCUS_TRAP_DISABLE_CLASS = 'ion-disable-focus-trap';

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-08-12T13:42:18",
+  "timestamp": "2025-08-14T18:28:00",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.36.2",

package/dist/esm/index.js

@@ -13,7 +13,7 @@ export { L as LogLevel } from './index-4DxY6_gG.js';
 export { I as IonicSafeString, g as getMode, s as setupConfig } from './config-Dx_6wPIJ.js';
 export { o as openURL } from './theme-DiVJyqlX.js';
 export { m as menuController } from './index-CXSTcaAW.js';
-export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-NqBaHPvD.js';
+export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-ZX_4-t_r.js';
 import './index-ZjP4CjeZ.js';
 import './gesture-controller-BTEOs1at.js';
 import './hardware-back-button-Dhbd-23H.js';

package/dist/esm/ion-action-sheet.entry.js

@@ -5,7 +5,7 @@ import { r as registerInstance, c as createEvent, a as readTask, h, d as Host, g
 import { c as createButtonActiveGesture } from './button-active-DBUPuLNw.js';
 import { r as raf } from './helpers-8KSQQGQy.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
-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-NqBaHPvD.js';
+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-ZX_4-t_r.js';
 import { g as getClassMap } from './theme-DiVJyqlX.js';
 import { b as getIonMode } from './ionic-global-CTSyufhF.js';
 import { c as createAnimation } from './animation-BvhAtgca.js';

package/dist/esm/ion-alert.entry.js

@@ -6,7 +6,7 @@ import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './conf
 import { c as createButtonActiveGesture } from './button-active-DBUPuLNw.js';
 import { r as raf } from './helpers-8KSQQGQy.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
-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-NqBaHPvD.js';
+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-ZX_4-t_r.js';
 import { g as getClassMap } from './theme-DiVJyqlX.js';
 import { b as getIonMode } from './ionic-global-CTSyufhF.js';
 import { c as createAnimation } from './animation-BvhAtgca.js';

package/dist/esm/ion-datetime_3.entry.js

@@ -4,13 +4,13 @@
 import { j as printIonError, f as printIonWarning, r as registerInstance, c as createEvent, w as writeTask, h, d as Host, g as getElement } from './index-4DxY6_gG.js';
 import { startFocusVisible } from './focus-visible-BmVRXR1y.js';
 import { r as raf, g as getElementRoot, a as renderHiddenInput, e as clamp } from './helpers-8KSQQGQy.js';
-import { F as FOCUS_TRAP_DISABLE_CLASS, 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-NqBaHPvD.js';
 import { i as isRTL } from './dir-C53feagD.js';
 import { c as createColorClasses, g as getClassMap } from './theme-DiVJyqlX.js';
 import { l as chevronDown, o as caretUpSharp, p as chevronForward, q as caretDownSharp, c as chevronBack } from './index-DV3sJJW8.js';
 import { b as getIonMode } from './ionic-global-CTSyufhF.js';
 import { i as isBefore, a as isAfter, g as getPreviousMonth, b as getNextMonth, c as isSameDay, d as getDay, e as generateDayAriaLabel, 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 parseAmPm, u as clampDate, x as convertToArrayOfNumbers, y as convertDataToISO, z as getToday, A as getClosestValidDate, B as generateMonths, C as getNumDaysInMonth, D as getCombinedDateColumnData, E as getMonthColumnData, F as getDayColumnData, G as getYearColumnData, H as isMonthFirstLocale, I as getTimeColumnsData, J as isLocaleDayPeriodRTL, K as calculateHourFromAMPM, L as getDaysOfWeek, M as getMonthAndYear, N as getDaysOfMonth, O as getHourCycle, P as getLocalizedTime, Q as getLocalizedDateTime, R as formatValue } from './data-CKHMWxfe.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
+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-ZX_4-t_r.js';
 import { c as createAnimation } from './animation-BvhAtgca.js';
 import { a as hapticSelectionChanged, h as hapticSelectionEnd, b as hapticSelectionStart } from './haptic-DzAMWJuk.js';
 import './index-ZjP4CjeZ.js';
@@ -1299,7 +1299,7 @@ const Datetime = class {
         const renderArray = forcePresentation === 'time-date'
             ? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)]
             : [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)];
-        return h("ion-picker", { class: FOCUS_TRAP_DISABLE_CLASS }, renderArray);
+        return h("ion-picker", null, renderArray);
     }
     renderDatePickerColumns(forcePresentation) {
         return forcePresentation === 'date-time' || forcePresentation === 'time-date'
@@ -1856,7 +1856,7 @@ const Datetime = class {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (h(Host, { key: '57492534800ea059a7c2bbd9f0059cc0b75ae8d2', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
+        return (h(Host, { key: 'f35cf200ff05d33074576e3d2754d3b2a0735b96', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -1866,7 +1866,7 @@ const Datetime = class {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, h("div", { key: '97dac5e5195635ac0bc5fb472b9d09e5c3c6bbc3', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, h("div", { key: '859e9354a12bfa58ac3f964c2e66839f17071c00', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-input.entry.js

@@ -42,6 +42,10 @@ const Input = class {
          * is applied in both cases.
          */
         this.hasFocus = false;
+        /**
+         * Track validation state for proper aria-live announcements
+         */
+        this.isInvalid = false;
         /**
          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
          * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
@@ -226,10 +230,31 @@ const Input = class {
     componentWillLoad() {
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['tabindex', 'title', 'data-form-type', 'dir']));
     }
+    /**
+     * Checks if the input is in an invalid state based on validation classes
+     */
+    checkValidationState() {
+        return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
+    }
     connectedCallback() {
         const { el } = this;
         this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
+        // Watch for class changes to update validation state
+        {
+            this.validationObserver = new MutationObserver(() => {
+                const newIsInvalid = this.checkValidationState();
+                if (this.isInvalid !== newIsInvalid) {
+                    this.isInvalid = newIsInvalid;
+                }
+            });
+            this.validationObserver.observe(el, {
+                attributes: true,
+                attributeFilter: ['class'],
+            });
+            // Set initial state
+            this.isInvalid = this.checkValidationState();
+        }
         this.debounceChanged();
         {
             document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
@@ -266,6 +291,11 @@ const Input = class {
             this.notchController.destroy();
             this.notchController = undefined;
         }
+        // Clean up validation observer to prevent memory leaks
+        if (this.validationObserver) {
+            this.validationObserver.disconnect();
+            this.validationObserver = undefined;
+        }
     }
     /**
      * Sets focus on the native `input` in `ion-input`. Use this method instead of the global
@@ -367,15 +397,15 @@ const Input = class {
      * Renders the helper text or error text values
      */
     renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         return [
             h("div", { id: helperTextId, class: "helper-text" }, helperText),
-            h("div", { id: errorTextId, class: "error-text" }, errorText),
+            h("div", { id: errorTextId, class: "error-text", role: isInvalid && errorText ? 'alert' : undefined, "aria-live": isInvalid && errorText ? 'polite' : 'off', "aria-atomic": "true" }, isInvalid && errorText ? errorText : ''),
         ];
     }
     getHintTextID() {
-        const { el, helperText, errorText, helperTextId, errorTextId } = this;
-        if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
+        const { isInvalid, helperText, errorText, helperTextId, errorTextId } = this;
+        if (isInvalid && errorText) {
             return errorTextId;
         }
         if (helperText) {
@@ -488,7 +518,7 @@ const Input = class {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '41b2526627e7d2773a80f011b123284203a71ca0', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'fcb5d96c872ce63cb6252b6d7d302ab30e6ea83b', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -499,14 +529,14 @@ const Input = class {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, 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) => {
+            }) }, h("label", { key: '73bcaaf2527cbf295283b4581046fb9b361ce2dd', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '22dd6c6623a284e6a51910fa47b0a2ebdbd5971d', class: "native-wrapper", onClick: this.onLabelClick }, h("slot", { key: 'c02dac4336eb8e7570ed07cfa18fadca4bc6dd9d', name: "start" }), h("input", Object.assign({ key: '42fc6409e9ee51feed480a672bf074cfa6f74c8f', 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: 'b124a2b970542daa6fcb45ac5546a9fde22b45be', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, 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()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: '243037c08825c2bf26c53bb9507f7cd73e56a4de', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '9faff25f968c089b7716a8afb405ba5afb86a1ac', name: "end" })), shouldRenderHighlight && h("div", { key: '54bf3da059a2bf30e4990ba34abb23fd3bf137b0', class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-loading.entry.js

@@ -5,7 +5,7 @@ import { r as registerInstance, c as createEvent, e as config, h, d as Host, g a
 import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config-Dx_6wPIJ.js';
 import { r as raf } from './helpers-8KSQQGQy.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
-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-NqBaHPvD.js';
+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-ZX_4-t_r.js';
 import { g as getClassMap } from './theme-DiVJyqlX.js';
 import { b as getIonMode } from './ionic-global-CTSyufhF.js';
 import { c as createAnimation } from './animation-BvhAtgca.js';

package/dist/esm/ion-menu_3.entry.js

@@ -3,7 +3,7 @@
  */
 import { r as registerInstance, c as createEvent, e as config, j as printIonError, h, d as Host, g as getElement } from './index-4DxY6_gG.js';
 import { g as getTimeGivenProgression } from './cubic-bezier-hHmYLOfE.js';
-import { o as getPresentedOverlay, B as BACKDROP, n as focusFirstDescendant, q as focusLastDescendant, G as GESTURE } from './overlays-NqBaHPvD.js';
+import { o as getPresentedOverlay, B as BACKDROP, n as focusFirstDescendant, q as focusLastDescendant, G as GESTURE } from './overlays-ZX_4-t_r.js';
 import { G as GESTURE_CONTROLLER } from './gesture-controller-BTEOs1at.js';
 import { shouldUseCloseWatcher } from './hardware-back-button-Dhbd-23H.js';
 import { o as isEndSide, i as inheritAriaAttributes, l as assert, e as clamp } from './helpers-8KSQQGQy.js';

package/dist/esm/ion-modal.entry.js

@@ -7,7 +7,7 @@ import { C as CoreDelegate, a as attachComponent, d as detachComponent } from '.
 import { e as clamp, g as getElementRoot, r as raf, b as inheritAttributes, h as hasLazyBuild } from './helpers-8KSQQGQy.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';
 import { g as getCapacitor } from './capacitor-CFERIeaU.js';
-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-NqBaHPvD.js';
+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-ZX_4-t_r.js';
 import { g as getClassMap } from './theme-DiVJyqlX.js';
 import { e as deepReady, w as waitForMount } from './index-Dp7GXH1z.js';
 import { b as getIonMode } from './ionic-global-CTSyufhF.js';

package/dist/esm/ion-picker-column-option.entry.js

@@ -6,9 +6,9 @@ import { b as inheritAttributes } from './helpers-8KSQQGQy.js';
 import { c as createColorClasses } from './theme-DiVJyqlX.js';
 import { b as getIonMode } from './ionic-global-CTSyufhF.js';
 
-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}";
+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}";
 
-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)}";
+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)}";
 
 const PickerColumnOption = class {
     constructor(hostRef) {
@@ -100,7 +100,7 @@ const PickerColumnOption = class {
         return (h(Host, { key: 'f816729941aabcb31ddfdce3ffe2e2139030d715', class: createColorClasses(color, {
                 [mode]: true,
                 ['option-disabled']: disabled,
-            }) }, h("div", { key: 'd942de84fd14d7dc06b1e5cf4f7920d1dc3c6371', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, h("slot", { key: 'b0df5717b42209e649097209a01476e1a66f5c5c' }))));
+            }) }, h("button", { key: '48dff7833bb60fc8331cd353a0885e6affa683d1', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, h("slot", { key: 'f9224d0e7b7aa6c05b29abfdcfe0f30ad6ee3141' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-picker-column.entry.js

@@ -408,6 +408,23 @@ const PickerColumn = class {
             var _a;
             return el ? (_a = el.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : el.innerText : '';
         };
+        /**
+         * Render an element that overlays the column. This element is for assistive
+         * tech to allow users to navigate the column up/down. This element should receive
+         * focus as it listens for synthesized keyboard events as required by the
+         * slider role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role
+         */
+        this.renderAssistiveFocusable = () => {
+            const { activeItem } = this;
+            const valueText = this.getOptionValueText(activeItem);
+            /**
+             * When using the picker, the valuetext provides important context that valuenow
+             * does not. Additionally, using non-zero valuemin/valuemax values can cause
+             * WebKit to incorrectly announce numeric valuetext values (such as a year
+             * like "2024") as percentages: https://bugs.webkit.org/show_bug.cgi?id=273126
+             */
+            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) }));
+        };
     }
     ariaLabelChanged(newValue) {
         this.ariaLabel = newValue;
@@ -548,14 +565,33 @@ const PickerColumn = class {
     render() {
         const { color, disabled, isActive, numericInput } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'db903fd415f8a2d91994dececca481c1af8ba6a9', class: createColorClasses(color, {
+        return (h(Host, { key: 'ea0280355b2f87895bf7dddd289ccf473aa759f3', class: createColorClasses(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, h("slot", { key: '02ce9e1dd7df91afcd50b06416552bcffb5dec98', name: "prefix" }), h("div", { key: '6dfd7d2429bec19244a6b1afb4448121963a031b', class: "picker-opts", ref: (el) => {
+            }) }, this.renderAssistiveFocusable(), h("slot", { key: '482992131cdeb85b1f61430d7fe1322a16345769', name: "prefix" }), h("div", { key: '43f7f80d621d411ef366b3ca1396299e8c9a0c97', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
                 this.scrollEl = el;
-            }, 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" })));
+            },
+            /**
+             * When an element has an overlay scroll style and
+             * a fixed height, Firefox will focus the scrollable
+             * container if the content exceeds the container's
+             * dimensions.
+             *
+             * This causes keyboard navigation to focus to this
+             * element instead of going to the next element in
+             * the tab order.
+             *
+             * The desired behavior is for the user to be able to
+             * focus the assistive focusable element and tab to
+             * the next element in the tab order. Instead of tabbing
+             * to this element.
+             *
+             * To prevent this, we set the tabIndex to -1. This
+             * will match the behavior of the other browsers.
+             */
+            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" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-popover.entry.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { r as registerInstance, c as createEvent, f as printIonWarning, h, d as Host, g as getElement } from './index-4DxY6_gG.js';
-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-NqBaHPvD.js';
+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-ZX_4-t_r.js';
 import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate-BLEBgH06.js';
 import { g as getElementRoot, r as raf, f as addEventListener, h as hasLazyBuild } from './helpers-8KSQQGQy.js';
 import { c as createLockController } from './lock-controller-B-hirT0v.js';

package/dist/esm/ion-select-modal.entry.js

@@ -3,7 +3,7 @@
  */
 import { r as registerInstance, h, i as forceUpdate, d as Host, g as getElement } from './index-4DxY6_gG.js';
 import { b as getIonMode } from './ionic-global-CTSyufhF.js';
-import { s as safeCall } from './overlays-NqBaHPvD.js';
+import { s as safeCall } from './overlays-ZX_4-t_r.js';
 import { g as getClassMap } from './theme-DiVJyqlX.js';
 import './index-ZjP4CjeZ.js';
 import './helpers-8KSQQGQy.js';

package/dist/esm/ion-select_3.entry.js

@@ -5,7 +5,7 @@ import { r as registerInstance, c as createEvent, f as printIonWarning, h, d as
 import { c as createNotchController } from './notch-controller-lb417-kU.js';
 import { i as isOptionSelected, c as compareOptions } from './compare-with-utils-sObYyvOy.js';
 import { b as inheritAttributes, a as renderHiddenInput, n as focusVisibleElement } from './helpers-8KSQQGQy.js';
-import { c as popoverController, b as actionSheetController, a as alertController, m as modalController, s as safeCall } from './overlays-NqBaHPvD.js';
+import { c as popoverController, b as actionSheetController, a as alertController, m as modalController, s as safeCall } from './overlays-ZX_4-t_r.js';
 import { i as isRTL } from './dir-C53feagD.js';
 import { h as hostContext, c as createColorClasses, g as getClassMap } from './theme-DiVJyqlX.js';
 import { w as watchForOptions } from './watch-options-Dtdm8lKC.js';