@ionic/core 8.7.10-dev.11762798751.11b77c85 → 8.7.10-dev.11763406256.1a4bac8c

package/hydrate/index.mjs

@@ -128,7 +128,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
 
 
 const NAMESPACE = 'ionic';
-const BUILD = /* ionic */ { hydratedSelectorName: "hydrated", slotRelocation: true, state: true, updatable: true};
+const BUILD = /* ionic */ { hydratedSelectorName: "hydrated", slotRelocation: true, updatable: true};
 
 // TODO(FW-2832): types
 class Config {
@@ -390,7 +390,7 @@ const initialize = (userConfig = {}) => {
 const globalScripts = initialize;
 
 /*
- Stencil Hydrate Platform v4.38.3 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Platform v4.38.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -426,40 +426,6 @@ var TYPE_CONSTANT = "type";
 var VALUE_CONSTANT = "value";
 var SERIALIZED_PREFIX = "serialized:";
 
-// src/utils/es2022-rewire-class-members.ts
-var reWireGetterSetter = (instance, hostRef) => {
-  var _a;
-  const cmpMeta = hostRef.$cmpMeta$;
-  const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
-  members.map(([memberName, [memberFlags]]) => {
-    if ((memberFlags & 31 /* Prop */ || memberFlags & 32 /* State */)) {
-      const ogValue = instance[memberName];
-      const ogDescriptor = getPropertyDescriptor(Object.getPrototypeOf(instance), memberName) || Object.getOwnPropertyDescriptor(instance, memberName);
-      if (ogDescriptor) {
-        Object.defineProperty(instance, memberName, {
-          get() {
-            return ogDescriptor.get.call(this);
-          },
-          set(newValue) {
-            ogDescriptor.set.call(this, newValue);
-          },
-          configurable: true,
-          enumerable: true
-        });
-      }
-      instance[memberName] = hostRef.$instanceValues$.has(memberName) ? hostRef.$instanceValues$.get(memberName) : ogValue;
-    }
-  });
-};
-function getPropertyDescriptor(obj, memberName) {
-  while (obj) {
-    const desc = Object.getOwnPropertyDescriptor(obj, memberName);
-    if (desc == null ? void 0 : desc.get) return desc;
-    obj = Object.getPrototypeOf(obj);
-  }
-  return void 0;
-}
-
 // src/utils/helpers.ts
 var isDef = (v) => v != null && v !== void 0;
 var isComplexType = (o) => {
@@ -3679,9 +3645,6 @@ var registerInstance = (lazyInstance, hostRef) => {
   if (!hostRef) return void 0;
   lazyInstance.__stencil__getHostRef = () => hostRef;
   hostRef.$lazyInstance$ = lazyInstance;
-  if (hostRef.$cmpMeta$.$flags$ & 512 /* hasModernPropertyDecls */ && (BUILD.state)) {
-    reWireGetterSetter(lazyInstance, hostRef);
-  }
   return hostRef;
 };
 var registerHost = (elm, cmpMeta) => {
@@ -9720,6 +9683,202 @@ class CardTitle {
     }; }
 }
 
