voyager-ionic-core 8.7.2 → 8.7.6

package/hydrate/index.js

@@ -392,7 +392,7 @@ const initialize = (userConfig = {}) => {
 const globalScripts = initialize;
 
 /*
- Stencil Hydrate Platform v4.36.2 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Platform v4.38.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -990,7 +990,7 @@ var convertToPrivate = (node) => {
 
 // src/runtime/client-hydrate.ts
 var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
-  var _a, _b, _c;
+  var _a, _b;
   const endHydrate = createTime("hydrateClient", tagName);
   const shadowRoot = hostElm.shadowRoot;
   const childRenderNodes = [];
@@ -999,21 +999,6 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
   const shadowRootNodes = shadowRoot ? [] : null;
   const vnode = newVNode(tagName, null);
   vnode.$elm$ = hostElm;
-  const members = Object.entries(((_a = hostRef.$cmpMeta$) == null ? void 0 : _a.$members$) || {});
-  members.forEach(([memberName, [memberFlags, metaAttributeName]]) => {
-    var _b2;
-    if (!(memberFlags & 31 /* Prop */)) {
-      return;
-    }
-    const attributeName = metaAttributeName || memberName;
-    const attrVal = hostElm.getAttribute(attributeName);
-    if (attrVal !== null) {
-      const attrPropVal = parsePropertyValue(
-        attrVal,
-        memberFlags);
-      (_b2 = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _b2.set(memberName, attrPropVal);
-    }
-  });
   let scopeId2;
   {
     const cmpMeta = hostRef.$cmpMeta$;
@@ -1052,7 +1037,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       if (childRenderNode.$tag$ === "slot") {
         node["s-cr"] = hostElm["s-cr"];
       }
-    } else if (((_b = childRenderNode.$tag$) == null ? void 0 : _b.toString().includes("-")) && childRenderNode.$tag$ !== "slot-fb" && !childRenderNode.$elm$.shadowRoot) {
+    } else if (((_a = childRenderNode.$tag$) == null ? void 0 : _a.toString().includes("-")) && childRenderNode.$tag$ !== "slot-fb" && !childRenderNode.$elm$.shadowRoot) {
       const cmpMeta = getHostRef(childRenderNode.$elm$);
       if (cmpMeta) {
         const scopeId3 = getScopeId(
@@ -1123,7 +1108,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
           }
         }
         addSlotRelocateNode(slottedItem.node, slottedItem.slot, false, slottedItem.node["s-oo"]);
-        if (((_c = slottedItem.node.parentElement) == null ? void 0 : _c.shadowRoot) && slottedItem.node["getAttribute"] && slottedItem.node.getAttribute("slot")) {
+        if (((_b = slottedItem.node.parentElement) == null ? void 0 : _b.shadowRoot) && slottedItem.node["getAttribute"] && slottedItem.node.getAttribute("slot")) {
           slottedItem.node.removeAttribute("slot");
         }
       }
@@ -1839,12 +1824,6 @@ var parsePropertyValue = (propValue, propType, isFormAssociated) => {
     propValue = deserializeProperty(propValue);
     return propValue;
   }
-  if (typeof propValue === "string" && (propType & 16 /* Unknown */ || propType & 8 /* Any */) && (propValue.startsWith("{") && propValue.endsWith("}") || propValue.startsWith("[") && propValue.endsWith("]"))) {
-    try {
-      return JSON.parse(propValue);
-    } catch (e) {
-    }
-  }
   if (propValue != null && !isComplexType(propValue)) {
     if (propType & 4 /* Boolean */) {
       {
@@ -2440,9 +2419,11 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   hostTagName = hostElm.tagName;
   if (cmpMeta.$attrsToReflect$) {
     rootVnode.$attrs$ = rootVnode.$attrs$ || {};
-    cmpMeta.$attrsToReflect$.map(
-      ([propName, attribute]) => rootVnode.$attrs$[attribute] = hostElm[propName]
-    );
+    cmpMeta.$attrsToReflect$.forEach(([propName, attribute]) => {
+      {
+        rootVnode.$attrs$[attribute] = hostElm[propName];
+      }
+    });
   }
   if (isInitialLoad && rootVnode.$attrs$) {
     for (const key of Object.keys(rootVnode.$attrs$)) {
@@ -2570,10 +2551,15 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
   let maybePromise;
   if (isInitialLoad) {
     {
-      hostRef.$flags$ |= 256 /* isListenReady */;
-      if (hostRef.$queuedListeners$) {
-        hostRef.$queuedListeners$.map(([methodName, event]) => safeCall$1(instance, methodName, event, elm));
-        hostRef.$queuedListeners$ = void 0;
+      {
+        hostRef.$flags$ |= 256 /* isListenReady */;
+        if (hostRef.$queuedListeners$) {
+          hostRef.$queuedListeners$.map(([methodName, event]) => safeCall$1(instance, methodName, event, elm));
+          hostRef.$queuedListeners$ = void 0;
+        }
+      }
+      if (hostRef.$fetchedCbList$.length) {
+        hostRef.$fetchedCbList$.forEach((cb) => cb(elm));
       }
     }
     maybePromise = safeCall$1(instance, "componentWillLoad", void 0, elm);
@@ -2786,9 +2772,17 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
 var proxyComponent = (Cstr, cmpMeta, flags) => {
   var _a;
   const prototype = Cstr.prototype;
-  if (cmpMeta.$members$ || (cmpMeta.$watchers$ || Cstr.watchers)) {
-    if (Cstr.watchers && !cmpMeta.$watchers$) {
-      cmpMeta.$watchers$ = Cstr.watchers;
+  {
+    {
+      if (Cstr.watchers && !cmpMeta.$watchers$) {
+        cmpMeta.$watchers$ = Cstr.watchers;
+      }
+      if (Cstr.deserializers && !cmpMeta.$deserializers$) {
+        cmpMeta.$deserializers$ = Cstr.deserializers;
+      }
+      if (Cstr.serializers && !cmpMeta.$serializers$) {
+        cmpMeta.$serializers$ = Cstr.serializers;
+      }
     }
     const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
@@ -2823,8 +2817,6 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
               const currentValue = memberFlags & 32 /* State */ ? this[memberName] : ref.$hostElement$[memberName];
               if (typeof currentValue === "undefined" && ref.$instanceValues$.get(memberName)) {
                 newValue = ref.$instanceValues$.get(memberName);
-              } else if (!ref.$instanceValues$.get(memberName) && currentValue) {
-                ref.$instanceValues$.set(memberName, currentValue);
               }
               origSetter.apply(this, [
                 parsePropertyValue(
@@ -2870,6 +2862,8 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       if (!Cstr.isProxied) {
         {
           cmpMeta.$watchers$ = Cstr.watchers;
+          cmpMeta.$serializers$ = Cstr.serializers;
+          cmpMeta.$deserializers$ = Cstr.deserializers;
         }
         proxyComponent(Cstr, cmpMeta);
         Cstr.isProxied = true;
@@ -3209,6 +3203,9 @@ var hAsync = (nodeName, vnodeData, ...children) => {
 // src/hydrate/platform/proxy-host-element.ts
 function proxyHostElement(elm, cstr) {
   const cmpMeta = cstr.cmpMeta;
+  cmpMeta.$watchers$ = cmpMeta.$watchers$ || cstr.watchers;
+  cmpMeta.$deserializers$ = cmpMeta.$deserializers$ || cstr.deserializers;
+  cmpMeta.$serializers$ = cmpMeta.$serializers$ || cstr.serializers;
   if (typeof elm.componentOnReady !== "function") {
     elm.componentOnReady = componentOnReady$1;
   }
@@ -3222,7 +3219,7 @@ function proxyHostElement(elm, cstr) {
     const hostRef = getHostRef(elm);
     const members = Object.entries(cmpMeta.$members$);
     members.forEach(([memberName, [memberFlags, metaAttributeName]]) => {
-      var _a;
+      var _a, _b;
       if (memberFlags & 31 /* Prop */) {
         const attributeName = metaAttributeName || memberName;
         const attrValue = elm.getAttribute(attributeName);
@@ -3230,7 +3227,13 @@ function proxyHostElement(elm, cstr) {
         let attrPropVal;
         const { get: origGetter, set: origSetter } = Object.getOwnPropertyDescriptor(cstr.prototype, memberName) || {};
         if (attrValue != null) {
-          attrPropVal = parsePropertyValue(attrValue, memberFlags);
+          if ((_a = cmpMeta.$deserializers$) == null ? void 0 : _a[memberName]) {
+            for (const methodName of cmpMeta.$deserializers$[memberName]) {
+              attrPropVal = cstr.prototype[methodName](attrValue, memberName);
+            }
+          } else {
+            attrPropVal = parsePropertyValue(attrValue, memberFlags);
+          }
         }
         if (propValue !== void 0) {
           attrPropVal = propValue;
@@ -3241,7 +3244,7 @@ function proxyHostElement(elm, cstr) {
             origSetter.apply(elm, [attrPropVal]);
             attrPropVal = origGetter ? origGetter.apply(elm) : attrPropVal;
           }
-          (_a = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _a.set(memberName, attrPropVal);
+          (_b = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _b.set(memberName, attrPropVal);
         }
         const getterSetterDescriptor = {
           get: function() {
@@ -3255,21 +3258,18 @@ function proxyHostElement(elm, cstr) {
         };
         Object.defineProperty(elm, memberName, getterSetterDescriptor);
         Object.defineProperty(elm, metaAttributeName, getterSetterDescriptor);
-        if (!cstr.prototype.__stencilAugmented) {
-          Object.defineProperty(cstr.prototype, memberName, {
-            get: function() {
-              var _a2;
-              const ref = getHostRef(this);
-              const attrPropVal2 = (_a2 = ref == null ? void 0 : ref.$instanceValues$) == null ? void 0 : _a2.get(memberName);
-              if (origGetter && attrPropVal2 === void 0 && !getValue(this, memberName)) {
-                setValue(this, memberName, origGetter.apply(this), cmpMeta);
-              }
-              return attrPropVal2 !== void 0 ? attrPropVal2 : origGetter ? origGetter.apply(this) : getValue(this, memberName);
-            },
-            configurable: true,
-            enumerable: true
-          });
-        }
+        hostRef.$fetchedCbList$.push(() => {
+          var _a2;
+          if (!((_a2 = hostRef == null ? void 0 : hostRef.$instanceValues$) == null ? void 0 : _a2.has(memberName))) {
+            setValue(
+              elm,
+              memberName,
+              attrPropVal !== void 0 ? attrPropVal : hostRef.$lazyInstance$[memberName],
+              cmpMeta
+            );
+          }
+          Object.defineProperty(hostRef.$lazyInstance$, memberName, getterSetterDescriptor);
+        });
       } else if (memberFlags & 64 /* Method */) {
         Object.defineProperty(elm, memberName, {
           value(...args) {
@@ -3285,7 +3285,6 @@ function proxyHostElement(elm, cstr) {
         });
       }
     });
-    cstr.prototype.__stencilAugmented = true;
   }
 }
 function componentOnReady$1() {
@@ -3645,6 +3644,7 @@ var getHostRef = (ref) => {
   return void 0;
 };
 var registerInstance = (lazyInstance, hostRef) => {
+  if (!hostRef) return void 0;
   lazyInstance.__stencil__getHostRef = () => hostRef;
   hostRef.$lazyInstance$ = lazyInstance;
   return hostRef;
@@ -3655,8 +3655,10 @@ var registerHost = (elm, cmpMeta) => {
     $cmpMeta$: cmpMeta,
     $hostElement$: elm,
     $instanceValues$: /* @__PURE__ */ new Map(),
+    $serializerValues$: /* @__PURE__ */ new Map(),
     $renderCount$: 0
   };
+  hostRef.$fetchedCbList$ = [];
   hostRef.$onInstancePromise$ = new Promise((r) => hostRef.$onInstanceResolve$ = r);
   hostRef.$onReadyPromise$ = new Promise((r) => hostRef.$onReadyResolve$ = r);
   elm["s-p"] = [];
@@ -4371,7 +4373,7 @@ class Accordion {
             "value": [1],
             "disabled": [4],
             "readonly": [4],
-            "toggleIcon": [1, "toggle-icon"],
+            "toggleIcon": [8, "toggle-icon"],
             "toggleIconSlot": [1, "toggle-icon-slot"],
             "state": [32],
             "isNext": [32],
@@ -6161,7 +6163,7 @@ const getPresentedOverlay = (doc, overlayTag, id) => {
  */
 const setRootAriaHidden = (hidden = false) => {
     const root = getAppRoot(document);
-    const viewContainer = root.querySelector('ion-router-outlet, ion-nav, #ion-view-container-root');
+    const viewContainer = root.querySelector('ion-router-outlet, #ion-view-container-root');
     if (!viewContainer) {
         return;
     }
@@ -6177,21 +6179,50 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
     if (overlay.presented) {
         return;
     }
+    /**
+     * When an overlay that steals focus
+     * is dismissed, focus should be returned
+     * to the element that was focused
+     * prior to the overlay opening. Toast
+     * does not steal focus and is excluded
+     * from returning focus as a result.
+     */
+    if (overlay.el.tagName !== 'ION-TOAST') {
+        restoreElementFocus(overlay.el);
+    }
     /**
      * Due to accessibility guidelines, toasts do not have
      * focus traps.
      *
      * All other overlays should have focus traps to prevent
-     * the keyboard focus from leaving the overlay.
-     */
-    if (overlay.el.tagName !== 'ION-TOAST') {
-        setRootAriaHidden(true);
-        document.body.classList.add(BACKDROP_NO_SCROLL);
-    }
-    hideUnderlyingOverlaysFromScreenReaders(overlay.el);
-    hideAnimatingOverlayFromScreenReaders(overlay.el);
+     * the keyboard focus from leaving the overlay unless
+     * developers explicitly opt out (for example, sheet
+     * modals that should permit background interaction).
+     *
+     * Note: Some apps move inline overlays to a specific container
+     * during the willPresent lifecycle (e.g., React portals via
+     * onWillPresent). Defer applying aria-hidden/inert to the app
+     * root until after willPresent so we can detect where the
+     * overlay is finally inserted. If the overlay is inside the
+     * view container subtree, skip adding aria-hidden/inert there
+     * to avoid disabling the overlay.
+     */
+    const overlayEl = overlay.el;
+    const shouldTrapFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
+    // Only lock out root content when backdrop is active. Developers relying on showBackdrop=false
+    // expect background interaction to remain enabled.
+    const shouldLockRoot = shouldTrapFocus && overlayEl.showBackdrop !== false;
     overlay.presented = true;
     overlay.willPresent.emit();
+    if (shouldLockRoot) {
+        const root = getAppRoot(document);
+        const viewContainer = root.querySelector('ion-router-outlet, #ion-view-container-root');
+        const overlayInsideViewContainer = viewContainer ? viewContainer.contains(overlayEl) : false;
+        if (!overlayInsideViewContainer) {
+            setRootAriaHidden(true);
+        }
+        document.body.classList.add(BACKDROP_NO_SCROLL);
+    }
     (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
     const mode = getIonMode$1(overlay);
     // get the user's animation fn if one was provided
@@ -6203,17 +6234,6 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
         overlay.didPresent.emit();
         (_b = overlay.didPresentShorthand) === null || _b === void 0 ? void 0 : _b.emit();
     }
-    /**
-     * When an overlay that steals focus
-     * is dismissed, focus should be returned
-     * to the element that was focused
-     * prior to the overlay opening. Toast
-     * does not steal focus and is excluded
-     * from returning focus as a result.
-     */
-    if (overlay.el.tagName !== 'ION-TOAST') {
-        restoreElementFocus(overlay.el);
-    }
     /**
      * If the focused element is already
      * inside the overlay component then
@@ -6236,6 +6256,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
      * screen readers.
      */
     overlay.el.removeAttribute('aria-hidden');
+    overlay.el.removeAttribute('inert');
 };
 /**
  * When an overlay component is dismissed,
@@ -6252,6 +6273,8 @@ const restoreElementFocus = async (overlayEl) => {
     if (!previousElement) {
         return;
     }
+    // Ensure active element is blurred to prevent a11y warning issues
+    previousElement.blur();
     const shadowRoot = previousElement === null || previousElement === void 0 ? void 0 : previousElement.shadowRoot;
     if (shadowRoot) {
         // If there are no inner focusable elements, just focus the host element.
@@ -6296,31 +6319,29 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
      * For accessibility, toasts lack focus traps and don't receive
      * `aria-hidden` on the root element when presented.
      *
-     * All other overlays use focus traps to keep keyboard focus
-     * within the overlay, setting `aria-hidden` on the root element
-     * to enhance accessibility.
-     *
-     * Therefore, we must remove `aria-hidden` from the root element
-     * when the last non-toast overlay is dismissed.
-     */
-    const overlaysNotToast = presentedOverlays.filter((o) => o.tagName !== 'ION-TOAST');
-    const lastOverlayNotToast = overlaysNotToast.length === 1 && overlaysNotToast[0].id === overlay.el.id;
+     * Overlays that opt into focus trapping set `aria-hidden`
+     * on the root element to keep keyboard focus and pointer
+     * events inside the overlay. We must remove `aria-hidden`
+     * from the root element when the last focus-trapping overlay
+     * is dismissed.
+     */
+    const overlaysLockingRoot = presentedOverlays.filter((o) => {
+        const el = o;
+        return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && el.showBackdrop !== false;
+    });
+    const overlayEl = overlay.el;
+    const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && overlayEl.showBackdrop !== false;
     /**
-     * If this is the last visible overlay that is not a toast
+     * If this is the last visible overlay that is trapping focus
      * then we want to re-add the root to the accessibility tree.
      */
-    if (lastOverlayNotToast) {
+    const lastOverlayTrappingFocus = locksRoot && overlaysLockingRoot.length === 1 && overlaysLockingRoot[0].id === overlayEl.id;
+    if (lastOverlayTrappingFocus) {
         setRootAriaHidden(false);
         document.body.classList.remove(BACKDROP_NO_SCROLL);
     }
     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 });
@@ -6359,7 +6380,6 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
         printIonError(`[${overlay.el.tagName.toLowerCase()}] - `, err);
     }
     overlay.el.remove();
-    revealOverlaysToScreenReaders();
     return true;
 };
 const getAppRoot = (doc) => {
@@ -6555,93 +6575,6 @@ 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;
-        }
-    }
-};
 const FOCUS_TRAP_DISABLE_CLASS = 'ion-disable-focus-trap';
 
 const hostContext = (selector, el) => {
@@ -7814,8 +7747,8 @@ class ActionSheet {
             "delegate": [16],
             "hasController": [4, "has-controller"],
             "keyboardClose": [4, "keyboard-close"],
-            "enterAnimation": [16, "enter-animation"],
-            "leaveAnimation": [16, "leave-animation"],
+            "enterAnimation": [16],
+            "leaveAnimation": [16],
             "buttons": [16],
             "cssClass": [1, "css-class"],
             "backdropDismiss": [4, "backdrop-dismiss"],
@@ -7823,7 +7756,7 @@ class ActionSheet {
             "subHeader": [1, "sub-header"],
             "translucent": [4],
             "animated": [4],
-            "htmlAttributes": [16, "html-attributes"],
+            "htmlAttributes": [16],
             "isOpen": [4, "is-open"],
             "trigger": [1],
             "present": [64],
@@ -8547,8 +8480,8 @@ class Alert {
             "delegate": [16],
             "hasController": [4, "has-controller"],
             "keyboardClose": [4, "keyboard-close"],
-            "enterAnimation": [16, "enter-animation"],
-            "leaveAnimation": [16, "leave-animation"],
+            "enterAnimation": [16],
+            "leaveAnimation": [16],
             "cssClass": [1, "css-class"],
             "header": [1],
             "subHeader": [1, "sub-header"],
@@ -8558,7 +8491,7 @@ class Alert {
             "backdropDismiss": [4, "backdrop-dismiss"],
             "translucent": [4],
             "animated": [4],
-            "htmlAttributes": [16, "html-attributes"],
+            "htmlAttributes": [16],
             "isOpen": [4, "is-open"],
             "trigger": [1],
             "present": [64],
@@ -8748,7 +8681,7 @@ class BackButton {
             "icon": [1],
             "text": [1],
             "type": [1],
-            "routerAnimation": [16, "router-animation"]
+            "routerAnimation": [16]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -8959,7 +8892,7 @@ class Breadcrumb {
             "separator": [4],
             "target": [1],
             "routerDirection": [1, "router-direction"],
-            "routerAnimation": [16, "router-animation"]
+            "routerAnimation": [16]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -9384,7 +9317,7 @@ class Button {
             "expand": [513],
             "fill": [1537],
             "routerDirection": [1, "router-direction"],
-            "routerAnimation": [16, "router-animation"],
+            "routerAnimation": [16],
             "download": [1],
             "href": [1],
             "rel": [1],
@@ -9525,7 +9458,7 @@ class Card {
             "href": [1],
             "rel": [1],
             "routerDirection": [1, "router-direction"],
-            "routerAnimation": [16, "router-animation"],
+            "routerAnimation": [16],
             "target": [1]
         },
         "$listeners$": undefined,
@@ -9845,7 +9778,7 @@ class Checkbox {
             }), onClick: this.onClick }, hAsync("label", { key: 'f025cec5ff08e8be4487b9cc0324616ca5dfae2a', class: "checkbox-wrapper", htmlFor: inputId }, hAsync("input", Object.assign({ key: 'dc53f7e4e240dc2e18556e6350df2b5c3169f553', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), hAsync("div", { key: 'a625e9b50c3b617de8bbbfd624d772454fecaf2d', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabelContent,
-            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '87d1a90691327945f4343406706e4ab27f453844' }), this.renderHintText()), hAsync("div", { key: 'b57fed8cdecee4df1ef0d57f157267ee77fac653', class: "native-wrapper" }, hAsync("svg", { key: 'd472a06ec6c8b74dfb651415d2236db8080f6805', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
+            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '87d1a90691327945f4343406706e4ab27f453844' }), this.renderHintText()), hAsync("div", { key: 'b57fed8cdecee4df1ef0d57f157267ee77fac653', class: "native-wrapper" }, hAsync("svg", { key: '13a8aac044d46dc99e3b60a1a643785511f216ac', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container", "aria-hidden": "true" }, path)))));
     }
     getSVGPath(mode, indeterminate) {
         let path = indeterminate ? (hAsync("path", { d: "M6 12L18 12", part: "mark" })) : (hAsync("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));
@@ -11433,17 +11366,18 @@ const getFormattedDayPeriod = (dayPeriod) => {
  * confusion.
  */
 const stripTimeZone = (formatOptions) => {
-    return Object.assign(Object.assign({}, formatOptions), { 
+    return Object.assign(Object.assign({}, formatOptions), {
         /**
          * Setting the time zone to UTC ensures that the value shown is always the
          * same as what was selected and safeguards against older Safari bugs with
          * Intl.DateTimeFormat.
          */
-        timeZone: 'UTC', 
+        timeZone: 'UTC',
         /**
          * We do not want to display the time zone name
          */
-        timeZoneName: undefined });
+        timeZoneName: undefined
+    });
 };
 const getLocalizedTime = (locale, refParts, hourCycle, formatOptions = { hour: 'numeric', minute: 'numeric' }) => {
     const timeParts = {
@@ -11453,12 +11387,13 @@ const getLocalizedTime = (locale, refParts, hourCycle, formatOptions = { hour: '
     if (timeParts.hour === undefined || timeParts.minute === undefined) {
         return 'Invalid Time';
     }
-    return new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, stripTimeZone(formatOptions)), { 
+    return new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, stripTimeZone(formatOptions)), {
         /**
          * We use hourCycle here instead of hour12 due to:
          * https://bugs.chromium.org/p/chromium/issues/detail?id=1347316&q=hour12&can=2
          */
-        hourCycle })).format(new Date(convertDataToISO(Object.assign({ 
+        hourCycle
+    })).format(new Date(convertDataToISO(Object.assign({
         /**
          * JS uses a simplified ISO 8601 format which allows for
          * date-only formats and date-time formats, but not
@@ -11470,7 +11405,8 @@ const getLocalizedTime = (locale, refParts, hourCycle, formatOptions = { hour: '
          * values, so passing these date values should have no impact
          * on the time output.
          */
-        year: 2023, day: 1, month: 1 }, timeParts)) + 'Z'));
+        year: 2023, day: 1, month: 1
+    }, timeParts)) + 'Z'));
 };
 /**
  * Adds padding to a time value so
@@ -13531,7 +13467,7 @@ class Datetime {
         const renderArray = forcePresentation === 'time-date'
             ? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)]
             : [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)];
-        return hAsync("ion-picker", null, renderArray);
+        return hAsync("ion-picker", { class: FOCUS_TRAP_DISABLE_CLASS }, renderArray);
     }
     renderDatePickerColumns(forcePresentation) {
         return forcePresentation === 'date-time' || forcePresentation === 'time-date'
@@ -14088,7 +14024,7 @@ class Datetime {
         const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
         const hasWheelVariant = hasDatePresentation && preferWheel;
         renderHiddenInput(true, el, name, formatValue(value), disabled);
-        return (hAsync(Host, { key: 'f35cf200ff05d33074576e3d2754d3b2a0735b96', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
+        return (hAsync(Host, { key: '57492534800ea059a7c2bbd9f0059cc0b75ae8d2', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
                 [mode]: true,
                 ['datetime-readonly']: readonly,
                 ['datetime-disabled']: disabled,
@@ -14098,7 +14034,7 @@ class Datetime {
                 [`datetime-size-${size}`]: true,
                 [`datetime-prefer-wheel`]: hasWheelVariant,
                 [`datetime-grid`]: isGridStyle,
-            })) }, hAsync("div", { key: '859e9354a12bfa58ac3f964c2e66839f17071c00', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
+            })) }, hAsync("div", { key: '97dac5e5195635ac0bc5fb472b9d09e5c3c6bbc3', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -14125,9 +14061,9 @@ class Datetime {
             "color": [1],
             "name": [1],
             "disabled": [4],
-            "formatOptions": [16, "format-options"],
+            "formatOptions": [16],
             "readonly": [4],
-            "isDateEnabled": [16, "is-date-enabled"],
+            "isDateEnabled": [16],
             "showAdjacentDays": [4, "show-adjacent-days"],
             "min": [1025],
             "max": [1025],
@@ -14142,9 +14078,9 @@ class Datetime {
             "minuteValues": [8, "minute-values"],
             "locale": [1],
             "firstDayOfWeek": [2, "first-day-of-week"],
-            "titleSelectedDatesFormatter": [16, "title-selected-dates-formatter"],
+            "titleSelectedDatesFormatter": [16],
             "multiple": [4],
-            "highlightedDates": [16, "highlighted-dates"],
+            "highlightedDates": [16],
             "value": [1025],
             "showDefaultTitle": [4, "show-default-title"],
             "showDefaultButtons": [4, "show-default-buttons"],
@@ -14734,13 +14670,13 @@ class FabButton {
             "href": [1],
             "rel": [1],
             "routerDirection": [1, "router-direction"],
-            "routerAnimation": [16, "router-animation"],
+            "routerAnimation": [16],
             "target": [1],
             "show": [4],
             "translucent": [4],
             "type": [1],
             "size": [1],
-            "closeIcon": [1, "close-icon"]
+            "closeIcon": [8, "close-icon"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -16629,6 +16565,10 @@ class Input {
          * 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"`.
@@ -16812,10 +16752,20 @@ class Input {
     componentWillLoad() {
         this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes$1(this.el, ['tabindex', 'title', 'data-form-type', 'dir']));
     }
+    /**
+     * Checks if the input is in an invalid state based on Ionic validation classes
+     */
+    checkInvalidState() {
+        const hasIonTouched = this.el.classList.contains('ion-touched');
+        const hasIonInvalid = this.el.classList.contains('ion-invalid');
+        return hasIonTouched && hasIonInvalid;
+    }
     connectedCallback() {
         const { el } = this;
         this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate());
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
+        // Always set initial state
+        this.isInvalid = this.checkInvalidState();
         this.debounceChanged();
     }
     componentDidLoad() {
@@ -16842,6 +16792,11 @@ class Input {
             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
@@ -16943,15 +16898,15 @@ class Input {
      * Renders the helper text or error text values
      */
     renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         return [
-            hAsync("div", { id: helperTextId, class: "helper-text" }, helperText),
-            hAsync("div", { id: errorTextId, class: "error-text" }, errorText),
+            hAsync("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null),
+            hAsync("div", { id: errorTextId, class: "error-text", role: "alert" }, isInvalid ? errorText : null),
         ];
     }
     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) {
@@ -17064,7 +17019,7 @@ class Input {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (hAsync(Host, { key: '41b2526627e7d2773a80f011b123284203a71ca0', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '8a51f0300d5bc66392f9ab9a6fa0b5d388072a33', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -17075,14 +17030,14 @@ class Input {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, hAsync("label", { key: '9ab078363e32528102b441ad1791d83f86fdcbdc', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: 'e34b594980ec62e4c618e827fadf7669a39ad0d8', class: "native-wrapper", onClick: this.onLabelClick }, hAsync("slot", { key: '12dc04ead5502e9e5736240e918bf9331bf7b5d9', name: "start" }), hAsync("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 && (hAsync("button", { key: 'f79f68cabcd4ea99419331174a377827db0c0741', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, hAsync("label", { key: '9f8cf88d7d0e27931b51bd9c67f048c7fc6f5703', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: '7ad30bf9777774062a6ccf9a3ba804f251eef1bb', class: "native-wrapper", onClick: this.onLabelClick }, hAsync("slot", { key: '8af0b0325d101df8eed7d24f2767d6ca4d307319', name: "start" }), hAsync("input", Object.assign({ key: '1c53f7f9fa2567f3df19681cf4e7c21be382eae6', 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 && (hAsync("button", { key: 'b081d0e1ec1444b4c9cca145fc9cd2ad4a68b3da', "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 }, hAsync("ion-icon", { key: '237ec07ec2e10f08818a332bb596578c2c49f770', "aria-hidden": "true", icon: clearIconData }))), hAsync("slot", { key: '1f0a3624aa3e8dc3c307a6762230ab698768a5e5', name: "end" })), shouldRenderHighlight && hAsync("div", { key: '8a8cbb82695a722a0010b53dd0b1f1f97534a20b', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, hAsync("ion-icon", { key: '01535299241c3635460c05646420acf62a1ff567', "aria-hidden": "true", icon: clearIconData }))), hAsync("slot", { key: '480f3eb58b08ae792866a5b9b4c068748c5567cc', name: "end" })), shouldRenderHighlight && hAsync("div", { key: 'a8609cacee88e4a09f1cca65b6a47cb79a56f35e', class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -17108,7 +17063,7 @@ class Input {
             "clearInputIcon": [1, "clear-input-icon"],
             "clearOnEdit": [4, "clear-on-edit"],
             "counter": [4],
-            "counterFormatter": [16, "counter-formatter"],
+            "counterFormatter": [16],
             "debounce": [2],
             "disabled": [516],
             "enterkeyhint": [1],
@@ -17134,6 +17089,7 @@ class Input {
             "type": [1],
             "value": [1032],
             "hasFocus": [32],
+            "isInvalid": [32],
             "setFocus": [64],
             "getInputElement": [64]
         },
@@ -18158,13 +18114,13 @@ class Item {
             "color": [513],
             "button": [4],
             "detail": [4],
-            "detailIcon": [1, "detail-icon"],
+            "detailIcon": [8, "detail-icon"],
             "disabled": [516],
             "download": [1],
             "href": [1],
             "rel": [1],
             "lines": [1],
-            "routerAnimation": [16, "router-animation"],
+            "routerAnimation": [16],
             "routerDirection": [1, "router-direction"],
             "target": [1],
             "type": [1],
@@ -19346,8 +19302,8 @@ class Loading {
             "delegate": [16],
             "hasController": [4, "has-controller"],
             "keyboardClose": [4, "keyboard-close"],
-            "enterAnimation": [16, "enter-animation"],
-            "leaveAnimation": [16, "leave-animation"],
+            "enterAnimation": [16],
+            "leaveAnimation": [16],
             "message": [1],
             "cssClass": [1, "css-class"],
             "duration": [2],
@@ -19356,7 +19312,7 @@ class Loading {
             "spinner": [1025],
             "translucent": [4],
             "animated": [4],
-            "htmlAttributes": [16, "html-attributes"],
+            "htmlAttributes": [16],
             "isOpen": [4, "is-open"],
             "trigger": [1],
             "present": [64],
@@ -20011,6 +19967,9 @@ class Menu {
      * @param role The role of the element that is closing the menu.
      */
     setOpen(shouldOpen, animated = true, role) {
+        var _a;
+        // Blur the active element to prevent it from being kept focused inside an element that will be set with aria-hidden="true"
+        (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
         return menuController._setOpen(this, shouldOpen, animated, role);
     }
     trapKeyboardFocus(ev, doc) {
@@ -20373,14 +20332,14 @@ class Menu {
          * the ionBackButton listener in the menu controller
          * will handle closing the menu when Escape is pressed.
          */
-        return (hAsync(Host, { key: 'a5c75aa40a34530b56ee3b98d706a5ac5ae300de', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
+        return (hAsync(Host, { key: '70a427f3414a476414c3386efe6c8723fd37eccf', onKeyDown: shouldUseCloseWatcher() ? null : this.onKeydown, role: "navigation", "aria-label": inheritedAttributes['aria-label'] || 'menu', class: {
                 [mode]: true,
                 [`menu-type-${type}`]: true,
                 'menu-enabled': !disabled,
                 [`menu-side-${side}`]: true,
                 'menu-pane-visible': isPaneVisible,
                 'split-pane-side': hostContext('ion-split-pane', el),
-            } }, hAsync("div", { key: '3f5f70acd4d3ed6bb445122f4f01d73db738a75f', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: '3161326c9330e7f7441299c428b87a91b31a83e9' })), hAsync("ion-backdrop", { key: '917b50f38489bdf03d0c642af8b4e4e172c7dc4c', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
+            } }, hAsync("div", { key: '83af04e5a47d5a92caafaf06088a7114ae61984b', class: "menu-inner", part: "container", ref: (el) => (this.menuInnerEl = el) }, hAsync("slot", { key: '7b35048642864bd0f30de9f6b61c949c1b601692' })), hAsync("ion-backdrop", { key: '347af516c7970d80dd11c6d1ed61e9a040ceb5fb', ref: (el) => (this.backdropEl = el), class: "menu-backdrop", tappable: false, stopPropagation: false, part: "backdrop" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -21877,6 +21836,12 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
     const backdropAnimation = animation.childAnimations.find((ani) => ani.id === 'backdropAnimation');
     const contentAnimation = animation.childAnimations.find((ani) => ani.id === 'contentAnimation');
     const enableBackdrop = () => {
+        // Respect explicit opt-out of focus trapping/backdrop interactions
+        // If focusTrap is false or showBackdrop is false, do not enable the backdrop or re-enable focus trap
+        const el = baseEl;
+        if (el.focusTrap === false || el.showBackdrop === false) {
+            return;
+        }
         baseEl.style.setProperty('pointer-events', 'auto');
         backdropEl.style.setProperty('pointer-events', 'auto');
         /**
@@ -22001,7 +21966,9 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
          * ion-backdrop and .modal-wrapper always have pointer-events: auto
          * applied, so the modal content can still be interacted with.
          */
-        const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint;
+        const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
+            baseEl.focusTrap !== false &&
+            baseEl.showBackdrop !== false;
         if (shouldEnableBackdrop) {
             enableBackdrop();
         }
@@ -22309,7 +22276,9 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
                              * Backdrop should become enabled
                              * after the backdropBreakpoint value
                              */
-                            const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint;
+                            const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
+                                baseEl.focusTrap !== false &&
+                                baseEl.showBackdrop !== false;
                             if (shouldEnableBackdrop) {
                                 enableBackdrop();
                             }
@@ -23250,8 +23219,8 @@ class Modal {
             "overlayIndex": [2, "overlay-index"],
             "delegate": [16],
             "keyboardClose": [4, "keyboard-close"],
-            "enterAnimation": [16, "enter-animation"],
-            "leaveAnimation": [16, "leave-animation"],
+            "enterAnimation": [16],
+            "leaveAnimation": [16],
             "breakpoints": [16],
             "expandToScroll": [4, "expand-to-scroll"],
             "initialBreakpoint": [2, "initial-breakpoint"],
@@ -23259,13 +23228,13 @@ class Modal {
             "handle": [4],
             "handleBehavior": [1, "handle-behavior"],
             "component": [1],
-            "componentProps": [16, "component-props"],
+            "componentProps": [16],
             "cssClass": [1, "css-class"],
             "backdropDismiss": [4, "backdrop-dismiss"],
             "showBackdrop": [4, "show-backdrop"],
             "animated": [4],
-            "presentingElement": [16, "presenting-element"],
-            "htmlAttributes": [16, "html-attributes"],
+            "presentingElement": [16],
+            "htmlAttributes": [16],
             "isOpen": [4, "is-open"],
             "trigger": [1],
             "keepContentsMounted": [4, "keep-contents-mounted"],
@@ -24194,7 +24163,7 @@ class Nav {
             "swipeGesture": [1028, "swipe-gesture"],
             "animated": [4],
             "animation": [16],
-            "rootParams": [16, "root-params"],
+            "rootParams": [16],
             "root": [1],
             "push": [64],
             "insert": [64],
@@ -24259,9 +24228,9 @@ class NavLink {
         "$tagName$": "ion-nav-link",
         "$members$": {
             "component": [1],
-            "componentProps": [16, "component-props"],
+            "componentProps": [16],
             "routerDirection": [1, "router-direction"],
-            "routerAnimation": [16, "router-animation"]
+            "routerAnimation": [16]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -25067,8 +25036,8 @@ class Picker {
             "delegate": [16],
             "hasController": [4, "has-controller"],
             "keyboardClose": [4, "keyboard-close"],
-            "enterAnimation": [16, "enter-animation"],
-            "leaveAnimation": [16, "leave-animation"],
+            "enterAnimation": [16],
+            "leaveAnimation": [16],
             "buttons": [16],
             "columns": [16],
             "cssClass": [1, "css-class"],
@@ -25076,7 +25045,7 @@ class Picker {
             "showBackdrop": [4, "show-backdrop"],
             "backdropDismiss": [4, "backdrop-dismiss"],
             "animated": [4],
-            "htmlAttributes": [16, "html-attributes"],
+            "htmlAttributes": [16],
             "isOpen": [4, "is-open"],
             "trigger": [1],
             "presented": [32],
@@ -25506,23 +25475,6 @@ class PickerColumn {
             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 (hAsync("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;
@@ -25663,33 +25615,14 @@ class PickerColumn {
     render() {
         const { color, disabled, isActive, numericInput } = this;
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: 'ea0280355b2f87895bf7dddd289ccf473aa759f3', class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'db903fd415f8a2d91994dececca481c1af8ba6a9', class: createColorClasses$1(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, this.renderAssistiveFocusable(), hAsync("slot", { key: '482992131cdeb85b1f61430d7fe1322a16345769', name: "prefix" }), hAsync("div", { key: '43f7f80d621d411ef366b3ca1396299e8c9a0c97', "aria-hidden": "true", class: "picker-opts", ref: (el) => {
+            }) }, hAsync("slot", { key: '02ce9e1dd7df91afcd50b06416552bcffb5dec98', name: "prefix" }), hAsync("div", { key: '6dfd7d2429bec19244a6b1afb4448121963a031b', class: "picker-opts", ref: (el) => {
                 this.scrollEl = el;
-            },
-            /**
-             * 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 }, hAsync("div", { key: '13a9ee686132af32240710730765de4c0003a9e8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'dbccba4920833cfcebe9b0fc763458ec3053705a', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '682b43f83a5ea2e46067457f3af118535e111edb', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("slot", { key: 'd27e1e1dc0504b2f4627a29912a05bb91e8e413a' }), hAsync("div", { key: '61c948dbb9cf7469aed3018542bc0954211585ba', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'cf46c277fbee65e35ff44ce0d53ce12aa9cbf9db', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'bbc0e2d491d3f836ab849493ade2f7fa6ad9244e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), hAsync("slot", { key: 'd25cbbe14b2914fe7b878d43b4e3f4a8c8177d24', name: "suffix" })));
+            }, 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) }, hAsync("div", { key: 'e30ce0b9cefbfe4d4441fa33acf595da31855c3f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '8be2bd293c12c6ba720d9b31d0d561a96f42e97d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '8afdcddddabbf646fbb55cb0ba4448309a2c1dd9', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("slot", { key: '6aa0dacc34d6848575ad5b122b9046982308ca43' }), hAsync("div", { key: '92ec8a357414c1b779b11d1dd18fb87a7ee63982', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: 'b89457cb74b5907c25594ff6720ac54ca537e933', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), hAsync("div", { key: '5bbc92e6bc24de08e39873bf08c5b668373ac0f8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), hAsync("slot", { key: 'd7bf2b519214f0f3576a4ca79844ad97827dd97f', name: "suffix" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -26081,9 +26014,9 @@ const DECELERATION_FRICTION = 0.97;
 const MAX_PICKER_SPEED = 90;
 const TRANSITION_DURATION = 150;
 
-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 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 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 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)}";
 
 class PickerColumnOption {
     constructor(hostRef) {
@@ -26175,7 +26108,7 @@ class PickerColumnOption {
         return (hAsync(Host, { key: 'f816729941aabcb31ddfdce3ffe2e2139030d715', class: createColorClasses$1(color, {
                 [mode]: true,
                 ['option-disabled']: disabled,
-            }) }, hAsync("button", { key: '48dff7833bb60fc8331cd353a0885e6affa683d1', tabindex: "-1", "aria-label": ariaLabel, disabled: disabled, onClick: () => this.onClick() }, hAsync("slot", { key: 'f9224d0e7b7aa6c05b29abfdcfe0f30ad6ee3141' }))));
+            }) }, hAsync("div", { key: 'd942de84fd14d7dc06b1e5cf4f7920d1dc3c6371', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, hAsync("slot", { key: 'b0df5717b42209e649097209a01476e1a66f5c5c' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -27603,10 +27536,10 @@ class Popover {
             "hasController": [4, "has-controller"],
             "delegate": [16],
             "overlayIndex": [2, "overlay-index"],
-            "enterAnimation": [16, "enter-animation"],
-            "leaveAnimation": [16, "leave-animation"],
+            "enterAnimation": [16],
+            "leaveAnimation": [16],
             "component": [1],
-            "componentProps": [16, "component-props"],
+            "componentProps": [16],
             "keyboardClose": [4, "keyboard-close"],
             "cssClass": [1, "css-class"],
             "backdropDismiss": [4, "backdrop-dismiss"],
@@ -27614,7 +27547,7 @@ class Popover {
             "showBackdrop": [4, "show-backdrop"],
             "translucent": [4],
             "animated": [4],
-            "htmlAttributes": [16, "html-attributes"],
+            "htmlAttributes": [16],
             "triggerAction": [1, "trigger-action"],
             "trigger": [1],
             "size": [1],
@@ -28909,7 +28842,7 @@ class Range {
             "min": [2],
             "max": [2],
             "pin": [4],
-            "pinFormatter": [16, "pin-formatter"],
+            "pinFormatter": [16],
             "snaps": [4],
             "step": [2],
             "ticks": [4],
@@ -29334,6 +29267,14 @@ class Refresher {
                         this.beginRefresh();
                         this.didRefresh = true;
                         hapticImpact({ style: ImpactStyle.Light });
+                        /**
+                         * Clear focus from any active element to prevent scroll jumps
+                         * when the refresh completes
+                         */
+                        const activeElement = document.activeElement;
+                        if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur) !== undefined) {
+                            activeElement.blur();
+                        }
                         /**
                          * Translate the content element otherwise when pointer is removed
                          * from screen the scroll content will bounce back over the refresher
@@ -29749,6 +29690,15 @@ class Refresher {
         this.state = 8 /* RefresherState.Refreshing */;
         // place the content in a hangout position while it thinks
         this.setCss(this.pullMin, this.snapbackDuration, true, '');
+        /**
+         * Clear focus from any active element to prevent the browser
+         * from restoring focus and causing scroll jumps after refresh.
+         * This ensures the view stays at the top after refresh completes.
+         */
+        const activeElement = document.activeElement;
+        if ((activeElement === null || activeElement === void 0 ? void 0 : activeElement.blur) !== undefined) {
+            activeElement.blur();
+        }
         // emit "refresh" because it was pulled down far enough
         // and they let go to begin refreshing
         this.ionRefresh.emit({
@@ -29831,7 +29781,7 @@ class Refresher {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '8c7a5cc32da02a9cbeaa954258148683f60a6d1b', slot: "fixed", class: {
+        return (hAsync(Host, { key: '2d1bd880877b698604542ab2d602d38b9504d975', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,
@@ -30558,9 +30508,9 @@ class Route {
         "$members$": {
             "url": [1],
             "component": [1],
-            "componentProps": [16, "component-props"],
-            "beforeLeave": [16, "before-leave"],
-            "beforeEnter": [16, "before-enter"]
+            "componentProps": [16],
+            "beforeLeave": [16],
+            "beforeEnter": [16]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -31456,7 +31406,7 @@ class RouterLink {
             "href": [1],
             "rel": [1],
             "routerDirection": [1, "router-direction"],
-            "routerAnimation": [16, "router-animation"],
+            "routerAnimation": [16],
             "target": [1]
         },
         "$listeners$": undefined,
@@ -31658,7 +31608,7 @@ class RouterOutlet {
             "delegate": [16],
             "animated": [4],
             "animation": [16],
-            "swipeHandler": [16, "swipe-handler"],
+            "swipeHandler": [16],
             "commit": [64],
             "setRouteId": [64],
             "getRouteId": [64]
@@ -32959,7 +32909,8 @@ class SegmentView {
     handleScroll(ev) {
         var _a;
         const { scrollLeft, scrollWidth, clientWidth } = ev.target;
-        const scrollRatio = scrollLeft / (scrollWidth - clientWidth);
+        const max = scrollWidth - clientWidth;
+        const scrollRatio = (isRTL$1(this.el) ? -1 : 1) * (scrollLeft / max);
         this.ionSegmentViewScroll.emit({
             scrollRatio,
             isManualScroll: (_a = this.isManualScroll) !== null && _a !== void 0 ? _a : true,
@@ -33030,9 +32981,10 @@ class SegmentView {
         this.isManualScroll = false;
         this.resetScrollEndTimeout();
         const contentWidth = this.el.offsetWidth;
+        const offset = index * contentWidth;
         this.el.scrollTo({
             top: 0,
-            left: index * contentWidth,
+            left: (isRTL$1(this.el) ? -1 : 1) * offset,
             behavior: smoothScroll ? 'smooth' : 'instant',
         });
     }
@@ -33041,10 +32993,10 @@ class SegmentView {
     }
     render() {
         const { disabled, isManualScroll } = this;
-        return (hAsync(Host, { key: '754a374e89fd4dd682eb00497e717242a6f83357', class: {
+        return (hAsync(Host, { key: 'e180b67bb3143a5f4611fb358c037be6fc782a8f', class: {
                 'segment-view-disabled': disabled,
                 'segment-view-scroll-disabled': isManualScroll === false,
-            } }, hAsync("slot", { key: '77366044eb61f0d4bba305bd6f0ef8fd1e25194b' })));
+            } }, hAsync("slot", { key: '41c11d6a7406a10f5c64a2e73abfc072afd8fc73' })));
     }
     get el() { return getElement(this); }
     static get style() { return {
@@ -34437,6 +34389,7 @@ class TabBar {
         this.ionTabBarChanged = createEvent(this, "ionTabBarChanged", 7);
         this.ionTabBarLoaded = createEvent(this, "ionTabBarLoaded", 7);
         this.keyboardCtrl = null;
+        this.didLoad = false;
         this.keyboardVisible = false;
         /**
          * If `true`, the tab bar will be translucent.
@@ -34446,14 +34399,29 @@ class TabBar {
         this.translucent = false;
     }
     selectedTabChanged() {
+        // Skip the initial watcher call that happens during component load
+        // We handle that in componentDidLoad to ensure children are ready
+        if (!this.didLoad) {
+            return;
+        }
         if (this.selectedTab !== undefined) {
             this.ionTabBarChanged.emit({
                 tab: this.selectedTab,
             });
         }
     }
-    componentWillLoad() {
-        this.selectedTabChanged();
+    componentDidLoad() {
+        this.ionTabBarLoaded.emit();
+        // Set the flag to indicate the component has loaded
+        // This allows the watcher to emit changes from this point forward
+        this.didLoad = true;
+        // Emit the initial selected tab after the component is fully loaded
+        // This ensures all child components (ion-tab-button) are ready
+        if (this.selectedTab !== undefined) {
+            this.ionTabBarChanged.emit({
+                tab: this.selectedTab,
+            });
+        }
     }
     async connectedCallback() {
         this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
@@ -34473,18 +34441,15 @@ class TabBar {
             this.keyboardCtrl.destroy();
         }
     }
-    componentDidLoad() {
-        this.ionTabBarLoaded.emit();
-    }
     render() {
         const { color, translucent, keyboardVisible } = this;
         const mode = getIonMode$1(this);
         const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
-        return (hAsync(Host, { key: '275dc6c1b30f6928ce9039b2f445208bb3500ddc', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: '388ec37ce308035bab78d6c9a016bb616e9517a9', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses$1(color, {
                 [mode]: true,
                 'tab-bar-translucent': translucent,
                 'tab-bar-hidden': shouldHide,
-            }) }, hAsync("slot", { key: 'ceac20128d75c6a4a0f445f2df8deb8cc71fc4da' })));
+            }) }, hAsync("slot", { key: 'ce10ade2b86725e24f3254516483eeedd8ecb16a' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -34669,29 +34634,27 @@ class Tabs {
         }
         this.ionNavWillLoad.emit();
     }
-    componentWillRender() {
+    componentDidLoad() {
+        this.updateTabBar();
+    }
+    componentDidUpdate() {
+        this.updateTabBar();
+    }
+    updateTabBar() {
         const tabBar = this.el.querySelector('ion-tab-bar');
-        if (tabBar) {
-            let tab = this.selectedTab ? this.selectedTab.tab : undefined;
-            // Fallback: if no selectedTab is set but we're using router mode,
-            // determine the active tab from the current URL. This works around
-            // timing issues in React Router integration where setRouteId may not
-            // be called in time for the initial render.
-            // TODO(FW-6724): Remove this with React Router upgrade
-            if (!tab && this.useRouter && typeof window !== 'undefined') {
-                const currentPath = window.location.pathname;
-                const tabButtons = this.el.querySelectorAll('ion-tab-button');
-                // Look for a tab button that matches the current path pattern
-                for (const tabButton of tabButtons) {
-                    const tabId = tabButton.getAttribute('tab');
-                    if (tabId && currentPath.includes(tabId)) {
-                        tab = tabId;
-                        break;
-                    }
-                }
-            }
-            tabBar.selectedTab = tab;
+        if (!tabBar) {
+            return;
+        }
+        const tab = this.selectedTab ? this.selectedTab.tab : undefined;
+        // If tabs has no selected tab but tab-bar already has a selected-tab set,
+        // don't overwrite it. This handles cases where tab-bar is used without ion-tab elements.
+        if (tab === undefined) {
+            return;
+        }
+        if (tabBar.selectedTab === tab) {
+            return;
         }
+        tabBar.selectedTab = tab;
     }
     /**
      * Select a tab by the value of its `tab` property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
@@ -34750,6 +34713,7 @@ class Tabs {
         this.selectedTab = selectedTab;
         this.ionTabsWillChange.emit({ tab: selectedTab.tab });
         selectedTab.active = true;
+        this.updateTabBar();
         return Promise.resolve();
     }
     tabSwitch() {
@@ -34784,7 +34748,7 @@ class Tabs {
         return Array.from(this.el.querySelectorAll('ion-tab'));
     }
     render() {
-        return (hAsync(Host, { key: '6dd1d17cc5a7aff4b910303006b4478080ca97af', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: 'db54a692d1a825498a116f090eb305f7cceceb5a', name: "top" }), hAsync("div", { key: 'e1b7d49ba7032e9071de2029695254e2a8303be9', class: "tabs-inner" }, hAsync("slot", { key: '4c3b58d5292c8c834e7532c51de0861068943d79' })), hAsync("slot", { key: 'dd59c0b9b217dfbfb0fccdbc6896b593278549cc', name: "bottom" })));
+        return (hAsync(Host, { key: '7b4b302f2942d8d131f6fc24e817989a8be08867', onIonTabButtonClick: this.onTabClicked }, hAsync("slot", { key: '2c51cf14c0f17a8ddf2d879858c984cdf8fd3147', name: "top" }), hAsync("div", { key: '7e9d6055092d41bd9bc80ae15965f77e216feb84', class: "tabs-inner" }, hAsync("slot", { key: 'c308a787e37ff7f6653531d70deca597a7602d26' })), hAsync("slot", { key: 'd5f5e693710c853570811602f859cf3e88272684', name: "bottom" })));
     }
     get el() { return getElement(this); }
     static get style() { return tabsCss; }
@@ -34879,6 +34843,10 @@ 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"`.
@@ -35024,10 +34992,20 @@ class Textarea {
             this.el.click();
         }
     }
+    /**
+     * Checks if the textarea is in an invalid state based on Ionic validation classes
+     */
+    checkValidationState() {
+        const hasIonTouched = this.el.classList.contains('ion-touched');
+        const hasIonInvalid = this.el.classList.contains('ion-invalid');
+        return hasIonTouched && hasIonInvalid;
+    }
     connectedCallback() {
         const { el } = this;
         this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate());
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
+        // Always set initial state
+        this.isInvalid = this.checkValidationState();
         this.debounceChanged();
     }
     disconnectedCallback() {
@@ -35039,6 +35017,11 @@ 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$1(this.el, ['data-form-type', 'title', 'tabindex', 'dir']));
@@ -35209,15 +35192,15 @@ 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 [
-            hAsync("div", { id: helperTextId, class: "helper-text" }, helperText),
-            hAsync("div", { id: errorTextId, class: "error-text" }, errorText),
+            hAsync("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null),
+            hAsync("div", { id: errorTextId, class: "error-text", role: "alert" }, isInvalid ? errorText : null),
         ];
     }
     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) {
@@ -35276,7 +35259,7 @@ class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (hAsync(Host, { key: 'd9f2ede0107987fc42c99e310cd2336bad5a5755', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '26b46666a92b3f652775bb1c46661f9a30392104', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -35285,7 +35268,7 @@ class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, hAsync("label", { key: '9de598b95237462bb3bccffaefe83afbb43554b8', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: 'e33c426c6541d723ccc246bb404c03687726ff83', class: "textarea-wrapper-inner" }, hAsync("div", { key: '521e11af9d54d281b0a2b1c25bcfc6f742c18296', class: "start-slot-wrapper" }, hAsync("slot", { key: '515523f6ca3ce0e5dd08f3275c21a190fb1ca177', name: "start" })), hAsync("div", { key: '916e01e00de8400ae00ef06bc1fb62d8be2eee08', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, hAsync("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)), hAsync("div", { key: '80aca9ea9546dca9d38efd291a6b0be384bb6978', class: "end-slot-wrapper" }, hAsync("slot", { key: '407fab16c66a9f4a542369bfecc0d9afa0065977', name: "end" }))), shouldRenderHighlight && hAsync("div", { key: 'f00523a6698fac8a1996e04303487bef01d10f25', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, hAsync("label", { key: '2649da816216959ebe1f34cafd9dedbac20ec3c2', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: 'dca98593efece1b044dbcda045fa70882d715cb2', class: "textarea-wrapper-inner" }, hAsync("div", { key: '2019daf87fddca5ec0b2e336f0376fd9642bae1b', class: "start-slot-wrapper" }, hAsync("slot", { key: '36c423c394a71d08261705b9d6729e756bf65924', name: "start" })), hAsync("div", { key: '0c3ea34105c7eddfa4094371c5d288c50ed10db3', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, hAsync("textarea", Object.assign({ key: 'ce173b83b16aff43d293fa1edef9b66c6676227b', 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)), hAsync("div", { key: '756e343cfd208bb5ad9ecf08d77cbb0a9606dc7b', class: "end-slot-wrapper" }, hAsync("slot", { key: '0eb596814a037fa4634ff8c5bac0045540edfe21', name: "end" }))), shouldRenderHighlight && hAsync("div", { key: 'df62f896eb6e0e2d1217aa487c198eb82a52bcb8', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -35323,13 +35306,14 @@ class Textarea {
             "autoGrow": [516, "auto-grow"],
             "value": [1025],
             "counter": [4],
-            "counterFormatter": [16, "counter-formatter"],
+            "counterFormatter": [16],
             "errorText": [1, "error-text"],
             "helperText": [1, "helper-text"],
             "label": [1],
             "labelPlacement": [1, "label-placement"],
             "shape": [1],
             "hasFocus": [32],
+            "isInvalid": [32],
             "setFocus": [64],
             "getInputElement": [64]
         },
@@ -36227,8 +36211,8 @@ class Toast {
             "delegate": [16],
             "hasController": [4, "has-controller"],
             "color": [513],
-            "enterAnimation": [16, "enter-animation"],
-            "leaveAnimation": [16, "leave-animation"],
+            "enterAnimation": [16],
+            "leaveAnimation": [16],
             "cssClass": [1, "css-class"],
             "duration": [2],
             "header": [1],
@@ -36241,7 +36225,7 @@ class Toast {
             "translucent": [4],
             "animated": [4],
             "icon": [1],
-            "htmlAttributes": [16, "html-attributes"],
+            "htmlAttributes": [16],
             "swipeGesture": [1, "swipe-gesture"],
             "isOpen": [4, "is-open"],
             "trigger": [1],
@@ -37657,7 +37641,7 @@ var BUILD = {
   vdomRender: true,
   vdomStyle: true,
   vdomText: true,
-  watchCallback: true,
+  propChangeCallback: true,
   taskQueue: true,
   hotModuleReplacement: false,
   isDebug: false,
@@ -37705,7 +37689,7 @@ var NAMESPACE = (
 );
 
 /*
- Stencil Hydrate Runner v4.36.2 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Runner v4.38.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -52382,6 +52366,9 @@ var _colonHostContextRe = createSupportsRuleRe(":host-context");
 var setMode = (handler) => modeResolutionChain.push(handler);
 var CAPTURE_EVENT_SUFFIX = "Capture";
 var CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$");
+var baseClass = BUILD.lazyLoad ? class {
+} : globalThis.HTMLElement || class {
+};
 
 // src/compiler/html/canonical-link.ts
 var updateCanonicalLink = (doc, href) => {