siteSearch
Site search that expands out of a toggle — and an ordinary, working search form in the page without JavaScript.
The search is in the page, not in a widget. It is
authored as a complete <search> landmark with a real
GET form, and the module folds that form into the toggle next to it.
Without JavaScript — and for the moment before the lazily loaded chunk
arrives — the search bar simply sits in the header, which is the layout
a wide header would want anyway.
The default
Press the magnifier and the field unrolls out of it. Esc
closes it again and puts the focus back on the toggle, and so does
pressing the toggle a second time. Click somewhere else on the page
while the field is empty and it closes too — but type
something first and it stays: nobody asked for it to close, so a
query is not swept out of sight by a click elsewhere. Submitting
reloads this page with a ?q= in the address bar, because
the form is a plain GET and nothing here intercepts it.
The toggle comes before the field in the markup, and stays
there in both variants: it is the control, the field is the region it
expands, so the tab order has to reach the control first. It is also
what lets the stylesheet pair the two with an adjacent-sibling
combinator instead of :has() — supported everywhere, so
a field can never be left standing open next to a toggle claiming it
is collapsed.
Unrolling the other way (data-sitesearch-side="start")
The same component with the field growing towards the inline-start of the toggle, which is what a header with the toggle pinned at its far end wants: the search opens into the header instead of pushing the toggle along. Style only — the script never reads the attribute and the markup order is unchanged.
Without JavaScript (the base layer)
This search carries no data-js-behavior, so the module
never touches it — exactly what every visitor sees with JavaScript
off, and what everyone sees for the moment before the chunk has
loaded. The form is simply in the header: the field labelled and
focusable, the submit button working, a plain GET to the search page.
The toggle is not there at all, because a control that folds the
field away would have nothing to fold it back out with.
The in-page target
The header links above point here — they are only there to give the bars something to be a header for. Following one moves the focus out of the component, which is one of the two incidental dismissals: it closes an open field, but only while nothing has been typed into it.