@empathyco/x-components 3.0.0-alpha.99 → 3.0.0

package/docs/API-reference/api/x-components.md

@@ -13,125 +13,127 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [AddQueryToHistoryAction](./x-components.addquerytohistoryaction.md) | Class implementation for the [HistoryQueriesActions.addQueryToHistory()](./x-components.historyqueriesactions.addquerytohistory.md) action. |
 |  [AllFilter](./x-components.allfilter.md) | This component receives a required <code>facet</code> with [BooleanFilter](./x-types.booleanfilter.md) as prop and renders a button, which on clicked emits the [FacetsXEvents.UserClickedAllFilter](./x-components.facetsxevents.userclickedallfilter.md) event. By default the rendered button displays a message with the facet label but this content is customizable through the default slot. |
 |  [AnimateWidth](./x-components.animatewidth.md) | Renders a transition wrapping an element passed in the default slot and animating its width. |
-|  [AutoProgressBar](./x-components.autoprogressbar.md) | An auto progress bar component. |
-|  [Banner](./x-components.banner.md) | A banner result is just an item that has been inserted into the search results to advertise something. Usually it is the first item in the grid or it can be placed in the middle of them and fill the whole row where appears. It just contains a link to the banner content, an image and a title. |
-|  [BannersList](./x-components.bannerslist.md) | It renders a [ItemsList](./x-components.itemslist.md) list of banners from [SearchState.banners](./x-components.searchstate.banners.md) by default using the <code>ItemsInjectionMixin</code>.<!-- -->The component provides a default slot which wraps the whole component with the <code>banners</code> plus the <code>searchInjectedItems</code> which also contains the injected list items from the ancestor.<!-- -->It also provides the parent slots to customize the items. |
-|  [BaseAddToCart](./x-components.baseaddtocart.md) | Renders a button with a default slot. It receives the result with the data and emits [XEventsTypes.UserClickedResultAddToCart](./x-components.xeventstypes.userclickedresultaddtocart.md) to the bus on click mouse event. |
-|  [BaseColumnPickerDropdown](./x-components.basecolumnpickerdropdown.md) | Column picker dropdown component renders [dropdown](./x-components.basedropdown.md) component which options are the different columns you can set for a grid.<!-- -->It emits [UserClickedColumnPicker](./x-components.xeventstypes.userclickedcolumnpicker.md) on dropdown input. |
-|  [BaseColumnPickerList](./x-components.basecolumnpickerlist.md) | Column picker list component renders a list of buttons to choose the columns number. |
-|  [BaseCurrency](./x-components.basecurrency.md) | Renders the value received as a property which always must be a JavaScript number, with the proper format provided as a string property or by injection. The rendered tag is a span in order to render a default inline HTML element.<!-- -->Regarding the format or mask to be defined as string: - Use 'i' to define integer numbers. - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the format doesn't include decimals, it is filled with zeros until reach the length defined with 'd's. - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group. - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more than one character. - If you want to hide the decimal part if it's zero, you can add the <code>?</code> symbol after the decimal characters (e.g. 'i.iii,dd?', for <code>1234</code> you would get <code>1.234</code> instead of <code>1.234,00</code>). - Set whatever you need around the integers and decimals marks. - Default mask: 'i.iii,dd' which returns '1.345,67'. |
+|  [Banner](./x-components.banner.md) | <p>. A banner result is just an item that has been inserted into the search results to advertise something. Usually it is the first item in the grid or it can be placed in the middle of them and fill the whole row where appears. The banner may be clickable or non-clickable depending on whether it has an associated URL or not. It contains an image and, optionally, a title. In case the image does not load due to an error the banner will not be rendered.</p><p>Additionally, this component exposes the following props to modify the classes of the elements: <code>titleClass</code>.</p> |
+|  [BannersList](./x-components.bannerslist.md) | <p>It renders a [ItemsList](./x-components.itemslist.md) list of banners from [SearchState.banners](./x-components.searchstate.banners.md) by default using the <code>ItemsInjectionMixin</code>.</p><p>The component provides a default slot which wraps the whole component with the <code>banners</code> plus the <code>searchInjectedItems</code> which also contains the injected list items from the ancestor.</p><p>It also provides the parent slots to customize the items.</p> |
+|  [BaseColumnPickerDropdown](./x-components.basecolumnpickerdropdown.md) | <p>Column picker dropdown component renders [BaseDropdown](./x-components.basedropdown.md) component which options are the different columns you can set for a grid.</p><p>It emits [XEventsTypes.UserClickedColumnPicker](./x-components.xeventstypes.userclickedcolumnpicker.md) on dropdown input.</p> |
+|  [BaseColumnPickerList](./x-components.basecolumnpickerlist.md) | <p>Column picker list component renders a list of buttons to choose the columns number.</p><p>Additionally, this component exposes the following props to modify the classes of the elements: <code>buttonClass</code>.</p> |
 |  [BaseDropdown](./x-components.basedropdown.md) | Dropdown component that mimics a Select element behavior, but with the option to customize the toggle button and each item contents. |
-|  [BaseEventButton](./x-components.baseeventbutton.md) | Component to be reused that renders a <code>&lt;button&gt;</code> with the logic of emitting events to the bus on click. The events are passed as an object to prop [events](./x-components.xeventstypes.md)<!-- -->. The keys are the event name and the values are the payload of each event. All events are emitted with its respective payload. If any event doesn't need payload a <code>undefined</code> must be passed as value. |
-|  [BaseEventsModal](./x-components.baseeventsmodal.md) | Component containing a modal that emits a [XEventsTypes.UserClickedCloseEventsModal](./x-components.xeventstypes.userclickedcloseeventsmodal.md) when clicking outside the content rendered in the default slot and can receive, through the eventsToCloseModal prop, a list of [xEvents](./x-components.xevent.md) to listen to in order to close also the modal, eventsToOpenModal prop, another list of [xEvents](./x-components.xevent.md) to customize the events to listen to open the modal and a prop, displayOverlay, to display an overlay over the rest of the html. The default slot offers the possibility to customize the modal content. |
-|  [BaseEventsModalClose](./x-components.baseeventsmodalclose.md) | Component contains an event button that emits [XEventsTypes.UserClickedCloseEventsModal](./x-components.xeventstypes.userclickedcloseeventsmodal.md) when clicked. It has a default slot to customize its contents. |
-|  [BaseEventsModalOpen](./x-components.baseeventsmodalopen.md) | Component contains an event button that emits [XEventsTypes.UserClickedOpenEventsModal](./x-components.xeventstypes.userclickedopeneventsmodal.md) when clicked. It has a default slot to customize its contents. |
+|  [BaseEventButton](./x-components.baseeventbutton.md) | Component to be reused that renders a <code>&lt;button&gt;</code> with the logic of emitting events to the bus on click. The events are passed as an object to prop [XEventsTypes](./x-components.xeventstypes.md)<!-- -->. The keys are the event name and the values are the payload of each event. All events are emitted with its respective payload. If any event doesn't need payload a <code>undefined</code> must be passed as value. |
+|  [BaseEventsModal](./x-components.baseeventsmodal.md) | Component containing a modal that emits a [XEventsTypes.UserClickedCloseEventsModal](./x-components.xeventstypes.userclickedcloseeventsmodal.md) when clicking outside the content rendered in the default slot and can receive, through the eventsToCloseModal prop, a list of [XEvent](./x-components.xevent.md) to listen to in order to close also the modal, eventsToOpenModal prop, another list of [XEvent](./x-components.xevent.md) to customize the events to listen to open the modal and a prop, displayOverlay, to display an overlay over the rest of the html. The default slot offers the possibility to customize the modal content. |
 |  [BaseGrid](./x-components.basegrid.md) | Grid component that is able to render different items based on their modelName value. In order to achieve this, it exposes a scopedSlot for each different modelName. In case the items used do not have modelName property, the default slot is used instead. It has a required property: the <code>items</code> to render; and an optional one: the number <code>columns</code> the grid is divided in. If the number of columns is not specified, the grid automatically fills the rows with as many columns as it can fit. |
 |  [BaseHeaderTogglePanel](./x-components.baseheadertogglepanel.md) | Toggle panel which uses the base toggle panel, adds a header and manage the open / close state of the panel. |
 |  [BaseIdModal](./x-components.baseidmodal.md) | Component containing a modal expecting a required prop, named <code>modalId</code>. It reacts to <code>UserClickedOpenModal</code>, <code>UserClickedCloseModal</code> and <code>UserClickedOutOfModal</code> events, when their payload matches the component's 'modalId' prop, to handle its open/close state. The default slot offers the possibility to customise the modal content. |
-|  [BaseIdModalClose](./x-components.baseidmodalclose.md) | Component containing an event button that emits [XEventsTypes.UserClickedCloseModal](./x-components.xeventstypes.userclickedclosemodal.md) when clicked with the modalId as payload. It has a default slot to customize its contents. |
-|  [BaseIdModalOpen](./x-components.baseidmodalopen.md) | Component containing an event button that emits [XEventsTypes.UserClickedOpenModal](./x-components.xeventstypes.userclickedopenmodal.md) when clicked with the modalId as payload. It has a default slot to customize its contents. |
-|  [BaseIdTogglePanel](./x-components.baseidtogglepanel.md) | Simple panel that could receives its initial open state via prop, if not the default is opens and a required prop, named <code>panelId</code>, which are responsible of rendering default slot inside a configurable transition.<!-- -->It reacts to <code>UserClickedPanelToggleButton</code> event, when their payload matches the component's 'panelId' prop, to handle its open/close state.<!-- -->The default slot offers the possibility to customise the modal content. |
-|  [BaseIdTogglePanelButton](./x-components.baseidtogglepanelbutton.md) | Component containing an event button that emits [XEventsTypes.UserClickedPanelToggleButton](./x-components.xeventstypes.userclickedpaneltogglebutton.md) when clicked with the panelId as payload.<!-- -->It has a default slot to customize its contents. |
+|  [BaseIdTogglePanel](./x-components.baseidtogglepanel.md) | <p>Simple panel that could receives its initial open state via prop, if not the default is opens and a required prop, named <code>panelId</code>, which are responsible of rendering default slot inside a configurable transition.</p><p>It reacts to <code>UserClickedPanelToggleButton</code> event, when their payload matches the component's 'panelId' prop, to handle its open/close state.</p><p>The default slot offers the possibility to customise the modal content.</p> |
+|  [BaseIdTogglePanelButton](./x-components.baseidtogglepanelbutton.md) | <p>Component containing an event button that emits [XEventsTypes.UserClickedPanelToggleButton](./x-components.xeventstypes.userclickedpaneltogglebutton.md) when clicked with the panelId as payload.</p><p>It has a default slot to customize its contents.</p> |
 |  [BaseKeyboardNavigation](./x-components.basekeyboardnavigation.md) | Base component to handle keyboard navigation for elements inside it. It has a required slot to include the navigable elements. |
 |  [BaseModal](./x-components.basemodal.md) | Base component with no XPlugin dependencies that serves as a utility for constructing more complex modals. |
-|  [BasePriceFilterLabel](./x-components.basepricefilterlabel.md) | Renders a label for a price filter, allowing to select different messages depending on the value of the filter. |
 |  [BaseRating](./x-components.baserating.md) | Rating component. This component renders a set of elements filled based on the value passed as prop. |
-|  [BaseRatingFilterLabel](./x-components.baseratingfilterlabel.md) | Renders a label for a rating filter, allowing to override the elements used to paint the rating. |
-|  [BaseResultCurrentPrice](./x-components.baseresultcurrentprice.md) | Component that renders the [result](./x-types.result.md) current price that may or may not be on sale. |
-|  [BaseResultImage](./x-components.baseresultimage.md) | Component to be reused that renders an <code>&lt;img&gt;</code>. |
-|  [BaseResultLink](./x-components.baseresultlink.md) | Component to be reused that renders an <code>&lt;a&gt;</code> wrapping the result contents. |
-|  [BaseResultPreviousPrice](./x-components.baseresultpreviousprice.md) | Component that renders the [result](./x-types.result.md) previous price. |
-|  [BaseResultRating](./x-components.baseresultrating.md) | This component renders a [BaseRating](./x-components.baserating.md) for a result passed as prop. |
 |  [BaseScroll](./x-components.basescroll.md) | Base scroll component that depending on the user interactivity emits different events for knowing when the user scrolls, the direction of scroll and if user reaches the start or end. |
-|  [BaseSuggestion](./x-components.basesuggestion.md) | Renders a button with a default slot. It receives a query, which should be the query of the module using this component, a suggestion, the [XEvents](./x-components.xevent.md) that will be emitted on click with a given feature.<!-- -->The default slot receives the suggestion and the matched query has props. |
 |  [BaseSuggestions](./x-components.basesuggestions.md) | Paints a list of suggestions passed in by prop. Requires a component for a single suggestion in the default slot for working. |
-|  [BaseTogglePanel](./x-components.basetogglepanel.md) | Simple panel that receives its open state via prop, which is responsible of rendering default slot inside a configurable transition. |
+|  [BaseSwitch](./x-components.baseswitch.md) | Basic switch component to handle boolean values. This component receives its selected state using a prop, and emits a Vue event whenever the user clicks it. |
+|  [BaseTabsPanel](./x-components.basetabspanel.md) | Base Tabs Panel. |
 |  [BaseVariableColumnGrid](./x-components.basevariablecolumngrid.md) | The <code>BaseVariableColumnGrid</code> component is a wrapper of the <code>BaseGrid</code> component that listens to the <code>UserClickedColumnPicker</code> and the <code>ColumnsNumberProvided</code> events and passes the selected number of columns to the grid. It also allows to customize the grid items using the available <code>scopedSlots</code>. |
 |  [BaseXAPI](./x-components.basexapi.md) | Default implementation for [XAPI](./x-components.xapi.md)<!-- -->. |
-|  [BaseXBus](./x-components.basexbus.md) | Default [XBus](./x-components.xbus.md) implementation. |
 |  [ClearFilters](./x-components.clearfilters.md) | Renders a simple button, emitting the needed events when clicked. |
 |  [ClearHistoryQueries](./x-components.clearhistoryqueries.md) | A button that when is pressed, emits the [HistoryQueriesXEvents.UserPressedClearHistoryQueries](./x-components.historyqueriesxevents.userpressedclearhistoryqueries.md) event, expressing the user intention to clear the whole history of queries. |
 |  [ClearSearchInput](./x-components.clearsearchinput.md) | This component renders a button to delete the current query. |
 |  [CollapseHeight](./x-components.collapseheight.md) | Renders a transition wrapping the element passed in the default slot and animating it with a height animation. |
 |  [CollapseWidth](./x-components.collapsewidth.md) | Renders a transition wrapping the element passed in the default slot and animating it with a width animation. |
 |  [ColumnPickerMixin](./x-components.columnpickermixin.md) | Mixin to share Column Pickers logic. |
-|  [CrossFade](./x-components.crossfade.md) | Renders a transition wrapping the element passed in the default slo. The transition fades between the two toggled elements at the same time. |
+|  [CrossFade](./x-components.crossfade.md) | Renders a transition wrapping the element passed in the default slot. The transition fades between the two toggled elements at the same time. |
 |  [DefaultFacetsService](./x-components.defaultfacetsservice.md) | Default implementation for the [FacetsService](./x-components.facetsservice.md)<!-- -->. |
 |  [DefaultPDPAddToCartService](./x-components.defaultpdpaddtocartservice.md) | Default implementation for the [PDPAddToCartService](./x-components.pdpaddtocartservice.md)<!-- -->. |
