From 3edb75bba6990e512fd55e5c6f5aeae0fb2bf215 Mon Sep 17 00:00:00 2001
From: Ilya Siamionau <ilya.siamionau@datadoghq.com>
Date: Sat, 25 Apr 2026 00:10:27 +0200
Subject: [PATCH] Fix invalid state styling on vscode-textfield

The :host([invalid]) selectors set border-color but the border lives on .root, so the rule had no effect. Retarget them to .root and move the error background there too, so the red fill follows the rounded corners instead of poking out as a square.

Also unquote the font-weight fallback (the quoted 'normal' keyword made the declaration invalid) and align the border fallback default with the background default so they match when no CSS variable is set.

Add a test for invalid property reflection and update the cssprop docs.
---
 .../validation-min-validation.html            |  2 +-
 .../validation-on-value-change.html           |  2 +-
 .../vscode-textfield.styles.ts                | 19 ++++++++++---------
 src/vscode-textfield/vscode-textfield.test.ts | 18 ++++++++++++++++++
 src/vscode-textfield/vscode-textfield.ts      |  3 +--
 5 files changed, 31 insertions(+), 13 deletions(-)
diff --git a/dev/vscode-textfield/validation-min-validation.html b/dev/vscode-textfield/validation-min-validation.html
index 48cc51c64..f05708a80 100644
--- a/dev/vscode-textfield/validation-min-validation.html
+++ b/dev/vscode-textfield/validation-min-validation.html
@@ -21,7 +21,7 @@
   <body class="vscode-light">
     <main>
       <h1>Textfield</h1>
-      <h2>File input</h2>
+      <h2>Validation min validation</h2>
       <vscode-demo>
         <style>
           input[type='number']:invalid {
diff --git a/dev/vscode-textfield/validation-on-value-change.html b/dev/vscode-textfield/validation-on-value-change.html
index 63031f34c..0555827e1 100644
--- a/dev/vscode-textfield/validation-on-value-change.html
+++ b/dev/vscode-textfield/validation-on-value-change.html
@@ -21,7 +21,7 @@
   <body class="vscode-light">
     <main>
       <h1>Textfield</h1>
-      <h2>File input</h2>
+      <h2>Validation on value change</h2>
       <vscode-demo>
         <style>
           input[type='text']:invalid {
diff --git a/src/vscode-textfield/vscode-textfield.styles.ts b/src/vscode-textfield/vscode-textfield.styles.ts
index b9bc81bca..69967e364 100644
--- a/src/vscode-textfield/vscode-textfield.styles.ts
+++ b/src/vscode-textfield/vscode-textfield.styles.ts
@@ -17,7 +17,7 @@ const styles: CSSResultGroup = [
       background-color: var(--vscode-settings-textInputBackground, #313131);
       border-color: var(
         --vscode-settings-textInputBorder,
-        var(--vscode-settings-textInputBackground, #3c3c3c)
+        var(--vscode-settings-textInputBackground, #313131)
       );
       border-radius: 4px;
       border-style: solid;
@@ -34,14 +34,15 @@ const styles: CSSResultGroup = [
       border-color: var(--vscode-focusBorder, #0078d4);
     }
 
-    :host([invalid]),
-    :host(:invalid) {
+    :host([invalid]) .root,
+    :host(:invalid) .root {
+      background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d);
       border-color: var(--vscode-inputValidation-errorBorder, #be1100);
     }
 
-    :host([invalid]) input,
-    :host(:invalid) input {
-      background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d);
+    :host([invalid][focused]) .root,
+    :host(:invalid[focused]) .root {
+      border-color: var(--vscode-inputValidation-errorBorder, #be1100);
     }
 
     ::slotted([slot='content-before']) {
@@ -61,14 +62,14 @@ const styles: CSSResultGroup = [
     }
 
     input {
-      background-color: var(--vscode-settings-textInputBackground, #313131);
+      background-color: transparent;
       border: 0;
       box-sizing: border-box;
       color: var(--vscode-settings-textInputForeground, #cccccc);
       display: block;
       font-family: var(--vscode-font-family, ${defaultFontStack});
       font-size: var(--vscode-font-size, 13px);
-      font-weight: var(--vscode-font-weight, 'normal');
+      font-weight: var(--vscode-font-weight, normal);
       line-height: 18px;
       outline: none;
       padding-bottom: 3px;
@@ -102,7 +103,7 @@ const styles: CSSResultGroup = [
       cursor: pointer;
       font-family: var(--vscode-font-family, ${defaultFontStack});
       font-size: var(--vscode-font-size, 13px);
-      font-weight: var(--vscode-font-weight, 'normal');
+      font-weight: var(--vscode-font-weight, normal);
       line-height: 20px;
       padding: 0 14px;
     }
diff --git a/src/vscode-textfield/vscode-textfield.test.ts b/src/vscode-textfield/vscode-textfield.test.ts
index 7d1812920..8968af222 100644
--- a/src/vscode-textfield/vscode-textfield.test.ts
+++ b/src/vscode-textfield/vscode-textfield.test.ts
@@ -277,4 +277,22 @@ describe('vscode-textfield', () => {
 
     expect(el.checkValidity()).to.eq(false);
   });
+
+  it('should reflect invalid property to the invalid attribute', async () => {
+    const el = await fixture<VscodeTextfield>(
+      '<vscode-textfield></vscode-textfield>'
+    );
+
+    expect(el.hasAttribute('invalid')).to.be.false;
+
+    el.invalid = true;
+    await el.updateComplete;
+
+    expect(el.hasAttribute('invalid')).to.be.true;
+
+    el.invalid = false;
+    await el.updateComplete;
+
+    expect(el.hasAttribute('invalid')).to.be.false;
+  });
 });
diff --git a/src/vscode-textfield/vscode-textfield.ts b/src/vscode-textfield/vscode-textfield.ts
index 4aa97d4fd..3af6cf18e 100644
--- a/src/vscode-textfield/vscode-textfield.ts
+++ b/src/vscode-textfield/vscode-textfield.ts
@@ -36,9 +36,8 @@ type InputType =
  * @fires {Event} change
  *
  * @cssprop [--vscode-settings-textInputBackground=#313131]
- * @cssprop [--vscode-settings-textInputBorder=var(--vscode-settings-textInputBackground, #3c3c3c)]
+ * @cssprop [--vscode-settings-textInputBorder=var(--vscode-settings-textInputBackground, #313131)]
  * @cssprop [--vscode-settings-textInputForeground=#cccccc]
- * @cssprop [--vscode-settings-textInputBackground=#313131]
  * @cssprop [--vscode-focusBorder=#0078d4]
  * @cssprop [--vscode-font-family=sans-serif] - A sans-serif font type depends on the host OS.
  * @cssprop [--vscode-font-size=13px]