+/**
+ * A utility to calculate the size of an outline notch
+ * width relative to the content passed. This is used in
+ * components such as `ion-select` with `fill="outline"`
+ * where we need to pass slotted HTML content. This is not
+ * needed when rendering plaintext content because we can
+ * render the plaintext again hidden with `opacity: 0` inside
+ * of the notch. As a result we can rely on the intrinsic size
+ * of the element to correctly compute the notch width. We
+ * cannot do this with slotted content because we cannot project
+ * it into 2 places at once.
+ *
+ * @internal
+ * @param el: The host element
+ * @param getNotchSpacerEl: A function that returns a reference to the notch spacer element inside of the component template.
+ * @param getLabelSlot: A function that returns a reference to the slotted content.
+ */
+const createNotchController = (el, getNotchSpacerEl, getLabelSlot) => {
+    let notchVisibilityIO;
+    const needsExplicitNotchWidth = () => {
+        const notchSpacerEl = getNotchSpacerEl();
+        if (
+        /**
+         * If the notch is not being used
+         * then we do not need to set the notch width.
+         */
+        notchSpacerEl === undefined ||
+            /**
+             * If either the label property is being
+             * used or the label slot is not defined,
+             * then we do not need to estimate the notch width.
+             */
+            el.label !== undefined ||
+            getLabelSlot() === null) {
+            return false;
+        }
+        return true;
+    };
+    const calculateNotchWidth = () => {
+        if (needsExplicitNotchWidth()) {
+            /**
+             * Run this the frame after
+             * the browser has re-painted the host element.
+             * Otherwise, the label element may have a width
+             * of 0 and the IntersectionObserver will be used.
+             */
+            raf(() => {
+                setNotchWidth();
+            });
+        }
+    };
+    /**
+     * When using a label prop we can render
+     * the label value inside of the notch and
+     * let the browser calculate the size of the notch.
+     * However, we cannot render the label slot in multiple
+     * places so we need to manually calculate the notch dimension
+     * based on the size of the slotted content.
+     *
+     * This function should only be used to set the notch width
+     * on slotted label content. The notch width for label prop
+     * content is automatically calculated based on the
+     * intrinsic size of the label text.
+     */
+    const setNotchWidth = () => {
+        const notchSpacerEl = getNotchSpacerEl();
+        if (notchSpacerEl === undefined) {
+            return;
+        }
+        if (!needsExplicitNotchWidth()) {
+            notchSpacerEl.style.removeProperty('width');
+            return;
+        }
+        const width = getLabelSlot().scrollWidth;
+        if (
+        /**
+         * If the computed width of the label is 0
+         * and notchSpacerEl's offsetParent is null
+         * then that means the element is hidden.
+         * As a result, we need to wait for the element
+         * to become visible before setting the notch width.
+         *
+         * We do not check el.offsetParent because
+         * that can be null if the host element has
+         * position: fixed applied to it.
+         * notchSpacerEl does not have position: fixed.
+         */
+        width === 0 &&
+            notchSpacerEl.offsetParent === null &&
+            win$1 !== undefined &&
+            'IntersectionObserver' in win$1) {
+            /**
+             * If there is an IO already attached
+             * then that will update the notch
+             * once the element becomes visible.
+             * As a result, there is no need to create
+             * another one.
+             */
+            if (notchVisibilityIO !== undefined) {
+                return;
+            }
+            const io = (notchVisibilityIO = new IntersectionObserver((ev) => {
+                /**
+                 * If the element is visible then we
+                 * can try setting the notch width again.
+                 */
+                if (ev[0].intersectionRatio === 1) {
+                    setNotchWidth();
+                    io.disconnect();
+                    notchVisibilityIO = undefined;
+                }
+            }, 
+            /**
+             * Set the root to be the host element
+             * This causes the IO callback
+             * to be fired in WebKit as soon as the element
+             * is visible. If we used the default root value
+             * then WebKit would only fire the IO callback
+             * after any animations (such as a modal transition)
+             * finished, and there would potentially be a flicker.
+             */
+            { threshold: 0.01, root: el }));
+            io.observe(notchSpacerEl);
+            return;
+        }
+        /**
+         * If the element is visible then we can set the notch width.
+         * The notch is only visible when the label is scaled,
+         * which is why we multiply the width by 0.75 as this is
+         * the same amount the label element is scaled by in the host CSS.
+         * (See $form-control-label-stacked-scale in ionic.globals.scss).
+         */
+        notchSpacerEl.style.setProperty('width', `${width * 0.75}px`);
+    };
+    const destroy = () => {
+        if (notchVisibilityIO) {
+            notchVisibilityIO.disconnect();
+            notchVisibilityIO = undefined;
+        }
+    };
+    return {
+        calculateNotchWidth,
+        destroy,
+    };
+};
+
+/**
+ * Uses the compareWith param to compare two values to determine if they are equal.
+ *
+ * @param currentValue The current value of the control.
+ * @param compareValue The value to compare against.
+ * @param compareWith The function or property name to use to compare values.
+ */
+const compareOptions = (currentValue, compareValue, compareWith) => {
+    if (typeof compareWith === 'function') {
+        return compareWith(currentValue, compareValue);
+    }
+    else if (typeof compareWith === 'string') {
+        return currentValue[compareWith] === compareValue[compareWith];
+    }
+    else {
+        return Array.isArray(compareValue) ? compareValue.includes(currentValue) : currentValue === compareValue;
+    }
+};
+/**
+ * Compares a value against the current value(s) to determine if it is selected.
+ *
+ * @param currentValue The current value of the control.
+ * @param compareValue The value to compare against.
+ * @param compareWith The function or property name to use to compare values.
+ */
+const isOptionSelected = (currentValue, compareValue, compareWith) => {
+    if (currentValue === undefined) {
+        return false;
+    }
+    if (Array.isArray(currentValue)) {
+        return currentValue.some((val) => compareOptions(val, compareValue, compareWith));
+    }
+    else {
+        return compareOptions(currentValue, compareValue, compareWith);
+    }
+};
+
+/**
+ * Checks if the form element is in an invalid state based on
+ * Ionic validation classes.
+ *
+ * @param el The form element to check.
+ * @returns `true` if the element is invalid, `false` otherwise.
+ */
+const checkInvalidState = (el) => {
+    const hasIonTouched = el.classList.contains('ion-touched');
+    const hasIonInvalid = el.classList.contains('ion-invalid');
+    return hasIonTouched && hasIonInvalid;
+};
+
 const checkboxIosCss = ":host{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper,:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;width:var(--size);height:var(--size);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}.checkbox-bottom{padding-top:4px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75rem;white-space:normal}:host(.checkbox-label-placement-stacked) .checkbox-bottom{font-size:1rem}.checkbox-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.checkbox-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .checkbox-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .checkbox-bottom .helper-text{display:none}:host(.checkbox-label-placement-start) .checkbox-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.checkbox-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.checkbox-justify-space-between) .checkbox-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{-ms-flex-pack:start;justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{-ms-flex-pack:end;justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{-ms-flex-align:start;align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{-ms-flex-align:center;align-items:center}:host(.checkbox-justify-space-between),:host(.checkbox-justify-start),:host(.checkbox-justify-end),:host(.checkbox-alignment-start),:host(.checkbox-alignment-center){display:block}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:50%;--border-width:0.125rem;--border-style:solid;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23);--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--size:min(1.375rem, 55.836px);--checkmark-width:1.5px}:host(.checkbox-disabled){opacity:0.3}";
 
 const checkboxMdCss = ":host{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper,:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;width:var(--size);height:var(--size);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}.checkbox-bottom{padding-top:4px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75rem;white-space:normal}:host(.checkbox-label-placement-stacked) .checkbox-bottom{font-size:1rem}.checkbox-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.checkbox-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .checkbox-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .checkbox-bottom .helper-text{display:none}:host(.checkbox-label-placement-start) .checkbox-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.checkbox-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.checkbox-justify-space-between) .checkbox-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{-ms-flex-pack:start;justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{-ms-flex-pack:end;justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{-ms-flex-align:start;align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{-ms-flex-align:center;align-items:center}:host(.checkbox-justify-space-between),:host(.checkbox-justify-start),:host(.checkbox-justify-end),:host(.checkbox-alignment-start),:host(.checkbox-alignment-center){display:block}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:calc(var(--size) * .125);--border-width:2px;--border-style:solid;--border-color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--checkmark-width:3;--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--transition:background 180ms cubic-bezier(0.4, 0, 0.2, 1);--size:18px}.checkbox-icon path{stroke-dasharray:30;stroke-dashoffset:30}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{stroke-dashoffset:0;-webkit-transition:stroke-dashoffset 90ms linear 90ms;transition:stroke-dashoffset 90ms linear 90ms}:host(.checkbox-disabled) .label-text-wrapper{opacity:0.38}:host(.checkbox-disabled) .native-wrapper{opacity:0.63}";
