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/components/ui/IconButton.tsx

@@ -11,7 +11,9 @@ import { iconButtonClass, type IconButtonSize, type IconButtonVariant } from "./
 // pill field it sits inside — `round`), and nothing else. The glyph
 // is sized here, so a row of them never mixes 14 and 16px icons.
 
-export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+// `pressed`, never a bare `aria-pressed`: the prop is what tints a toggled glyph (see Button).
+export interface IconButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "aria-pressed"> {
   /** The accessible name and the tooltip. Required: the button renders no text. */
   label: string;
   /** The glyph (a lucide element); the primitive sizes it. */
@@ -20,6 +22,8 @@ export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonEle
   size?: IconButtonSize;
   /** A toggle: sets aria-pressed and tints the glyph with the accent. */
   pressed?: boolean;
+  /** Not accepted: a toggle is `pressed` (JSX lets any undeclared `aria-*` through, so it is `never`). */
+  "aria-pressed"?: never;
   /** Sits on a picture or inside a pill field: round (A2). Implied by the `media` variant. */
   round?: boolean;
   /** Busy: a spinner replaces the glyph, and the button is unavailable without losing the focus. */