Polish toolbar borders and search fields

src/components/ButtonGroup.tsx

@@ -32,7 +32,7 @@ export function ButtonGroup({
         '[&>*]:border-0! [&>*+*]:border-l! [&>*+*]:border-border-default!',
         'bg-background-surface text-text-primary',
         'shadow-sm',
-        '[&>[aria-pressed=true]]:bg-text-primary [&>[aria-pressed=true]]:text-background-default [&>[aria-pressed=true]]:shadow-sm',
+        '[&>[aria-pressed=true]]:border-transparent! [&>[aria-pressed=true]]:bg-text-primary [&>[aria-pressed=true]]:text-background-default [&>[aria-pressed=true]]:shadow-sm',
         className,
       )}
     >

src/components/ds/ui/index.tsx

@@ -496,10 +496,10 @@ export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
       return (
         <div
           className={twMerge(
-            // Search reads as a distinct, fully-rounded pill so it never
-            // reads as just another rounded-corner control (buttons, dropdowns).
-            'flex w-full items-center rounded-full border border-border-default bg-background-surface text-text-muted transition-[border-color,box-shadow] duration-150 focus-within:border-border-strong focus-within:text-text-primary motion-reduce:transition-none',
-            size === 'large' ? 'min-h-14 gap-3 px-4' : 'h-10 gap-2.5 px-3',
+            'flex w-full items-center border border-border-default bg-background-surface text-text-muted transition-[border-color,box-shadow] duration-150 focus-within:border-border-focus focus-within:text-text-primary focus-within:ring-2 focus-within:ring-border-focus/40 motion-reduce:transition-none',
+            size === 'large'
+              ? 'min-h-14 gap-3 rounded-xl px-4'
+              : 'h-10 gap-2.5 rounded-lg px-3',
           )}
         >
           {/* The label wraps only the icon + input so clicking the field