@empathyco/x-components 7.3.0 → 7.4.0

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.4.0](https://github.com/empathyco/x/compare/@empathyco/x-components@7.3.1...@empathyco/x-components@7.4.0) (2026-07-07)
+
+### Features
+
+* create browse module (#2128)
+
+
+## [7.3.1](https://github.com/empathyco/x/compare/@empathyco/x-components@7.3.0...@empathyco/x-components@7.3.1) (2026-07-06)
+
+### Bug Fixes
+
+* **next-queries:** reset wiring on user-cleared query event (#2132)
+
+
 ## [7.3.0](https://github.com/empathyco/x/compare/@empathyco/x-components@7.2.5...@empathyco/x-components@7.3.0) (2026-07-06)
 
 ### Features

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

@@ -0,0 +1,54 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [BaseXAPI](./x-components.basexapi.md) &gt; [browse](./x-components.basexapi.browse.md)
+
+## BaseXAPI.browse() method
+
+Browses the browseField and browseValue parameters as a selected category.
+
+**Signature:**
+
+```typescript
+browse(browseCategory?: BrowsableRequest): void;
+```
+
+## Parameters
+
+<table><thead><tr><th>
+
+Parameter
+
+
+</th><th>
+
+Type
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+browseCategory
+
+
+</td><td>
+
+BrowsableRequest
+
+
+</td><td>
+
+_(Optional)_ browseField and browseValue to be browsed.
+
+
+</td></tr>
+</tbody></table>
+
+**Returns:**
+
+void
+

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

@@ -88,6 +88,20 @@ Description
 Tracks that a product was added to cart from PDP.
 
 
+</td></tr>
+<tr><td>
+
+[browse(browseCategory)](./x-components.basexapi.browse.md)
+
+
+</td><td>
+
+
+</td><td>
+
+Browses the browseField and browseValue parameters as a selected category.
+
+
 </td></tr>
 <tr><td>
 

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

@@ -169,6 +169,13 @@ _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         UserClickedABanner?: import("@empathyco/x-types").Banner | undefined;
         UserClickedAbortARedirection?: void | undefined;
         UserSelectedAPage?: number | undefined;
+        BrowseRequestChanged?: import("../../../browse").InternalBrowseRequest | null | undefined;
+        BrowseRequestUpdated?: import("../../../browse").InternalBrowseRequest | null | undefined;
+        BrowseResponseChanged?: import("../../../browse").InternalBrowseResponse | undefined;
+        BrowseTaggingChanged?: import("@empathyco/x-types").TaggingRequest | undefined;
+        UserClickedABrowseSort?: string | undefined;
+        SelectedBrowseSortProvided?: string | undefined;
+        UserBrowsedToCategory?: import("@empathyco/x-types").BrowsableRequest | undefined;
         SemanticQueryRequestUpdated?: import("@empathyco/x-types").SemanticQueriesRequest | null | undefined;
         SemanticQueriesResponseChanged?: import("@empathyco/x-types").SemanticQuery[] | undefined;
         UserSelectedASemanticQuery?: import("@empathyco/x-types").SemanticQuery | undefined;

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

@@ -5868,6 +5868,17 @@ Resets the search state `fromNoResultsWithFilters`<!-- -->.
 Resets the search state `isNoResults`<!-- -->.
 
 
+</td></tr>
+<tr><td>
+
+[resetNextQueriesQuery](./x-components.resetnextqueriesquery.md)
+
+
+</td><td>
+
+Reset the next queries state `query`<!-- -->.
+
+
 </td></tr>
 <tr><td>
 
@@ -5945,6 +5956,17 @@ Resets the search state to reload the current search.
 Resets the search state when the request is changed to null. See the [SearchXStoreModule](./x-components.searchxstoremodule.md) for details.
 
 
+</td></tr>
+<tr><td>
+
+[resetUrlBrowseCategory](./x-components.reseturlbrowsecategory.md)
+
+
+</td><td>
+
+Sets the browseCategory of the url module.
+
+
 </td></tr>
 <tr><td>
 
@@ -6993,6 +7015,17 @@ Sets the total results taking the [SearchXEvents.SearchResponseChanged](./x-comp
 Sets the total results.
 
 
+</td></tr>
+<tr><td>
+
+[setUrlBrowseCategory](./x-components.seturlbrowsecategory.md)
+
+
+</td><td>
+
+Sets the browseCategory of the url module.
+
+
 </td></tr>
 <tr><td>
 

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [resetNextQueriesQuery](./x-components.resetnextqueriesquery.md)
+
+## resetNextQueriesQuery variable
+
+Reset the next queries state `query`<!-- -->.
+
+**Signature:**
+
+```typescript
+resetNextQueriesQuery: import("../..").AnyWire
+```

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [resetUrlBrowseCategory](./x-components.reseturlbrowsecategory.md)
+
+## resetUrlBrowseCategory variable
+
+Sets the browseCategory of the url module.
+
+**Signature:**
+
+```typescript
+resetUrlBrowseCategory: import("../..").AnyWire
+```

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [setUrlBrowseCategory](./x-components.seturlbrowsecategory.md)
+
+## setUrlBrowseCategory variable
+
+Sets the browseCategory of the url module.
+
+**Signature:**
+
+```typescript
+setUrlBrowseCategory: import("../..").Wire<import("@empathyco/x-types").BrowsableRequest>
+```

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

@@ -166,6 +166,13 @@ _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         UserClickedABanner?: import("@empathyco/x-types").Banner | undefined;
         UserClickedAbortARedirection?: void | undefined;
         UserSelectedAPage?: number | undefined;
+        BrowseRequestChanged?: import("../../../browse").InternalBrowseRequest | null | undefined;
+        BrowseRequestUpdated?: import("../../../browse").InternalBrowseRequest | null | undefined;
+        BrowseResponseChanged?: import("../../../browse").InternalBrowseResponse | undefined;
+        BrowseTaggingChanged?: import("@empathyco/x-types").TaggingRequest | undefined;
+        UserClickedABrowseSort?: string | undefined;
+        SelectedBrowseSortProvided?: string | undefined;
+        UserBrowsedToCategory?: import("@empathyco/x-types").BrowsableRequest | undefined;
         SemanticQueryRequestUpdated?: import("@empathyco/x-types").SemanticQueriesRequest | null | undefined;
         SemanticQueriesResponseChanged?: import("@empathyco/x-types").SemanticQuery[] | undefined;
         UserSelectedASemanticQuery?: import("@empathyco/x-types").SemanticQuery | undefined;

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

@@ -156,6 +156,13 @@ _default: import("vue").DefineComponent<{}, {
         UserClickedABanner: (payload: import("@empathyco/x-types").Banner, metadata: WireMetadata) => unknown;
         UserClickedAbortARedirection: (payload: undefined, metadata: WireMetadata) => unknown;
         UserSelectedAPage: (payload: number, metadata: WireMetadata) => unknown;
+        BrowseRequestChanged: (payload: import("../x-modules/browse").InternalBrowseRequest | null, metadata: WireMetadata) => unknown;
+        BrowseRequestUpdated: (payload: import("../x-modules/browse").InternalBrowseRequest | null, metadata: WireMetadata) => unknown;
+        BrowseResponseChanged: (payload: import("../x-modules/browse").InternalBrowseResponse, metadata: WireMetadata) => unknown;
+        BrowseTaggingChanged: (payload: import("@empathyco/x-types").TaggingRequest, metadata: WireMetadata) => unknown;
+        UserClickedABrowseSort: (payload: string, metadata: WireMetadata) => unknown;
+        SelectedBrowseSortProvided: (payload: string, metadata: WireMetadata) => unknown;
+        UserBrowsedToCategory: (payload: import("@empathyco/x-types").BrowsableRequest, metadata: WireMetadata) => unknown;
         SemanticQueryRequestUpdated: (payload: import("@empathyco/x-types").SemanticQueriesRequest | null, metadata: WireMetadata) => unknown;
         SemanticQueriesResponseChanged: (payload: import("@empathyco/x-types").SemanticQuery[], metadata: WireMetadata) => unknown;
         UserSelectedASemanticQuery: (payload: import("@empathyco/x-types").SemanticQuery, metadata: WireMetadata) => unknown;

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

@@ -38,6 +38,25 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
+[setBrowseCategory](./x-components.urlmutations.setbrowsecategory.md)
+
+
+</td><td>
+
+
+</td><td>
+
+(browseCategory: BrowsableRequest) =&gt; void
+
+
+</td><td>
+
+Sets the new browseCategory.
+
+
+</td></tr>
+<tr><td>
+
 [setFilters](./x-components.urlmutations.setfilters.md)
 
 

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [UrlMutations](./x-components.urlmutations.md) &gt; [setBrowseCategory](./x-components.urlmutations.setbrowsecategory.md)
+
+## UrlMutations.setBrowseCategory property
+
+Sets the new browseCategory.
+
+**Signature:**
+
+```typescript
+setBrowseCategory: (browseCategory: BrowsableRequest) => void;
+```

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

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [UrlParams](./x-components.urlparams.md) &gt; [browseField](./x-components.urlparams.browsefield.md)
+
+## UrlParams.browseField property
+
+**Signature:**
+
+```typescript
+browseField: string;
+```

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

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [UrlParams](./x-components.urlparams.md) &gt; [browseValue](./x-components.urlparams.browsevalue.md)
+
+## UrlParams.browseValue property
+
+**Signature:**
+
+```typescript
+browseValue: string;
+```

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

@@ -37,6 +37,40 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
+[browseField](./x-components.urlparams.browsefield.md)
+
+
+</td><td>
+
+
+</td><td>
+
+string
+
+
+</td><td>
+
+
+</td></tr>
+<tr><td>
+
+[browseValue](./x-components.urlparams.browsevalue.md)
+
+
+</td><td>
+
+
+</td><td>
+
+string
+
+
+</td><td>
+
+
+</td></tr>
+<tr><td>
+
 [filter](./x-components.urlparams.filter.md)
 
 

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [UseAliasAPI](./x-components.usealiasapi.md) &gt; [browseTotalResults](./x-components.usealiasapi.browsetotalresults.md)
+
+## UseAliasAPI.browseTotalResults property
+
+The  total results.
+
+**Signature:**
+
+```typescript
+readonly browseTotalResults: number;
+```

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

@@ -37,6 +37,27 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
+[browseTotalResults](./x-components.usealiasapi.browsetotalresults.md)
+
+
+</td><td>
+
+`readonly`
+
+
+</td><td>
+
+number
+
+
+</td><td>
+
+The  total results.
+
+
+</td></tr>
+<tr><td>
+
 [device](./x-components.usealiasapi.device.md)
 
 

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

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [XAPI](./x-components.xapi.md) &gt; [browse](./x-components.xapi.browse.md)
+
+## XAPI.browse property
+
+Dispatch a browse with the browseCategory parameter.
+
+**Signature:**
+
+```typescript
+browse: (browseCategory?: BrowsableRequest) => void;
+```

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

@@ -53,6 +53,25 @@ Description
 To track that a product was added to the cart from PDP.
 
 
+</td></tr>
+<tr><td>
+
+[browse](./x-components.xapi.browse.md)
+
+
+</td><td>
+
+
+</td><td>
+
+(browseCategory?: BrowsableRequest) =&gt; void
+
+
+</td><td>
+
+Dispatch a browse with the browseCategory parameter.
+
+
 </td></tr>
 <tr><td>
 

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

@@ -9,9 +9,9 @@
 **Signature:**
 
 ```typescript
-export interface XEventsTypes extends DeviceXEvents, EmpathizeXEvents, ExtraParamsXEvents, FacetsXEvents, HistoryQueriesXEvents, IdentifierResultsXEvents, NextQueriesXEvents, PopularSearchesXEvents, QueriesPreviewXEvents, QuerySuggestionsXEvents, RecommendationsXEvents, RelatedTagsXEvents, ScrollXEvents, SearchBoxXEvents, SearchXEvents, SemanticQueriesXEvents, TaggingXEvents, ExperienceControlsXEvents, UrlXEvents, RelatedPromptsXEvents, AiXEvents 
+export interface XEventsTypes extends DeviceXEvents, EmpathizeXEvents, ExtraParamsXEvents, FacetsXEvents, HistoryQueriesXEvents, IdentifierResultsXEvents, NextQueriesXEvents, PopularSearchesXEvents, QueriesPreviewXEvents, QuerySuggestionsXEvents, RecommendationsXEvents, RelatedTagsXEvents, ScrollXEvents, SearchBoxXEvents, SearchXEvents, BrowseXEvents, SemanticQueriesXEvents, TaggingXEvents, ExperienceControlsXEvents, UrlXEvents, RelatedPromptsXEvents, AiXEvents 
 ```
-**Extends:** [DeviceXEvents](./x-components.devicexevents.md)<!-- -->, [EmpathizeXEvents](./x-components.empathizexevents.md)<!-- -->, [ExtraParamsXEvents](./x-components.extraparamsxevents.md)<!-- -->, [FacetsXEvents](./x-components.facetsxevents.md)<!-- -->, [HistoryQueriesXEvents](./x-components.historyqueriesxevents.md)<!-- -->, [IdentifierResultsXEvents](./x-components.identifierresultsxevents.md)<!-- -->, [NextQueriesXEvents](./x-components.nextqueriesxevents.md)<!-- -->, [PopularSearchesXEvents](./x-components.popularsearchesxevents.md)<!-- -->, [QueriesPreviewXEvents](./x-components.queriespreviewxevents.md)<!-- -->, [QuerySuggestionsXEvents](./x-components.querysuggestionsxevents.md)<!-- -->, [RecommendationsXEvents](./x-components.recommendationsxevents.md)<!-- -->, [RelatedTagsXEvents](./x-components.relatedtagsxevents.md)<!-- -->, [ScrollXEvents](./x-components.scrollxevents.md)<!-- -->, [SearchBoxXEvents](./x-components.searchboxxevents.md)<!-- -->, [SearchXEvents](./x-components.searchxevents.md)<!-- -->, [SemanticQueriesXEvents](./x-components.semanticqueriesxevents.md)<!-- -->, [TaggingXEvents](./x-components.taggingxevents.md)<!-- -->, [ExperienceControlsXEvents](./x-components.experiencecontrolsxevents.md)<!-- -->, [UrlXEvents](./x-components.urlxevents.md)<!-- -->, [RelatedPromptsXEvents](./x-components.relatedpromptsxevents.md)<!-- -->, [AiXEvents](./x-components.aixevents.md)
+**Extends:** [DeviceXEvents](./x-components.devicexevents.md)<!-- -->, [EmpathizeXEvents](./x-components.empathizexevents.md)<!-- -->, [ExtraParamsXEvents](./x-components.extraparamsxevents.md)<!-- -->, [FacetsXEvents](./x-components.facetsxevents.md)<!-- -->, [HistoryQueriesXEvents](./x-components.historyqueriesxevents.md)<!-- -->, [IdentifierResultsXEvents](./x-components.identifierresultsxevents.md)<!-- -->, [NextQueriesXEvents](./x-components.nextqueriesxevents.md)<!-- -->, [PopularSearchesXEvents](./x-components.popularsearchesxevents.md)<!-- -->, [QueriesPreviewXEvents](./x-components.queriespreviewxevents.md)<!-- -->, [QuerySuggestionsXEvents](./x-components.querysuggestionsxevents.md)<!-- -->, [RecommendationsXEvents](./x-components.recommendationsxevents.md)<!-- -->, [RelatedTagsXEvents](./x-components.relatedtagsxevents.md)<!-- -->, [ScrollXEvents](./x-components.scrollxevents.md)<!-- -->, [SearchBoxXEvents](./x-components.searchboxxevents.md)<!-- -->, [SearchXEvents](./x-components.searchxevents.md)<!-- -->, BrowseXEvents, [SemanticQueriesXEvents](./x-components.semanticqueriesxevents.md)<!-- -->, [TaggingXEvents](./x-components.taggingxevents.md)<!-- -->, [ExperienceControlsXEvents](./x-components.experiencecontrolsxevents.md)<!-- -->, [UrlXEvents](./x-components.urlxevents.md)<!-- -->, [RelatedPromptsXEvents](./x-components.relatedpromptsxevents.md)<!-- -->, [AiXEvents](./x-components.aixevents.md)
 
 ## Remarks
 

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

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [XModulesTree](./x-components.xmodulestree.md) &gt; [browse](./x-components.xmodulestree.browse.md)
+
+## XModulesTree.browse property
+
+**Signature:**
+
+```typescript
+browse: BrowseXModule;
+```

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

@@ -51,6 +51,23 @@ Description
 </td><td>
 
 
+</td></tr>
+<tr><td>
+
+[browse](./x-components.xmodulestree.browse.md)
+
+
+</td><td>
+
+
+</td><td>
+
+BrowseXModule
+
+
+</td><td>
+
+
 </td></tr>
 <tr><td>
 

package/docs/API-reference/api/x-types.xcomponentsadapter.browse.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-types](./x-types.md) &gt; [XComponentsAdapter](./x-types.xcomponentsadapter.md) &gt; [browse](./x-types.xcomponentsadapter.browse.md)
+
+## XComponentsAdapter.browse property
+
+**Signature:**
+
+```typescript
+browse: EndpointAdapter<BrowseRequest, BrowseResponse>;
+```

package/docs/API-reference/api/x-types.xcomponentsadapter.md

@@ -68,6 +68,23 @@ EndpointAdapter<[AiSuggestionsSearchRequest](./x-types.aisuggestionssearchreq
 </td><td>
 
 
+</td></tr>
+<tr><td>
+
+[browse](./x-types.xcomponentsadapter.browse.md)
+
+
+</td><td>
+
+
+</td><td>
+
+EndpointAdapter&lt;[BrowseRequest](./x-types.browserequest.md)<!-- -->, [BrowseResponse](./x-types.browseresponse.md)<!-- -->&gt;
+
+
+</td><td>
+
+
 </td></tr>
 <tr><td>
 

package/docs/API-reference/components/browse/x-components.browse-results-list.md

@@ -0,0 +1,21 @@
+---
+
+title: BrowseResultsList
+
+---
+
+# BrowseResultsList
+
+It renders a ItemsList list with the results from SearchState.results by
+default.
+
+The component provides a default slot which wraps the whole component with the `results` bound.
+
+It also provides the slot result to customize the item, which is within the default slot, with
+the result bound.
+
+## Props
+
+| Name                   | Description                                                   | Type                       | Default           |
+| ---------------------- | ------------------------------------------------------------- | -------------------------- | ----------------- |
+| <code>animation</code> | Animation component that will be used to animate the results. | <code>AnimationProp</code> | <code>'ul'</code> |

package/docs/API-reference/components/browse/x-components.browse-sort-picker-list.md

@@ -0,0 +1,24 @@
+---
+
+title: BrowseSortPickerList
+
+---
+
+# BrowseSortPickerList
+
+The `SortPickerList` component allows user to select the browse results order. This component
+also allows to change the selected sort programmatically.
+
+## Props
+
+| Name                     | Description | Type                | Default           |
+| ------------------------ | ----------- | ------------------- | ----------------- |
+| <code>animation</code>   |             | <code>union</code>  | <code>'ul'</code> |
+| <code>items</code>       |             | <code>Array</code>  | <code></code>     |
+| <code>buttonClass</code> |             | <code>string</code> | <code></code>     |
+
+## Slots
+
+| Name                 | Description | Bindings<br />(name - type - description) |
+| -------------------- | ----------- | ----------------------------------------- |
+| <code>default</code> |             | <br />                                    |

package/js/composables/use-alias-api.js

@@ -138,6 +138,9 @@ function useAliasApi() {
         get totalResults() {
             return store.state.x.search?.totalResults ?? 0;
         },
+        get browseTotalResults() {
+            return store.state.x.browse?.totalResults ?? 0;
+        },
         get selectedSort() {
             return store.state.x.search?.sort ?? '';
         },