feat(autocomplete): implement styling

[aymeric-giraudet]

Summary

FX-3495

Implemented light styling for what we have for now.
Created a new shared component just for search.
Couldn't really share variables with chat yet as we don't have a dark mode theme for Autocomplete yet, can be done later

Result

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit a5fe502:

Sandbox	Source
example-instantsearch-getting-started	Configuration
example-react-instantsearch-getting-started	Configuration
example-react-instantsearch-next-app-dir-example	Configuration
example-react-instantsearch-next-routing-example	Configuration
example-vue-instantsearch-getting-started	Configuration

[dhayab]

Initial feedback. Some of the implementation will have to change to fit with master. Let me know if you want to look at conflicts together.

[FabienMotte]

Nice work, thanks for taking care of it! 🙏

I noticed a few differences in behavior compared to Autocomplete.js that might be worth aligning or documenting:

Enter key behavior

• In InstantSearch, when you focus the input, type a query, and hit Enter, the input stays focused while the panel closes. You need to manually unfocus and refocus the input to reopen the panel.

• In Autocomplete.js, hitting Enter while the input is focused causes it to lose focus (and the panel closes).

Escape key behavior

• In InstantSearch, pressing Escape clears the query immediately.

• In Autocomplete.js, the first Escape press closes the panel; a second Escape press clears the query. If the panel is already closed (e.g., no results), Escape clears the query directly.

Empty results behavior

• In InstantSearch, the panel remains visible even when there are no results.

Clear button behavior

• In InstantSearch, clicking the “Clear” button removes focus from the input.

• In Autocomplete.js, the input remains focused.

Panel positioning

• As discussed in a daily, the panel should be absolutely positioned.

• We should also plan to add support for detached mode later on.

[dhayab]

Here are some notes/questions based on my most recent test:

• items should have a hover style (same as the aria-selected style I believe)
• there's an issue with items being selected with the keyboard outside of the visible area of the panel, but its something that should be fixed in propgetters in another PR
• the panel is still positioned relatively and shifts the content below

Do you need help for the JS widget implementation of the searchbox + design?

[dhayab]

Reran a test and design works well with latest changes.

Let's merge and iterate from there for:

• hiding the panel if there are 0 items
• replacing the searchbox with the autocomplete input component in JS widget