-|  [DeviceDetector](./x-components.devicedetector.md) | This component helps detecting or setting a device, that can be used later to create different layouts optimized for different devices. This detected device is available under the [XComponentAliasAPI.device](./x-components.xcomponentaliasapi.device.md) property. |
+|  [DeviceDetector](./x-components.devicedetector.md) | This component helps to detect or setting a device, that can be used later to create different layouts optimized for different devices. This detected device is available under the [XComponentAliasAPI.device](./x-components.xcomponentaliasapi.device.md) property. |
 |  [DirectionalFocusNavigationService](./x-components.directionalfocusnavigationservice.md) | Implementation of [SpatialNavigation](./x-components.spatialnavigation.md) using directional focus. |
-|  [EditableNumberRangeFilter](./x-components.editablenumberrangefilter.md) | Renders an editable number range filter. It has two input fields to handle min and max values, emitting the needed events when clicked.<!-- -->It provides a default slot, with some utils bind, to customize the whole component; and two named slots <code>apply-content</code> and <code>clear-content</code> to override each button content.<!-- -->If <code>instant</code> prop is true, the needed events are emitted immediately; else, apply button is rendered to confirm to do it. False by default.<!-- -->If <code>clear</code> prop is true, clear button, which sets to null component min and max values, is rendered. True by default. |
+|  [DisableAnimationMixin](./x-components.disableanimationmixin.md) | Mixin to ease disabling animations. |
+|  [EditableNumberRangeFilter](./x-components.editablenumberrangefilter.md) | <p>Renders an editable number range filter. It has two input fields to handle min and max values, emitting the needed events when clicked.</p><p>It provides a default slot, with some utils bind, to customize the whole component; and two named slots <code>apply-content</code> and <code>clear-content</code> to override each button content.</p><p>If <code>instant</code> prop is true, the needed events are emitted immediately; else, apply button is rendered to confirm to do it. False by default.</p><p>If <code>clear</code> prop is true, clear button, which sets to null component min and max values, is rendered. True by default.</p> |
 |  [Empathize](./x-components.empathize.md) | Component containing the empathize. It has a required slot to define its content and two props to define when to open and close it: eventsToOpenEmpathize and eventsToCloseEmpathize. |
-|  [ExcludeFiltersWithNoResults](./x-components.excludefilterswithnoresults.md) | The <code>ExcludeFiltersWithNoResults</code> component filters the provided list of filters, excluding those which have the <code>totalResults</code> property exactly equal to <code>0</code>. It won't remove filters with no <code>totalResults</code> property.<!-- -->The new list of filters is bound to the default scoped slot. As this component does not render no root element, this default slot must contain a single root node. |
+|  [ExcludeFiltersWithNoResults](./x-components.excludefilterswithnoresults.md) | <p>The <code>ExcludeFiltersWithNoResults</code> component filters the provided list of filters, excluding those which have the <code>totalResults</code> property exactly equal to <code>0</code>. It won't remove filters with no <code>totalResults</code> property.</p><p>The new list of filters is bound to the default scoped slot. As this component does not render no root element, this default slot must contain a single root node.</p> |
+|  [ExperienceControls](./x-components.experiencecontrols.md) | This component subscribes to changes in the ExperienceControls module to fire the events that propagate the configuration. |
 |  [ExtraParams](./x-components.extraparams.md) | It emits a [ExtraParamsXEvents.ExtraParamsProvided](./x-components.extraparamsxevents.extraparamsprovided.md) with the values received as a prop. |
 |  [Facets](./x-components.facets.md) | This component renders the list of facets stored in the Facets module. Facets can be rendered differently based on their purpose and this can be achieved using the exposed slots: - A default and required slot. - A custom slot for each facet with the facetId as its name. This allows each facet to be rendered differently based on its needs. |
 |  [FacetsMixin](./x-components.facetsmixin.md) | Mixin to share Facets logic. |
 |  [FacetsProvider](./x-components.facetsprovider.md) | This component allows to provide facets by prop, to add them to the state of the <code>Facets X-Module</code>. These facets will be added to the <code>Facets X-Module</code> state together with the facets emitted by the <code>Search X-Module</code> through the [SearchXEvents.FacetsChanged](./x-components.searchxevents.facetschanged.md) event. |
+|  [Fade](./x-components.fade.md) | Renders a transition wrapping the element passed in the default slot. The animation just fades in/out the element by changing its opacity. |
 |  [FadeAndSlide](./x-components.fadeandslide.md) | Renders a transition group wrapping the elements passed in the default slot and animating them with a fade and slide animation. |
+|  [FallbackDisclaimer](./x-components.fallbackdisclaimer.md) | The <code>FallbackDisclaimer</code> component shows a message if the filters have been removed from the current search because there were no results. |
 |  [FiltersInjectionMixin](./x-components.filtersinjectionmixin.md) | Mixin to share filters injection logic. |
 |  [FiltersList](./x-components.filterslist.md) | Renders a list with a list item per each [BooleanFilter](./x-types.booleanfilter.md) in the filters prop array. Each list item has a scoped slot, passing the filter as slot prop. |
 |  [FiltersSearch](./x-components.filterssearch.md) | Renders the filters sifted with the input query. |
 |  [FixedHeaderAndAsidesLayout](./x-components.fixedheaderandasideslayout.md) | Component for use as Layout to be filled with the rest of the components. |
 |  [GlobalXBus](./x-components.globalxbus.md) | This component helps subscribing to any [XEvent](./x-components.xevent.md) with custom callbacks using Vue listeners API. |
 |  [HierarchicalFilter](./x-components.hierarchicalfilter.md) | Renders a hierarchical filter recursively, emitting the needed events when clicked. |
-|  [HistoryQueries](./x-components.historyqueries.md) | This component renders a list of suggestions coming from the user queries history. |
+|  [Highlight](./x-components.highlight.md) | Highlights the given part of the text. The component is smart enough to do matches between special characters like tilde, cedilla, eñe, capital letters... |
+|  [HistoryQueries](./x-components.historyqueries.md) | This component renders a list of suggestions coming from the user queries history. Allows the user to select one of them, emitting the needed events. A history query is just another type of suggestion that contains a query that the user has made in the past. |
 |  [HistoryQueriesGetter](./x-components.historyqueriesgetter.md) | Class implementation for the [HistoryQueriesGetters.historyQueries](./x-components.historyqueriesgetters.historyqueries.md) getter. |
+|  [HistoryQueriesSwitch](./x-components.historyqueriesswitch.md) | History Queries Switch is a component to enable or disable the history queries. This component emits events depending on the <code>isEnabled</code> value. |
 |  [HistoryQuery](./x-components.historyquery.md) | This component renders a history query suggestion combining two buttons: one for selecting this suggestion as the search query, and another one to remove this query suggestion from the history queries. |
-|  [IdentifierResult](./x-components.identifierresult.md) | This component renders an identifier result value and highlights its matching part with the query from the state. Receives as prop the [result data](./x-types.result.md)<!-- -->. |
-|  [IdentifierResults](./x-components.identifierresults.md) | Paints the list of identifier results stored in the state. Each identifier result should be represented by a [identifier result component](./x-components.identifierresult.md) besides any other component. |
+|  [IdentifierResult](./x-components.identifierresult.md) | This component renders an identifier result value and highlights its matching part with the query from the state. Receives as prop the [Result](./x-types.result.md) data. |
+|  [IdentifierResults](./x-components.identifierresults.md) | Paints the list of identifier results stored in the state. Each identifier result should be represented by a [IdentifierResult](./x-components.identifierresult.md) component besides any other component. |
 |  [ItemsList](./x-components.itemslist.md) | It renders a list of [ListItem](./x-components.listitem.md) providing a slot for each <code>slotName</code> which depends on the <code>modelName</code>of the item. |
 |  [ItemsListInjectionMixin](./x-components.itemslistinjectionmixin.md) | Mixin to facilitate providing and injecting a list of list items. Injected list is available at <code>injectedListItems</code>, and the provided list should be stored in <code>items</code>. |
 |  [LocationProvider](./x-components.locationprovider.md) | Location Provider component. This component injects the location with value passed as prop. |
-|  [MainScroll](./x-components.mainscroll.md) | Extends the scroll making it able to sync the first visible element, and allowing the children position to be restored.<!-- -->Each child element that wants to have this support must be wrapped in a [MainScrollItem](./x-components.mainscrollitem.md) component. |
+|  [MainScroll](./x-components.mainscroll.md) | <p>Extends the scroll making it able to sync the first visible element, and allowing the children position to be restored.</p><p>Each child element that wants to have this support must be wrapped in a [MainScrollItem](./x-components.mainscrollitem.md) component.</p> |
 |  [MainScrollItem](./x-components.mainscrollitem.md) | Wrapper for elements contained in the [MainScroll](./x-components.mainscroll.md) that should store/restore its position. |
 |  [MultiColumnMaxWidthLayout](./x-components.multicolumnmaxwidthlayout.md) | Component for use as Layout to be filled with the rest of the Components. |
 |  [MyHistory](./x-components.myhistory.md) | The component renders the full history of user searched queries grouped by the day they were performed. |
-|  [NextQueries](./x-components.nextqueries.md) | Simple next-queries component that renders a list of suggestions, allowing the user to select one of them, and emitting the needed events. A next query is a suggestion for a new search, related to your previous query. I.e. If people normally search for <code>shirts</code>, and then <code>trousers</code>, <code>trousers</code> would be a next query of <code>shirts</code>. |
+|  [NextQueries](./x-components.nextqueries.md) | Simple next-queries component that renders a list of \[<code>BaseSuggestions</code>\](./x-components.base-suggestions.md), allowing the user to select one of them, and emitting the needed events. A next query is a suggestion for a new search, related to your previous query. I.e. If people normally search for <code>shirts</code>, and then <code>trousers</code>, <code>trousers</code> would be a next query of <code>shirts</code>. |
 |  [NextQueriesList](./x-components.nextquerieslist.md) | Component that inserts groups of next queries in different positions of the injected search items list, based on the provided configuration. |
 |  [NextQuery](./x-components.nextquery.md) | Renders a next query item which receives the suggestion that will be rendered as a prop. It exposes a default slot to change the next query content. If the slot is not overridden, it will render the suggestion query by default. |
+|  [NextQueryPreview](./x-components.nextquerypreview.md) | Retrieves a preview of the results of a next query and exposes them in the default slot, along with the next query and the totalResults of the search request. By default, it renders the names of the results. |
 |  [NumberRangeFilter](./x-components.numberrangefilter.md) | Renders a number range filter, emitting the needed events when clicked. |
 |  [PartialQueryButton](./x-components.partialquerybutton.md) | A button that when pressed emits the [XEventsTypes.UserAcceptedAQuery](./x-components.xeventstypes.useracceptedaquery.md) and [SearchXEvents.UserClickedPartialQuery](./x-components.searchxevents.userclickedpartialquery.md) events, expressing the user intention to set the partial query. |
 |  [PartialResultsList](./x-components.partialresultslist.md) | It renders a list of partial results from [SearchState.partialResults](./x-components.searchstate.partialresults.md) by default. It also provides the partial result slot to customize the item with the partial result bound. |
 |  [PopularSearch](./x-components.popularsearch.md) | Renders a popular search item which receives the suggestion that will be rendered as a prop. It exposes a default slot to change the popular search content. If the slot is not overridden, it will render the suggestion query by default. |
 |  [PopularSearches](./x-components.popularsearches.md) | Simple popular-searches component that renders a list of suggestions, allowing the user to select one of them, and emitting the needed events. A popular search is just a query that has been searched a lot in a certain period and may optionally have associated a set of filters. |
-|  [Promoted](./x-components.promoted.md) | A promoted result is just an item that has been inserted into the search results to advertise something. Usually it is one of the first items in the grid, and has the same shape as a result. It just contains a link to the promoted content, an image, and a title. |
-|  [PromotedsList](./x-components.promotedslist.md) | It renders a [ItemsList](./x-components.itemslist.md) of promoteds from [SearchState.promoteds](./x-components.searchstate.promoteds.md) by default using the <code>ItemsInjectionMixin</code>.<!-- -->The component provides a default slot which wraps the whole component with the <code>promoteds</code> plus the <code>searchInjectedItems</code> which also contains the injected list items from the ancestor.<!-- -->It also provides the parent slots to customize the items. |
+|  [PreselectedFilters](./x-components.preselectedfilters.md) | This component emits [FacetsXEvents.PreselectedFiltersProvided](./x-components.facetsxevents.preselectedfiltersprovided.md) when a preselected filter is set in the snippet config or by using the prop of the component. |
+|  [Promoted](./x-components.promoted.md) | <p>A promoted result is just an item that has been inserted into the search results to advertise something. Usually it is one of the first items in the grid, and has the same shape as a result. It just contains a link to the promoted content, an image, and a title.</p><p>Additionally, this component exposes the following props to modify the classes of the elements: <code>titleClass</code>.</p> |
+|  [PromotedsList](./x-components.promotedslist.md) | <p>It renders a [ItemsList](./x-components.itemslist.md) of promoteds from [SearchState.promoteds](./x-components.searchstate.promoteds.md) by default using the <code>ItemsInjectionMixin</code>.</p><p>The component provides a default slot which wraps the whole component with the <code>promoteds</code> plus the <code>searchInjectedItems</code> which also contains the injected list items from the ancestor.</p><p>It also provides the parent slots to customize the items.</p> |
+|  [QueryPreview](./x-components.querypreview.md) | Retrieves a preview of the results of a query and exposes them in the default slot, along with the query preview and the totalResults of the search request. By default, it renders the names of the results. |
+|  [QueryPreviewButton](./x-components.querypreviewbutton.md) | <p>Component containing an event button that emits [QueriesPreviewXEvents.UserAcceptedAQueryPreview](./x-components.queriespreviewxevents.useracceptedaquerypreview.md) when clicked with the full query preview info as payload.</p><p>It has a default slot to customize its contents.</p> |
+|  [QueryPreviewList](./x-components.querypreviewlist.md) | Renders the results previews of a list of objects with the information about the query preview, and exposes the [QueryPreview](./x-components.querypreview.md) slots to modify the content. The requests are made in sequential order. |
 |  [QuerySuggestion](./x-components.querysuggestion.md) | This component renders a suggestion for a query. A query suggestion is a recommended query based on previous search queries. It contains the query itself and a set of filters associated. For example, if you're searching for \_shirt\_, a query suggestion could be \_long sleeve shirt\_. |
 |  [QuerySuggestions](./x-components.querysuggestions.md) | This component renders a list of possible search queries to select from as a query is entered in the input field. By default, this is a list of \[<code>QuerySuggestion</code>\](./x-components.query-suggestion.md) components. |
 |  [QuerySuggestionsGetter](./x-components.querysuggestionsgetter.md) | Class implementation for the [QuerySuggestionsGetter.querySuggestions()](./x-components.querysuggestionsgetter.querysuggestions.md) getter. |
