feat(core): Add centered search input to top bar

[nfebe]

A centered, input-styled trigger replaces the top-right search icon as the entry point to Unified Search. First phase of a phased rollout that will later turn the trigger into a real inline-filtering input.

Partial implementation of : #59949

Screenshots

Light	Dark

[nfebe]

The trigger is a button for now for design and accessibility but the component name is input because that is what it will be eventually.

[sorbaugh]

Thanks @nfebe , @susnux @skjnldsv for context, this change was requested to address feedback regarding the new nav redesign (during testing), in particular the top navbar being completely empty.

Originally we agreed to implement only the waffle menu, which is only a subset of the new redesign. Because the redesign is so visible and impactful, we're adding this change to make it look nicer.

[jancborchardt]

Looks very nice @nfebe! :)

Only 2 things:

• There is some overlap at a certain point:
  
• When only the icon is shown as on mobile, it will look better if it’s right-aligned instead of centered (so leftmost icon of the right-aligned header elements):
  

[kra-mo]

I can’t see much from the screenshot, but one piece of feedback I have is that this is too narrow. It should use a clamp function to determine width, and at the size the screenshot is taken, it should be larger.

[kra-mo]

I think it is also missing the border styling from the mockup. I’m also curious how it looks with more busy backgrounds than the default one: is it opaque or semitransparent? Does it blur? And how it looks when hovered.

[nfebe]

I can’t see much from the screenshot

Click on each image and it will open on a new tab full screen.