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

packages/ui/components/input.wrn

@@ -25,6 +25,7 @@ component Input {
     helperText: string = ""
     cornerHint: string = ""
     error: string = ""
+    invalidMessage: string = ""
     inline: boolean = false
     readonly: boolean = false
     disabled: boolean = false
@@ -56,7 +57,16 @@ component Input {
     client function handleChange(sourceEvent) { sourceEvent.stopPropagation(); output.change(detail(sourceEvent)) }
     client function handleFocus(sourceEvent) { sourceEvent.stopPropagation(); output.focus(detail(sourceEvent)) }
     client function handleBlur(sourceEvent) { sourceEvent.stopPropagation(); output.blur(detail(sourceEvent)) }
-    client function handleInvalid(sourceEvent) { sourceEvent.stopPropagation(); validationError = sourceEvent.currentTarget.validationMessage; sourceEvent.currentTarget.setAttribute("aria-invalid", "true"); sourceEvent.currentTarget.closest(".wrn-next--field").setAttribute("data-invalid", "true"); output.invalid({ value: sourceEvent.currentTarget.value, name: name, message: validationError, sourceEvent: sourceEvent }) }
+    client function handleInvalid(sourceEvent) {
+      sourceEvent.preventDefault()
+      sourceEvent.stopPropagation()
+      const field = sourceEvent.currentTarget
+      const validity = field.validity
+      validationError = error || invalidMessage || (validity.valueMissing ? "This field is required." : validity.typeMismatch ? "Enter a valid " + (type === "email" ? "email address." : "value.") : validity.tooShort ? "Enter at least " + minlength + " characters." : validity.tooLong ? "Enter no more than " + maxlength + " characters." : validity.patternMismatch ? "Enter a value in the required format." : validity.rangeUnderflow ? "Enter a value of at least " + min + "." : validity.rangeOverflow ? "Enter a value no greater than " + max + "." : "Enter a valid value.")
+      field.setAttribute("aria-invalid", "true")
+      field.closest(".wrn-next--field").setAttribute("data-invalid", "true")
+      output.invalid({ value: field.value, name: name, message: validationError, sourceEvent: sourceEvent })
+    }
     client function handleKeydown(sourceEvent) { sourceEvent.stopPropagation(); output.keydown({ key: sourceEvent.key, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
     client function handleKeyup(sourceEvent) { sourceEvent.stopPropagation(); output.keyup({ key: sourceEvent.key, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
   }