From b1b84eb41cade09d7bb3107d041adf597878ac3f Mon Sep 17 00:00:00 2001
From: Ajay Ghanwat <ghanwat.ajay@workroot.in>
Date: Wed, 26 Aug 2026 17:40:01 +0530
Subject: [PATCH] fix(ui): style password validation errors and invalid borders

---
 bun.lock                                  | 2 +-
 packages/ui/components/StrongPassword.wrn | 5 ++++-
 packages/ui/components/TogglePassword.wrn | 5 ++++-
 packages/ui/package.json                  | 2 +-
 packages/ui/test/ui.test.ts               | 8 ++++++++
 5 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/bun.lock b/bun.lock
index 567db831..56b0b71c 100644
--- a/bun.lock
+++ b/bun.lock
@@ -688,7 +688,7 @@
     },
     "packages/ui": {
       "name": "@wrnexus/ui",
-      "version": "0.8.58",
+      "version": "0.8.59",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
       },
diff --git a/packages/ui/components/StrongPassword.wrn b/packages/ui/components/StrongPassword.wrn
index 0b0267d4..3cfb45e2 100644
--- a/packages/ui/components/StrongPassword.wrn
+++ b/packages/ui/components/StrongPassword.wrn
@@ -135,7 +135,7 @@ component StrongPassword {
 
   view {
     <div
-      class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--strong-password wrn-next--strong-password-{presentation} {invalid ? 'wrn-next--invalid' : ''} {disabled ? 'wrn-next--disabled' : ''} {class}"
+      class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--strong-password wrn-next--strong-password-{presentation} {invalid || validationMessage || nativeError ? 'wrn-next--invalid' : ''} {disabled ? 'wrn-next--disabled' : ''} {class}"
       data-wrn-strong-password
       data-strength="{password ? strengthLevel() : 'empty'}"
       data-score="{password ? score() : 0}"
@@ -245,6 +245,9 @@ component StrongPassword {
   }
 
   style {
+    .wrn-next--strong-password .wrn-next__validation {
+      color: var(--wrn-color-danger, #ef4444);
+    }
     .wrn-next--strong-password {
       position: relative;
       display: grid;
diff --git a/packages/ui/components/TogglePassword.wrn b/packages/ui/components/TogglePassword.wrn
index 76bac246..59b46343 100644
--- a/packages/ui/components/TogglePassword.wrn
+++ b/packages/ui/components/TogglePassword.wrn
@@ -64,7 +64,7 @@ component TogglePassword {
 
   view {
     <fieldset
-      class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--toggle-password {invalid ? 'wrn-next--invalid' : ''} {disabled ? 'wrn-next--disabled' : ''} {class}"
+      class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--toggle-password {invalid || validationMessage || nativeError ? 'wrn-next--invalid' : ''} {disabled ? 'wrn-next--disabled' : ''} {class}"
       data-wrn-toggle-password
       data-visible="{revealed ? 'true' : 'false'}"
     >
@@ -172,6 +172,9 @@ component TogglePassword {
   }
 
   style {
+    .wrn-next--toggle-password .wrn-next__validation {
+      color: var(--wrn-color-danger, #ef4444);
+    }
     .wrn-next--toggle-password {
       display: grid;
       width: 100%;
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 9457014d..975eb8cf 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.8.58",
+  "version": "0.8.59",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/ui/test/ui.test.ts b/packages/ui/test/ui.test.ts
index 01a04430..94363545 100644
--- a/packages/ui/test/ui.test.ts
+++ b/packages/ui/test/ui.test.ts
@@ -1409,6 +1409,14 @@ test("password fields cancel native invalid popups and show inline errors", asyn
     expect(dom.querySelector("[data-error='password']")?.textContent).toContain(
       "Enter your password.",
     );
+    expect(dom.querySelector(".wrn-next--invalid")).not.toBeNull();
+    const source = readFileSync(uiComponentPath(component), "utf8");
+    expect(source).toMatch(
+      /\.wrn-next--(?:toggle|strong)-password \.wrn-next__validation\s*\{\s*color: var\(--wrn-color-danger, #ef4444\)/,
+    );
+    input.value = "ExamplePassword123!";
+    input.dispatchEvent(new (dom.window as any).Event("input", { bubbles: true }));
+    expect(dom.querySelector(".wrn-next--invalid")).toBeNull();
   }
 });