fix(forms): surface validation and recover schema drift

packages/ui/test/ui.test.ts

@@ -1309,6 +1309,29 @@ 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 () => {
+  const inputSource = readFileSync(uiComponentPath("Input"), "utf8");
+  const dom = mountHtml(
+    await renderComponent(inputSource, {
+      id: "required-name",
+      name: "name",
+      label: "Name",
+      required: true,
+    }),
+  );
+  const input = dom.querySelector("input") as HTMLInputElement;
+  input.dispatchEvent(new (dom.window as any).Event("invalid", { bubbles: false }));
+  expect(dom.querySelector("[data-error='name']")?.textContent?.trim()).toBe(
+    input.validationMessage,
+  );
+  expect(dom.querySelector(".wrn-next--input")?.getAttribute("data-invalid")).toBe("true");
+
+  const selectSource = readFileSync(uiComponentPath("Select"), "utf8");
+  expect(selectSource).toContain("appearance: none");
+  expect(selectSource).toContain("background-color: var(--wrn-color-surface)");
+  expect(selectSource).toContain("wrn-next__select-indicator");
+});
+
 test("all basic form components render values and their must-have interaction events", async () => {
   const components = [
     "Checkbox",