fix(forms): preserve regex quantifiers and use inline constraint errors

packages/ui/components/TogglePassword.wrn

@@ -36,7 +36,16 @@ component TogglePassword {
 
   state revealed = visible
 
+  state nativeError: string = ""
+
   functions {
+    client function handleInvalid(sourceEvent) {
+      sourceEvent.preventDefault()
+      sourceEvent.stopPropagation()
+      nativeError = validationMessage || (sourceEvent.currentTarget.validity.valueMissing ? "Enter your password." : "Enter a password that meets the requirements.")
+      sourceEvent.currentTarget.setAttribute("aria-invalid", "true")
+    }
+
     shared function toggleVisibility() {
       if (disabled || readonly || !toggleable) {
         return
@@ -78,8 +87,8 @@ component TogglePassword {
                   disabled="{disabled || field.disabled}"
                   readonly="{readonly || field.readonly}"
                   required="{required || field.required}"
-                  aria-invalid="{invalid ? 'true' : 'false'}"
-                  @input="output.input({ name: event.target.name, value: event.target.value, visible: revealed })"
+                  aria-invalid="{invalid || nativeError ? 'true' : 'false'}"
+                  @invalid="handleInvalid(event)" @input="nativeError = ''; output.input({ name: event.target.name, value: event.target.value, visible: revealed })"
                   @change="output.change({ name: event.target.name, value: event.target.value, visible: revealed })"
                 />
                 {#if toggleable && toggleMode === "button"}
@@ -122,9 +131,9 @@ component TogglePassword {
             disabled="{disabled}"
             readonly="{readonly}"
             required="{required}"
-            aria-invalid="{invalid ? 'true' : 'false'}"
-            aria-describedby="{validationMessage ? name + '-validation' : helpText ? name + '-help' : ''}"
-            @input="output.input({ value: event.target.value, visible: revealed })"
+            aria-invalid="{invalid || nativeError ? 'true' : 'false'}"
+            aria-describedby="{(validationMessage || nativeError) ? name + '-validation' : helpText ? name + '-help' : ''}"
+            @invalid="handleInvalid(event)" @input="nativeError = ''; output.input({ value: event.target.value, visible: revealed })"
             @change="output.change({ value: event.target.value, visible: revealed })"
           />
           {#if toggleable && toggleMode === "button"}
@@ -153,12 +162,12 @@ component TogglePassword {
           <span>{checkboxLabel}</span>
         </label>
       {/if}
-      {#if helpText && !validationMessage}<small id="{name}-help">{helpText}</small>{/if}
+      {#if helpText && !(validationMessage || nativeError)}<small id="{name}-help">{helpText}</small>{/if}
       <small
         id="{name}-validation"
         class="wrn-next__validation"
         data-error="{name}"
-      >{validationMessage}</small>
+      >{(validationMessage || nativeError)}</small>
     </fieldset>
   }