feat(design): the header search is a 40 glass pill; a wrapper field dims for its input only (E28 S3c)

frontend/src/components/ui/IconButton.tsx

@@ -6,7 +6,8 @@ import { FocusSafeButton } from "./FocusSafeButton";
 
 // A button that is only a glyph (docs/DESIGN.md A2): two sizes, r8, and a name it cannot ship without
 // (`label` is required: it is the accessible name and the tooltip). On a picture it is round and dark
-// translucent (`media`), readable on any thumbnail; round means "on media" and nothing else. The glyph
+// translucent (`media`), readable on any thumbnail; round means "floats over something" (media, or a
+// 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.
 
 type IconButtonVariant =
@@ -67,8 +68,8 @@ export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonEle
   size?: IconButtonSize;
   /** A toggle: sets aria-pressed and tints the glyph with the accent. */
   pressed?: boolean;
-  /** Sits on a picture: round (A2). Implied by the `media` variant. */
-  onMedia?: boolean;
+  /** 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. */
   loading?: boolean;
   /** Leave the tooltip to a richer one the caller renders (a `Tooltip` around the button). */
@@ -82,7 +83,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(functio
     variant = "ghost",
     size = "sm",
     pressed,
-    onMedia = false,
+    round = false,
     loading = false,
     noTitle = false,
     type,
@@ -102,7 +103,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(functio
       className={clsx(
         "inline-grid shrink-0 place-items-center transition touch-target aria-expanded:text-accent disabled:opacity-50 disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:cursor-not-allowed",
         VARIANTS[variant],
-        onMedia || variant === "media" ? "rounded-full" : "rounded-lg",
+        round || variant === "media" ? "rounded-full" : "rounded-lg",
         pressed !== undefined && PRESSED,
         SIZES[size],
         className,