fix(ui): style password validation errors and invalid borders

bun.lock

@@ -688,7 +688,7 @@
     },
     "packages/ui": {
       "name": "@wrnexus/ui",
-      "version": "0.8.58",
+      "version": "0.8.59",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
       },

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;

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%;

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",

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();
   }
 });