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/eslint.config.js

@@ -372,6 +372,14 @@ const PALETTE =
 const PALETTE_MESSAGE =
   "a palette colour: use a semantic token (text-rating, bg-live, bg-media-chrome, text-danger, …; DESIGN.md Tokens), not text-amber-500.";
 
+// A static label with an edge (DESIGN.md "Static vs pressable", audit F29): a <span> drawn round with a
+// border reads as a chip, is clicked and does nothing. A label that does nothing is ui/Badge (flat).
+// A small `rounded` box (a check mark drawn inside a menu row) is a glyph, not a label: only the label
+// radii match.
+const EDGED_LABEL = "/^(?=.*(^|\\s)rounded-(full|md|lg|xl|2xl)(\\s|$))(?=.*(^|\\s)border(\\s|$))/";
+const EDGED_LABEL_MESSAGE =
+  "a static label with an edge reads as a pressable chip: use ui/Badge (flat, tonal) for a label that does nothing.";
+
 // A class name split by an interpolation: the text right after `${…}` starts with a variant (`hover:`).
 const SPLIT_CLASS = "/^[a-z][\\w-]*:[\\w\\[!-]/";
 const SPLIT_CLASS_MESSAGE =
@@ -503,6 +511,14 @@ export default tseslint.config(
         { selector: `TemplateElement[value.raw=${HOVER_SWAP}]`, message: HOVER_SWAP_MESSAGE },
         { selector: `Literal[value=${PALETTE}]`, message: PALETTE_MESSAGE },
         { selector: `TemplateElement[value.raw=${PALETTE}]`, message: PALETTE_MESSAGE },
+        {
+          selector: `JSXOpeningElement[name.name='span'] JSXAttribute[name.name='className'] Literal[value=${EDGED_LABEL}]`,
+          message: EDGED_LABEL_MESSAGE,
+        },
+        {
+          selector: `JSXOpeningElement[name.name='span'] JSXAttribute[name.name='className'] TemplateElement[value.raw=${EDGED_LABEL}]`,
+          message: EDGED_LABEL_MESSAGE,
+        },
       ],
     },
   },