fix(design): a toggle is pressed, never a bare aria-pressed; static labels are flat Badges with a tone, edged label spans lint-refused (E28)

frontend/src/lib/hoverAndLink.contract.test.ts

@@ -13,6 +13,7 @@ async function messages(source: string, starts: string): Promise<number> {
 const swaps = (src: string) => messages(src, "hover by a colour swap");
 const glyphs = (src: string) => messages(src, "a glyph-only <a>");
 const palette = (src: string) => messages(src, "a palette colour");
+const edged = (src: string) => messages(src, "a static label with an edge");
 
 describe("a hover by a colour swap", () => {
   // Assembled, so this file does not trip the very rule it probes.
@@ -73,3 +74,36 @@ describe("a palette colour", () => {
     expect(await palette(`export const g = "bg-accent text-danger border-border";\n`)).toBe(0);
   });
 });
+
+// F29: DESIGN.md "Static vs pressable": a label that does nothing is a flat Badge. A span drawn with a
+// rounded edge reads as a chip, gets clicked and does nothing (three sites and a private Badge had it).
+describe("a static label with an edge", () => {
+  const b = "border"; // assembled, as above
+
+  it("is refused, in a plain class and inside clsx", async () => {
+    const src = [
+      'import clsx from "clsx";',
+      "export const A = ({ on }: { on: boolean }) => (",
+      "  <>",
+      `    <span className="px-2 rounded-full ${b} ${b}-accent/40 text-accent">x</span>`,
+      `    <span className={clsx("rounded-lg ${b} ${b}-dashed", on && "text-accent")}>y</span>`,
+      "  </>",
+      ");",
+    ].join("\n");
+    expect(await edged(src)).toBe(2);
+  });
+
+  it("passes a flat tint, an edge on a non-label element, a span with no rounding, a drawn check mark", async () => {
+    const src = [
+      "export const B = () => (",
+      "  <>",
+      '    <span className="rounded-full bg-fg/8 text-muted">x</span>',
+      `    <div className="rounded-lg ${b} ${b}-border">y</div>`,
+      `    <span className="${b}-b ${b}-border">z</span>`,
+      `    <span className="grid h-3.5 w-3.5 rounded ${b}">✓</span>`,
+      "  </>",
+      ");",
+    ].join("\n");
+    expect(await edged(src)).toBe(0);
+  });
+});