From 8247c9ee743fc208747d14a5f413a6e2ebdefb3d Mon Sep 17 00:00:00 2001
From: Serhii Kulykov <iamkulykov@gmail.com>
Date: Thu, 14 Mar 2024 09:22:04 +0200
Subject: [PATCH] fix: improve readonly invalid input container styles (#7204)

---
 .../test/visual/lumo/input-container.test.js      |   6 ++++++
 .../input-container/baseline/readonly-invalid.png | Bin 0 -> 690 bytes
 .../theme/lumo/vaadin-input-container-styles.js   |   2 +-
 3 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 packages/input-container/test/visual/lumo/screenshots/input-container/baseline/readonly-invalid.png

diff --git a/packages/input-container/test/visual/lumo/input-container.test.js b/packages/input-container/test/visual/lumo/input-container.test.js
index ad4e26d497..993eeae9bd 100644
--- a/packages/input-container/test/visual/lumo/input-container.test.js
+++ b/packages/input-container/test/visual/lumo/input-container.test.js
@@ -35,6 +35,12 @@ describe('input-container', () => {
     await visualDiff(div, 'invalid');
   });
 
+  it('readonly invalid', async () => {
+    element.readonly = true;
+    element.invalid = true;
+    await visualDiff(div, 'readonly-invalid');
+  });
+
   it('prefix icon', async () => {
     const icon = document.createElement('vaadin-icon');
     icon.setAttribute('slot', 'prefix');
diff --git a/packages/input-container/test/visual/lumo/screenshots/input-container/baseline/readonly-invalid.png b/packages/input-container/test/visual/lumo/screenshots/input-container/baseline/readonly-invalid.png
new file mode 100644
index 0000000000000000000000000000000000000000..99bc110fef7a30786e6c4972139603a48ebddcdb
GIT binary patch
literal 690
zcmeAS@N?(olHy`uVBq!ia0vp^uYlNsgAGW2PD;rFQjEnx?oJHr&dI!FU|`Deba4!+
znDh4TX>aL5k)t1t19OZ#lXHU>A6@c@d3V5)?EiJwUAF{8H=9iq`gl?8Z15z%@LR2n
z>yuOWy!^g-&mBd3j`kK~W?`2=5zYgfr+NKiV0h;qz{t*_^?<>VRYqY&12c<gLBj$j
zK7o(}j7?k?27f0!t$RH^t?hc2$+=Kl+ud{D=j3}#D*MhSJoBym)hn;QsCdp^oqG1!
zq0V_%rNmdwkM){#YH5=e_tDOIrnh5dLtal>Qe(Dw?bfc_H=j>_&s7{58m2X?I(R~8
zLT$^3O@-?oA6Blt5fLW9@{FJ1L%4|Rt1oP`yq1bgdnUT%^0L=w>TCV|Usdh@Gi?G>
zzW_^PQDW50FFkB$m;JOV4tTyPv-PF;Mn3ij>-yQ_&+dM<K=17SzETN>$Gq;!pVwKg
z*m}%$&0z)!{rP8Sl%I9noB4?0k92gl=x4p}fsHLDw_`zSo=*BZkH6vf-8<=94cNDC
z3g`jq?{}ZcqS9i-S<ryMGYqD9Iyh-eW?)C)22N*E6+ZAhwdCc>l@aZX263xzo4=pc
zylY<&$j#-YznN>TcN@K*-5eF6lWFp6ZQTE;W99P963G@)FN3$PTbla2fBw(j$CIx7
z`xtyx|M;tI)=@h9s>;?+c>eYCx0xz$-^t#q+irbZ`v23M|0|Y-Em!xv6{DMNCT{mK
zC;RW*Pn-3x_6401f0puf!2%`^Hh(onSR6ZGO#puwzpHsS^M$uX0TUsEr>mdKI;Vst
E06dH+lK=n!

literal 0
HcmV?d00001

diff --git a/packages/input-container/theme/lumo/vaadin-input-container-styles.js b/packages/input-container/theme/lumo/vaadin-input-container-styles.js
index bbf7e2e0b3..9a4c2e44d2 100644
--- a/packages/input-container/theme/lumo/vaadin-input-container-styles.js
+++ b/packages/input-container/theme/lumo/vaadin-input-container-styles.js
@@ -93,7 +93,7 @@ registerStyles(
       background: var(--_invalid-background);
     }
 
-    :host([invalid])::after {
+    :host([invalid]:not([readonly]))::after {
       background: var(--_invalid-hover-highlight);
     }