-|  [Recommendations](./x-components.recommendations.md) | It renders a list of recommendations from the [Recommendations](./x-components.recommendationsstate.recommendations.md) state by default. The component provides the slot layout which wraps the whole component with the recommendations bounded. It also provides the default slot to customize the item, which is within the layout slot, with the recommendation bounded. Each recommendation should be represented by a [result link component](./x-components.baseresultlink.md) besides any other component. |
+|  [Recommendations](./x-components.recommendations.md) | It renders a list of recommendations from the [RecommendationsState.recommendations](./x-components.recommendationsstate.recommendations.md) state by default. The component provides the slot layout which wraps the whole component with the recommendations bounded. It also provides the default slot to customize the item, which is within the layout slot, with the recommendation bounded. Each recommendation should be represented by a [BaseResultLink](./x-components.baseresultlink.md) component besides any other component. |
 |  [Redirection](./x-components.redirection.md) | A redirection is a component that sends the user to a link in the website. It is helpful when there are queries like <code>help</code>, <code>shipping costs</code>, <code>my account</code>, where a link to a section in the website will be more helpful than the set of results returned. |
 |  [RelatedTag](./x-components.relatedtag.md) | This component renders a related tag for a query. A related tag is a descriptive keyword related to the current query to fine-tune the search. For example, if you are searching for \*lego\*, a related tag could be \*city\*, refining the search with \*lego city\*. |
 |  [RelatedTags](./x-components.relatedtags.md) | This component renders a set of \[<code>RelatedTag</code>\](./x-components.related-tag) components by default to select from after a query is performed to fine-tune search. For example, if you are searching for \*lego\*, different related tags could be \*city\*, \*friends\*, or \*harry potter\*, refining the search with \*lego city\*, \*lego friends\*, or \*lego harry potter\*. |
 |  [RemoveHistoryQuery](./x-components.removehistoryquery.md) | Button that when it is pressed emits the [HistoryQueriesXEvents.UserPressedRemoveHistoryQuery](./x-components.historyqueriesxevents.userpressedremovehistoryquery.md) event, expressing the user intention to remove a query in the history. |
 |  [RenderlessExtraParams](./x-components.renderlessextraparams.md) | It emits a [ExtraParamsXEvents.UserChangedExtraParams](./x-components.extraparamsxevents.userchangedextraparams.md) when the <code>updateValue</code> is called. |
-|  [RenderlessFilter](./x-components.renderlessfilter.md) | Renders default slot content. It binds to the default slot a [BooleanFilter](./x-types.booleanfilter.md)<!-- -->, the [XEvents](./x-components.xevent.md) that will be emitted when clicking the content, the css classes and if the content should be disabled. |
-|  [ResultsList](./x-components.resultslist.md) | It renders a [ItemsList](./x-components.itemslist.md) list with the results from [SearchState.results](./x-components.searchstate.results.md) by default.<!-- -->The component provides a default slot which wraps the whole component with the <code>results</code> bound.<!-- -->It also provides the slot result to customize the item, which is within the default slot, with the result bound. |
+|  [RenderlessFilter](./x-components.renderlessfilter.md) | Renders default slot content. It binds to the default slot a [BooleanFilter](./x-types.booleanfilter.md)<!-- -->, the [XEvent](./x-components.xevent.md) that will be emitted when clicking the content, the css classes and if the content should be disabled. |
+|  [ResultsList](./x-components.resultslist.md) | <p>It renders a [ItemsList](./x-components.itemslist.md) list with the results from [SearchState.results](./x-components.searchstate.results.md) by default.</p><p>The component provides a default slot which wraps the whole component with the <code>results</code> bound.</p><p>It also provides the slot result to customize the item, which is within the default slot, with the result bound.</p> |
+|  [ResultVariantSelector](./x-components.resultvariantselector.md) | Component to show and select the available variants of a product for a given nest level. TODO: Add logger warning on mount when result is not injected. |
+|  [ResultVariantsProvider](./x-components.resultvariantsprovider.md) | <p>Component that exposes the result merged with its selected variant in the default slot.</p><p>It receives the original result and keeps track of the selected variant.</p><p>It provides the original result, the array containing the selected variants and a callback to set the selected variant to be used from a child.</p> |
 |  [Scroll](./x-components.scroll.md) | Scrollable container that emits scroll related X Events. It exposes all the listeners and props from the [BaseScroll](./x-components.basescroll.md) component. |
 |  [ScrollMixin](./x-components.scrollmixin.md) | Mixin to share Scroll logic. |
 |  [ScrollToTop](./x-components.scrolltotop.md) | The <code>ScrollToTop</code> component is a button that the user can click to make a container scroll up to its initial position. |
 |  [SearchButton](./x-components.searchbutton.md) | This component renders a button to submit the query. |
 |  [SearchInput](./x-components.searchinput.md) | This component renders an input field that allows the user to type a query. It also reacts to query changes through event listening. |
-|  [SelectedFilters](./x-components.selectedfilters.md) | Provides a scoped slot with the selected filters from every facet, or from the facet which facet id is passed as property.<!-- -->The default slot renders the length of the selected filters array. The property "alwaysVisible" handles if the component is rendered if no filters are selected. |
-|  [SelectedFiltersList](./x-components.selectedfilterslist.md) | This component renders a list of selected filters from every facet, or from the facet ids passed as property. It uses the SelectedFilters component (state).<!-- -->It provides two slots: a scoped one which name is the filter facet id; and a default one. Both exposes the filter and renders the filter label by default.<!-- -->The property "alwaysVisible" handles if the component is rendered if no filters are selected. |
+|  [SearchInputPlaceholder](./x-components.searchinputplaceholder.md) | . This component renders an animated placeholder for the search input in the shape of a list of iterating messages that can be configured to happen always or only when hovering the input |
+|  [SelectedFilters](./x-components.selectedfilters.md) | <p>Provides a scoped slot with the selected filters from every facet, or from the facet which facet id is passed as property.</p><p>The default slot renders the length of the selected filters array. The property "alwaysVisible" handles if the component is rendered if no filters are selected.</p> |
+|  [SelectedFiltersList](./x-components.selectedfilterslist.md) | <p>This component renders a list of selected filters from every facet, or from the facet ids passed as property. It uses the SelectedFilters component (state).</p><p>It provides two slots: a scoped one which name is the filter facet id; and a default one. Both exposes the filter and renders the filter label by default.</p><p>The property "alwaysVisible" handles if the component is rendered if no filters are selected.</p> |
+|  [SemanticQueries](./x-components.semanticqueries.md) | Retrieves a list of semantic queries from the state and exposes them in the slots. |
+|  [SemanticQuery](./x-components.semanticquery.md) | This component renders a semantic query. A semantic query is a recommended query that is similar in its meaning to another one. It contains the query and the distance, which indicates how similar the query is compared to the searched query. |
 |  [SimpleFilter](./x-components.simplefilter.md) | Renders a simple filter, emitting the needed events when clicked. |
 |  [SingleColumnLayout](./x-components.singlecolumnlayout.md) | Component for use as Layout to be filled with the rest of the Components. |
 |  [SlicedFilters](./x-components.slicedfilters.md) | Component that slices a list of filters and returns them using the default scoped slot, allowing the user to show the full list of them or slicing them again using the show more/less buttons. |
-|  [SlidingPanel](./x-components.slidingpanel.md) | This component allows for any other component or element inside it to be horizontally navigable. It also implements customizable buttons as well as other minor customizations to its general behavior. |
+|  [SlidingPanel](./x-components.slidingpanel.md) | <p>This component allows for any other component or element inside it to be horizontally navigable. It also implements customizable buttons as well as other minor customizations to its general behavior.</p><p>Additionally, this component exposes the following props to modify the classes of the elements: <code>buttonClass</code>.</p> |
 |  [SnippetCallbacks](./x-components.snippetcallbacks.md) | This component subscribes to any [XEvent](./x-components.xevent.md) with a custom callbacks provided by the snippet configuration. |
 |  [SnippetConfigExtraParams](./x-components.snippetconfigextraparams.md) | Extracts the extra parameters from the [SnippetConfig](./x-components.snippetconfig.md) and syncs it with the request objects of every x-module. |
 |  [SortDropdown](./x-components.sortdropdown.md) | The <code>SortDropdown</code> component allows user to select the search results order. This component also allows to change the selected sort programmatically. |
 |  [SortedFilters](./x-components.sortedfilters.md) | Component that sorts a list of filters and returns them using the default scoped slot. |
 |  [SortList](./x-components.sortlist.md) | The <code>SortList</code> component allows user to select the search results order. This component also allows to change the selected sort programmatically. |
 |  [SortMixin](./x-components.sortmixin.md) | Mixin to share Sort logic. |
-|  [Spellcheck](./x-components.spellcheck.md) | The <code>Spellcheck</code> component allows to inform the user with a friendly message that he might have misspelled the search query. This message can be set using the default slot of the component, which gives access to the searched query using the <code>query</code> scope property, and the spellchecked query proposal, using the <code>spellcheckedQuery</code> scope property.<!-- -->The component will only render itself if the <code>spellcheckedQuery</code> property has value. |
+|  [SortPickerList](./x-components.sortpickerlist.md) | The <code>SortPickerList</code> component allows user to select the search results order. This component also allows to change the selected sort programmatically. |
+|  [Spellcheck](./x-components.spellcheck.md) | <p>The <code>Spellcheck</code> component allows to inform the user with a friendly message that he might have misspelled the search query. This message can be set using the default slot of the component, which gives access to the searched query using the <code>query</code> scope property, and the spellchecked query proposal, using the <code>spellcheckedQuery</code> scope property.</p><p>The component will only render itself if the <code>spellcheckedQuery</code> property has value.</p> |
 |  [SpellcheckButton](./x-components.spellcheckbutton.md) | A button that when pressed emits the [XEventsTypes.UserAcceptedAQuery](./x-components.xeventstypes.useracceptedaquery.md) and [XEventsTypes.UserAcceptedSpellcheckQuery](./x-components.xeventstypes.useracceptedspellcheckquery.md) events, expressing the user intention to set the spellchecked query. |
 |  [StaggeredFadeAndSlide](./x-components.staggeredfadeandslide.md) | Renders a transition group wrapping the elements passed in the default slot and animating them with an staggered fade and slide animation. |
 |  [StaggeringTransitionGroup](./x-components.staggeringtransitiongroup.md) | A replacement component for Vue's transition-group, that also adds the option to stagger the animations. |
-|  [Tagging](./x-components.tagging.md) | This component enables and manages the sending of information to the [Empathy Tagging API](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html)<!-- -->. It allows to enable or disable the session id management through the <code>consent</code> prop. |
-|  [UrlHandler](./x-components.urlhandler.md) | This component manage the browser URL parameters to perserve them through reloads and browser history navigation. It allow to configure the default url parameter names using its attributes. This component doesn't render elements to the DOM. |
+|  [Tagging](./x-components.tagging.md) | This component enables and manages the sending of information to the \[Empathy Tagging API\](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html). It allows to enable or disable the session id management through the <code>consent</code> prop. |
+|  [UrlHandler](./x-components.urlhandler.md) | This component manages the browser URL parameters to preserve them through reloads and browser history navigation. It allow to configure the default url parameter names using its attributes. This component doesn't render elements to the DOM. |
 |  [WindowScroll](./x-components.windowscroll.md) | The <code>WindowScroll</code> component listens to either the <code>html</code> or <code>body</code> DOM scroll events, and re-emits them as X Events. Additionally it also emits events related to the direction or current position of these elements scroll. |
-|  [XInstaller](./x-components.xinstaller.md) | The purpose of this class is to offer a quick way to initialize the XComponents in a setup project. It allows to receive all the options in [InstallXOptions](./x-components.installxoptions.md) which is an extension of [XPluginOptions](./x-components.xpluginoptions.md) with all the options for the plugin and some options more.<!-- -->This class does multiple things: 1. Install the [XPlugin](./x-components.xplugin.md) with the [XPluginOptions](./x-components.xpluginoptions.md)<!-- -->. 2. Creates the public [XAPI](./x-components.xapi.md) and add it to global window. 3. Creates the Vue Application for the customer project.<!-- -->The steps 2 &amp; 3 are optional and depends on the options passed in [InstallXOptions](./x-components.installxoptions.md)<!-- -->. |
+|  [XInstaller](./x-components.xinstaller.md) | <p>The purpose of this class is to offer a quick way to initialize the XComponents in a setup project. It allows to receive all the options in [InstallXOptions](./x-components.installxoptions.md) which is an extension of [XPluginOptions](./x-components.xpluginoptions.md) with all the options for the plugin and some options more.</p><p>This class does multiple things: 1. Install the [XPlugin](./x-components.xplugin.md) with the [XPluginOptions](./x-components.xpluginoptions.md)<!-- -->. 2. Creates the public [XAPI](./x-components.xapi.md) and add it to global window. 3. Creates the Vue Application for the customer project.</p><p>The steps 2 &amp; 3 are optional and depends on the options passed in [InstallXOptions](./x-components.installxoptions.md)<!-- -->.</p> |
 |  [XPlugin](./x-components.xplugin.md) | Vue plugin that initializes the properties needed by the x-components, and exposes the events bus and the adapter after it has been installed. |
 
 ## Functions
@@ -141,13 +143,16 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [areFiltersDifferent(someFilters, anotherFilters)](./x-components.arefiltersdifferent.md) | Compares if two lists contains the same filters. |
 |  [arrayToObject(array)](./x-components.arraytoobject.md) | Reduce an array of strings to an object which properties names are the value of each string, and the value under that property are also the string. |
 |  [arrayToObject(array, key)](./x-components.arraytoobject_1.md) | Reduce an array of objects to an object which properties names are the value of each object\[key\], and the value under that property are each object. 'key' is the the parameter passed to this function. |
+|  [assertXPluginOptionsAreValid(options)](./x-components.assertxpluginoptionsarevalid.md) | Asserts that the passed options object is valid, providing helpful error messages. |
 |  [capitalize(str)](./x-components.capitalize.md) | Util to capitalize a string . |
 |  [clone(something)](./x-components.clone.md) | Deeply clones an object or an array. |
-|  [compileMessage(message, params)](./x-components.compilemessage.md) | Replaces each key in compiledMessage for the provided key's value. |
 |  [createCollapseAnimationMixin(property)](./x-components.createcollapseanimationmixin.md) | Adds parametrized methods to a component to allow the collapsing of the provided property. |
 |  [createFetchAndSaveActions({ fetch, onSuccess, onError, onCancel })](./x-components.createfetchandsaveactions.md) | Utility to create an action that requests and save some data asynchronously, with the option to cancel the request at any moment. This factory provides with the standard flow for requesting, cancelling, handling errors for a module, while also taking care of its status. |
 |  [createRawFilters(filterIds)](./x-components.createrawfilters.md) | Helper method which creates the filter entity from the filter ir of the url. |
 |  [createStoreEmitters(storeModule, emitters)](./x-components.createstoreemitters.md) | Helper function for creating type-safe [StoreEmitters](./x-components.storeemitters.md)<!-- -->. |
+|  [createTrackDisplayWire(property)](./x-components.createtrackdisplaywire.md) | Factory helper to create a wire for the track of the display click. |
+|  [createTrackWire(property)](./x-components.createtrackwire.md) | Factory helper to create a wire for the track of a taggable element. |
+|  [createUseDevice(devices)](./x-components.createusedevice.md) | Factory function that creates a composable for device detection using the devices parameter to configure breakpoints. |
 |  [createWireFromFunction(fn)](./x-components.createwirefromfunction.md) | Creates a wire that executes the function passed. This function will receive a [WireParams](./x-components.wireparams.md) object. |
 |  [createWiring(wiring)](./x-components.createwiring.md) | Util function to generate type-safe wiring. If TypeScript ever accepts the PR about generic type inference this function can be removed. |
 |  [currencyFormatter(value, format)](./x-components.currencyformatter.md) | Format a value with a given format. |
