feat(design): the header search is a 40 glass pill; a wrapper field dims for its input only (E28 S3c)

frontend/src/components/ui/Input.dom.test.tsx

@@ -4,6 +4,7 @@
 // back values, and the dropdown trigger by context.
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { fieldClass } from "./fieldStyles";
 import { Input, Textarea } from "./Input";
 import { CheckRow, Slider } from "./NativeControls";
 import { SelectTrigger } from "./SelectTrigger";
@@ -29,6 +30,15 @@ describe("Input", () => {
     expect(search.getAttribute("aria-invalid")).toBe("true");
   });
 
+  it("dims a wrapper frame for its disabled FIELD, never for a disabled button beside it", () => {
+    // The header search holds a Go button that is disabled while the query is empty; a bare
+    // `has-disabled:` faded the whole search box to 50% on the feed.
+    const frame = fieldClass({ size: "free", pill: true, floating: true });
+    expect(frame).not.toMatch(/(^| )has-disabled:/);
+    expect(frame).not.toMatch(/(^| )has-aria-invalid:/);
+    expect(frame).toContain("has-[input:disabled]:opacity-50");
+  });
+
   it("lets a caller lay it out but not re-paint its edge", () => {
     render(<Textarea aria-label="body" className="w-full" />);
     const body = screen.getByRole("textbox", { name: "body" });