fix(auth): keep signup fields readable

bun.lock

@@ -212,7 +212,7 @@
     },
     "packages/auth": {
       "name": "@wrnexus/auth",
-      "version": "0.8.8",
+      "version": "0.8.9",
       "dependencies": {
         "@wrnexus/authz": "workspace:*",
         "@wrnexus/captcha": "workspace:*",
@@ -617,7 +617,7 @@
     },
     "packages/ui": {
       "name": "@wrnexus/ui",
-      "version": "0.8.9",
+      "version": "0.8.10",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
       },

packages/auth/components/SignUp.wrn

@@ -105,7 +105,7 @@ component SignUp {
         {/if}
 
         <div
-          class="space-y-1.5 sm:col-span-2"
+          class="wire-auth-sign-up__wide space-y-1.5 sm:col-span-2"
         >
           <StrongPassword
             label="Password"
@@ -130,7 +130,7 @@ component SignUp {
             label="I agree to the"
             color="{color}"
             size="{size}"
-            class="sm:col-span-2"
+            class="wire-auth-sign-up__wide sm:col-span-2"
           >
             <span
               class="flex items-center"
@@ -157,7 +157,7 @@ component SignUp {
         {/if}
 
         <div
-          class="sm:col-span-2"
+          class="wire-auth-sign-up__wide sm:col-span-2"
         >
           <slot></slot>
         </div>
@@ -165,14 +165,14 @@ component SignUp {
         <p
           data-error="_form"
           role="alert"
-          class="m-0 hidden rounded-[var(--wire-radius-sm)] bg-[color-mix(in_srgb,var(--wire-color-danger)_10%,transparent)] p-3 text-sm text-[var(--wire-color-danger)] sm:col-span-2"
+          class="wire-auth-sign-up__wide m-0 hidden rounded-[var(--wire-radius-sm)] bg-[color-mix(in_srgb,var(--wire-color-danger)_10%,transparent)] p-3 text-sm text-[var(--wire-color-danger)] sm:col-span-2"
         >
         </p>
         <p
           data-success="Account created successfully."
           role="status"
           hidden
-          class="m-0 rounded-[var(--wire-radius-sm)] bg-[color-mix(in_srgb,var(--wire-color-success)_10%,transparent)] p-3 text-sm text-[var(--wire-color-success)] sm:col-span-2"
+          class="wire-auth-sign-up__wide m-0 rounded-[var(--wire-radius-sm)] bg-[color-mix(in_srgb,var(--wire-color-success)_10%,transparent)] p-3 text-sm text-[var(--wire-color-success)] sm:col-span-2"
         >
         </p>
 
@@ -183,7 +183,7 @@ component SignUp {
           color="{color}"
           size="{size}"
           fullWidth="true"
-          class="sm:col-span-2"
+          class="wire-auth-sign-up__wide sm:col-span-2"
         />
       </form>
 
@@ -194,4 +194,11 @@ component SignUp {
       </p>
     </section>
   }
+
+  style {
+    .wire-auth-sign-up__wide {
+      grid-column: 1 / -1;
+      min-width: 0;
+    }
+  }
 }

packages/auth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/auth",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "description": "Complete authentication, account security, MFA, passkeys, recovery, devices, risk, and audit system for WRNexusJS.",
   "type": "module",
   "sideEffects": false,

packages/ui/components/StrongPassword.wrn

@@ -322,7 +322,7 @@ component StrongPassword {
       line-height: 1.45;
     }
 
-    .wire-next__strong-password-requirements li > span {
+    .wire-next__strong-password-requirements li > span[aria-hidden="true"] {
       position: relative;
       width: 0.9rem;
       height: 0.9rem;
@@ -332,7 +332,7 @@ component StrongPassword {
       border-radius: 50%;
     }
 
-    .wire-next__strong-password-requirements li > span::after {
+    .wire-next__strong-password-requirements li > span[aria-hidden="true"]::after {
       position: absolute;
       top: 0.12rem;
       left: 0.29rem;
@@ -349,12 +349,12 @@ component StrongPassword {
       color: var(--wire-color-success);
     }
 
-    .wire-next__strong-password-requirements li[data-met="true"] > span {
+    .wire-next__strong-password-requirements li[data-met="true"] > span[aria-hidden="true"] {
       border-color: var(--wire-color-success);
       background: var(--wire-color-success);
     }
 
-    .wire-next__strong-password-requirements li[data-met="true"] > span::after {
+    .wire-next__strong-password-requirements li[data-met="true"] > span[aria-hidden="true"]::after {
       opacity: 1;
     }
 

packages/ui/package.json

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