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,
+        },
       ],
     },
   },

frontend/src/components/AdminLogs.tsx

@@ -308,10 +308,10 @@ export default function AdminLogs() {
             />
             <span className="ml-auto flex gap-1.5">
               <Button
-                variant={polling ? "outline-accent" : "outline"}
+                variant="outline"
                 size="xs"
                 icon={<Radio className="h-3.5 w-3.5" />}
-                aria-pressed={polling}
+                pressed={polling}
                 onClick={toggleLive}
               >
                 {t("adminLogs.live")}

frontend/src/components/AdminUsers.tsx

@@ -28,6 +28,7 @@ import { notify } from "../lib/notifications";
 import { formatDateTime, relativeTime } from "../lib/format";
 import { invalidateUserAccess } from "../lib/adminUsers";
 import { ADMIN_USERS_TAB_KEY } from "../lib/adminUsersTab";
+import { Badge } from "./ui/Badge";
 import { Button } from "./ui/Button";
 import { IconButton } from "./ui/IconButton";
 import Tooltip from "./ui/Tooltip";
@@ -92,24 +93,6 @@ export default function AdminUsers() {
   );
 }
 
-function Badge({
-  tone,
-  children,
-}: {
-  tone: "accent" | "muted" | "warning";
-  children: React.ReactNode;
-}) {
-  const cls =
-    tone === "accent"
-      ? "border-accent/40 text-accent"
-      : tone === "warning"
-        ? "border-warn/40 text-warn"
-        : "border-border text-muted";
-  return (
-    <span className={`shrink-0 text-2xs px-2 py-0.5 rounded-full border ${cls}`}>{children}</span>
-  );
-}
-
 function UsersRoles({ me }: { me: Me }) {
   const { t } = useTranslation();
   const qc = useQueryClient();
@@ -245,13 +228,13 @@ function UsersRoles({ me }: { me: Me }) {
                   <div className="text-2xs text-muted truncate">{u.email}</div>
                 </Pressable>
                 {u.role === "admin" && <Badge tone="accent">{t("users.roles.admin")}</Badge>}
-                {u.is_demo && <Badge tone="muted">{t("users.roles.demo")}</Badge>}
-                {u.is_suspended && <Badge tone="warning">{t("users.roles.suspended")}</Badge>}
-                {!u.is_active && <Badge tone="warning">{t("users.roles.pending")}</Badge>}
+                {u.is_demo && <Badge>{t("users.roles.demo")}</Badge>}
+                {u.is_suspended && <Badge tone="warn">{t("users.roles.suspended")}</Badge>}
+                {!u.is_active && <Badge tone="warn">{t("users.roles.pending")}</Badge>}
                 {/* A Google sign-in proves the email, so "unverified" only applies to a
                     password-only account that hasn't clicked its verification link. */}
                 {u.is_active && !u.email_verified && !u.has_google && (
-                  <Badge tone="warning">{t("users.roles.unverified")}</Badge>
+                  <Badge tone="warn">{t("users.roles.unverified")}</Badge>
                 )}
                 <Tooltip
                   always={u.is_demo || self}

frontend/src/components/Channels.tsx

@@ -10,6 +10,7 @@ import { notifyYouTubeActionError } from "../lib/youtubeErrors";
 import { accountKey, LS } from "../lib/storage";
 import { buildChannelColumns, applySyncFilter } from "./channelColumns";
 import { notify } from "../lib/notifications";
+import { Badge } from "./ui/Badge";
 import { Button } from "./ui/Button";
 import Tooltip from "./ui/Tooltip";
 import DataTable from "./ui/DataTable";
@@ -538,10 +539,10 @@ export default function Channels() {
               {visibleSuggestions.length > 0 && (
                 <div className="shrink-0 flex items-center gap-1.5">
                   <Tooltip hint={t("channels.tags.suggestionsHint")}>
-                    <span className="inline-flex items-center gap-1 rounded-lg border border-dashed border-accent/50 px-2 py-1 text-xs text-accent/90">
-                      <Sparkles className="h-3 w-3" />
+                    <Badge tone="accent">
+                      <Sparkles />
                       {t("channels.tags.suggestionsCount", { count: visibleSuggestions.length })}
-                    </span>
+                    </Badge>
                   </Tooltip>
                   {highConfidence.length > 0 && (
                     <Button variant="outline" size="xs" onClick={acceptAllHighConfidence}>

frontend/src/components/PaletteLauncher.tsx

@@ -61,9 +61,9 @@ export function PaletteLauncher() {
     >
       <Command className="h-4 w-4 shrink-0" aria-hidden="true" />
       <span>{t("palette.title")}</span>
-      <span className="rounded-md border border-border px-1.5 py-0.5 font-mono text-3xs @max-[640px]/appmain:hidden">
+      <kbd className="rounded-md border border-border px-1.5 py-0.5 font-mono text-3xs @max-[640px]/appmain:hidden">
         {cap}
-      </span>
+      </kbd>
     </Pressable>
   );
 }

frontend/src/components/SettingsPanel.tsx

@@ -15,6 +15,7 @@ import Avatar from "./ui/Avatar";
 import { notify, type NotifSettings } from "../lib/notifications";
 import Tooltip from "./ui/Tooltip";
 import { Section, SwitchRow } from "./ui/form";
+import { Badge } from "./ui/Badge";
 import { Button } from "./ui/Button";
 import { type SaveState } from "./ui/DraftSaveBar";
 import { useConfirm } from "./confirmContext";
@@ -320,9 +321,7 @@ function AccessRow({
         </p>
       </div>
       {granted ? (
-        <span className="shrink-0 text-2xs px-2 py-1 rounded-full border border-accent/40 text-accent">
-          {t("settings.account.granted")}
-        </span>
+        <Badge tone="accent">{t("settings.account.granted")}</Badge>
       ) : (
         <Tooltip hint={t("settings.account.enableHint")}>
           <Button variant="glass" size="sm" className="shrink-0" onClick={onEnable}>
@@ -422,9 +421,7 @@ function SignInMethods({ me }: { me: Me }) {
             )}
           </div>
           {me.has_google ? (
-            <span className="shrink-0 text-2xs px-2 py-1 rounded-full border border-accent/40 text-accent">
-              {t("settings.account.googleLink.connected")}
-            </span>
+            <Badge tone="accent">{t("settings.account.googleLink.connected")}</Badge>
           ) : (
             <Button
               variant="glass"

frontend/src/components/ui/Badge.tsx

@@ -4,13 +4,23 @@ import type { ReactNode } from "react";
 // A static label (a topic, a keyword, a genre, a status): flat and tonal, with NO edge (owner, E28 S3d).
 // Every chip that does something has an edge, so "edged = pressable, flat = just says" holds at a
 // glance; a static tag painted like a chip is clicked and does nothing. The tint is the text colour
-// at 8%, so it reads on the dark schemes and on white alike; `onDark` is the always-dark player's.
+// at 8%, so it reads on the dark schemes and on white alike; `onDark` is the always-dark player's. A
+// `tone` says which kind of label it is (a role, a state to notice): its own colour at 6%, the most
+// that keeps its text at 4.5:1 on light (theme.contract.test.ts measures all three in every scheme).
+const TONES = {
+  neutral: "bg-fg/8 text-muted",
+  accent: "bg-accent/6 text-accent",
+  warn: "bg-warn/6 text-warn",
+} as const;
+
 export function Badge({
+  tone = "neutral",
   onDark = false,
   title,
   className,
   children,
 }: {
+  tone?: keyof typeof TONES;
   onDark?: boolean;
   title?: string;
   /** Layout only (margin); the paint is the primitive's. */
@@ -22,7 +32,7 @@ export function Badge({
       title={title}
       className={clsx(
         "inline-flex h-5 max-w-full shrink-0 items-center gap-1 truncate rounded-full px-2 text-xs whitespace-nowrap [&>svg]:size-3 [&>svg]:shrink-0",
-        onDark ? "bg-white/10 text-white/90" : "bg-fg/8 text-muted",
+        onDark ? "bg-white/10 text-white/90" : TONES[tone],
         className,
       )}
     >

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

@@ -261,6 +261,9 @@ describe("Button accessible-name contract (type level)", () => {
         <Button icon={<span />} aria-label="by aria-label" />
         <Button icon={<span />} title="by title" />
         <Button>plain text needs none</Button>
+        {/* @ts-expect-error a toggle states itself through `pressed`, which also paints it (B3) */}
+        <Button aria-pressed>raw toggle</Button>
+        <Button pressed>toggle</Button>
       </>,
     );
     expect(screen.getByRole("button", { name: "by label" })).toBeTruthy();

frontend/src/components/ui/Button.tsx

@@ -15,7 +15,9 @@ import { buttonClass, isLinkVariant, type ButtonSize, type ButtonVariant } from
 // No focus-visible here on purpose: @layer base in index.css already rings every <button> for keyboard
 // users. Adding one would double the ring.
 
-interface ButtonOwnProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+// A toggle says so through `pressed`, never a bare `aria-pressed`: the prop also paints the pressed
+// state (B3), and a raw attribute left the Server log's Live toggle looking like any outline button.
+interface ButtonOwnProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "aria-pressed"> {
   variant?: ButtonVariant;
   /** Defaults to "md", except for the link variants, whose default is "none" (a link owns no box). */
   size?: ButtonSize;
@@ -28,6 +30,8 @@ interface ButtonOwnProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   loading?: boolean;
   /** A toggle: sets aria-pressed and paints the pressed state (the solid 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 (a thumbnail, a poster) or inside a pill field: the pill shape. Implied by the
    *  `media` variant. */
   round?: boolean;

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

@@ -96,6 +96,10 @@ describe("IconButton", () => {
         <IconButton label="named">
           <svg />
         </IconButton>
+        {/* @ts-expect-error a toggle states itself through `pressed`, which also tints it (B3) */}
+        <IconButton label="raw toggle" aria-pressed>
+          <svg />
+        </IconButton>
       </>,
     );
     expect(screen.getByRole("button", { name: "named" })).toBeTruthy();

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. */

frontend/src/design-lab/batchA.tsx

@@ -67,6 +67,7 @@ function TouchRow() {
   return (
     <div className="flex flex-col gap-2">
       <div className="flex flex-wrap items-center gap-2">
+        {/* eslint-disable-next-line no-restricted-syntax -- a drawing of the segmented control, not a label */}
         <span className="inline-flex rounded-full border border-border bg-card p-0.5 text-xs">
           <span className={clsx(pill, "rounded-full bg-accent text-accent-fg")}>Mine</span>
           <span className={clsx(pill, "rounded-full text-muted")}>Library</span>

frontend/src/design-lab/batchB.tsx

@@ -52,7 +52,7 @@ type SchemeDef = { name: string; dark: Pal; light: Pal };
 
 const STATUS: Record<Mode, Record<"danger" | "dangerFg" | "warn" | "success", string>> = {
   dark: { danger: "#f87171", dangerFg: "#2a0a0a", warn: "#fbbf24", success: "#34d399" },
-  light: { danger: "#b91c1c", dangerFg: "#ffffff", warn: "#b45309", success: "#047857" },
+  light: { danger: "#b91c1c", dangerFg: "#ffffff", warn: "#a14a07", success: "#047857" },
 };
 
 const pal = (
@@ -137,8 +137,8 @@ function SchemeTile({ s, mode }: { s: SchemeDef; mode: Mode }) {
       </div>
       <div className="flex flex-wrap gap-1.5 text-2xs">
         <span className="chip px-2 py-0.5">Filter</span>
-        <span className="rounded-full border border-warn/40 px-2 py-0.5 text-warn">Retrying</span>
-        <span className="rounded-full border border-success/40 px-2 py-0.5 text-success">Done</span>
+        <span className="rounded-full bg-warn/6 px-2 py-0.5 text-warn">Retrying</span>
+        <span className="rounded-full bg-success/6 px-2 py-0.5 text-success">Done</span>
       </div>
       <span className="flex flex-col rounded bg-surface px-1.5 py-1 text-2xs">
         <Metric ok={worst.g >= 30}>{`closest status: ${worst.k} ${worst.g}°`}</Metric>

frontend/src/design-lab/batchC.tsx

@@ -144,6 +144,7 @@ function Field({ label, value, focused }: { label: string; value: string; focuse
       <span className="font-medium">{label}</span>
       <span
         className={clsx(
+          // eslint-disable-next-line no-restricted-syntax -- a drawing of a field, not a label
           "flex items-center rounded-lg border px-3 text-sm",
           H.field,
           focused && "ring-2 ring-accent",

frontend/src/index.css

@@ -1049,7 +1049,9 @@ html[data-theme="light"] {
      light pages (Midnight, Forest, Matrix). theme.contract.test.ts holds every status at 4.5:1. */
   --danger: #b91c1c;
   --danger-fg: #ffffff;
-  --warn: #b45309;
+  /* A shade under amber-700 (#b45309): that one was 4.58:1 as text on the tinted pages and fell under
+     4.5 on a warn Badge's own tint (F29). */
+  --warn: #a14a07;
   --warn-fg: #ffffff;
   --success: #047857;
   --success-fg: #ffffff;

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"]);