From de20541486bcf6e1d15f0ae5b0c5f177cce5eb38 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 10 Aug 2022 15:12:51 -0500
Subject: [PATCH] fix(item): form validation caret color renders correctly
 (#25725)

resolves #25719
---
 core/src/components/item/item.md.scss         | 2 +-
 core/src/components/item/item.scss            | 4 ----
 core/src/components/item/test/fill/index.html | 8 ++++----
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss
index d129374689..8077fb4df7 100644
--- a/core/src/components/item/item.md.scss
+++ b/core/src/components/item/item.md.scss
@@ -103,7 +103,7 @@
 }
 
 :host(.item-has-focus) .item-native {
-  caret-color: var(--highlight-color-focused);
+  caret-color: var(--highlight-background);
 }
 
 // Material Design Item Lines
diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss
index 46d792fa76..f65719bb3b 100644
--- a/core/src/components/item/item.scss
+++ b/core/src/components/item/item.scss
@@ -390,10 +390,6 @@ button, a {
   pointer-events: none;
 }
 
-:host(.item-interactive.item-has-focus) .item-native {
-  caret-color: var(--highlight-background);
-}
-
 // Item Input Focused
 // --------------------------------------------------
 
diff --git a/core/src/components/item/test/fill/index.html b/core/src/components/item/test/fill/index.html
index 295a3f505c..678f577cc7 100644
--- a/core/src/components/item/test/fill/index.html
+++ b/core/src/components/item/test/fill/index.html
@@ -78,7 +78,7 @@
               </ion-item>
             </ion-col>
             <ion-col>
-              <ion-item class="ion-invalid" fill="solid">
+              <ion-item class="ion-valid" fill="solid">
                 <ion-label position="floating">Standard</ion-label>
                 <ion-icon slot="end" name="trash"></ion-icon>
                 <ion-input></ion-input>
@@ -134,7 +134,7 @@
               </ion-item>
             </ion-col>
             <ion-col>
-              <ion-item class="ion-invalid" fill="solid" shape="round">
+              <ion-item class="ion-valid" fill="solid" shape="round">
                 <ion-label position="floating">Standard</ion-label>
                 <ion-icon slot="end" name="trash"></ion-icon>
                 <ion-input></ion-input>
@@ -190,7 +190,7 @@
               </ion-item>
             </ion-col>
             <ion-col>
-              <ion-item class="ion-invalid" fill="outline">
+              <ion-item class="ion-valid" fill="outline">
                 <ion-label position="floating">Standard</ion-label>
                 <ion-icon slot="end" name="trash"></ion-icon>
                 <ion-input></ion-input>
@@ -246,7 +246,7 @@
               </ion-item>
             </ion-col>
             <ion-col>
-              <ion-item class="ion-invalid" fill="outline" shape="round">
+              <ion-item class="ion-valid" fill="outline" shape="round">
                 <ion-label position="floating">Standard</ion-label>
                 <ion-icon slot="end" name="trash"></ion-icon>
                 <ion-input></ion-input>