fix(auth): secure hydration and align password forms

packages/ui/components/StrongPassword.wrn

@@ -174,7 +174,7 @@ component StrongPassword {
                   {#if requireLowercase}<li data-met="{password && hasLowercase() ? 'true' : 'false'}"><span aria-hidden="true"></span>One lowercase letter</li>{/if}
                   {#if requireUppercase}<li data-met="{password && hasUppercase() ? 'true' : 'false'}"><span aria-hidden="true"></span>One uppercase letter</li>{/if}
                   {#if requireNumber}<li data-met="{password && hasNumber() ? 'true' : 'false'}"><span aria-hidden="true"></span>One number</li>{/if}
-                  {#if requireSpecialCharacter}<li data-met="{password && hasSpecialCharacter() ? 'true' : 'false'}"><span aria-hidden="true"></span>One special character: {specialCharactersSet}</li>{/if}
+                  {#if requireSpecialCharacter}<li class="wire-next__strong-password-special" data-met="{password && hasSpecialCharacter() ? 'true' : 'false'}"><span aria-hidden="true"></span>One special character: {specialCharactersSet}</li>{/if}
                 </ul>
               {/if}
               {#if hintText}<small id="{name}-hint">{hintText}</small>{/if}
@@ -205,7 +205,7 @@ component StrongPassword {
               {#if requireLowercase}<li data-met="{password && hasLowercase() ? 'true' : 'false'}"><span aria-hidden="true"></span>One lowercase letter</li>{/if}
               {#if requireUppercase}<li data-met="{password && hasUppercase() ? 'true' : 'false'}"><span aria-hidden="true"></span>One uppercase letter</li>{/if}
               {#if requireNumber}<li data-met="{password && hasNumber() ? 'true' : 'false'}"><span aria-hidden="true"></span>One number</li>{/if}
-              {#if requireSpecialCharacter}<li data-met="{password && hasSpecialCharacter() ? 'true' : 'false'}"><span aria-hidden="true"></span>One special character: {specialCharactersSet}</li>{/if}
+              {#if requireSpecialCharacter}<li class="wire-next__strong-password-special" data-met="{password && hasSpecialCharacter() ? 'true' : 'false'}"><span aria-hidden="true"></span>One special character: {specialCharactersSet}</li>{/if}
             </ul>
           {/if}
           {#if hintText}<small id="{name}-hint">{hintText}</small>{/if}
@@ -236,8 +236,8 @@ component StrongPassword {
 
     .wire-next--strong-password input {
       width: 100%;
-      min-height: 2.75em;
-      padding: 0.68em 0.85em;
+      min-height: 2.65rem;
+      padding: 0.7rem 0.85rem;
       border: 1px solid var(--wire-color-border);
       border-radius: var(--wire-radius-sm);
       outline: 0;
@@ -322,6 +322,15 @@ component StrongPassword {
       line-height: 1.45;
     }
 
+    .wire-next__strong-password-requirements .wire-next__strong-password-special {
+      grid-column: 1 / -1;
+      white-space: nowrap;
+    }
+
+    .wire-next__strong-password-special [data-text="specialCharactersSet"] {
+      white-space: nowrap;
+    }
+
     .wire-next__strong-password-requirements li > span[aria-hidden="true"] {
       position: relative;
       width: 0.9rem;

packages/ui/components/TogglePassword.wrn

@@ -29,6 +29,8 @@ component TogglePassword {
     invalid: boolean = false
     helpText: string = ""
     validationMessage: string = ""
+    cornerHint: string = ""
+    cornerHref: string = ""
     class: string = ""
 }
 
@@ -98,7 +100,12 @@ component TogglePassword {
           {/each}
         </div>
       {:else}
-        <label for="{name}-password">{label}</label>
+        <div class="wire-next__password-heading">
+          <label for="{name}-password">{label}</label>
+          {#if cornerHint}
+            {#if cornerHref}<a href="{cornerHref}">{cornerHint}</a>{:else}<span>{cornerHint}</span>{/if}
+          {/if}
+        </div>
         <div class="wire-next__password-control">
           <input
             {...attrs}
@@ -172,6 +179,28 @@ component TogglePassword {
       font-weight: 600;
     }
 
+    .wire-next__password-heading {
+      display: flex;
+      min-width: 0;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+      color: var(--wire-color-text);
+      font-size: 0.75rem;
+      font-weight: 600;
+    }
+
+    .wire-next__password-heading :is(a, span) {
+      color: var(--wire-component-color);
+      font-size: 0.75rem;
+      font-weight: 500;
+      text-decoration: none;
+    }
+
+    .wire-next__password-heading a:hover {
+      text-decoration: underline;
+    }
+
     .wire-next__password-fields {
       display: grid;
       gap: 1rem;

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.8.10",
+  "version": "0.8.11",
   "private": true,
   "type": "module",
   "main": "src/index.ts",