@ionic/core 8.7.4-dev.11755800369.16c1f61b → 8.7.4-dev.11755809082.11a7702b

package/components/ion-input.js

@@ -248,7 +248,16 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
      * Checks if the input is in an invalid state based on validation classes
      */
     checkValidationState() {
-        return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
+        // Check for both Ionic and Angular validation classes on the element itself
+        // Angular applies ng-touched/ng-invalid directly to the host element with ngModel
+        const hasIonTouched = this.el.classList.contains('ion-touched');
+        const hasIonInvalid = this.el.classList.contains('ion-invalid');
+        const hasNgTouched = this.el.classList.contains('ng-touched');
+        const hasNgInvalid = this.el.classList.contains('ng-invalid');
+        // Return true if we have both touched and invalid states from either framework
+        const isTouched = hasIonTouched || hasNgTouched;
+        const isInvalid = hasIonInvalid || hasNgInvalid;
+        return isTouched && isInvalid;
     }
     connectedCallback() {
         const { el } = this;
@@ -413,10 +422,10 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
      * Renders the helper text or error text values
      */
     renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         return [
-            h("div", { id: helperTextId, class: "helper-text" }, helperText),
-            h("div", { id: errorTextId, class: "error-text" }, errorText),
+            helperText && (h("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, helperText)),
+            errorText && (h("div", { id: errorTextId, class: "error-text", "aria-live": "assertive", "aria-atomic": "true", role: "alert", style: { display: isInvalid ? 'block' : 'none' } }, errorText)),
         ];
     }
     getHintTextID() {
@@ -534,7 +543,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'af93f93b33492571bd61d6b67414f16821132138', class: createColorClasses(this.color, {
+        return (h(Host, { key: '1a141906096fc637d7de923edf6a9ea3a0168f5f', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -545,14 +554,14 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: '3d52da6c568fc5d60833e759ba78981f95ad78d5', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '11adb0df91d332a5e1d5c86af88ffbe18ad185a3', class: "native-wrapper", onClick: this.onLabelClick }, h("slot", { key: 'dee0e60628bc5f849c10bae0fed4a4089769266b', name: "start" }), h("input", Object.assign({ key: 'c72e0da90c882a0233b2e27249d5b326eb89f820', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '7aec0dff5eff8dccbcb735301a0ac02f9d58b4f9', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { key: '8371432bc0fd37099d3efc50705530965f27b9e1', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '3d113da062bddf47b1bc67e67162c11fe4ee7f10', class: "native-wrapper", onClick: this.onLabelClick }, h("slot", { key: '3fe52ada4b91ebd21b21b1445b9d4009d47f8386', name: "start" }), h("input", Object.assign({ key: 'beda905e9d44797690149407ba814381ffd51d1d', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: 'bc8579a0acb727b348bcf277f296b2dac9cb583d', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.clearTextInput }, h("ion-icon", { key: '79e0789ae92590c4cea9923e4370710ba31a4c38', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '3d8d737c32ad1755954aadf14ce956f400873203', name: "end" })), shouldRenderHighlight && h("div", { key: '6d214bf9b8e4058116fd154224e93bbf33c6cb58', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: '41a64ec6fce010eb225637998d93abd859a62be7', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '9a7e6eba584748fc037aa1694d7e6e399de8b20b', name: "end" })), shouldRenderHighlight && h("div", { key: 'b828e6dc43b50f46727dda196de7ad2fecc3ef30', class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/ion-textarea.js

@@ -207,7 +207,16 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
      * Checks if the textarea is in an invalid state based on validation classes
      */
     checkValidationState() {
-        return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
+        // Check for both Ionic and Angular validation classes on the element itself
+        // Angular applies ng-touched/ng-invalid directly to the host element with ngModel
+        const hasIonTouched = this.el.classList.contains('ion-touched');
+        const hasIonInvalid = this.el.classList.contains('ion-invalid');
+        const hasNgTouched = this.el.classList.contains('ng-touched');
+        const hasNgInvalid = this.el.classList.contains('ng-invalid');
+        // Return true if we have both touched and invalid states from either framework
+        const isTouched = hasIonTouched || hasNgTouched;
+        const isInvalid = hasIonInvalid || hasNgInvalid;
+        return isTouched && isInvalid;
     }
     connectedCallback() {
         const { el } = this;
@@ -426,10 +435,10 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
      * Renders the helper text or error text values
      */
     renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         return [
-            h("div", { id: helperTextId, class: "helper-text" }, helperText),
-            h("div", { id: errorTextId, class: "error-text" }, errorText),
+            helperText && (h("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, helperText)),
+            errorText && (h("div", { id: errorTextId, class: "error-text", "aria-live": "assertive", "aria-atomic": "true", role: "alert", style: { display: isInvalid ? 'block' : 'none' } }, errorText)),
         ];
     }
     getHintTextID() {
@@ -493,7 +502,7 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '075cd9dad6f4f026e421b63e4565e092b3ea0a2a', class: createColorClasses(this.color, {
+        return (h(Host, { key: '803c7648de15b8569c3df01692548018cc660510', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -502,7 +511,7 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: 'acb810df87a8156e5f431d65ddba287831acfa97', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '6ee9e8b9dfd562a0a23f3cc4c07c7bad4d168d56', class: "textarea-wrapper-inner" }, h("div", { key: '68d1b9205ad427a2c6de6767a7eb74901fb4d508', class: "start-slot-wrapper" }, h("slot", { key: 'a3b407c79a73cba5cafb6f987d8018573a8c5993', name: "start" })), h("div", { key: '6de732e25024cee7b1da4eb923b8fa1c3b967223', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: 'e90c595b4d0d8b1f3d2ef8cc1f9ac76ccdbc741d', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), h("div", { key: 'dcb70f9b4c3b3123ca05225c3396bb65762fb12c', class: "end-slot-wrapper" }, h("slot", { key: '2b8dd7c492b60424512a7f36ba75306697875da4', name: "end" }))), shouldRenderHighlight && h("div", { key: 'f76c2c046a5a2cdcd3fa9df7a9922f429fc6dd79', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '0e3a4e5fc809437abc6780eb7f99a0c770bb9f94', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'ff8d71e2d53daf4999338232d3b0a597627a3276', class: "textarea-wrapper-inner" }, h("div", { key: '313f5a8dc8b62e8ae6a0638a7e201b2594c180eb', class: "start-slot-wrapper" }, h("slot", { key: '32db088d41398be935f7060138e4d80a832fea85', name: "start" })), h("div", { key: '24b63ff40ffcae8816f24d9c8a6ec2e7848e0e0b', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '2a4f918351f87d444d8922254eefa0941a6ca238', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), h("div", { key: '2c32636d2d13560de0a54507e1668eb9f4bcc2cf', class: "end-slot-wrapper" }, h("slot", { key: 'ccc3549246fd9d2e309958767a7a24e1be8545fd', name: "end" }))), shouldRenderHighlight && h("div", { key: 'f4719399ec530ce295b19817688b8d39d84b6b09', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -249,7 +249,16 @@ const Input = class {
      * Checks if the input is in an invalid state based on validation classes
      */
     checkValidationState() {
-        return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
+        // Check for both Ionic and Angular validation classes on the element itself
+        // Angular applies ng-touched/ng-invalid directly to the host element with ngModel
+        const hasIonTouched = this.el.classList.contains('ion-touched');
+        const hasIonInvalid = this.el.classList.contains('ion-invalid');
+        const hasNgTouched = this.el.classList.contains('ng-touched');
+        const hasNgInvalid = this.el.classList.contains('ng-invalid');
+        // Return true if we have both touched and invalid states from either framework
+        const isTouched = hasIonTouched || hasNgTouched;
+        const isInvalid = hasIonInvalid || hasNgInvalid;
+        return isTouched && isInvalid;
     }
     connectedCallback() {
         const { el } = this;
@@ -414,10 +423,10 @@ const Input = class {
      * Renders the helper text or error text values
      */
     renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         return [
-            index.h("div", { id: helperTextId, class: "helper-text" }, helperText),
-            index.h("div", { id: errorTextId, class: "error-text" }, errorText),
+            helperText && (index.h("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, helperText)),
+            errorText && (index.h("div", { id: errorTextId, class: "error-text", "aria-live": "assertive", "aria-atomic": "true", role: "alert", style: { display: isInvalid ? 'block' : 'none' } }, errorText)),
         ];
     }
     getHintTextID() {
@@ -535,7 +544,7 @@ const Input = class {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (index.h(index.Host, { key: 'af93f93b33492571bd61d6b67414f16821132138', class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '1a141906096fc637d7de923edf6a9ea3a0168f5f', class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -546,14 +555,14 @@ const Input = class {
                 'in-item': inItem,
                 'in-item-color': theme.hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, index.h("label", { key: '3d52da6c568fc5d60833e759ba78981f95ad78d5', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), index.h("div", { key: '11adb0df91d332a5e1d5c86af88ffbe18ad185a3', class: "native-wrapper", onClick: this.onLabelClick }, index.h("slot", { key: 'dee0e60628bc5f849c10bae0fed4a4089769266b', name: "start" }), index.h("input", Object.assign({ key: 'c72e0da90c882a0233b2e27249d5b326eb89f820', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (index.h("button", { key: '7aec0dff5eff8dccbcb735301a0ac02f9d58b4f9', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, index.h("label", { key: '8371432bc0fd37099d3efc50705530965f27b9e1', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), index.h("div", { key: '3d113da062bddf47b1bc67e67162c11fe4ee7f10', class: "native-wrapper", onClick: this.onLabelClick }, index.h("slot", { key: '3fe52ada4b91ebd21b21b1445b9d4009d47f8386', name: "start" }), index.h("input", Object.assign({ key: 'beda905e9d44797690149407ba814381ffd51d1d', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (index.h("button", { key: 'bc8579a0acb727b348bcf277f296b2dac9cb583d', "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 }, index.h("ion-icon", { key: '79e0789ae92590c4cea9923e4370710ba31a4c38', "aria-hidden": "true", icon: clearIconData }))), index.h("slot", { key: '3d8d737c32ad1755954aadf14ce956f400873203', name: "end" })), shouldRenderHighlight && index.h("div", { key: '6d214bf9b8e4058116fd154224e93bbf33c6cb58', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, index.h("ion-icon", { key: '41a64ec6fce010eb225637998d93abd859a62be7', "aria-hidden": "true", icon: clearIconData }))), index.h("slot", { key: '9a7e6eba584748fc037aa1694d7e6e399de8b20b', name: "end" })), shouldRenderHighlight && index.h("div", { key: 'b828e6dc43b50f46727dda196de7ad2fecc3ef30', class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ion-textarea.cjs.entry.js

@@ -209,7 +209,16 @@ const Textarea = class {
      * Checks if the textarea is in an invalid state based on validation classes
      */
     checkValidationState() {
-        return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
+        // Check for both Ionic and Angular validation classes on the element itself
+        // Angular applies ng-touched/ng-invalid directly to the host element with ngModel
+        const hasIonTouched = this.el.classList.contains('ion-touched');
+        const hasIonInvalid = this.el.classList.contains('ion-invalid');
+        const hasNgTouched = this.el.classList.contains('ng-touched');
+        const hasNgInvalid = this.el.classList.contains('ng-invalid');
+        // Return true if we have both touched and invalid states from either framework
+        const isTouched = hasIonTouched || hasNgTouched;
+        const isInvalid = hasIonInvalid || hasNgInvalid;
+        return isTouched && isInvalid;
     }
     connectedCallback() {
         const { el } = this;
@@ -428,10 +437,10 @@ const Textarea = class {
      * Renders the helper text or error text values
      */
     renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         return [
-            index.h("div", { id: helperTextId, class: "helper-text" }, helperText),
-            index.h("div", { id: errorTextId, class: "error-text" }, errorText),
+            helperText && (index.h("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, helperText)),
+            errorText && (index.h("div", { id: errorTextId, class: "error-text", "aria-live": "assertive", "aria-atomic": "true", role: "alert", style: { display: isInvalid ? 'block' : 'none' } }, errorText)),
         ];
     }
     getHintTextID() {
@@ -495,7 +504,7 @@ const Textarea = class {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (index.h(index.Host, { key: '075cd9dad6f4f026e421b63e4565e092b3ea0a2a', class: theme.createColorClasses(this.color, {
+        return (index.h(index.Host, { key: '803c7648de15b8569c3df01692548018cc660510', class: theme.createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -504,7 +513,7 @@ const Textarea = class {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, index.h("label", { key: 'acb810df87a8156e5f431d65ddba287831acfa97', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), index.h("div", { key: '6ee9e8b9dfd562a0a23f3cc4c07c7bad4d168d56', class: "textarea-wrapper-inner" }, index.h("div", { key: '68d1b9205ad427a2c6de6767a7eb74901fb4d508', class: "start-slot-wrapper" }, index.h("slot", { key: 'a3b407c79a73cba5cafb6f987d8018573a8c5993', name: "start" })), index.h("div", { key: '6de732e25024cee7b1da4eb923b8fa1c3b967223', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, index.h("textarea", Object.assign({ key: 'e90c595b4d0d8b1f3d2ef8cc1f9ac76ccdbc741d', 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)), index.h("div", { key: 'dcb70f9b4c3b3123ca05225c3396bb65762fb12c', class: "end-slot-wrapper" }, index.h("slot", { key: '2b8dd7c492b60424512a7f36ba75306697875da4', name: "end" }))), shouldRenderHighlight && index.h("div", { key: 'f76c2c046a5a2cdcd3fa9df7a9922f429fc6dd79', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, index.h("label", { key: '0e3a4e5fc809437abc6780eb7f99a0c770bb9f94', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), index.h("div", { key: 'ff8d71e2d53daf4999338232d3b0a597627a3276', class: "textarea-wrapper-inner" }, index.h("div", { key: '313f5a8dc8b62e8ae6a0638a7e201b2594c180eb', class: "start-slot-wrapper" }, index.h("slot", { key: '32db088d41398be935f7060138e4d80a832fea85', name: "start" })), index.h("div", { key: '24b63ff40ffcae8816f24d9c8a6ec2e7848e0e0b', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, index.h("textarea", Object.assign({ key: '2a4f918351f87d444d8922254eefa0941a6ca238', 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)), index.h("div", { key: '2c32636d2d13560de0a54507e1668eb9f4bcc2cf', class: "end-slot-wrapper" }, index.h("slot", { key: 'ccc3549246fd9d2e309958767a7a24e1be8545fd', name: "end" }))), shouldRenderHighlight && index.h("div", { key: 'f4719399ec530ce295b19817688b8d39d84b6b09', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/collection/components/input/input.js

@@ -244,7 +244,16 @@ export class Input {
      * Checks if the input is in an invalid state based on validation classes
      */
     checkValidationState() {
-        return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
+        // Check for both Ionic and Angular validation classes on the element itself
+        // Angular applies ng-touched/ng-invalid directly to the host element with ngModel
+        const hasIonTouched = this.el.classList.contains('ion-touched');
+        const hasIonInvalid = this.el.classList.contains('ion-invalid');
+        const hasNgTouched = this.el.classList.contains('ng-touched');
+        const hasNgInvalid = this.el.classList.contains('ng-invalid');
+        // Return true if we have both touched and invalid states from either framework
+        const isTouched = hasIonTouched || hasNgTouched;
+        const isInvalid = hasIonInvalid || hasNgInvalid;
+        return isTouched && isInvalid;
     }
     connectedCallback() {
         const { el } = this;
@@ -409,10 +418,10 @@ export 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 [
-            h("div", { id: helperTextId, class: "helper-text" }, helperText),
-            h("div", { id: errorTextId, class: "error-text" }, errorText),
+            helperText && (h("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, helperText)),
+            errorText && (h("div", { id: errorTextId, class: "error-text", "aria-live": "assertive", "aria-atomic": "true", role: "alert", style: { display: isInvalid ? 'block' : 'none' } }, errorText)),
         ];
     }
     getHintTextID() {
@@ -530,7 +539,7 @@ export class Input {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'af93f93b33492571bd61d6b67414f16821132138', class: createColorClasses(this.color, {
+        return (h(Host, { key: '1a141906096fc637d7de923edf6a9ea3a0168f5f', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -541,14 +550,14 @@ export class Input {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: '3d52da6c568fc5d60833e759ba78981f95ad78d5', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '11adb0df91d332a5e1d5c86af88ffbe18ad185a3', class: "native-wrapper", onClick: this.onLabelClick }, h("slot", { key: 'dee0e60628bc5f849c10bae0fed4a4089769266b', name: "start" }), h("input", Object.assign({ key: 'c72e0da90c882a0233b2e27249d5b326eb89f820', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '7aec0dff5eff8dccbcb735301a0ac02f9d58b4f9', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { key: '8371432bc0fd37099d3efc50705530965f27b9e1', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '3d113da062bddf47b1bc67e67162c11fe4ee7f10', class: "native-wrapper", onClick: this.onLabelClick }, h("slot", { key: '3fe52ada4b91ebd21b21b1445b9d4009d47f8386', name: "start" }), h("input", Object.assign({ key: 'beda905e9d44797690149407ba814381ffd51d1d', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: 'bc8579a0acb727b348bcf277f296b2dac9cb583d', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.clearTextInput }, h("ion-icon", { key: '79e0789ae92590c4cea9923e4370710ba31a4c38', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '3d8d737c32ad1755954aadf14ce956f400873203', name: "end" })), shouldRenderHighlight && h("div", { key: '6d214bf9b8e4058116fd154224e93bbf33c6cb58', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: '41a64ec6fce010eb225637998d93abd859a62be7', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '9a7e6eba584748fc037aa1694d7e6e399de8b20b', name: "end" })), shouldRenderHighlight && h("div", { key: 'b828e6dc43b50f46727dda196de7ad2fecc3ef30', class: "input-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -204,7 +204,16 @@ export class Textarea {
      * Checks if the textarea is in an invalid state based on validation classes
      */
     checkValidationState() {
-        return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
+        // Check for both Ionic and Angular validation classes on the element itself
+        // Angular applies ng-touched/ng-invalid directly to the host element with ngModel
+        const hasIonTouched = this.el.classList.contains('ion-touched');
+        const hasIonInvalid = this.el.classList.contains('ion-invalid');
+        const hasNgTouched = this.el.classList.contains('ng-touched');
+        const hasNgInvalid = this.el.classList.contains('ng-invalid');
+        // Return true if we have both touched and invalid states from either framework
+        const isTouched = hasIonTouched || hasNgTouched;
+        const isInvalid = hasIonInvalid || hasNgInvalid;
+        return isTouched && isInvalid;
     }
     connectedCallback() {
         const { el } = this;
@@ -423,10 +432,10 @@ export class Textarea {
      * Renders the helper text or error text values
      */
     renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         return [
-            h("div", { id: helperTextId, class: "helper-text" }, helperText),
-            h("div", { id: errorTextId, class: "error-text" }, errorText),
+            helperText && (h("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, helperText)),
+            errorText && (h("div", { id: errorTextId, class: "error-text", "aria-live": "assertive", "aria-atomic": "true", role: "alert", style: { display: isInvalid ? 'block' : 'none' } }, errorText)),
         ];
     }
     getHintTextID() {
@@ -490,7 +499,7 @@ export class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '075cd9dad6f4f026e421b63e4565e092b3ea0a2a', class: createColorClasses(this.color, {
+        return (h(Host, { key: '803c7648de15b8569c3df01692548018cc660510', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -499,7 +508,7 @@ export class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: 'acb810df87a8156e5f431d65ddba287831acfa97', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '6ee9e8b9dfd562a0a23f3cc4c07c7bad4d168d56', class: "textarea-wrapper-inner" }, h("div", { key: '68d1b9205ad427a2c6de6767a7eb74901fb4d508', class: "start-slot-wrapper" }, h("slot", { key: 'a3b407c79a73cba5cafb6f987d8018573a8c5993', name: "start" })), h("div", { key: '6de732e25024cee7b1da4eb923b8fa1c3b967223', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: 'e90c595b4d0d8b1f3d2ef8cc1f9ac76ccdbc741d', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), h("div", { key: 'dcb70f9b4c3b3123ca05225c3396bb65762fb12c', class: "end-slot-wrapper" }, h("slot", { key: '2b8dd7c492b60424512a7f36ba75306697875da4', name: "end" }))), shouldRenderHighlight && h("div", { key: 'f76c2c046a5a2cdcd3fa9df7a9922f429fc6dd79', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '0e3a4e5fc809437abc6780eb7f99a0c770bb9f94', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'ff8d71e2d53daf4999338232d3b0a597627a3276', class: "textarea-wrapper-inner" }, h("div", { key: '313f5a8dc8b62e8ae6a0638a7e201b2594c180eb', class: "start-slot-wrapper" }, h("slot", { key: '32db088d41398be935f7060138e4d80a832fea85', name: "start" })), h("div", { key: '24b63ff40ffcae8816f24d9c8a6ec2e7848e0e0b', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '2a4f918351f87d444d8922254eefa0941a6ca238', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), h("div", { key: '2c32636d2d13560de0a54507e1668eb9f4bcc2cf', class: "end-slot-wrapper" }, h("slot", { key: 'ccc3549246fd9d2e309958767a7a24e1be8545fd', name: "end" }))), shouldRenderHighlight && h("div", { key: 'f4719399ec530ce295b19817688b8d39d84b6b09', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "scoped"; }

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-08-21T18:21:21",
+  "timestamp": "2025-08-21T20:46:27",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.36.2",

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

@@ -247,7 +247,16 @@ const Input = class {
      * Checks if the input is in an invalid state based on validation classes
      */
     checkValidationState() {
-        return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
+        // Check for both Ionic and Angular validation classes on the element itself
+        // Angular applies ng-touched/ng-invalid directly to the host element with ngModel
+        const hasIonTouched = this.el.classList.contains('ion-touched');
+        const hasIonInvalid = this.el.classList.contains('ion-invalid');
+        const hasNgTouched = this.el.classList.contains('ng-touched');
+        const hasNgInvalid = this.el.classList.contains('ng-invalid');
+        // Return true if we have both touched and invalid states from either framework
+        const isTouched = hasIonTouched || hasNgTouched;
+        const isInvalid = hasIonInvalid || hasNgInvalid;
+        return isTouched && isInvalid;
     }
     connectedCallback() {
         const { el } = this;
@@ -412,10 +421,10 @@ const Input = class {
      * Renders the helper text or error text values
      */
     renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         return [
-            h("div", { id: helperTextId, class: "helper-text" }, helperText),
-            h("div", { id: errorTextId, class: "error-text" }, errorText),
+            helperText && (h("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, helperText)),
+            errorText && (h("div", { id: errorTextId, class: "error-text", "aria-live": "assertive", "aria-atomic": "true", role: "alert", style: { display: isInvalid ? 'block' : 'none' } }, errorText)),
         ];
     }
     getHintTextID() {
@@ -533,7 +542,7 @@ const Input = class {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: 'af93f93b33492571bd61d6b67414f16821132138', class: createColorClasses(this.color, {
+        return (h(Host, { key: '1a141906096fc637d7de923edf6a9ea3a0168f5f', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -544,14 +553,14 @@ const Input = class {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: '3d52da6c568fc5d60833e759ba78981f95ad78d5', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '11adb0df91d332a5e1d5c86af88ffbe18ad185a3', class: "native-wrapper", onClick: this.onLabelClick }, h("slot", { key: 'dee0e60628bc5f849c10bae0fed4a4089769266b', name: "start" }), h("input", Object.assign({ key: 'c72e0da90c882a0233b2e27249d5b326eb89f820', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '7aec0dff5eff8dccbcb735301a0ac02f9d58b4f9', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { key: '8371432bc0fd37099d3efc50705530965f27b9e1', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '3d113da062bddf47b1bc67e67162c11fe4ee7f10', class: "native-wrapper", onClick: this.onLabelClick }, h("slot", { key: '3fe52ada4b91ebd21b21b1445b9d4009d47f8386', name: "start" }), h("input", Object.assign({ key: 'beda905e9d44797690149407ba814381ffd51d1d', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: 'bc8579a0acb727b348bcf277f296b2dac9cb583d', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.clearTextInput }, h("ion-icon", { key: '79e0789ae92590c4cea9923e4370710ba31a4c38', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '3d8d737c32ad1755954aadf14ce956f400873203', name: "end" })), shouldRenderHighlight && h("div", { key: '6d214bf9b8e4058116fd154224e93bbf33c6cb58', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: '41a64ec6fce010eb225637998d93abd859a62be7', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '9a7e6eba584748fc037aa1694d7e6e399de8b20b', name: "end" })), shouldRenderHighlight && h("div", { key: 'b828e6dc43b50f46727dda196de7ad2fecc3ef30', class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -207,7 +207,16 @@ const Textarea = class {
      * Checks if the textarea is in an invalid state based on validation classes
      */
     checkValidationState() {
-        return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
+        // Check for both Ionic and Angular validation classes on the element itself
+        // Angular applies ng-touched/ng-invalid directly to the host element with ngModel
+        const hasIonTouched = this.el.classList.contains('ion-touched');
+        const hasIonInvalid = this.el.classList.contains('ion-invalid');
+        const hasNgTouched = this.el.classList.contains('ng-touched');
+        const hasNgInvalid = this.el.classList.contains('ng-invalid');
+        // Return true if we have both touched and invalid states from either framework
+        const isTouched = hasIonTouched || hasNgTouched;
+        const isInvalid = hasIonInvalid || hasNgInvalid;
+        return isTouched && isInvalid;
     }
     connectedCallback() {
         const { el } = this;
@@ -426,10 +435,10 @@ const Textarea = class {
      * Renders the helper text or error text values
      */
     renderHintText() {
-        const { helperText, errorText, helperTextId, errorTextId } = this;
+        const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         return [
-            h("div", { id: helperTextId, class: "helper-text" }, helperText),
-            h("div", { id: errorTextId, class: "error-text" }, errorText),
+            helperText && (h("div", { id: helperTextId, class: "helper-text", "aria-live": "polite" }, helperText)),
+            errorText && (h("div", { id: errorTextId, class: "error-text", "aria-live": "assertive", "aria-atomic": "true", role: "alert", style: { display: isInvalid ? 'block' : 'none' } }, errorText)),
         ];
     }
     getHintTextID() {
@@ -493,7 +502,7 @@ const Textarea = class {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '075cd9dad6f4f026e421b63e4565e092b3ea0a2a', class: createColorClasses(this.color, {
+        return (h(Host, { key: '803c7648de15b8569c3df01692548018cc660510', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -502,7 +511,7 @@ const Textarea = class {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: 'acb810df87a8156e5f431d65ddba287831acfa97', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: '6ee9e8b9dfd562a0a23f3cc4c07c7bad4d168d56', class: "textarea-wrapper-inner" }, h("div", { key: '68d1b9205ad427a2c6de6767a7eb74901fb4d508', class: "start-slot-wrapper" }, h("slot", { key: 'a3b407c79a73cba5cafb6f987d8018573a8c5993', name: "start" })), h("div", { key: '6de732e25024cee7b1da4eb923b8fa1c3b967223', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: 'e90c595b4d0d8b1f3d2ef8cc1f9ac76ccdbc741d', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), h("div", { key: 'dcb70f9b4c3b3123ca05225c3396bb65762fb12c', class: "end-slot-wrapper" }, h("slot", { key: '2b8dd7c492b60424512a7f36ba75306697875da4', name: "end" }))), shouldRenderHighlight && h("div", { key: 'f76c2c046a5a2cdcd3fa9df7a9922f429fc6dd79', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '0e3a4e5fc809437abc6780eb7f99a0c770bb9f94', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'ff8d71e2d53daf4999338232d3b0a597627a3276', class: "textarea-wrapper-inner" }, h("div", { key: '313f5a8dc8b62e8ae6a0638a7e201b2594c180eb', class: "start-slot-wrapper" }, h("slot", { key: '32db088d41398be935f7060138e4d80a832fea85', name: "start" })), h("div", { key: '24b63ff40ffcae8816f24d9c8a6ec2e7848e0e0b', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '2a4f918351f87d444d8922254eefa0941a6ca238', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined }, this.inheritedAttributes), value)), h("div", { key: '2c32636d2d13560de0a54507e1668eb9f4bcc2cf', class: "end-slot-wrapper" }, h("slot", { key: 'ccc3549246fd9d2e309958767a7a24e1be8545fd', name: "end" }))), shouldRenderHighlight && h("div", { key: 'f4719399ec530ce295b19817688b8d39d84b6b09', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {