fix(ui): avoid icon spacing for plain inputs

packages/ui/test/ui.test.ts

@@ -1294,6 +1294,10 @@ test("basic form fields expose shared labels, variants, states, hints, values, a
   expect(validation.error).toBe("Enter a valid email address.");
 
   const source = readFileSync(uiComponentPath("Input"), "utf8");
+  const sharedFieldRule = source.lastIndexOf(".wrn-next--field,");
+  const inputWidthRule = source.lastIndexOf(".wrn-next--field.wrn-next--input");
+  expect(inputWidthRule).toBeGreaterThan(sharedFieldRule);
+  expect(source.slice(inputWidthRule, inputWidthRule + 140)).toContain("max-width: none");
   const dom = mountHtml(
     await renderComponent(source, {
       id: "account-email",
@@ -1317,6 +1321,7 @@ test("basic form fields expose shared labels, variants, states, hints, values, a
   expect(root.dataset.variant).toBe("floating");
   expect(root.dataset.inline).toBe("true");
   expect(root.dataset.invalid).toBe("true");
+  expect(dom.querySelector(".wrn-next__field-error")?.getAttribute("data-empty")).toBe("false");
   expect(input.id).toBe("account-email");
   expect(input.name).toBe("email");
   expect(input.value).toBe("not-an-email");
@@ -1344,6 +1349,38 @@ test("basic form fields expose shared labels, variants, states, hints, values, a
   expect(emitted).toEqual(["input", "change", "focus", "blur", "keydown", "keyup"]);
 });
 
+test("Input does not reserve validation space while its error is empty", async () => {
+  const source = readFileSync(uiComponentPath("Input"), "utf8");
+  const dom = mountHtml(await renderComponent(source, { name: "search", hiddenLabel: true }));
+  expect(dom.querySelector(".wrn-next__field-error")?.getAttribute("data-empty")).toBe("true");
+  expect(source).toContain('.wrn-next__field-error[data-empty="true"]');
+});
+
+test("Input only reserves icon space when it renders an icon", async () => {
+  const source = readFileSync(uiComponentPath("Input"), "utf8");
+  const plain = mountHtml(
+    await renderComponent(source, { name: "limit", label: "Limit", placeholder: "Enter limit" }),
+  );
+  const decorated = mountHtml(
+    await renderComponent(source, {
+      name: "email",
+      label: "Email",
+      icon: "icon-[lucide--mail]",
+    }),
+  );
+
+  expect(plain.querySelector(".wrn-next__field-control")?.getAttribute("data-has-icon")).toBe(
+    "false",
+  );
+  expect(plain.querySelector(".wrn-next__field-icon")).toBeNull();
+  expect(decorated.querySelector(".wrn-next__field-control")?.getAttribute("data-has-icon")).toBe(
+    "true",
+  );
+  expect(decorated.querySelector(".wrn-next__field-icon")).not.toBeNull();
+  expect(source).toContain('[data-has-icon="true"][data-icon-position="start"]');
+  expect(source).toContain('[data-has-icon="true"][data-icon-position="end"]');
+});
+
 test("basic fields suppress native popups and render package constraint messages", async () => {
   const inputSource = readFileSync(uiComponentPath("Input"), "utf8");
   const dom = mountHtml(