@@ -160,14 +165,17 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [filterFalsyPayload(wire)](./x-components.filterfalsypayload.md) | Creates a [Wire](./x-components.wire.md) that is only executed when the payload is truthy. A truthy value is whatever is not a [falsy value](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)<!-- -->. |
 |  [filterTruthyPayload(wire)](./x-components.filtertruthypayload.md) | Creates a [Wire](./x-components.wire.md) that is only executed when the payload is a [falsy value](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)<!-- -->. |
 |  [filterWhitelistedModules(wire, whitelist)](./x-components.filterwhitelistedmodules.md) | Creates a [Wire](./x-components.wire.md) that is only executed if the event is emitted from a [XModule](./x-components.xmodule.md) that is included in the <code>whitelist</code> array passed as parameter. |
+|  [flatHierarchicalFilters(hierarchicalFilters)](./x-components.flathierarchicalfilters.md) | This function flattens the Hierarchical Filters, returning an array with all filters including the children. |
+|  [getGetterPath(moduleName, getterName)](./x-components.getgetterpath.md) | Generates a getter path string with the module and getter name. |
 |  [getRootXComponent(component)](./x-components.getrootxcomponent.md) | Given a component, finds the root XComponent in the ancestors hierarchy. |
 |  [getStateAndGettersFromModule(state, getters, moduleName)](./x-components.getstateandgettersfrommodule.md) | Returns an object with the getters and state of a module of store defined by the moduleName parameter. |
-|  [Getter(module, getter)](./x-components.getter.md) | Generates a computed property which returns the selected getter value.<!-- -->The decorated property needs to be public for type inference to work. |
+|  [getTargetElement(event)](./x-components.gettargetelement.md) | Returns the target element for a given event. The target element is obtained from <code>composedPath</code> Event method because if the event is triggered inside a Shadow DOM context, <code>event.target</code> points to Shadow DOM element, not the element that triggered the event. <code>composedPath</code> method also is available in a non-shadow DOM context. |
+|  [Getter(module, getter)](./x-components.getter.md) | <p>Generates a computed property which returns the selected getter value.</p><p>The decorated property needs to be public for type inference to work.</p> |
 |  [groupItemsBy(array, groupBy)](./x-components.groupitemsby.md) | Groups the array items based on the provided <code>groupBy</code> function. |
 |  [isArrayEmpty(array)](./x-components.isarrayempty.md) | Returns if the given array is <code>null</code>, <code>undefined</code>, or has no elements. |
 |  [isElementEqualOrContained(a, b)](./x-components.iselementequalorcontained.md) | Returns true if the two elements are the same, or if <code>b</code> is a child of <code>a</code>. |
 |  [isInRange(number, \[min, max\])](./x-components.isinrange.md) | Returns true if the number is greater than or equal than the min, and less than or equal than the max. |
-|  [isNewQuery(newQuery, previousQuery)](./x-components.isnewquery.md) | Compares two queries to know if the new one is a refined query from the previous one or a new one.<!-- -->A refined query is a query which has the previous query or part of it. Example: - previousQuery = 'lego star'. - newQuery = 'lego star wars'.<!-- -->Example: - previousQuery = 'lego star wars'. - newQuery = 'lego star'.<!-- -->A new query is a query which has not the previous query. Example: - previousQuery = 'lego star'. - newQuery = 'lego wars'.<!-- -->In this case, it is changing the word set, because a word is changed by another one, so this is changing the search intention. |
+|  [isNewQuery(newQuery, previousQuery)](./x-components.isnewquery.md) | <p>Compares two queries to know if the new one is a refined query from the previous one or a new one.</p><p>A refined query is a query which has the previous query or part of it. Example: - previousQuery = 'lego star'. - newQuery = 'lego star wars'.</p><p>Example: - previousQuery = 'lego star wars'. - newQuery = 'lego star'.</p><p>A new query is a query which has not the previous query. Example: - previousQuery = 'lego star'. - newQuery = 'lego wars'.</p><p>In this case, it is changing the word set, because a word is changed by another one, so this is changing the search intention.</p> |
 |  [isStringEmpty(str)](./x-components.isstringempty.md) | Util used to return true if the string is empty, undefined or null. |
 |  [isXComponent(component)](./x-components.isxcomponent.md) | Returns if the component is an X-Component. An X-Component is a component that has an [XModule](./x-components.xmodule.md) associated to it. |
 |  [mapWire(toWire, mapFn)](./x-components.mapwire.md) | Creates a [Wire](./x-components.wire.md) from other <code>toWire</code> wire. It uses <code>mapFn</code> to transform the <code>FromPayload</code> received to <code>ToPayload</code> which <code>toWire</code> requires. This is useful to reuse wires in different Events where the payload doesn't fit exactly. |
@@ -179,9 +187,11 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [namespacedWireDispatchWithoutPayload(moduleName)](./x-components.namespacedwiredispatchwithoutpayload.md) | Creates a namespaced [wireDispatchWithoutPayload()](./x-components.wiredispatchwithoutpayload.md) for the module name passed. |
 |  [normalizeString(string)](./x-components.normalizestring.md) | Trims the string, transforms it to lower case, and removes [combining diacritical marks](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks) from it. |
 |  [setStatus(state, status)](./x-components.setstatus.md) | Sets the request status. Can be used as a mutation. |
-|  [State(module, path)](./x-components.state.md) | Generates a computed property which returns the selected state.<!-- -->The decorated property needs to be public for type inference to work. |
+|  [setupDevtools(app)](./x-components.setupdevtools.md) | **_(BETA)_** Setups a plugin for the Vue's devtools adding: - [XEvent](./x-components.xevent.md)<!-- -->s timeline. Every event is recorded in time, and its payload and metadata can be inspected. - Wiring inspector. Events and its wires can be viewed and disabled. |
+|  [State(module, path)](./x-components.state.md) | <p>Generates a computed property which returns the selected state.</p><p>The decorated property needs to be public for type inference to work.</p> |
 |  [throttle(wire, timeInMs, options)](./x-components.throttle.md) | Creates a throttled [Wire](./x-components.wire.md)<!-- -->. Being throttled means that it will only be executed once every couple of milliseconds given by the <code>timeInMs</code> parameter. |
 |  [toKebabCase(str)](./x-components.tokebabcase.md) | Util to transform string a into kebab case. |
+|  [use$x()](./x-components.use_x.md) | Function which returns the <code>$x</code> object from the current component instance. |
 |  [wireCommit(mutation, payloadFactory)](./x-components.wirecommit.md) | Creates a wire that commits a mutation to the store. This wire receives a function. This function is used to get the actual payload value passed to mutation. This wire can be used in every event, as it does not have a payload type associated. |
 |  [wireCommit(mutation, staticPayload)](./x-components.wirecommit_1.md) | Creates a wire that commits a mutation to the store. This wire can receive any value as payload. This wire can be used in every event, as it does not have a payload type associated. |
 |  [wireCommit(mutation)](./x-components.wirecommit_2.md) | Creates a wire that commits a mutation to the store. This wire will commit to the store the payload that it receives in the observable. |
@@ -194,7 +204,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [wireServiceWithoutPayload(service)](./x-components.wireservicewithoutpayload.md) | Creates a wires factory that can create wires that will invoke the service methods but without payload. |
 |  [xComponentMixin(module)](./x-components.xcomponentmixin.md) | Initializes a component as an X-Component: \* Registers the module passed as parameter. \* Flags the component as X-Component, so then it can be detected with the [isXComponent()](./x-components.isxcomponent.md) function. |
 |  [XEmit(xEvent, { immediate, deep })](./x-components.xemit.md) | Emits the provided event whenever the decorated property changes. |
