feat(cxl-ui): add cxl-search-filters and related components

[freudFlintstone]

Task: https://app.clickup.com/t/861mzgnx5

These changes depend on being able to replace some of the elements rendered by the FacetWP plugin. Here's a gist for a similar problem:
https://gist.github.com/MWDelaney/7f3ff797041bac5ef9918112d6a43816

[freudFlintstone]

A few notes:

• The stories are meant to showcase the design compliance, but can't properly reproduce the expected behavior when used in production.
• needs to be tested using wp-starter with a catalog page example (added here)
• The search box and sort dropdown are only placeholders and their styles should not be taken into account. The goal here is to test the responsive layout as proposed in figma
• The correct vaadin elements to be used resulted in conflicting dependencies in the storybook package, even when trying to set the exact package version. Maybe @anoblet can help me with that. Nevertheless, those elements are slotted in, so using the right ones it would not interfere with the layout work that's already done, although it would obviously be nice to test storybook.
• This is not necessarily final. We decided to start the review process to help figure out the particulars of integrating with FacetWP

[pawelkmpt]

For easier review but also tracking code it'd be better to have every component as separate commit.

[pawelkmpt]

It looks good at the first glance. We'll test it with PHP layer next week.

I'd be happy to get feedback from @anoblet and @lkraav too.

[pawelkmpt]

What's with Firefox that we need special flag?

[freudFlintstone]

When in smaller screens, I implemented scrolling for the tabs, like in the design. I also implemented scroll snapping, so that it aligns to the start of the closest tab when the user stops scrolling. In Firefox, the smooth scrolling behavior causes a bug that prevents it from scrolling further on very specific screen sizes and tab widths, so I'm just using that to disable smooth scrolling in that case

[pawelkmpt]

What do you think about using https://vaadin.com/docs/latest/components/tabs here @freudFlintstone? Beneficial or overkill?

[freudFlintstone]

I tried, really hard... but I wasted a day on them, it was not looking as good as the design, and in the end it would actually not work in this specific case, because of how FacetWP works. Also, overkill, since we only need the looks and basically none of the functionality.

[freudFlintstone]

For easier review but also tracking code it'd be better to have every component as separate commit.

Do you want me to go back and make separate commits? It's doable

[pawelkmpt]

For easier review but also tracking code it'd be better to have every component as separate commit.

Do you want me to go back and make separate commits? It's doable

Yes, please

[anoblet]

Would it make sense to default the first tab to selected?

[freudFlintstone]

Would it make sense to default the first tab to selected?

Yes. I'll update the story to correctly depict that intention, but it really depends on how FacetWP sets the default on the back-end.