@@ -9785,6 +9944,10 @@ class Checkbox {
          * submitting if the value is invalid.
          */
         this.required = false;
+        /**
+         * Track validation state for proper aria-live announcements.
+         */
+        this.isInvalid = false;
         /**
          * Sets the checked property and emits
          * the ionChange event. Use this to update the
@@ -9831,16 +9994,29 @@ class Checkbox {
             ev.stopPropagation();
         };
     }
+    connectedCallback() {
+        const { el } = this;
+        // Always set initial state
+        this.isInvalid = checkInvalidState(el);
+    }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+        this.hintTextId = this.getHintTextId();
+    }
+    disconnectedCallback() {
+        // Clean up validation observer to prevent memory leaks.
+        if (this.validationObserver) {
+            this.validationObserver.disconnect();
+            this.validationObserver = undefined;
+        }
     }
     /** @internal */
     async setFocus() {
         this.el.focus();
     }
-    getHintTextID() {
-        const { el, helperText, errorText, helperTextId, errorTextId } = this;
-        if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
+    getHintTextId() {
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+        if (isInvalid && errorText) {
             return errorTextId;
         }
         if (helperText) {
@@ -9853,7 +10029,7 @@ class Checkbox {
      * This element should only be rendered if hint text is set.
      */
     renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         /**
          * undefined and empty string values should
          * be treated as not having helper/error text.
@@ -9862,7 +10038,7 @@ class Checkbox {
         if (!hasHintText) {
             return;
         }
-        return (hAsync("div", { class: "checkbox-bottom" }, hAsync("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text" }, helperText), hAsync("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text" }, errorText)));
+        return (hAsync("div", { class: "checkbox-bottom" }, hAsync("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null), hAsync("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text", role: "alert" }, isInvalid ? errorText : null)));
     }
     render() {
         const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, required, } = this;
@@ -9872,7 +10048,7 @@ class Checkbox {
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
         // The host element must have a checkbox role to ensure proper VoiceOver
         // support in Safari for accessibility.
-        return (hAsync(Host, { key: 'ee2e02d28f9d15a1ec746609f7e9559444f621e5', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, "aria-labelledby": hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'ae0fbd4b21accbac132e6b85c513512ad9179394', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'checkbox-checked': checked,
@@ -9882,10 +10058,10 @@ class Checkbox {
                 [`checkbox-justify-${justify}`]: justify !== undefined,
                 [`checkbox-alignment-${alignment}`]: alignment !== undefined,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }) }, hAsync("label", { key: '84d4c33da0348dc65ad36fb0fafd48be366dcf3b', class: "checkbox-wrapper", htmlFor: inputId }, hAsync("input", Object.assign({ key: '427db69a3ab8a17aa0867519c90f585b8930406b', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), hAsync("div", { key: '9dda7024b3a4f1ee55351f783f9a10f9b4ad0d12', class: {
+            }) }, hAsync("label", { key: '7a3d7f3c27dde514f2dbf2e34f4629fad33ec3bf', class: "checkbox-wrapper", htmlFor: inputId }, hAsync("input", Object.assign({ key: '4130d77ddf034271fecccda14e101a5a809921b6', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), hAsync("div", { key: '5daa74f4e62b0947e37764762524001ee42609d9', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabelContent,
-            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: 'f9d1d545ffd4164b650808241b51ea1bedc6a42c' }), this.renderHintText()), hAsync("div", { key: 'a96d61ac324864228f14caa0e9f2c0d15418882e', class: "native-wrapper" }, hAsync("svg", { key: '64ff3e4d87e190601811ef64323edec18d510cd1', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container", "aria-hidden": "true" }, path)))));
+            }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '23ff66138f8c3a2f56f39113fc842d54b2f7952a' }), this.renderHintText()), hAsync("div", { key: 'ab914d9623c19fc46821d5e62db92f1192ebbe7e', class: "native-wrapper" }, hAsync("svg", { key: '66e3f4f5dcaa9756fb0e9452299954f9ed3dcb7b', 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" }));
@@ -9915,6 +10091,8 @@ class Checkbox {
             "justify": [1],
             "alignment": [1],
             "required": [4],
+            "isInvalid": [32],
+            "hintTextId": [32],
             "setFocus": [64]
         },
         "$listeners$": undefined,
@@ -16349,202 +16527,6 @@ class InfiniteScrollContent {
     }; }
 }
 
-/**
- * A utility to calculate the size of an outline notch
- * width relative to the content passed. This is used in
- * components such as `ion-select` with `fill="outline"`
- * where we need to pass slotted HTML content. This is not
- * needed when rendering plaintext content because we can
- * render the plaintext again hidden with `opacity: 0` inside
- * of the notch. As a result we can rely on the intrinsic size
- * of the element to correctly compute the notch width. We
- * cannot do this with slotted content because we cannot project
- * it into 2 places at once.
- *
- * @internal
- * @param el: The host element
- * @param getNotchSpacerEl: A function that returns a reference to the notch spacer element inside of the component template.
- * @param getLabelSlot: A function that returns a reference to the slotted content.
- */
-const createNotchController = (el, getNotchSpacerEl, getLabelSlot) => {
-    let notchVisibilityIO;
-    const needsExplicitNotchWidth = () => {
-        const notchSpacerEl = getNotchSpacerEl();
-        if (
-        /**
-         * If the notch is not being used
-         * then we do not need to set the notch width.
-         */
-        notchSpacerEl === undefined ||
-            /**
-             * If either the label property is being
-             * used or the label slot is not defined,
-             * then we do not need to estimate the notch width.
-             */
-            el.label !== undefined ||
-            getLabelSlot() === null) {
-            return false;
-        }
-        return true;
-    };
-    const calculateNotchWidth = () => {
-        if (needsExplicitNotchWidth()) {
-            /**
-             * Run this the frame after
-             * the browser has re-painted the host element.
-             * Otherwise, the label element may have a width
-             * of 0 and the IntersectionObserver will be used.
-             */
-            raf(() => {
-                setNotchWidth();
-            });
-        }
-    };
-    /**
-     * When using a label prop we can render
-     * the label value inside of the notch and
-     * let the browser calculate the size of the notch.
-     * However, we cannot render the label slot in multiple
-     * places so we need to manually calculate the notch dimension
-     * based on the size of the slotted content.
-     *
-     * This function should only be used to set the notch width
-     * on slotted label content. The notch width for label prop
-     * content is automatically calculated based on the
-     * intrinsic size of the label text.
-     */
-    const setNotchWidth = () => {
-        const notchSpacerEl = getNotchSpacerEl();
-        if (notchSpacerEl === undefined) {
-            return;
-        }
-        if (!needsExplicitNotchWidth()) {
-            notchSpacerEl.style.removeProperty('width');
-            return;
-        }
-        const width = getLabelSlot().scrollWidth;
-        if (
-        /**
-         * If the computed width of the label is 0
-         * and notchSpacerEl's offsetParent is null
-         * then that means the element is hidden.
-         * As a result, we need to wait for the element
-         * to become visible before setting the notch width.
-         *
-         * We do not check el.offsetParent because
-         * that can be null if the host element has
-         * position: fixed applied to it.
-         * notchSpacerEl does not have position: fixed.
-         */
-        width === 0 &&
-            notchSpacerEl.offsetParent === null &&
-            win$1 !== undefined &&
-            'IntersectionObserver' in win$1) {
-            /**
-             * If there is an IO already attached
-             * then that will update the notch
-             * once the element becomes visible.
-             * As a result, there is no need to create
-             * another one.
-             */
-            if (notchVisibilityIO !== undefined) {
-                return;
-            }
-            const io = (notchVisibilityIO = new IntersectionObserver((ev) => {
-                /**
-                 * If the element is visible then we
-                 * can try setting the notch width again.
-                 */
-                if (ev[0].intersectionRatio === 1) {
-                    setNotchWidth();
-                    io.disconnect();
-                    notchVisibilityIO = undefined;
-                }
-            }, 
-            /**
-             * Set the root to be the host element
-             * This causes the IO callback
-             * to be fired in WebKit as soon as the element
-             * is visible. If we used the default root value
-             * then WebKit would only fire the IO callback
-             * after any animations (such as a modal transition)
-             * finished, and there would potentially be a flicker.
-             */
-            { threshold: 0.01, root: el }));
-            io.observe(notchSpacerEl);
-            return;
-        }
-        /**
-         * If the element is visible then we can set the notch width.
-         * The notch is only visible when the label is scaled,
-         * which is why we multiply the width by 0.75 as this is
-         * the same amount the label element is scaled by in the host CSS.
-         * (See $form-control-label-stacked-scale in ionic.globals.scss).
-         */
-        notchSpacerEl.style.setProperty('width', `${width * 0.75}px`);
-    };
-    const destroy = () => {
-        if (notchVisibilityIO) {
-            notchVisibilityIO.disconnect();
-            notchVisibilityIO = undefined;
-        }
-    };
-    return {
-        calculateNotchWidth,
-        destroy,
-    };
-};
-
-/**
- * Uses the compareWith param to compare two values to determine if they are equal.
- *
- * @param currentValue The current value of the control.
- * @param compareValue The value to compare against.
- * @param compareWith The function or property name to use to compare values.
- */
-const compareOptions = (currentValue, compareValue, compareWith) => {
-    if (typeof compareWith === 'function') {
-        return compareWith(currentValue, compareValue);
-    }
-    else if (typeof compareWith === 'string') {
-        return currentValue[compareWith] === compareValue[compareWith];
-    }
-    else {
-        return Array.isArray(compareValue) ? compareValue.includes(currentValue) : currentValue === compareValue;
-    }
-};
-/**
- * Compares a value against the current value(s) to determine if it is selected.
- *
- * @param currentValue The current value of the control.
- * @param compareValue The value to compare against.
- * @param compareWith The function or property name to use to compare values.
- */
-const isOptionSelected = (currentValue, compareValue, compareWith) => {
-    if (currentValue === undefined) {
-        return false;
-    }
-    if (Array.isArray(currentValue)) {
-        return currentValue.some((val) => compareOptions(val, compareValue, compareWith));
-    }
-    else {
-        return compareOptions(currentValue, compareValue, compareWith);
-    }
-};
-
-/**
- * Checks if the form element is in an invalid state based on
- * Ionic validation classes.
- *
- * @param el The form element to check.
- * @returns `true` if the element is invalid, `false` otherwise.
- */
-const checkInvalidState = (el) => {
-    const hasIonTouched = el.classList.contains('ion-touched');
-    const hasIonInvalid = el.classList.contains('ion-invalid');
-    return hasIonTouched && hasIonInvalid;
-};
-
 /**
  * Used to update a scoped component that uses emulated slots. This fires when
  * content is passed into the slot or when the content inside of a slot changes.
@@ -16739,7 +16721,7 @@ class Input {
         /**
          * Whether auto correction should be enabled when the user is entering/editing the text value.
          */
-        this.autocorrect = false;
+        this.autocorrect = 'off';
         /**
          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.
          *
@@ -17169,7 +17151,7 @@ class Input {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (hAsync(Host, { key: '39ddb0c5882d377a96979aa2b78ca6430071b277', class: createColorClasses$1(this.color, {
+        return (hAsync(Host, { key: '97b5308021064d9e7434ef2d3d96f27045c1b0c4', class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -17180,14 +17162,14 @@ class Input {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, hAsync("label", { key: '624920541bb673225cb3aee82b5ac71f4abaefbd', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: '5d1a22755ae9e14b704da04f763b177983474a97', class: "native-wrapper", onClick: this.onLabelClick }, hAsync("slot", { key: '088e13ac7550537e4e7466d0eda1053d6255f48e', name: "start" }), hAsync("input", Object.assign({ key: 'e851301b91e7e70a794c49260fe1b3e8d1f97999', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect ? 'on' : 'off', 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: '65541ba96111fc978c428d9950a7e6fe1a589a75', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, hAsync("label", { key: '353f68726ce180299bd9adc81e5ff7d26a48f54f', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), hAsync("div", { key: '2034b4bad04fc157f3298a1805819216b6f439d0', class: "native-wrapper", onClick: this.onLabelClick }, hAsync("slot", { key: '96bb5e30176b2bd76dfb75bfbf6c1c3d4403f4bb', name: "start" }), hAsync("input", Object.assign({ key: '1a1d75b0e414a95c89d5a760757c33548d234aca', 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: '95f3df17b7691d9a2e7dcd4a51f16a94aa3ca36f', "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: '3f4bc559ce36e32c7235bf642547c012805b14ab', "aria-hidden": "true", icon: clearIconData }))), hAsync("slot", { key: '0b4cd18c49350d28b3d31df73304b84748c0ed0b', name: "end" })), shouldRenderHighlight && hAsync("div", { key: '5fcbb19f0ed1f2f7b7105c040256c783132da046', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, hAsync("ion-icon", { key: '16b0af75eed50c8115fb5597f73b5fbf71c2530e', "aria-hidden": "true", icon: clearIconData }))), hAsync("slot", { key: 'c48da0f8ddb3764ac43efa705bb4a6bb2d9cc2fd', name: "end" })), shouldRenderHighlight && hAsync("div", { key: 'f15238481fc20de56ca7ecb6e350b3c024cc755e', class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -17207,7 +17189,7 @@ class Input {
             "color": [513],
             "autocapitalize": [1],
             "autocomplete": [1],
-            "autocorrect": [4],
+            "autocorrect": [1],
             "autofocus": [4],
             "clearInput": [4, "clear-input"],
             "clearInputIcon": [1, "clear-input-icon"],
@@ -28086,6 +28068,10 @@ class RadioGroup {
         this.helperTextId = `${this.inputId}-helper-text`;
         this.errorTextId = `${this.inputId}-error-text`;
         this.labelId = `${this.inputId}-lbl`;
+        /**
+         * Track validation state for proper aria-live announcements.
+         */
+        this.isInvalid = false;
         /**
          * If `true`, the radios can be deselected.
          */
@@ -28167,6 +28153,18 @@ class RadioGroup {
                 this.labelId = label.id = this.name + '-lbl';
             }
         }
+        // Always set initial state
+        this.isInvalid = checkInvalidState(this.el);
+    }
+    componentWillLoad() {
+        this.hintTextId = this.getHintTextId();
+    }
+    disconnectedCallback() {
+        // Clean up validation observer to prevent memory leaks.
+        if (this.validationObserver) {
+            this.validationObserver.disconnect();
+            this.validationObserver = undefined;
+        }
     }
     getRadios() {
         return Array.from(this.el.querySelectorAll('ion-radio'));
@@ -28242,16 +28240,16 @@ class RadioGroup {
      * Renders the helper text or error text values
      */
     renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         const hasHintText = !!helperText || !!errorText;
         if (!hasHintText) {
             return;
         }
-        return (hAsync("div", { class: "radio-group-top" }, hAsync("div", { id: helperTextId, class: "helper-text" }, helperText), hAsync("div", { id: errorTextId, class: "error-text" }, errorText)));
+        return (hAsync("div", { class: "radio-group-top" }, 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) {
+    getHintTextId() {
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+        if (isInvalid && errorText) {
             return errorTextId;
         }
         if (helperText) {
@@ -28263,7 +28261,7 @@ class RadioGroup {
         const { label, labelId, el, name, value } = this;
         const mode = getIonMode$1(this);
         renderHiddenInput(true, el, name, value, false);
-        return (hAsync(Host, { key: '81b8ebc96b2f383c36717f290d2959cc921ad6e8', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, onClick: this.onClick, class: mode }, this.renderHintText(), hAsync("div", { key: '45b09efc10776b889a8f372cba80d25a3fc849da', class: "radio-group-wrapper" }, hAsync("slot", { key: '58714934542c2fdd7396de160364f3f06b32e8f8' }))));
+        return (hAsync(Host, { key: 'db593b3ed511e9395e3c7bfd91b787328692cd6d', role: "radiogroup", "aria-labelledby": label ? labelId : null, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, class: mode }, this.renderHintText(), hAsync("div", { key: '85045b45a0100a45f3b9a35d1c5a25ec63d525c4', class: "radio-group-wrapper" }, hAsync("slot", { key: '53dacb87ce62398e78771fb2efaf839ab922d946' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -28283,6 +28281,8 @@ class RadioGroup {
             "value": [1032],
             "helperText": [1, "helper-text"],
             "errorText": [1, "error-text"],
+            "isInvalid": [32],
+            "hintTextId": [32],
             "setFocus": [64]
         },
         "$listeners$": [[4, "keydown", "onKeydown"]],
@@ -31896,7 +31896,7 @@ class Searchbar {
         /**
          * Set the input's autocorrect property.
          */
-        this.autocorrect = false;
+        this.autocorrect = 'off';
         /**
          * Set the cancel button icon. Only applies to `md` mode.
          * Defaults to `arrow-back-sharp`.
@@ -32285,8 +32285,8 @@ class Searchbar {
         const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
         const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: 'c40019b58933a2e6e260de877f5d05419f477aca', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, hAsync("div", { key: '1c6b2caf907b0d457c8da2960068bfa922364996', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (hAsync(Host, { key: '4b5d8f2d7a6a1dc104d85cae6e76105d1e5123c6', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (hAsync("button", { key: '19e18775856db87daeb4b9e3d7bca0461915a0df', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, hAsync("div", { key: 'b3bbdcc033f3bd3441d619e4a252cef0dad4d07e', "aria-hidden": "true" }, mode === 'md' ? (hAsync("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (hAsync(Host, { key: '074aa60e051bfb3225e87d44bbb6346c59c73574', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -32296,14 +32296,14 @@ class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, hAsync("div", { key: '2aa1dd3bbd82b7df543ecb08fc54f106543e6c55', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: 'e0a7e751e4a84803ad8367ab0cd251e7e2a17ef3', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect ? 'on' : 'off', spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, hAsync("ion-icon", { key: '346f943e83b3236087ca78f56525c56997f60884', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: '76a685d35e47b13230f449c58946239137510cfc', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, hAsync("div", { key: '54f58a79fe36e85d9295157303f1be89c98bbdaf', class: "searchbar-input-container" }, hAsync("input", Object.assign({ key: 'f991a37fcf54d26b7ad10d89084764e03d97b9de', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: autocapitalize === 'default' ? undefined : autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, hAsync("ion-icon", { key: '8b44dd90a3292c5cf872ef16a8520675f5673494', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), hAsync("button", { key: '79d9cfed8f01268044f82811a35d323a12dca749', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: '88d8cff792861f3ae5646252db212e2461445c47', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, hAsync("ion-icon", { key: 'aa3b9fa8a61f853236783ac7bcd0b113ea65ece2', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -32325,7 +32325,7 @@ class Searchbar {
             "animated": [4],
             "autocapitalize": [1],
             "autocomplete": [1],
-            "autocorrect": [4],
+            "autocorrect": [1],
             "cancelButtonIcon": [1, "cancel-button-icon"],
             "cancelButtonText": [1, "cancel-button-text"],
             "clearIcon": [1, "clear-icon"],
@@ -33410,7 +33410,7 @@ class Select {
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes$1(this.el, ['aria-label']);
-        this.hintTextID = this.getHintTextID();
+        this.hintTextId = this.getHintTextId();
     }
     componentDidLoad() {
         /**
@@ -33909,9 +33909,9 @@ class Select {
     }
     renderListbox() {
         const { disabled, inputId, isExpanded, required } = this;
-        return (hAsync("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, "aria-describedby": this.hintTextID, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-required": `${required}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
+        return (hAsync("button", { disabled: disabled, id: inputId, "aria-label": this.ariaLabel, "aria-haspopup": "dialog", "aria-expanded": `${isExpanded}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-required": `${required}`, onFocus: this.onFocus, onBlur: this.onBlur, ref: (focusEl) => (this.focusEl = focusEl) }));
     }
-    getHintTextID() {
+    getHintTextId() {
         const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         if (isInvalid && errorText) {
             return errorTextId;
@@ -34036,7 +34036,7 @@ class Select {
             "isExpanded": [32],
             "hasFocus": [32],
             "isInvalid": [32],
-            "hintTextID": [32],
+            "hintTextId": [32],
             "open": [64]
         },
         "$listeners$": undefined,
@@ -36507,6 +36507,10 @@ class Toggle {
         this.inheritedAttributes = {};
         this.didLoad = false;
         this.activated = false;
+        /**
+         * Track validation state for proper aria-live announcements.
+         */
+        this.isInvalid = false;
         /**
          * The name of the control, which is submitted with the form data.
          */
@@ -36620,15 +36624,18 @@ class Toggle {
         });
     }
     async connectedCallback() {
+        const { didLoad, el } = this;
         /**
          * If we have not yet rendered
          * ion-toggle, then toggleTrack is not defined.
          * But if we are moving ion-toggle via appendChild,
          * then toggleTrack will be defined.
          */
-        if (this.didLoad) {
+        if (didLoad) {
             this.setupGesture();
         }
+        // Always set initial state
+        this.isInvalid = checkInvalidState(el);
     }
     componentDidLoad() {
         this.setupGesture();
@@ -36639,9 +36646,15 @@ class Toggle {
             this.gesture.destroy();
             this.gesture = undefined;
         }
+        // Clean up validation observer to prevent memory leaks.
+        if (this.validationObserver) {
+            this.validationObserver.disconnect();
+            this.validationObserver = undefined;
+        }
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+        this.hintTextId = this.getHintTextId();
     }
     onStart() {
         this.activated = true;
@@ -36682,9 +36695,9 @@ class Toggle {
     get hasLabel() {
         return this.el.textContent !== '';
     }
-    getHintTextID() {
-        const { el, helperText, errorText, helperTextId, errorTextId } = this;
-        if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
+    getHintTextId() {
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+        if (isInvalid && errorText) {
             return errorTextId;
         }
         if (helperText) {
@@ -36697,7 +36710,7 @@ class Toggle {
      * This element should only be rendered if hint text is set.
      */
     renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         /**
          * undefined and empty string values should
          * be treated as not having helper/error text.
@@ -36706,15 +36719,15 @@ class Toggle {
         if (!hasHintText) {
             return;
         }
-        return (hAsync("div", { class: "toggle-bottom" }, hAsync("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text" }, helperText), hAsync("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text" }, errorText)));
+        return (hAsync("div", { class: "toggle-bottom" }, hAsync("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text", "aria-live": "polite" }, !isInvalid ? helperText : null), hAsync("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text", role: "alert" }, isInvalid ? errorText : null)));
     }
     render() {
-        const { activated, alignment, checked, color, disabled, el, errorTextId, hasLabel, inheritedAttributes, inputId, inputLabelId, justify, labelPlacement, name, required, } = this;
+        const { activated, alignment, checked, color, disabled, el, hasLabel, inheritedAttributes, inputId, inputLabelId, justify, labelPlacement, name, required, } = this;
         const mode = getIonMode$1(this);
         const value = this.getValue();
         const rtl = isRTL$1(el) ? 'rtl' : 'ltr';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (hAsync(Host, { key: '17bbbc8d229868e5c872b2bc5a3faf579780c5e0', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === errorTextId, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses$1(color, {
+        return (hAsync(Host, { key: 'f569148edd89ee041a4719ffc4733c16b05229bd', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses$1(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -36724,10 +36737,10 @@ class Toggle {
                 [`toggle-alignment-${alignment}`]: alignment !== undefined,
                 [`toggle-label-placement-${labelPlacement}`]: true,
                 [`toggle-${rtl}`]: true,
-            }) }, hAsync("label", { key: '673625b62a2c909e95dccb642c91312967a6cd1c', class: "toggle-wrapper", htmlFor: inputId }, hAsync("input", Object.assign({ key: '7dc3f357b4708116663970047765da9f8f845bf0', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), hAsync("div", { key: '8f1c6a182031e8cbc6727e5f4ac0e00ad4247447', class: {
+            }) }, hAsync("label", { key: '3027f2ac4be6de422a14486d847fbee77f615db1', class: "toggle-wrapper", htmlFor: inputId }, hAsync("input", Object.assign({ key: '4b0304c9e879e432b80184b4e5de37d55c11b436', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), hAsync("div", { key: '8ef265ec942e7f01ff31cbb202ed146c6bf94e02', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '8322b9d54dc7edeb4e16fefcde9f7ebca8d5c3e1' }), this.renderHintText()), hAsync("div", { key: 'fe6984143db817a7b3020a3f57cf5418fc3dcc0e', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, hAsync("slot", { key: '7b162b7dd27199cca2a4c995276a18b9f8e44aaf' }), this.renderHintText()), hAsync("div", { key: 'd13c34bd42fca01cc73ddb4ea7e471b33a282a3e', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -36753,7 +36766,9 @@ class Toggle {
             "justify": [1],
             "alignment": [1],
             "required": [4],
-            "activated": [32]
+            "activated": [32],
+            "isInvalid": [32],
+            "hintTextId": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -37910,7 +37925,7 @@ var NAMESPACE = (
 );
 
 /*
- Stencil Hydrate Runner v4.38.3 | MIT Licensed | https://stenciljs.com
+ Stencil Hydrate Runner v4.38.0 | MIT Licensed | https://stenciljs.com
  */
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -38071,6 +38086,82 @@ var MockAttr = class {
   }
 };
 
+// src/mock-doc/class-list.ts
+var MockClassList = class {
+  constructor(elm) {
+    this.elm = elm;
+  }
+  add(...classNames) {
+    const clsNames = getItems(this.elm);
+    let updated = false;
+    classNames.forEach((className) => {
+      className = String(className);
+      validateClass(className);
+      if (clsNames.includes(className) === false) {
+        clsNames.push(className);
+        updated = true;
+      }
+    });
+    if (updated) {
+      this.elm.setAttributeNS(null, "class", clsNames.join(" "));
+    }
+  }
+  remove(...classNames) {
+    const clsNames = getItems(this.elm);
+    let updated = false;
+    classNames.forEach((className) => {
+      className = String(className);
+      validateClass(className);
+      const index = clsNames.indexOf(className);
+      if (index > -1) {
+        clsNames.splice(index, 1);
+        updated = true;
+      }
+    });
+    if (updated) {
+      this.elm.setAttributeNS(null, "class", clsNames.filter((c) => c.length > 0).join(" "));
+    }
+  }
+  contains(className) {
+    className = String(className);
+    return getItems(this.elm).includes(className);
+  }
+  toggle(className) {
+    className = String(className);
+    if (this.contains(className) === true) {
+      this.remove(className);
+    } else {
+      this.add(className);
+    }
+  }
+  get length() {
+    return getItems(this.elm).length;
+  }
+  item(index) {
+    return getItems(this.elm)[index];
+  }
+  toString() {
+    return getItems(this.elm).join(" ");
+  }
+};
+function validateClass(className) {
+  if (className === "") {
+    throw new Error("The token provided must not be empty.");
+  }
+  if (/\s/.test(className)) {
+    throw new Error(
+      `The token provided ('${className}') contains HTML space characters, which are not valid in tokens.`
+    );
+  }
+}
+function getItems(elm) {
+  const className = elm.getAttribute("class");
+  if (typeof className === "string" && className.length > 0) {
+    return className.trim().split(" ").filter((c) => c.length > 0);
+  }
+  return [];
+}
+
 // src/mock-doc/css-style-declaration.ts
 var MockCSSStyleDeclaration = class {
   constructor() {
@@ -48586,81 +48677,6 @@ var STRUCTURE_ELEMENTS = /* @__PURE__ */ new Set([
   "style"
 ]);
 
-// src/mock-doc/token-list.ts
-var MockTokenList = class {
-  constructor(elm, attr) {
-    this.elm = elm;
-    this.attr = attr;
-  }
-  add(...tokens) {
-    const items = getItems(this.elm, this.attr);
-    let updated = false;
-    tokens.forEach((token) => {
-      token = String(token);
-      validateToken(token);
-      if (items.includes(token) === false) {
-        items.push(token);
-        updated = true;
-      }
-    });
-    if (updated) {
-      this.elm.setAttributeNS(null, this.attr, items.join(" "));
-    }
-  }
-  remove(...tokens) {
-    const items = getItems(this.elm, this.attr);
-    let updated = false;
-    tokens.forEach((token) => {
-      token = String(token);
-      validateToken(token);
-      const index = items.indexOf(token);
-      if (index > -1) {
-        items.splice(index, 1);
-        updated = true;
-      }
-    });
-    if (updated) {
-      this.elm.setAttributeNS(null, this.attr, items.filter((c) => c.length > 0).join(" "));
-    }
-  }
-  contains(token) {
-    token = String(token);
-    return getItems(this.elm, this.attr).includes(token);
-  }
-  toggle(token) {
-    token = String(token);
-    if (this.contains(token) === true) {
-      this.remove(token);
-    } else {
-      this.add(token);
-    }
-  }
-  get length() {
-    return getItems(this.elm, this.attr).length;
-  }
-  item(index) {
-    return getItems(this.elm, this.attr)[index];
-  }
-  toString() {
-    return getItems(this.elm, this.attr).join(" ");
-  }
-};
-function validateToken(token) {
-  if (token === "") {
-    throw new Error("The token provided must not be empty.");
-  }
-  if (/\s/.test(token)) {
-    throw new Error(`The token provided ('${token}') contains HTML space characters, which are not valid in tokens.`);
-  }
-}
-function getItems(elm, attr) {
-  const value = elm.getAttribute(attr);
-  if (typeof value === "string" && value.length > 0) {
-    return value.trim().split(" ").filter((c) => c.length > 0);
-  }
-  return [];
-}
-
 // src/mock-doc/node.ts
 var MockNode2 = class {
   constructor(ownerDocument, nodeType, nodeName, nodeValue) {
@@ -48928,10 +48944,7 @@ var MockElement = class extends MockNode2 {
     this.setAttributeNS(null, "class", value);
   }
   get classList() {
-    return new MockTokenList(this, "class");
-  }
-  get part() {
-    return new MockTokenList(this, "part");
+    return new MockClassList(this);
   }
   click() {
     dispatchEvent(this, new MockEvent("click", { bubbles: true, cancelable: true, composed: true }));
@@ -51814,7 +51827,7 @@ var MockDocument = class _MockDocument extends MockHTMLElement {
   }
   set location(val) {
     if (this.defaultView != null) {
-      this.defaultView.location.href = val;
+      this.defaultView.location = val;
     }
   }
   get baseURI() {