-|  [XInject(injectKey, defaultValue)](./x-components.xinject.md) | Generates an inject configuration object to inject a value provided by [XProvide()](./x-components.xprovide.md)<!-- -->. This function injects the value into a private property of the component instance using the default [Vue inject](https://vuejs.org/v2/api/#provide-inject)<!-- -->. This private property is named as the decorated property but prefixed with <code>_x-inject_</code>.<!-- -->Why is this private property necessary? Well, the [XProvide()](./x-components.xprovide.md) decorator, provides an object with the shape { value: any } being that value a getter to keep reactivity of the injected value. This private property is to "shortcut" that object and directly inject the value itself. Otherwise, you should access to the actual value using <code>.value</code>.<!-- -->The final step is done by a computed property. This has the same name as the decorated property. This computed returns the inner value getter of the injected object. This way the decorated property has finally the initial injected value. |
+|  [XInject(injectKey, defaultValue)](./x-components.xinject.md) | <p>Generates an inject configuration object to inject a value provided by [XProvide()](./x-components.xprovide.md)<!-- -->. This function injects the value into a private property of the component instance using the default [Vue inject](https://vuejs.org/v2/api/#provide-inject)<!-- -->. This private property is named as the decorated property but prefixed with <code>_x-inject_</code>.</p><p>Why is this private property necessary? Well, the [XProvide()](./x-components.xprovide.md) decorator, provides an object with the shape { value: any } being that value a getter to keep reactivity of the injected value. This private property is to "shortcut" that object and directly inject the value itself. Otherwise, you should access to the actual value using <code>.value</code>.</p><p>The final step is done by a computed property. This has the same name as the decorated property. This computed returns the inner value getter of the injected object. This way the decorated property has finally the initial injected value.</p> |
 |  [XOn(xEvent, metadataFilteringOptions)](./x-components.xon.md) | Creates a subscription to an [XEvent](./x-components.xevent.md)<!-- -->, an array of [XEvent](./x-components.xevent.md) or a component property ( reacting to its changes via a watcher) filtering out the passed metadata, if any, and un-subscribes on the beforeDestroy hook. |
 |  [XProvide(provideKey)](./x-components.xprovide.md) | Generates a provide function that returns an object with the injectable value returned in a getter to keep its reactivity, using the default [Vue inject](https://vuejs.org/v2/api/#provide-inject)<!-- -->. It overrides the provide key if the parent provides the same key. |
 
@@ -209,12 +219,18 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [DeviceMutations](./x-components.devicemutations.md) | Device store mutations. |
 |  [DeviceState](./x-components.devicestate.md) | Device store state. |
 |  [DeviceXEvents](./x-components.devicexevents.md) | Dictionary of the events of [DeviceXModule](./x-components.devicexmodule.md)<!-- -->, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. |
+|  [DisplayWireMetadata](./x-components.displaywiremetadata.md) | Wire metadata specific for display wires. |
 |  [EmpathizeActions](./x-components.empathizeactions.md) | Empathize store actions. |
 |  [EmpathizeConfig](./x-components.empathizeconfig.md) | Configuration options for the [EmpathizeXModule](./x-components.empathizexmodule.md)<!-- -->. |
 |  [EmpathizeGetters](./x-components.empathizegetters.md) | Empathize store getters. |
 |  [EmpathizeMutations](./x-components.empathizemutations.md) | Empathize store mutations. |
 |  [EmpathizeState](./x-components.empathizestate.md) | Empathize store state. |
 |  [EmpathizeXEvents](./x-components.empathizexevents.md) | Dictionary of the events of Empathize XModule, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. |
+|  [ExperienceControlsActions](./x-components.experiencecontrolsactions.md) | Experience Controls store actions. |
+|  [ExperienceControlsGetters](./x-components.experiencecontrolsgetters.md) | Experience Controls store getters. |
+|  [ExperienceControlsMutations](./x-components.experiencecontrolsmutations.md) | Experience Controls store mutations. |
+|  [ExperienceControlsState](./x-components.experiencecontrolsstate.md) | Experience Controls store state. |
+|  [ExperienceControlsXEvents](./x-components.experiencecontrolsxevents.md) | Dictionary of the events of Experience Controls XModule. |
 |  [ExtraParamsActions](./x-components.extraparamsactions.md) | ExtraParams store actions. |
 |  [ExtraParamsGetters](./x-components.extraparamsgetters.md) | ExtraParams store getters. |
 |  [ExtraParamsMutations](./x-components.extraparamsmutations.md) | ExtraParams store mutations. |
@@ -223,14 +239,16 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [ExtraPluginsOptions](./x-components.extrapluginsoptions.md) | Options to install more Vue plugins with. |
 |  [FacetGroupEntry](./x-components.facetgroupentry.md) | An object containing a facet id and the group id it belongs to. |
 |  [FacetsActions](./x-components.facetsactions.md) | Facets store actions. |
+|  [FacetsConfig](./x-components.facetsconfig.md) | Configuration options for the [FacetsXModule](./x-components.facetsxmodule.md)<!-- -->. |
 |  [FacetsGetters](./x-components.facetsgetters.md) | Facets store getters. |
-|  [FacetsGroup](./x-components.facetsgroup.md) | An object containing a list of facets, and the group they belong to.<!-- -->The facet group is used to perform operations over a list of facets. For example, some APIs have dynamic facets. This means that depending on the selected filters, some facets can be returned. For example if you select <code>category:television</code>, a new facet called \*Screen size\* might appear. And, because now filters are stored in a dictionary instead of an array, and overridden with each request, when the user performs a new query, we have to remove all the <code>Screen size</code> filters because we don't know if the API will return them or not in the new query. |
+|  [FacetsGroup](./x-components.facetsgroup.md) | <p>An object containing a list of facets, and the group they belong to.</p><p>The facet group is used to perform operations over a list of facets. For example, some APIs have dynamic facets. This means that depending on the selected filters, some facets can be returned. For example if you select <code>category:television</code>, a new facet called \*Screen size\* might appear. And, because now filters are stored in a dictionary instead of an array, and overridden with each request, when the user performs a new query, we have to remove all the <code>Screen size</code> filters because we don't know if the API will return them or not in the new query.</p> |
 |  [FacetsMutations](./x-components.facetsmutations.md) | Facets store mutations. |
 |  [FacetsService](./x-components.facetsservice.md) | Service to manipulate the filters. |
 |  [FacetsState](./x-components.facetsstate.md) | Facets store state. |
 |  [FacetsXEvents](./x-components.facetsxevents.md) | Dictionary of the events of Facets XModule, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. |
 |  [FetchAndSaveActions](./x-components.fetchandsaveactions.md) | Actions returned from the [createFetchAndSaveActions()](./x-components.createfetchandsaveactions.md)<!-- -->. |
 |  [FetchAndSaveHooks](./x-components.fetchandsavehooks.md) | Options to use with the [createFetchAndSaveActions()](./x-components.createfetchandsaveactions.md) factory. |
+|  [FiltersMetadata](./x-components.filtersmetadata.md) | An object containing additional context regarding the filters. |
 |  [HistoryQueriesActions](./x-components.historyqueriesactions.md) | HistoryQueries store actions. |
 |  [HistoryQueriesConfig](./x-components.historyqueriesconfig.md) | Configuration options for the [HistoryQueriesXModule](./x-components.historyqueriesxmodule.md)<!-- -->. |
 |  [HistoryQueriesGetters](./x-components.historyqueriesgetters.md) | HistoryQueries store getters. |
@@ -247,6 +265,8 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [InitWrapper](./x-components.initwrapper.md) | Interface for the returned type of the [XInstaller.init()](./x-components.xinstaller.init.md) function. |
 |  [InstallXOptions](./x-components.installxoptions.md) | Interface for the parameter of the constructor of [XInstaller](./x-components.xinstaller.md) function. It is an extended version of [XPluginOptions](./x-components.xpluginoptions.md)<!-- -->. |
 |  [InternalSearchRequest](./x-components.internalsearchrequest.md) | An internal search request containing the page used to calculate the start and rows properties of a [SearchRequest](./x-types.searchrequest.md)<!-- -->. |
+|  [InternalSearchResponse](./x-components.internalsearchresponse.md) | An internal search response containing the [InternalSearchRequest](./x-components.internalsearchrequest.md) performed to get a [SearchResponse](./x-types.searchresponse.md) and its [RequestStatus](./x-components.requeststatus.md)<!-- -->. |
+|  [MutateFilterPayload](./x-components.mutatefilterpayload.md) | Payload to use in the <code>mutateFilter</code> mutation. |
 |  [NamespacedWireCommit](./x-components.namespacedwirecommit.md) | Namespaced type for the [wireCommit()](./x-components.wirecommit.md) which creates a wire with its payload associated. Possible ways for creating a wire that commits a mutation. If a payload is passed, then the observable payload can be ignored, so the wire is applicable to any event. If no payload is passed, then the wire is only applicable to events with the same payload type than the mutation. |
 |  [NamespacedWireDispatch](./x-components.namespacedwiredispatch.md) | Namespaced type for the [wireDispatch()](./x-components.wiredispatch.md) which creates a wire with its payload associated. Possible ways for creating a wire that dispatches an action. If a payload is passed, then the observable payload can be ignored, so the wire is applicable to any event. If no payload is passed, then the wire is only applicable to events with the same payload type than the action. |
 |  [NextQueriesActions](./x-components.nextqueriesactions.md) | Next queries module actions. |
@@ -263,6 +283,15 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [PopularSearchesState](./x-components.popularsearchesstate.md) | Popular searches module state. |
 |  [PopularSearchesXEvents](./x-components.popularsearchesxevents.md) | Dictionary of the events of PopularSearches XModule, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. |
 |  [PrivateXModuleOptions](./x-components.privatexmoduleoptions.md) | Options for overriding the default store module and store emitters for a [XModule](./x-components.xmodule.md)<!-- -->. |
+|  [QueriesPreviewActions](./x-components.queriespreviewactions.md) | QueriesPreview store actions. |
+|  [QueriesPreviewConfig](./x-components.queriespreviewconfig.md) | Configuration options for the [QueriesPreviewXModule](./x-components.queriespreviewxmodule.md)<!-- -->. |
+|  [QueriesPreviewGetters](./x-components.queriespreviewgetters.md) | QueriesPreview store getters. |
+|  [QueriesPreviewMutations](./x-components.queriespreviewmutations.md) | QueriesPreview store mutations. |
+|  [QueriesPreviewState](./x-components.queriespreviewstate.md) | QueriesPreview store state. |
+|  [QueriesPreviewXEvents](./x-components.queriespreviewxevents.md) | Dictionary of the events of QueriesPreview XModule, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. |
+|  [QueryPreviewInfo](./x-components.querypreviewinfo.md) | Information to render or request a query preview with. |
+|  [QueryPreviewItem](./x-components.querypreviewitem.md) | QueriesPreview store state. |
+|  [QueryPreviewStatusPayload](./x-components.querypreviewstatuspayload.md) | Payload to use in the <code>setStatus</code> mutation. |
 |  [QuerySuggestionsActions](./x-components.querysuggestionsactions.md) | QuerySuggestions store actions. |
 |  [QuerySuggestionsConfig](./x-components.querysuggestionsconfig.md) | Configuration options for the [QuerySuggestionsXModule](./x-components.querysuggestionsxmodule.md)<!-- -->. |
 |  [QuerySuggestionsGetters](./x-components.querysuggestionsgetters.md) | QuerySuggestions store getters. |
@@ -301,6 +330,12 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [SearchMutations](./x-components.searchmutations.md) | Search store mutations. |
 |  [SearchState](./x-components.searchstate.md) | Search store state. |
 |  [SearchXEvents](./x-components.searchxevents.md) | Dictionary of the events of Search XModule, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. |
+|  [SemanticQueriesActions](./x-components.semanticqueriesactions.md) | SemanticQueries store actions. |
+|  [SemanticQueriesConfig](./x-components.semanticqueriesconfig.md) | Configuration options for the [SemanticQueriesXModule](./x-components.semanticqueriesxmodule.md)<!-- -->. |
+|  [SemanticQueriesGetters](./x-components.semanticqueriesgetters.md) | SemanticQueries store getters. |
+|  [SemanticQueriesMutations](./x-components.semanticqueriesmutations.md) | SemanticQueries store mutations. |
+|  [SemanticQueriesState](./x-components.semanticqueriesstate.md) | SemanticQueries store state. |
+|  [SemanticQueriesXEvents](./x-components.semanticqueriesxevents.md) | Dictionary of the events of [SemanticQueriesXModule](./x-components.semanticqueriesxmodule.md)<!-- -->,where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. |
 |  [SnippetConfig](./x-components.snippetconfig.md) | Interface with the possible parameters to receive through the snippet integration. |
 |  [SpatialNavigation](./x-components.spatialnavigation.md) | Interface for SpatialNavigation services based on [CSSWK specification](https://www.w3.org/TR/css-nav-1/)<!-- -->. |
 |  [StateSelector](./x-components.stateselector.md) | Composition type of [SimpleStateSelector](./x-components.simplestateselector.md) which allows to indicate if the state selector should be executed in first instance (first assignment of values). Selector is the [SimpleStateSelector](./x-components.simplestateselector.md) and immediate flags if the selector should be executed when it is initialized for first time. |
@@ -328,13 +363,12 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [WireServiceWithoutPayload](./x-components.wireservicewithoutpayload.md) | Wires factory to invoke methods from a given service. |
 |  [XActionContext](./x-components.xactioncontext.md) | Type safe Vuex [Action](https://vuex.vuejs.org/api/#actions) context, with the local types of the module. |
 |  [XAPI](./x-components.xapi.md) | Interface with the API functions exposes as X [window](https://developer.mozilla.org/en-US/docs/Web/API/Window) property. |
-|  [XBus](./x-components.xbus.md) | The events bus that allows emitting and subscribing to [XEventsTypes](./x-components.xeventstypes.md)<!-- -->. |
 |  [XComponentAliasAPI](./x-components.xcomponentaliasapi.md) | Alias to facilitate retrieving values from the store. |
 |  [XComponentAliasQueryAPI](./x-components.xcomponentaliasqueryapi.md) | Alias to facilitate retrieving the modules with query. |
 |  [XComponentAliasStatusAPI](./x-components.xcomponentaliasstatusapi.md) | Alias to facilitate retrieving the modules with status. |
-|  [XComponentAPI](./x-components.xcomponentapi.md) | The XComponentAPI exposes access to the [XBus](./x-components.xbus.md)<!-- -->, and store aliases to the components. |
-|  [XComponentBusAPI](./x-components.xcomponentbusapi.md) | API for emitting and subscribing to events of the [XBus](./x-components.xbus.md)<!-- -->. |
-|  [XEventsTypes](./x-components.xeventstypes.md) | Dictionary of all the [XEvents](./x-components.xevent.md)<!-- -->, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. |
+|  [XComponentAPI](./x-components.xcomponentapi.md) | The XComponentAPI exposes access to the , and store aliases to the components. |
+|  [XComponentBusAPI](./x-components.xcomponentbusapi.md) | API for emitting and subscribing to events of the . |
+|  [XEventsTypes](./x-components.xeventstypes.md) | . Dictionary of all the [XEvents](./x-components.xevent.md)<!-- -->, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. All the events listed in this file are common to all X components modules, so they might be fired by components of any module. |
 |  [XInjectKey](./x-components.xinjectkey.md) | Type of the key passed to [XProvide()](./x-components.xprovide.md) and [XInject()](./x-components.xinject.md) to be type-safe. With this type you can declare the type of the injected value directly in the injection key. |
 |  [XModule](./x-components.xmodule.md) | A group of a wiring configuration, a store module, and side effects. |
 |  [XModuleOptions](./x-components.xmoduleoptions.md) | Options for overriding the default config state and wiring for a [XModule](./x-components.xmodule.md)<!-- -->. |
@@ -348,18 +382,38 @@ X-Components is a library usable everywhere not only for search experiences.
 |  --- | --- |
 |  [addQueryToHistory](./x-components.addquerytohistory.md) | Default implementation for the [HistoryQueriesActions.addQueryToHistory()](./x-components.historyqueriesactions.addquerytohistory.md)<!-- -->. |
 |  [addQueryToHistoryQueries](./x-components.addquerytohistoryqueries.md) | Saves a new query into the history queries. |
+|  [addQueryToHistoryQueriesFromPreview](./x-components.addquerytohistoryqueriesfrompreview.md) | Saves the selectedQueryPreview query into the history queries. |
 |  [animateClipPath](./x-components.animateclippath.md) | Returns a transition component to wrap an element passed in the default slot and animating its clip-path using inset and with the origin passed as parameter. |
 |  [animateScale](./x-components.animatescale.md) | Returns a transition component to wrap an element passed in the default slot and animating its scale using transform and with the transform origin passed as parameter. |
 |  [animateTranslate](./x-components.animatetranslate.md) | Returns a transition component to wrap an element passed in the default slot and animating its translate using transform and with the transform origin passed as parameter. |
+|  [AnimationProp](./x-components.animationprop.md) | Type for animations props. |
 |  [ArrowDownIcon](./x-components.arrowdownicon.md) |  |
 |  [ArrowLeftIcon](./x-components.arrowlefticon.md) |  |
 |  [ArrowRightIcon](./x-components.arrowrighticon.md) |  |
 |  [ArrowUpIcon](./x-components.arrowupicon.md) |  |
+|  [AutoProgressBar](./x-components.autoprogressbar.md) | The auto progress bar component is useful for displaying a visual indicator of numerical data in a bar shape. |
 |  [BagIcon](./x-components.bagicon.md) |  |
 |  [BarCodeIcon](./x-components.barcodeicon.md) |  |
 |  [BarcodeTinyIcon](./x-components.barcodetinyicon.md) |  |
+|  [BaseAddToCart](./x-components.baseaddtocart.md) | Renders a button with a default slot. It receives the result with the data and emits [XEventsTypes.UserClickedResultAddToCart](./x-components.xeventstypes.userclickedresultaddtocart.md) to the bus on click mouse event. |
+|  [BaseCurrency](./x-components.basecurrency.md) | <p>Renders the value received as a property which always must be a JavaScript number, with the proper format provided as a string property or by injection. The rendered tag is a span in order to render a default inline HTML element.</p><p>Regarding the format or mask to be defined as string: - Use 'i' to define integer numbers. - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the format doesn't include decimals, it is filled with zeros until reach the length defined with 'd's. - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group. - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more than one character. - If you want to hide the decimal part if it's zero, you can add the <code>?</code> symbol after the decimal characters (e.g. 'i.iii,dd?', for <code>1234</code> you would get <code>1.234</code> instead of <code>1.234,00</code>). - Set whatever you need around the integers and decimals marks. - Default mask: 'i.iii,dd' which returns '1.345,67'.</p> |
+|  [BaseEventsModalClose](./x-components.baseeventsmodalclose.md) | Component contains an event button that emits [XEventsTypes.UserClickedCloseEventsModal](./x-components.xeventstypes.userclickedcloseeventsmodal.md) when clicked. It has a default slot to customize its contents. |
+|  [BaseEventsModalOpen](./x-components.baseeventsmodalopen.md) | Component contains an event button that emits [XEventsTypes.UserClickedOpenEventsModal](./x-components.xeventstypes.userclickedopeneventsmodal.md) when clicked. It has a default slot to customize its contents. |
 |  [BaseFallbackImage](./x-components.basefallbackimage.md) |  |
+|  [BaseIdModalClose](./x-components.baseidmodalclose.md) | Component that allows to close a modal by emitting [XEventsTypes.UserClickedCloseModal](./x-components.xeventstypes.userclickedclosemodal.md)<!-- -->. It allows full customization with the 'closing-element' slot and exposes the 'closeModal' function. |
+|  [BaseIdModalOpen](./x-components.baseidmodalopen.md) | Component that allows to open a modal by emitting [XEventsTypes.UserClickedOpenModal](./x-components.xeventstypes.userclickedopenmodal.md) with the modalId as payload. It allows full customization with the 'opening-element' slot and exposes the 'openModal' function. |
 |  [BasePlaceholderImage](./x-components.baseplaceholderimage.md) |  |
+|  [BasePriceFilterLabel](./x-components.basepricefilterlabel.md) | Renders a label for a price filter, allowing to select different messages depending on the value of the filter. |
+|  [BaseRatingFilterLabel](./x-components.baseratingfilterlabel.md) | Renders a label for a rating filter, allowing to override the elements used to paint the rating. |
+|  [BaseResultCurrentPrice](./x-components.baseresultcurrentprice.md) | Component that renders the [Result](./x-types.result.md) current price that may or may not be on sale. |
+|  [BaseResultImage](./x-components.baseresultimage.md) | Component to be reused that renders an <code>&lt;img&gt;</code>. |
+|  [BaseResultLink](./x-components.baseresultlink.md) | Component to be reused that renders an <code>&lt;a&gt;</code> wrapping the result contents. |
+|  [BaseResultPreviousPrice](./x-components.baseresultpreviousprice.md) | Component that renders the [Result](./x-types.result.md) previous price. |
+|  [BaseResultRating](./x-components.baseresultrating.md) | This component renders a [BaseRating](./x-components.baserating.md) for a result passed as prop. |
+|  [BaseSuggestion](./x-components.basesuggestion.md) | <p>Renders a button with a default slot. It receives a query, which should be the query of the module using this component, a suggestion, the [XEvent](./x-components.xevent.md) that will be emitted on click with a given feature.</p><p>The default slot receives the suggestion and the matched query has props.</p> |
+|  [BaseTogglePanel](./x-components.basetogglepanel.md) | Simple panel that receives its open state via prop, which is responsible of rendering default slot inside a configurable transition. |
+|  [bus](./x-components.bus.md) | Default  implementation. |
+|  [cancelFetchAndSaveControls](./x-components.cancelfetchandsavecontrols.md) | Default implementation for fetchAndSaveExperienceControls action. |
 |  [cancelFetchAndSaveIdentifierResults](./x-components.cancelfetchandsaveidentifierresults.md) | Default implementation for [IdentifierResultsActions.cancelFetchAndSaveIdentifierResults()](./x-components.identifierresultsactions.cancelfetchandsaveidentifierresults.md) action. |
 |  [cancelFetchAndSaveIdentifierResultsWire](./x-components.cancelfetchandsaveidentifierresultswire.md) | Cancels the [IdentifierResultsActions.fetchAndSaveIdentifierResults()](./x-components.identifierresultsactions.fetchandsaveidentifierresults.md) request promise. |
 |  [cancelFetchAndSaveNextQueries](./x-components.cancelfetchandsavenextqueries.md) | Default implementation for [NextQueriesActions.cancelFetchAndSaveNextQueries()](./x-components.nextqueriesactions.cancelfetchandsavenextqueries.md) action. |
@@ -371,10 +425,11 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [cancelFetchAndSaveSearchResponse](./x-components.cancelfetchandsavesearchresponse.md) | Default implementation for [SearchActions.cancelFetchAndSaveSearchResponse()](./x-components.searchactions.cancelfetchandsavesearchresponse.md) action. |
 |  [cancelFetchAndSaveSearchResponseWire](./x-components.cancelfetchandsavesearchresponsewire.md) | Cancels the [SearchActions.fetchAndSaveSearchResponse()](./x-components.searchactions.fetchandsavesearchresponse.md) request promise. |
 |  [cancelFetchAndSaveSuggestionsWire](./x-components.cancelfetchandsavesuggestionswire.md) | Cancels the [QuerySuggestionsActions.fetchAndSaveSuggestions()](./x-components.querysuggestionsactions.fetchandsavesuggestions.md) request promise. |
+|  [CartFilledIcon](./x-components.cartfilledicon.md) |  |
 |  [CartIcon](./x-components.carticon.md) |  |
-|  [CheckboxCardSelectedIcon](./x-components.checkboxcardselectedicon.md) |  |
-|  [CheckboxCardUnselectedIcon](./x-components.checkboxcardunselectedicon.md) |  |
+|  [CheckboxSelectedFilledIcon](./x-components.checkboxselectedfilledicon.md) |  |
 |  [CheckboxSelectedIcon](./x-components.checkboxselectedicon.md) |  |
+|  [CheckboxUnselectedFilledIcon](./x-components.checkboxunselectedfilledicon.md) |  |
 |  [CheckboxUnselectedIcon](./x-components.checkboxunselectedicon.md) |  |
 |  [CheckIcon](./x-components.checkicon.md) |  |
 |  [CheckTinyIcon](./x-components.checktinyicon.md) |  |
@@ -390,42 +445,72 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [clearHistoryQueriesQuery](./x-components.clearhistoryqueriesquery.md) | Sets the query of the history queries module to an empty string. |
 |  [clearIdentifierResultsQuery](./x-components.clearidentifierresultsquery.md) | Clears the identifier-results module query. |
 |  [clearPendingScrollToWire](./x-components.clearpendingscrolltowire.md) | Resets the selector of the scroll that is pending to restore. |
+|  [clearQueryPreviewWire](./x-components.clearquerypreviewwire.md) | Clears a query preview from queries preview module. |
 |  [clearQuerySuggestionsQuery](./x-components.clearquerysuggestionsquery.md) | Clears the query-suggestions module query. |
+|  [clearQueryWire](./x-components.clearquerywire.md) | Clears the query. |
 |  [clearRelatedTagsQuery](./x-components.clearrelatedtagsquery.md) | Clear the related tags query. |
+|  [clearSearchQuery](./x-components.clearsearchquery.md) | Clears the search state <code>query</code>. |
+|  [clearSelectedQueryPreviewWire](./x-components.clearselectedquerypreviewwire.md) | Clears the selected query preview object from queries preview module. |
 |  [clearSelectedRelatedTags](./x-components.clearselectedrelatedtags.md) | Clear the selected related tags. |
+|  [CloseMainModal](./x-components.closemainmodal.md) | Button to close the [MainModal](./x-components.mainmodal.md)<!-- -->. |
+|  [CornerArrowLeft](./x-components.cornerarrowleft.md) |  |
+|  [CornerArrowRight](./x-components.cornerarrowright.md) |  |
 |  [CrossIcon](./x-components.crossicon.md) |  |
 |  [CrossTinyIcon](./x-components.crosstinyicon.md) |  |
+|  [CuratedCheckFilledIcon](./x-components.curatedcheckfilledicon.md) |  |
 |  [CuratedCheckIcon](./x-components.curatedcheckicon.md) |  |
+|  [CuratedCheckTinyFilledIcon](./x-components.curatedchecktinyfilledicon.md) |  |
+|  [CuratedCheckTinyIcon](./x-components.curatedchecktinyicon.md) |  |
 |  [debounceFunction](./x-components.debouncefunction.md) | Util function that returns a debounced version of the function passed as parameter. It can use the leading strategy, trailing strategy or both. Using both would result in one leading execution guaranteed and trailing executions only if there are further calls during the length of the debounce time. |
 |  [deviceXModule](./x-components.devicexmodule.md) | Device [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>device</code> entry point. |
+|  [DiagonalArrowLeftDownIcon](./x-components.diagonalarrowleftdownicon.md) |  |
+|  [DiagonalArrowLeftTopIcon](./x-components.diagonalarrowlefttopicon.md) |  |
+|  [DiagonalArrowRightDownIcon](./x-components.diagonalarrowrightdownicon.md) |  |
+|  [DiagonalArrowRightTopIcon](./x-components.diagonalarrowrighttopicon.md) |  |
 |  [empathizeXModule](./x-components.empathizexmodule.md) | Empathize [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>empathize</code> entry point. |
+|  [experienceControlsRequest](./x-components.experiencecontrolsrequest.md) | Default implementation for the [ExperienceControlsGetters.experienceControlsRequest](./x-components.experiencecontrolsgetters.experiencecontrolsrequest.md) getter. |
+|  [experienceControlsXModule](./x-components.experiencecontrolsxmodule.md) | Search [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>x-controls</code> entry point. |
 |  [extraParamsXModule](./x-components.extraparamsxmodule.md) | ExtraParams [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>extraParams</code> entry point. |
 |  [facets](./x-components.facets.md) | Default implementation for the [FacetsGetters.facets](./x-components.facetsgetters.facets.md) getter. |
 |  [facetsXModule](./x-components.facetsxmodule.md) | Facets [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>facets</code> entry point. |
+|  [fetchAndSaveExperienceControlsResponse](./x-components.fetchandsaveexperiencecontrolsresponse.md) | Default implementation for fetchAndSaveExperienceControls action. |
+|  [fetchAndSaveExperienceControlsWire](./x-components.fetchandsaveexperiencecontrolswire.md) | Requests and stores a new set of controls results. |
 |  [fetchAndSaveIdentifierResults](./x-components.fetchandsaveidentifierresults.md) | Default implementation for [IdentifierResultsActions.fetchAndSaveIdentifierResults()](./x-components.identifierresultsactions.fetchandsaveidentifierresults.md) action. |
-|  [fetchAndSaveIdentifierResultsWire](./x-components.fetchandsaveidentifierresultswire.md) | Requests and stores a new set of identifier results for the [IdentifierResultsState.query](./x-components.identifierresultsstate.query.md)<!-- -->. |
+|  [fetchAndSaveIdentifierResultsWire](./x-components.fetchandsaveidentifierresultswire.md) | Requests and stores a new set of identifier results for the query. |
 |  [fetchAndSaveNextQueries](./x-components.fetchandsavenextqueries.md) | Default implementation for [NextQueriesActions.fetchAndSaveNextQueries()](./x-components.nextqueriesactions.fetchandsavenextqueries.md) action. |
 |  [fetchAndSaveNextQueriesWire](./x-components.fetchandsavenextquerieswire.md) | Requests and stores the next queries. |
+|  [fetchAndSaveNextQueryPreviewWire](./x-components.fetchandsavenextquerypreviewwire.md) | Requests and store the next query preview results. |
 |  [fetchAndSavePopularSearches](./x-components.fetchandsavepopularsearches.md) | Default implementation for [PopularSearchesActions.fetchAndSaveSuggestions()](./x-components.popularsearchesactions.fetchandsavesuggestions.md) action. |
+|  [fetchAndSaveQueryPreview](./x-components.fetchandsavequerypreview.md) | Default implementation for the [QueriesPreviewActions.fetchAndSaveQueryPreview()](./x-components.queriespreviewactions.fetchandsavequerypreview.md)<!-- -->. |
+|  [fetchAndSaveQueryPreviewWire](./x-components.fetchandsavequerypreviewwire.md) | Requests and stores the query preview results. |
 |  [fetchAndSaveQuerySuggestions](./x-components.fetchandsavequerysuggestions.md) | Default implementation for [QuerySuggestionsActions.fetchAndSaveSuggestions()](./x-components.querysuggestionsactions.fetchandsavesuggestions.md) action. |
 |  [fetchAndSaveRecommendations](./x-components.fetchandsaverecommendations.md) | Default implementation for [RecommendationsActions.fetchAndSaveRecommendations()](./x-components.recommendationsactions.fetchandsaverecommendations.md) action. |
 |  [fetchAndSaveRelatedTags](./x-components.fetchandsaverelatedtags.md) | Default implementation for [RelatedTagsActions.fetchAndSaveRelatedTags()](./x-components.relatedtagsactions.fetchandsaverelatedtags.md) action. |
 |  [fetchAndSaveRelatedTagsWire](./x-components.fetchandsaverelatedtagswire.md) | Requests and stores the related tags. |
 |  [fetchAndSaveSearchResponse](./x-components.fetchandsavesearchresponse.md) | Default implementation for [SearchActions.fetchAndSaveSearchResponse()](./x-components.searchactions.fetchandsavesearchresponse.md) action. |
 |  [fetchAndSaveSearchResponseWire](./x-components.fetchandsavesearchresponsewire.md) | Requests and stores the search response. |
-|  [fetchAndSaveSuggestionsWire](./x-components.fetchandsavesuggestionswire.md) | Requests and stores a new set of query suggestions for the [QuerySuggestionsState.query](./x-components.querysuggestionsstate.query.md)<!-- -->. |
+|  [fetchAndSaveSemanticQuery](./x-components.fetchandsavesemanticquery.md) | Default implementation for the [SemanticQueriesActions.fetchAndSaveSemanticQuery()](./x-components.semanticqueriesactions.fetchandsavesemanticquery.md)<!-- -->. |
+|  [fetchAndSaveSemanticQueryWire](./x-components.fetchandsavesemanticquerywire.md) | Requests and stores the semantic query results. |
+|  [fetchAndSaveSuggestionsWire](./x-components.fetchandsavesuggestionswire.md) | Requests and stores a new set of query suggestions for the query. |
+|  [fetchExperienceControlsResponse](./x-components.fetchexperiencecontrolsresponse.md) | Default implementation for the [ExperienceControlsActions.fetchExperienceControlsResponse()](./x-components.experiencecontrolsactions.fetchexperiencecontrolsresponse.md)<!-- -->. |
 |  [fetchIdentifierResults](./x-components.fetchidentifierresults.md) | Default implementation for the [IdentifierResultsActions.fetchIdentifierResults()](./x-components.identifierresultsactions.fetchidentifierresults.md)<!-- -->. |
 |  [fetchNextQueries](./x-components.fetchnextqueries.md) | Default implementation for the [NextQueriesActions.fetchNextQueries()](./x-components.nextqueriesactions.fetchnextqueries.md)<!-- -->. |
 |  [fetchPopularSearches](./x-components.fetchpopularsearches.md) | Default implementation for the [PopularSearchesActions.fetchSuggestions()](./x-components.popularsearchesactions.fetchsuggestions.md)<!-- -->. |
+|  [fetchQueryPreview](./x-components.fetchquerypreview.md) | Default implementation for the [QueriesPreviewActions.fetchQueryPreview()](./x-components.queriespreviewactions.fetchquerypreview.md)<!-- -->. |
 |  [fetchQuerySuggestions](./x-components.fetchquerysuggestions.md) | Default implementation for the [QuerySuggestionsActions.fetchSuggestions()](./x-components.querysuggestionsactions.fetchsuggestions.md)<!-- -->. |
 |  [fetchRecommendations](./x-components.fetchrecommendations.md) | Default implementation for the [RecommendationsActions.fetchRecommendations()](./x-components.recommendationsactions.fetchrecommendations.md)<!-- -->. |
 |  [fetchRelatedTags](./x-components.fetchrelatedtags.md) | Default implementation for the [RelatedTagsActions.fetchRelatedTags()](./x-components.relatedtagsactions.fetchrelatedtags.md)<!-- -->. |
 |  [fetchSearchResponse](./x-components.fetchsearchresponse.md) | Default implementation for the [SearchActions.fetchSearchResponse()](./x-components.searchactions.fetchsearchresponse.md)<!-- -->. |
+|  [fetchSemanticQuery](./x-components.fetchsemanticquery.md) | Default implementation for the [SemanticQueriesActions.fetchSemanticQuery()](./x-components.semanticqueriesactions.fetchsemanticquery.md)<!-- -->. |
 |  [FiltersIcon](./x-components.filtersicon.md) |  |
+|  [FOCUSABLE\_SELECTORS](./x-components.focusable_selectors.md) | Comma separated list of common focusable selectors. |
 |  [getURLParameter](./x-components.geturlparameter.md) | Get one parameter value from the url. |
 |  [Grid1ColIcon](./x-components.grid1colicon.md) |  |
 |  [Grid2ColIcon](./x-components.grid2colicon.md) |  |
 |  [Grid2RowsIcon](./x-components.grid2rowsicon.md) |  |
+|  [Grid4ColIcon](./x-components.grid4colicon.md) |  |
+|  [HeartIcon](./x-components.hearticon.md) |  |
+|  [HeartIconFilled](./x-components.hearticonfilled.md) |  |
 |  [HideIcon](./x-components.hideicon.md) |  |
 |  [HistoryIcon](./x-components.historyicon.md) |  |
 |  [historyQueries](./x-components.historyqueries.md) | Default implementation for the [HistoryQueriesGetters.historyQueries](./x-components.historyqueriesgetters.historyqueries.md) getter. |
@@ -437,11 +522,12 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [identifierResultsXModule](./x-components.identifierresultsxmodule.md) | IdentifierResults [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>identifier-results</code> entry point. |
 |  [increasePageAppendingResults](./x-components.increasepageappendingresults.md) | Default implementation for the [SearchActions.increasePageAppendingResults()](./x-components.searchactions.increasepageappendingresults.md)<!-- -->. |
 |  [increasePageAppendingResultsWire](./x-components.increasepageappendingresultswire.md) | Increases the current search state <code>page</code> by one. |
-|  [infiniteScroll](./x-components.infinitescroll.md) | Custom Vue directive for infinite scroll.<!-- -->This directive uses the IntersectionObserver API to handle the intersection between the children and the scrollable container. The content of the children moves up on scroll and when it reaches the end the IntersectionObserver triggers that both elements are intersecting.<!-- -->How it works.<!-- -->As a summary, if the scroll reaches the end, the <code>vNode.context.onInfiniteScrollEnd</code> function implemented by the component which imports the directive, is executed. If you provide a margin in the directive options, this function is triggered when the scroll reaches the end minus that amount of pixels. A default margin of 200px is set.<!-- -->Usage.<!-- -->The directive has to be set in the target element. It can receive an argument which will be used to determine the scrollable container. Possible values: \* html: will set the <html> as the scrollable container. \* body: will set the <body> as the scrollable container. \* id: will set the DOM element with the provided id as the scrollable container.<!-- -->If no argument is provided the scrollable container fallbacks to the viewport. |
+|  [infiniteScroll](./x-components.infinitescroll.md) | <p>Custom Vue directive for infinite scroll.</p><p>This directive uses the IntersectionObserver API to handle the intersection between the children and the scrollable container. The content of the children moves up on scroll and when it reaches the end, the IntersectionObserver triggers that both elements are intersecting.</p><p>How it works.</p><p>As a summary, if the scroll reaches the end, the <code>vNode.context.onInfiniteScrollEnd</code> function implemented by the component which imports the directive, is executed. If you provide a margin in the directive options, this function is triggered when the scroll reaches the end minus that amount of pixels. A default margin of 200px is set.</p><p>Usage.</p><p>The directive has to be set in the target element. It can receive an argument which will be used to determine the scrollable container. Possible values: <code>html</code>: will set the <html> as the scrollable container. <code>body</code>: will set the <body> as the scrollable container. ID: will set the DOM element with the provided id as the scrollable container.</p><p>If no argument is provided the scrollable container fallbacks to the viewport.</p> |
 |  [LightBulbOff](./x-components.lightbulboff.md) |  |
 |  [LightBulbOn](./x-components.lightbulbon.md) |  |
 |  [loadHistoryQueriesFromBrowserStorage](./x-components.loadhistoryqueriesfrombrowserstorage.md) | Default implementation for the [HistoryQueriesActions.loadHistoryQueriesFromBrowserStorage()](./x-components.historyqueriesactions.loadhistoryqueriesfrombrowserstorage.md) action. |
 |  [loadHistoryQueriesFromBrowserStorageWire](./x-components.loadhistoryqueriesfrombrowserstoragewire.md) | Loads the history queries from the browser storage, saving them to the [HistoryQueriesState.historyQueries](./x-components.historyqueriesstate.historyqueries.md)<!-- -->. |
+|  [MainModal](./x-components.mainmodal.md) | A specialised version of a modal component, made to contain a full search application. |
 |  [MenuIcon](./x-components.menuicon.md) |  |
 |  [MinusIcon](./x-components.minusicon.md) |  |
 |  [MinusTinyIcon](./x-components.minustinyicon.md) |  |
@@ -449,17 +535,18 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [nextQueriesRequest](./x-components.nextqueriesrequest.md) | Default implementation for the [NextQueriesGetters.request](./x-components.nextqueriesgetters.request.md) getter. |
 |  [nextQueriesXModule](./x-components.nextqueriesxmodule.md) | Next queries [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>next-queries</code> entry point. |
 |  [normalizedQuery](./x-components.normalizedquery.md) | Default implementation for the [QuerySuggestionsGetters.normalizedQuery](./x-components.querysuggestionsgetters.normalizedquery.md) getter. |
-|  [Nq1Icon](./x-components.nq1icon.md) |  |
-|  [Nq2Icon](./x-components.nq2icon.md) |  |
-|  [Nq3Icon](./x-components.nq3icon.md) |  |
-|  [Nq4Icon](./x-components.nq4icon.md) |  |
+|  [OpenMainModal](./x-components.openmainmodal.md) | Button to open the [MainModal](./x-components.mainmodal.md)<!-- -->. |
 |  [PlusIcon](./x-components.plusicon.md) |  |
+|  [PlusTinyIcon](./x-components.plustinyicon.md) |  |
 |  [popularSearches](./x-components.popularsearches.md) | Default implementation for the [PopularSearchesGetters.popularSearches](./x-components.popularsearchesgetters.popularsearches.md) getter. |
 |  [popularSearchesRequest](./x-components.popularsearchesrequest.md) | Default implementation for the [PopularSearchesGetters.request](./x-components.popularsearchesgetters.request.md) getter. |
 |  [popularSearchesXModule](./x-components.popularsearchesxmodule.md) | Popular searches [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>popular-searches</code> entry point. |
+|  [queriesPreviewXModule](./x-components.queriespreviewxmodule.md) | QueriesPreview [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>queries-preview</code> entry point. |
 |  [querySuggestions](./x-components.querysuggestions.md) | Default implementation for the [QuerySuggestionsGetter.querySuggestions()](./x-components.querysuggestionsgetter.querysuggestions.md) getter. |
 |  [querySuggestionsRequest](./x-components.querysuggestionsrequest.md) | Default implementation for the [QuerySuggestionsGetters.request](./x-components.querysuggestionsgetters.request.md) getter. |
 |  [querySuggestionsXModule](./x-components.querysuggestionsxmodule.md) | QuerySuggestions [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>query-suggestions</code> entry point. |
+|  [RadioButtonSelectedIcon](./x-components.radiobuttonselectedicon.md) |  |
+|  [RadioButtonUnselectedIcon](./x-components.radiobuttonunselectedicon.md) |  |
 |  [RECOMMENDATIONS\_ORIGIN](./x-components.recommendations_origin.md) | Constant for the recommendations request. |
 |  [recommendationsRequest](./x-components.recommendationsrequest.md) | Default implementation for the [RecommendationsGetters.request](./x-components.recommendationsgetters.request.md) getter. |
 |  [recommendationsXModule](./x-components.recommendationsxmodule.md) | Recommendations [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>recommendations</code> entry point. |
@@ -472,9 +559,13 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [removeFromHistory](./x-components.removefromhistory.md) | Default implementation for the [HistoryQueriesActions.removeFromHistory()](./x-components.historyqueriesactions.removefromhistory.md)<!-- -->. |
 |  [removeHistoryQuery](./x-components.removehistoryquery.md) | Removes a single history query from the history queries. |
 |  [resetAppending](./x-components.resetappending.md) | Resets the search state <code>isAppendingResults</code>. |
+|  [resetFromNoResultsWithFilters](./x-components.resetfromnoresultswithfilters.md) | Resets the search state <code>fromNoResultsWithFilters</code>. |
+|  [resetIsNoResults](./x-components.resetisnoresults.md) | Resets the search state <code>isNoResults</code>. |
+|  [resetRequestOnRefinement](./x-components.resetrequestonrefinement.md) | Default implementation for the [SearchActions.resetRequestOnRefinement()](./x-components.searchactions.resetrequestonrefinement.md)<!-- -->. |
+|  [resetRequestOnRefinementWire](./x-components.resetrequestonrefinementwire.md) | Resets the [SearchGetters.request](./x-components.searchgetters.request.md) parameters when refining request and before the actual request is launched. |
+|  [resetResultsPreviewWire](./x-components.resetresultspreviewwire.md) | Resets the next query preview results. |
 |  [resetSpellcheckQuery](./x-components.resetspellcheckquery.md) | Resets the search state <code>spellcheckedQuery</code> to its initial value, an empty string. |
-|  [resetState](./x-components.resetstate.md) | Default implementation for the [SearchActions.resetState()](./x-components.searchactions.resetstate.md)<!-- -->. |
-|  [resetStateWire](./x-components.resetstatewire.md) | Batches state resets after [SearchGetters.request](./x-components.searchgetters.request.md) parameters update. |
+|  [resetStateIfNoRequestWire](./x-components.resetstateifnorequestwire.md) | Resets the search state when the request is changed to null. See the  for details. |
 |  [sanitize](./x-components.sanitize.md) | Sanitize characters from a given string. |
 |  [saveIdentifierResultsOrigin](./x-components.saveidentifierresultsorigin.md) | Default implementation for the [IdentifierResultsActions.saveOrigin()](./x-components.identifierresultsactions.saveorigin.md)<!-- -->. |
 |  [saveIdentifierResultsOriginWire](./x-components.saveidentifierresultsoriginwire.md) | Sets the identifier results state <code>origin</code>. |
@@ -485,35 +576,51 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [scrollXModule](./x-components.scrollxmodule.md) | Scroll [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>empathize</code> entry point. |
 |  [searchBoxXModule](./x-components.searchboxxmodule.md) | SearchBox [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>search-box</code> entry point. |
 |  [SearchIcon](./x-components.searchicon.md) |  |
-|  [searchQuery](./x-components.searchquery.md) | Default implementation for the [SearchState.query](./x-components.searchstate.query.md) getter. |
+|  [searchQuery](./x-components.searchquery.md) | Default implementation for the search query getter. |
 |  [searchRequest](./x-components.searchrequest.md) | Default implementation for the [SearchGetters.request](./x-components.searchgetters.request.md) getter. |
 |  [SearchTinyIcon](./x-components.searchtinyicon.md) |  |
 |  [searchXModule](./x-components.searchxmodule.md) | Search [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>search</code> entry point. |
 |  [selectedFilters](./x-components.selectedfilters.md) | Default implementation for the [FacetsGetters.selectedFilters](./x-components.facetsgetters.selectedfilters.md) getter. |
 |  [selectedFiltersByFacet](./x-components.selectedfiltersbyfacet.md) | Default implementation for the [FacetsGetters.selectedFiltersByFacet](./x-components.facetsgetters.selectedfiltersbyfacet.md) getter. |
+|  [semanticQueriesXModule](./x-components.semanticqueriesxmodule.md) | SemanticQueries [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>semantic-queries</code>entry point. |
 |  [sessionHistoryQueries](./x-components.sessionhistoryqueries.md) | Default implementation for the [HistoryQueriesGetters.sessionHistoryQueries](./x-components.historyqueriesgetters.sessionhistoryqueries.md) getter. |
 |  [setConsent](./x-components.setconsent.md) | Sets the tagging state <code>consent</code>. |
 |  [setExtraParams](./x-components.setextraparams.md) | Sets the extra params of the [ExtraParamsXModule](./x-components.extraparamsxmodule.md)<!-- -->. |
+|  [setFiltersFromHistoryQueries](./x-components.setfiltersfromhistoryqueries.md) | Sets the filters of the facets module from a selectedHistoryQuery's filters. |
 |  [setHistoryQueries](./x-components.sethistoryqueries.md) | Default implementation for the [HistoryQueriesActions.setHistoryQueries()](./x-components.historyqueriesactions.sethistoryqueries.md)<!-- -->. |
+|  [setHistoryQueriesDisabled](./x-components.sethistoryqueriesdisabled.md) | Disables history queries. |
+|  [setHistoryQueriesEnabled](./x-components.sethistoryqueriesenabled.md) | Enables history queries. |
 |  [setHistoryQueriesQuery](./x-components.sethistoryqueriesquery.md) | Sets the query of the history queries module. Used for searching into the history queries. |
+|  [setHistoryQueriesQueryFromPreview](./x-components.sethistoryqueriesqueryfrompreview.md) | Sets the query of the history queries module from a selectedQueryPreview's query. Used for searching into the history queries. |
 |  [setIdentifierResultsExtraParams](./x-components.setidentifierresultsextraparams.md) | Sets the identifier result state <code>params</code>. |
 |  [setIdentifierResultsQuery](./x-components.setidentifierresultsquery.md) | Sets the identifier-results module query. |
+|  [setIdentifierResultsQueryFromPreview](./x-components.setidentifierresultsqueryfrompreview.md) | Sets the identifier-results module query from a selectedQueryPreview's query. |
 |  [setInitialExtraParams](./x-components.setinitialextraparams.md) | Sets the initial provided extra params. |
 |  [setName](./x-components.setname.md) | Sets the device of the [DeviceXModule](./x-components.devicexmodule.md)<!-- -->. |
 |  [setNextQueriesExtraParams](./x-components.setnextqueriesextraparams.md) | Sets the next queries state <code>params</code>. |
+|  [setNextQueriesExtraParamsFromPreview](./x-components.setnextqueriesextraparamsfrompreview.md) | Sets the next queries state <code>params</code> with a selectedQueryPreview's extraParams. |
 |  [setNextQueriesQuery](./x-components.setnextqueriesquery.md) | Sets the next queries state <code>query</code>. |
+|  [setNextQueriesQueryFromPreview](./x-components.setnextqueriesqueryfrompreview.md) | Sets the next queries state <code>query</code> with a selectedQueryPreview's query. |
 |  [setParams](./x-components.setparams.md) | Sets the extra params of the url module. |
 |  [setPendingScrollToWire](./x-components.setpendingscrolltowire.md) | Saves the selector of the item that should be scrolled into the view. |
 |  [setPopularSearchesExtraParams](./x-components.setpopularsearchesextraparams.md) | Sets the popular searches state <code>params</code>. |
+|  [setQueriesPreviewExtraParamsWire](./x-components.setqueriespreviewextraparamswire.md) | Sets the queries preview state <code>params</code>. |
 |  [setQueryFromLastHistoryQuery](./x-components.setqueryfromlasthistoryquery.md) | Default implementation for the [NextQueriesActions.setQueryFromLastHistoryQuery()](./x-components.nextqueriesactions.setqueryfromlasthistoryquery.md)<!-- -->. |
 |  [setQueryFromLastHistoryQueryWire](./x-components.setqueryfromlasthistoryquerywire.md) | Sets the next queries state <code>query</code> with the last query in history queries. |
+|  [setQueryFromPreview](./x-components.setqueryfrompreview.md) | Sets the query of the facets module from a queryPreview. |
+|  [setQueryFromSearchResponseChangedWire](./x-components.setqueryfromsearchresponsechangedwire.md) | Sets the query taking the [SearchXEvents.SearchResponseChanged](./x-components.searchxevents.searchresponsechanged.md) payload. |
 |  [setQuerySuggestionsExtraParams](./x-components.setquerysuggestionsextraparams.md) | Sets the query suggestions state <code>params</code>. |
+|  [setQuerySuggestionsExtraParamsFromPreview](./x-components.setquerysuggestionsextraparamsfrompreview.md) | Sets the query-suggestions module params from a selectedQueryPreview's extraParams. |
 |  [setQuerySuggestionsQuery](./x-components.setquerysuggestionsquery.md) | Sets the query-suggestions module query. |
+|  [setQuerySuggestionsQueryFromPreview](./x-components.setquerysuggestionsqueryfrompreview.md) | Sets the query-suggestions module query from a selectedQueryPreview's query. |
 |  [setQueryTaggingInfo](./x-components.setquerytagginginfo.md) | Sets the tagging state of the query tagging info using a debounce which ends if the user accepts a query. |
+|  [setQueryWire](./x-components.setquerywire.md) | Sets the query. |
 |  [setRecommendationsExtraParams](./x-components.setrecommendationsextraparams.md) | Sets the recommendations state <code>params</code>. |
 |  [setRelatedTags](./x-components.setrelatedtags.md) | Sets the search state <code>relatedTags</code>. |
 |  [setRelatedTagsExtraParams](./x-components.setrelatedtagsextraparams.md) | Sets the related tags state <code>params</code>. |
+|  [setRelatedTagsExtraParamsFromPreview](./x-components.setrelatedtagsextraparamsfrompreview.md) | Sets the related tags state <code>params</code> from a selectedQueryPreview's extraParams. |
 |  [setRelatedTagsQuery](./x-components.setrelatedtagsquery.md) | Sets the related tags state <code>query</code>. |
+|  [setRelatedTagsQueryFromPreview](./x-components.setrelatedtagsqueryfrompreview.md) | Sets the related tags state <code>query</code> from a selectedQueryPreview's query. |
 |  [setScrollDirectionWire](./x-components.setscrolldirectionwire.md) | Saves the scroll direction of a container to the store. |
 |  [setScrollHasAlmostReachedEndWire](./x-components.setscrollhasalmostreachedendwire.md) | Saves a boolean indicating if the scroll has almost reached the end of a container to the store. |
 |  [setScrollHasReachedEndWire](./x-components.setscrollhasreachedendwire.md) | Saves a boolean indicating if the scroll has reached the end of a container to the store. |
@@ -522,38 +629,64 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [setSearchedQueries](./x-components.setsearchedqueries.md) | Sets the next queries state <code>searchedQueries</code> with the list of history queries. |
 |  [setSearchedQueriesInPopularSearches](./x-components.setsearchedqueriesinpopularsearches.md) | Sets the popular searches state <code>searchedQueries</code> with the list of history queries. |
 |  [setSearchExtraParams](./x-components.setsearchextraparams.md) | Sets the search state <code>params</code>. |
+|  [setSearchExtraParamsFromPreview](./x-components.setsearchextraparamsfrompreview.md) | Sets the search state <code>params</code> with the selectedQueryPreview's extraParams. |
 |  [setSearchPage](./x-components.setsearchpage.md) | Sets the search state <code>page</code>. |
 |  [setSearchQuery](./x-components.setsearchquery.md) | Sets the search state <code>query</code>. |
+|  [setSearchQueryFromPreview](./x-components.setsearchqueryfrompreview.md) | Sets the search state <code>query</code> with the selectedQueryPreview's query. |
+|  [setSearchSelectedFilters](./x-components.setsearchselectedfilters.md) | Sets the history queries state <code>filters</code> with a selectedHistoryQuery's filters. |
+|  [setSearchSelectedFiltersFromHistoryQuery](./x-components.setsearchselectedfiltersfromhistoryquery.md) | Sets the search state <code>selectedFilters</code> with a selectedHistoryQuery's filters. |
+|  [setSearchSelectedFiltersFromPreview](./x-components.setsearchselectedfiltersfrompreview.md) | Sets the search state <code>selectedFilters</code> with the selectedQueryPreview's filters. |
 |  [setSearchUrlParams](./x-components.setsearchurlparams.md) | Default implementation for the [SearchActions.setUrlParams()](./x-components.searchactions.seturlparams.md)<!-- -->. |
 |  [setSelectedFilters](./x-components.setselectedfilters.md) | Sets the search state <code>selectedFilters</code>. |
+|  [setSelectedFiltersFromPreview](./x-components.setselectedfiltersfrompreview.md) | Sets the filters of the facets module from a queryPreview's filters. |
+|  [setSelectedQueryPreviewWire](./x-components.setselectedquerypreviewwire.md) | Updates the state with the selected query preview object. |
+|  [setSemanticQueriesExtraParamsWire](./x-components.setsemanticqueriesextraparamswire.md) | Sets the semantic queries state <code>params</code>. |
 |  [setSort](./x-components.setsort.md) | Sets the search state <code>sort</code>. |
 |  [setTaggingConfig](./x-components.settaggingconfig.md) | Sets the tagging config state. |
+|  [SettingsIcon](./x-components.settingsicon.md) |  |
+|  [setTotalResultsFromSearchResponseChangedWire](./x-components.settotalresultsfromsearchresponsechangedwire.md) | Sets the total results taking the [SearchXEvents.SearchResponseChanged](./x-components.searchxevents.searchresponsechanged.md) payload. |
+|  [setTotalResultsWire](./x-components.settotalresultswire.md) | Sets the total results. |
 |  [setUrlFilters](./x-components.seturlfilters.md) | Sets the filters of the url module. |
 |  [setUrlPage](./x-components.seturlpage.md) | Sets the page of the url module. |
 |  [setUrlParams](./x-components.seturlparams.md) | Sets the search state <code>query</code>. |
+|  [setUrlParamsFromPreview](./x-components.seturlparamsfrompreview.md) | Sets the extra params of the url module from a selectedQueryPreview's extraParams. |
 |  [setUrlParamsWire](./x-components.seturlparamswire.md) | Saves the params from the url. |
 |  [setUrlQuery](./x-components.seturlquery.md) | Sets the query of the url module. |
+|  [setUrlQueryFromPreview](./x-components.seturlqueryfrompreview.md) | Sets the url state <code>query</code> with a selectedQueryPreview's query. |
 |  [setUrlRelatedTags](./x-components.seturlrelatedtags.md) | Sets the [related tags](./x-components.relatedtag.md)<!-- -->. |
 |  [setUrlScroll](./x-components.seturlscroll.md) | Sets the scroll of the url module. |
+|  [setUrlSelectedFiltersFromPreview](./x-components.seturlselectedfiltersfrompreview.md) | Sets the filters of the url module from a selectedQueryPreview's filters. |
 |  [setUrlSort](./x-components.seturlsort.md) | Sets the sort of the url module. |
 |  [ShowIcon](./x-components.showicon.md) |  |
+|  [SortAZIcon](./x-components.sortazicon.md) |  |
+|  [SortPriceDownIcon](./x-components.sortpricedownicon.md) |  |
+|  [SortPriceUpIcon](./x-components.sortpriceupicon.md) |  |
+|  [SortRelevancyIcon](./x-components.sortrelevancyicon.md) |  |
+|  [SortZAIcon](./x-components.sortzaicon.md) |  |
+|  [SPLIT\_WORDS\_REGEX](./x-components.split_words_regex.md) | Regex for splitting a query into its words. |
+|  [StarFilledIcon](./x-components.starfilledicon.md) |  |
 |  [StarIcon](./x-components.staricon.md) |  |
 |  [storageKey](./x-components.storagekey.md) | Default implementation for the [HistoryQueriesGetters.storageKey](./x-components.historyqueriesgetters.storagekey.md) getter. |
+|  [TagFilledIcon](./x-components.tagfilledicon.md) |  |
 |  [taggingXModule](./x-components.taggingxmodule.md) | Tagging [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>empathize</code> entry point. |
 |  [TagIcon](./x-components.tagicon.md) |  |
 |  [throttleFunction](./x-components.throttlefunction.md) | Util function that returns a throttled version of the function passed as parameter. |
-|  [toggleHistoryQueries](./x-components.togglehistoryqueries.md) | Enables or disables history queries. |
 |  [toggleRelatedTag](./x-components.togglerelatedtag.md) | Default implementation for the [RelatedTagsActions.toggleRelatedTag()](./x-components.relatedtagsactions.togglerelatedtag.md)<!-- -->. |
 |  [toggleRelatedTagWire](./x-components.togglerelatedtagwire.md) | Sets the selected related tags. |
 |  [track](./x-components.track.md) | Default implementation for the [TaggingActions.track()](./x-components.taggingactions.track.md)<!-- -->. |
 |  [trackAddToCartWire](./x-components.trackaddtocartwire.md) | Performs a track of a result added to the cart. |
+|  [trackBannerClickedWire](./x-components.trackbannerclickedwire.md) | Tracks the tagging of the banner. |
+|  [trackDisplayClickedWire](./x-components.trackdisplayclickedwire.md) | Performs a track of a display result being clicked. |
 |  [trackQueryWire](./x-components.trackquerywire.md) | Tracks the tagging of the query. |
 |  [trackResultClickedWire](./x-components.trackresultclickedwire.md) | Tracks the tagging of the result. |
 |  [TrashIcon](./x-components.trashicon.md) |  |
 |  [TrashOpenIcon](./x-components.trashopenicon.md) |  |
 |  [TrendingIcon](./x-components.trendingicon.md) |  |
 |  [TrendingTinyIcon](./x-components.trendingtinyicon.md) |  |
+|  [updateHistoryQueriesWithSearchResponse](./x-components.updatehistoryquerieswithsearchresponse.md) | Updates the history queries with the relevant info included in a search response. |
 |  [urlXModule](./x-components.urlxmodule.md) | URL [XModule](./x-components.xmodule.md) implementation. This module is auto-registered as soon as you import any component from the <code>url</code> entry point. |
+|  [useQueriesPreview](./x-components.usequeriespreview.md) | Composable helpers for the QueriesPreview module. |
+|  [UserFilledIcon](./x-components.userfilledicon.md) |  |
 |  [UserIcon](./x-components.usericon.md) |  |
 |  [xPlugin](./x-components.xplugin.md) | Vue plugin that modifies each component instance, extending them with the [X Component API](./x-components.xcomponentapi.md)<!-- -->. |
 
@@ -580,11 +713,12 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [DeviceXModule](./x-components.devicexmodule.md) | Device [XModule](./x-components.xmodule.md) alias. |
 |  [DeviceXStoreModule](./x-components.devicexstoremodule.md) | Device type safe store module. |
 |  [DocumentDirection](./x-components.documentdirection.md) | The HTML document direction orientation. Possible values: ltr (left to right) or rtl (right to left). |
-|  [Emitter](./x-components.emitter.md) | Type safe for emitter payload. It is the wire payload. |
-|  [Emitters](./x-components.emitters.md) | Type safe emitters dictionary, where each key is the [XEvent](./x-components.xevent.md) name, and the value is a [https://rxjs.dev/api/index/class/Subject](https://rxjs.dev/api/index/class/Subject) of the [XEventPayload](./x-components.xeventpayload.md) type. |
 |  [EmpathizeXModule](./x-components.empathizexmodule.md) | Empathize [XModule](./x-components.xmodule.md) alias. |
 |  [EmpathizeXStoreModule](./x-components.empathizexstoremodule.md) | Empathize type safe store module. |
 |  [EventsForDirectionLimit](./x-components.eventsfordirectionlimit.md) | Events to emit when reaching the [direction](./x-components.arrowkey.md) limit. |
+|  [ExperienceControlsActionContext](./x-components.experiencecontrolsactioncontext.md) | Alias type for actions context of the [ExperienceControlsXStoreModule](./x-components.experiencecontrolsxstoremodule.md)<!-- -->. |
+|  [ExperienceControlsXModule](./x-components.experiencecontrolsxmodule.md) | Search [XModule](./x-components.xmodule.md) alias. |
+|  [ExperienceControlsXStoreModule](./x-components.experiencecontrolsxstoremodule.md) | Experience Controls type safe store module. |
 |  [ExtractActionPayload](./x-components.extractactionpayload.md) | Returns the payload for an action given the module name and the action name. |
 |  [ExtractActionReturn](./x-components.extractactionreturn.md) | Flattens the (probably) chained promises of an action type. |
 |  [ExtractActions](./x-components.extractactions.md) | Extracts the actions type from a XStoreModule. |
@@ -600,6 +734,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [FacetsXStoreModule](./x-components.facetsxstoremodule.md) | Facets type safe store module. |
 |  [FeatureLocation](./x-components.featurelocation.md) | Indicates where the feature is placed. |
 |  [FiltersByFacet](./x-components.filtersbyfacet.md) | Dictionary grouping filters by facet id. |
+|  [filtersStrategyForRequest](./x-components.filtersstrategyforrequest.md) | Type for the filter strategy to use when providing the selected filters. |
 |  [FirstParameter](./x-components.firstparameter.md) | Alias to retrieve the first parameter type of a function. |
 |  [GettersClass](./x-components.gettersclass.md) | Type for implementing getters for a module with a class. |
 |  [GettersTree](./x-components.getterstree.md) | Type safe getters definition type. An object with this type is what it is needed to define [Vuex](https://vuex.vuejs.org/) getters. |
@@ -627,6 +762,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [NextQueriesXModule](./x-components.nextqueriesxmodule.md) | NextQueries [XModule](./x-components.xmodule.md) alias. |
 |  [NextQueriesXStoreModule](./x-components.nextqueriesxstoremodule.md) | Next queries store module. |
 |  [NiladicFunction](./x-components.niladicfunction.md) | A function with no parameters that can return anything. |
+|  [NormalisedSnippetConfig](./x-components.normalisedsnippetconfig.md) | A normalised version of the snippet config. |
 |  [Pair](./x-components.pair.md) | Represents a pair of values of the same type in an array. |
 |  [PayloadFactoryData](./x-components.payloadfactorydata.md) | Type not safe which allows the access to the State, the Getters, the payload and metadata of a [XStoreModule](./x-components.xstoremodule.md)<!-- -->. |
 |  [PopularSearchesActionContext](./x-components.popularsearchesactioncontext.md) | Alias type for actions context of the [PopularSearchesXStoreModule](./x-components.popularsearchesxstoremodule.md)<!-- -->. |
@@ -634,6 +770,9 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [PopularSearchesXStoreModule](./x-components.popularsearchesxstoremodule.md) | Popular searches store module. |
 |  [PrivateXModulesOptions](./x-components.privatexmodulesoptions.md) | Options for overriding the default store module and store emitters for each [XModule](./x-components.xmodule.md)<!-- -->. |
 |  [PropsWithType](./x-components.propswithtype.md) | Extracts the name of the properties of an object that match a type. |
+|  [QueriesPreviewActionContext](./x-components.queriespreviewactioncontext.md) | Alias type for actions context of the [QueriesPreviewXStoreModule](./x-components.queriespreviewxstoremodule.md)<!-- -->. |
+|  [QueriesPreviewXModule](./x-components.queriespreviewxmodule.md) | QueriesPreview [XModule](./x-components.xmodule.md) alias. |
+|  [QueriesPreviewXStoreModule](./x-components.queriespreviewxstoremodule.md) | QueriesPreview type safe store module. |
 |  [QueryFeature](./x-components.queryfeature.md) | The name of the tool that generated the query. |
 |  [QueryOrigin](./x-components.queryorigin.md) | Information to track the usefulness of the query in relation to the [QueryFeature](./x-components.queryfeature.md) that generated it, and the [FeatureLocation](./x-components.featurelocation.md) where it has been shown to the user. |
 |  [QueryOriginInit](./x-components.queryorigininit.md) | Parameters to create a [QueryOrigin](./x-components.queryorigin.md) or [ResultOrigin](./x-components.resultorigin.md)<!-- -->. |
@@ -659,6 +798,9 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [SearchBoxXStoreModule](./x-components.searchboxxstoremodule.md) | SearchBox type safe store module. |
 |  [SearchXModule](./x-components.searchxmodule.md) | Search [XModule](./x-components.xmodule.md) alias. |
 |  [SearchXStoreModule](./x-components.searchxstoremodule.md) | Search type safe store module. |
+|  [SemanticQueriesActionContext](./x-components.semanticqueriesactioncontext.md) | Alias type for actions context of the [SemanticQueriesXStoreModule](./x-components.semanticqueriesxstoremodule.md)<!-- -->. |
+|  [SemanticQueriesXModule](./x-components.semanticqueriesxmodule.md) | SemanticQueries [XModule](./x-components.xmodule.md) alias. |
+|  [SemanticQueriesXStoreModule](./x-components.semanticqueriesxstoremodule.md) | SemanticQueries type safe store module. |
 |  [SimpleStateSelector](./x-components.simplestateselector.md) | Selects a part of the store state or getters (AKA "getter" inside [Vuex](https://vuex.vuejs.org/) watchers). |
 |  [StoreEmitters](./x-components.storeemitters.md) | Dictionary where the key is a [XEvent](./x-components.xevent.md)<!-- -->, and the value is [SimpleStateSelector](./x-components.simplestateselector.md) or [StateSelector](./x-components.stateselector.md)<!-- -->. This [SimpleStateSelector](./x-components.simplestateselector.md) or [StateSelector](./x-components.stateselector.md) can only access the state and getters from the [XStoreModule](./x-components.xstoremodule.md) passed as param type. This dictionary is used to emits a [XEvent](./x-components.xevent.md) when the part of the store selected by [SimpleStateSelector](./x-components.simplestateselector.md) changes. |
 |  [StoreModuleStateAndGetters](./x-components.storemodulestateandgetters.md) | Type safe which allows the access to the State and the Getters of a [XStoreModule](./x-components.xstoremodule.md)<!-- -->. |
@@ -672,6 +814,8 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [UrlParamValue](./x-components.urlparamvalue.md) | The allowed values of the parameters to store in the URL. |
 |  [UrlXModule](./x-components.urlxmodule.md) | URL [XModule](./x-components.xmodule.md) alias. |
 |  [UrlXStoreModule](./x-components.urlxstoremodule.md) | URL type safe store module. |
+|  [UseDeviceFlags](./x-components.usedeviceflags.md) | The device flags type of the Return type of the composable returned by <code>createUseDevice</code>. |
+|  [UseDeviceReturn](./x-components.usedevicereturn.md) | The Return type of the composable returned by <code>createUseDevice</code>. |
 |  [VueConstructorPartialArgument](./x-components.vueconstructorpartialargument.md) | First parameter of the Vue constructor. |
 |  [VueCSSClasses](./x-components.vuecssclasses.md) | Union type containing supported Vue dynamic classes. |
 |  [Wire](./x-components.wire.md) | A Wire is a function that receives an observable, the store and the on function of the bus it will run in and returns a subscription. |