[stooit]

What changed

The quant_search default CSS and markup fought the site theme. On Olivero (and Olivero subthemes) the search page and the search box with suggestions looked broken. This makes the defaults neutral: they inherit the theme's fonts, colours and links, and a theme adjusts them through custom properties.

Search box with suggestions (autocomplete block):

• Theme form styles (Olivero [type="search"]) drew a second bordered input inside the Algolia form, with its own heavy focus ring. quant_search.autocomplete.css now resets the inner input and draws one focus outline on the form.
• Each suggestion was an <h6>. Theme heading margins spread the list over ~100 px per row, and a listbox option must not contain a heading. It is now a <span class="autocomplete-hit-name">.
• Placeholder contrast raised from about 2:1 to about 5.7:1.
• New: --quant-search-autocomplete-panel-placement (start, end, full-width, input-wrapper-width) lets a theme show suggestions wider than a narrow header box. Default unchanged.

Search page:

• The input shrank to its intrinsic width (theme width: auto) while the clear button stayed at the far edge of the form. The input now fills the form; submit and clear are 44 px targets inside it; the spinner and clear button respect the hidden attribute.
• The search box moved above the filters and results, so it lines up with the page title.
• Filters: label rows with a gap, counts at the row end, 32 px rows, selected value in bold, labelled role="group" per facet, empty groups hidden. On narrow screens the filters fold behind a "Filter results" toggle (<details>), opened by default on wide screens.
• Results: removed the InstantSearch card margins/padding (results were indented 32 px), the fixed #5878f9 link colour (3.9:1, fails AA) and #e7eefa highlight; neutral dividers instead.
• Pagination and "Clear filters" (was "Clear refinements") are neutral buttons with focus outlines; the InstantSearch #0096db white-text buttons (3.3:1) are gone. Pagination hides when there is one page.
• The result count is a role="status" region.
• Removed .quant-search button { background: transparent; border: none }, which stripped every button inside the page, and the 600 px margin: 1em that broke theme gutters.

Theming hooks (documented in the CSS file header): --quant-search-gap, -facets-width, -facet-gap, -border-color, -divider-color, -radius, -input-height, -input-background, -focus-color, -tint, -checkbox-size, -accent. The autocomplete keeps the Algolia --aa-* properties.

Checks

• phpcs --standard=Drupal (CI's extensions) on modules/quant_search: clean.
• node --check on both scripts.
• Checked in a local Drupal 11 site (Olivero subtheme and stock Olivero) at 1920x1080 and 390 px, light theme: query, filters ticked, no results, suggestions open, keyboard focus. Before and after screenshots are available on request.

Open points

• Markup changes: the search box moved out of .col.content, and .col.facets is now a <details>. Themes that override search-page.html.twig keep their copy and are not affected. Theme CSS that targets .col.content .ais-SearchBox would need an update.
• "Create a search page" defaults the block region to header. In Olivero that region is the logo row: an unstyled box there pushes the navigation into the mobile menu at every width. A better default for Olivero-based themes (or a note in the form) is worth a separate change. PR fix(quant_search): remove a deleted search page's search box, and repair one left behind #268 also edits CreateSearchPageForm.php, so I left it alone here.
• Uses :has() (hide empty filter groups) and color-mix() (neutral tints). Both are in all current evergreen browsers; older browsers show empty groups and fall back to no tint.
• Heading levels in the results (h4 for hit titles and the empty message) are unchanged.
• PR targets 2.x (the 2.3.0 line all recent quant_search PRs target); the GitHub default branch 8.x-1.x does not have this code.