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

packages/ui/test/ui.test.ts

@@ -1344,7 +1344,7 @@ test("basic form fields expose shared labels, variants, states, hints, values, a
   expect(emitted).toEqual(["input", "change", "focus", "blur", "keydown", "keyup"]);
 });
 
-test("basic fields render native constraint messages and select matches field surfaces", async () => {
+test("basic fields suppress native popups and render package constraint messages", async () => {
   const inputSource = readFileSync(uiComponentPath("Input"), "utf8");
   const dom = mountHtml(
     await renderComponent(inputSource, {
@@ -1355,9 +1355,14 @@ test("basic fields render native constraint messages and select matches field su
     }),
   );
   const input = dom.querySelector("input") as HTMLInputElement;
-  input.dispatchEvent(new (dom.window as any).Event("invalid", { bubbles: false }));
+  const invalidEvent = new (dom.window as any).Event("invalid", {
+    bubbles: false,
+    cancelable: true,
+  });
+  input.dispatchEvent(invalidEvent);
+  expect(invalidEvent.defaultPrevented).toBe(true);
   expect(dom.querySelector("[data-error='name']")?.textContent?.trim()).toBe(
-    input.validationMessage,
+    "This field is required.",
   );
   expect(dom.querySelector(".wrn-next--input")?.getAttribute("data-invalid")).toBe("true");
 
@@ -1367,6 +1372,46 @@ test("basic fields render native constraint messages and select matches field su
   expect(selectSource).toContain("wrn-next__select-indicator");
 });
 
+test("OTP inputs accept six digits and show custom inline errors without native popups", async () => {
+  const source = readFileSync(uiComponentPath("Input"), "utf8");
+  const dom = mountHtml(
+    await renderComponent(source, {
+      name: "code",
+      pattern: "[0-9]{6}",
+      required: true,
+      invalidMessage: "Enter the six-digit verification code.",
+    }),
+  );
+  const input = dom.querySelector("input") as HTMLInputElement;
+  input.value = "737651";
+  expect(input.checkValidity()).toBe(true);
+  input.value = "123";
+  const event = new (dom.window as any).Event("invalid", { cancelable: true });
+  input.dispatchEvent(event);
+  expect(event.defaultPrevented).toBe(true);
+  expect(dom.querySelector("[data-error='code']")?.textContent).toContain(
+    "Enter the six-digit verification code.",
+  );
+});
+
+test("password fields cancel native invalid popups and show inline errors", async () => {
+  for (const component of ["TogglePassword", "StrongPassword"]) {
+    const dom = mountHtml(
+      await renderComponent(readFileSync(uiComponentPath(component), "utf8"), {
+        name: "password",
+        required: true,
+      }),
+    );
+    const input = dom.querySelector("input") as HTMLInputElement;
+    const event = new (dom.window as any).Event("invalid", { cancelable: true });
+    input.dispatchEvent(event);
+    expect(event.defaultPrevented).toBe(true);
+    expect(dom.querySelector("[data-error='password']")?.textContent).toContain(
+      "Enter your password.",
+    );
+  }
+});
+
 test("all basic form components render values and their must-have interaction events", async () => {
   const components = [
     "Checkbox",