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);
+  });
+});

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

@@ -116,6 +116,11 @@ describe.each(SCHEMES.map((s) => s.id))("scheme %s", (id) => {
       // A score is text, on the page and on its own 15% chip (PlexInfo); the live glyph is not text.
       rating: hexContrast(s.rating!, bg),
       ratingOnChip: hexContrast(s.rating!, mixHex(s.rating!, bg, 0.15)),
+      // A Badge (a role, a status, a count, F29): the neutral one's muted text on the fg at 8%, a toned
+      // one's text on its own colour at 6% (ui/Badge).
+      mutedOnBadge: hexContrast(t.muted!, mixHex(t.fg!, bg, 0.08)),
+      accentOnBadge: hexContrast(t.accent!, mixHex(t.accent!, bg, 0.06)),
+      warnOnBadge: hexContrast(s.warn!, mixHex(s.warn!, bg, 0.06)),
       live: hexContrast(media().live!, bg),
     };
     const nonText = new Set(["edge", "live"]);