@empathyco/x-components 3.0.0-alpha.198 → 3.0.0-alpha.199

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.199](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.198...@empathyco/x-components@3.0.0-alpha.199) (2022-10-20)
+
+### Documentation
+
+- **functional:** titles refactor and change image source (#790)
+  ([cc177a5](https://github.com/empathyco/x/commit/cc177a5bad6fab363d40140e699e11e0ec6bc53c))
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.198](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.197...@empathyco/x-components@3.0.0-alpha.198) (2022-10-20)
 
 ### Bug Fixes

package/design-system/default-theme.css

@@ -80,91 +80,6 @@
   --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
   --x-size-line-height-button-default: var(--x-size-line-height-text);
 }
-
-[dir="ltr"] .x-button {
-  padding-right: var(--x-size-padding-right-button-default);
-}
-
-[dir="rtl"] .x-button {
-  padding-left: var(--x-size-padding-right-button-default);
-}
-
-[dir="ltr"] .x-button {
-  padding-left: var(--x-size-padding-left-button-default);
-}
-
-[dir="rtl"] .x-button {
-  padding-right: var(--x-size-padding-left-button-default);
-}
-
-[dir="ltr"] .x-button {
-  border-left-width: var(--x-size-border-width-left-button-default);
-}
-
-[dir="rtl"] .x-button {
-  border-right-width: var(--x-size-border-width-left-button-default);
-}
-
-[dir="ltr"] .x-button {
-  border-right-width: var(--x-size-border-width-right-button-default);
-}
-
-[dir="rtl"] .x-button {
-  border-left-width: var(--x-size-border-width-right-button-default);
-}
-
-.x-button {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
-  margin: 0;
-  gap: var(--x-size-gap-button-default);
-  min-height: var(--x-size-height-button-default);
-  background-color: var(--x-color-background-button-default);
-  border-color: var(--x-color-border-button-default);
-  color: var(--x-color-text-button-default);
-  border-style: solid;
-  border-top-width: var(--x-size-border-width-top-button-default);
-  border-bottom-width: var(--x-size-border-width-bottom-button-default);
-  border-radius: var(--x-size-border-radius-top-left-button-default) var(--x-size-border-radius-top-right-button-default) var(--x-size-border-radius-bottom-right-button-default) var(--x-size-border-radius-bottom-left-button-default);
-  font-family: var(--x-font-family-button-default);
-  font-size: var(--x-size-font-button-default);
-  font-weight: var(--x-number-font-weight-button-default);
-  line-height: var(--x-size-line-height-button-default);
-  cursor: pointer;
-}
-@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
-  .x-button {
-    gap: 0;
-  }
-  .x-button > *:not(:last-child) {
-    margin-right: var(--x-size-gap-button-default);
-  }
-}
-:root {
-  --x-color-background-button-default: var(--x-color-base-lead);
-  --x-color-border-button-default: var(--x-color-background-button-default);
-  --x-color-text-button-default: var(--x-color-base-neutral-100);
-  --x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
-  --x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
-  --x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
-  --x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
-  --x-size-border-width-button-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
-  --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
-  --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
-  --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
-  --x-size-height-button-default: var(--x-size-base-08);
-  --x-size-padding-right-button-default: var(--x-size-base-05);
-  --x-size-padding-left-button-default: var(--x-size-base-05);
-  --x-size-gap-button-default: var(--x-size-base-03);
-  --x-font-family-button-default: var(--x-font-family-text);
-  --x-size-font-button-default: var(--x-size-font-text);
-  --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
-  --x-size-line-height-button-default: var(--x-size-line-height-text);
-}
 :root {
   --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
   --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -1434,27 +1349,6 @@
 .x-message > p {
   margin: 0;
 }
-:root {
-  --x-string-justify-message-default: center;
-  --x-size-gap-message-default: var(--x-size-base-03);
-  --x-size-padding-message-default: var(--x-size-base-06);
-  --x-color-background-message-default: var(--x-color-base-neutral-95);
-  --x-color-border-message-default: var(--x-color-background-message-default);
-  --x-color-text-message-default: var(--x-color-text-default);
-  --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
-  --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-width-message-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
-  --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
-  --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
-  --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
-  --x-font-family-message-default: var(--x-font-family-title3);
-  --x-size-font-message-default: var(--x-size-font-title3);
-  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
-}
 :root {
   --x-color-background-option-list-button-default: transparent;
   --x-color-border-option-list-button-default: transparent;
@@ -2915,4 +2809,110 @@
   --x-size-line-height-base-s: 16px;
   --x-size-line-height-base-m: 24px;
   --x-size-line-height-base-l: 32px;
+}
+:root {
+  --x-color-background-button-default: var(--x-color-base-lead);
+  --x-color-border-button-default: var(--x-color-background-button-default);
+  --x-color-text-button-default: var(--x-color-base-neutral-100);
+  --x-size-border-radius-button-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-radius-top-right-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-radius-bottom-right-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-radius-bottom-left-button-default: var(--x-size-border-radius-button-default);
+  --x-size-border-width-button-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-button-default: var(--x-size-border-width-button-default);
+  --x-size-border-width-right-button-default: var(--x-size-border-width-button-default);
+  --x-size-border-width-bottom-button-default: var(--x-size-border-width-button-default);
+  --x-size-border-width-left-button-default: var(--x-size-border-width-button-default);
+  --x-size-height-button-default: var(--x-size-base-08);
+  --x-size-padding-right-button-default: var(--x-size-base-05);
+  --x-size-padding-left-button-default: var(--x-size-base-05);
+  --x-size-gap-button-default: var(--x-size-base-03);
+  --x-font-family-button-default: var(--x-font-family-text);
+  --x-size-font-button-default: var(--x-size-font-text);
+  --x-number-font-weight-button-default: var(--x-number-font-weight-base-bold);
+  --x-size-line-height-button-default: var(--x-size-line-height-text);
+}
+
+[dir="ltr"] .x-button {
+  padding-right: var(--x-size-padding-right-button-default);
+}
+
+[dir="rtl"] .x-button {
+  padding-left: var(--x-size-padding-right-button-default);
+}
+
+[dir="ltr"] .x-button {
+  padding-left: var(--x-size-padding-left-button-default);
+}
+
+[dir="rtl"] .x-button {
+  padding-right: var(--x-size-padding-left-button-default);
+}
+
+[dir="ltr"] .x-button {
+  border-left-width: var(--x-size-border-width-left-button-default);
+}
+
+[dir="rtl"] .x-button {
+  border-right-width: var(--x-size-border-width-left-button-default);
+}
+
+[dir="ltr"] .x-button {
+  border-right-width: var(--x-size-border-width-right-button-default);
+}
+
+[dir="rtl"] .x-button {
+  border-left-width: var(--x-size-border-width-right-button-default);
+}
+
+.x-button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  margin: 0;
+  gap: var(--x-size-gap-button-default);
+  min-height: var(--x-size-height-button-default);
+  background-color: var(--x-color-background-button-default);
+  border-color: var(--x-color-border-button-default);
+  color: var(--x-color-text-button-default);
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-button-default);
+  border-bottom-width: var(--x-size-border-width-bottom-button-default);
+  border-radius: var(--x-size-border-radius-top-left-button-default) var(--x-size-border-radius-top-right-button-default) var(--x-size-border-radius-bottom-right-button-default) var(--x-size-border-radius-bottom-left-button-default);
+  font-family: var(--x-font-family-button-default);
+  font-size: var(--x-size-font-button-default);
+  font-weight: var(--x-number-font-weight-button-default);
+  line-height: var(--x-size-line-height-button-default);
+  cursor: pointer;
+}
+@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) {
+  .x-button {
+    gap: 0;
+  }
+  .x-button > *:not(:last-child) {
+    margin-right: var(--x-size-gap-button-default);
+  }
+}
+:root {
+  --x-string-justify-message-default: center;
+  --x-size-gap-message-default: var(--x-size-base-03);
+  --x-size-padding-message-default: var(--x-size-base-06);
+  --x-color-background-message-default: var(--x-color-base-neutral-95);
+  --x-color-border-message-default: var(--x-color-background-message-default);
+  --x-color-text-message-default: var(--x-color-text-default);
+  --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
+  --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-width-message-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
+  --x-font-family-message-default: var(--x-font-family-title3);
+  --x-size-font-message-default: var(--x-size-font-title3);
+  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
 }

package/docs/build-search-ui/README.md

@@ -20,7 +20,7 @@ Start building your search and discovery experience:
 
 ::: slot right-intro-column
 
-<img :src="$withBase('/assets/media/build-search-ui.svg')" alt="Build Your Search UI">
+<img :src="$withBase('/assets/media/interface/build-search-ui.svg')" alt="Build Your Search UI">
 
 :::
 

package/docs/build-search-ui/web-archetype-development-guide.md

@@ -10,8 +10,6 @@ tags:
   - archetype development
 ---
 
-# Develop using Interface X Archetype
-
 In this tutorial, you’ll learn how to build a search and discovery layer based on predefined
 features and components in a matter of minutes using the Interface X Archetype.
 

package/docs/build-search-ui/web-archetype-integration-guide.md

@@ -9,8 +9,6 @@ tags:
   - x components
 ---
 
-# Integrate Interface X Archetype into an existing website
-
 In this tutorial, you'll learn how to integrate the Interface X Archetype project in your
 commerce store in a matter of minutes. You can use the X Archetype **as is** or you can
 **[extend](web-archetype-development-guide.md)** the search and discovery interface experience to
@@ -54,7 +52,7 @@ Automatic initialization is the easiest way to integrate the Interface X pr
 1. **Configure the JavaScript snippet** to define either an initialization object or a function.
 2. **Load and initialize** the Interface X script.
 
-#### Configuring the snippet
+### Configuring the snippet
 
 First, add the JavaScript snippet configuration to define multiple initialization options, i.e. the
 API to use, the language or currency to display, or even the tagging parameters to collect
@@ -100,7 +98,7 @@ more information on the supported parameters, check out
 
 :::
 
-#### Loading the script
+### Loading the script
 
 Once the snippet configuration is ready, add the Interface X script to your webpage. The script
 is hosted in a URL with the following syntax:
@@ -153,7 +151,7 @@ On-demand initialization allows you to control when Interface X is loaded.
 1. **Load** the Interface X script.
 2. **Initialize** Interface X.
 
-#### Loading the script
+### Loading the script
 
 Add the Interface X script hosted in a URL with the following syntax:
 
@@ -174,7 +172,7 @@ attribute `src` so that it points to the staging environment as follows:
 <script src="https://x.staging.empathy.co/my-store/app.js" type="module"></script>
 ```
 
-#### Initializing Interface&nbsp;X
+### Initializing Interface&nbsp;X
 
 Since no initialization configuration is defined when loading the script, you need to **invoke the
 initialization function** created automatically in the
@@ -214,7 +212,7 @@ out further information about:
   subscribe to when initializing
 - **Functions supported by the [X&nbsp;API object](#x-api)** to initialize Interface&nbsp;X
 
-#### Snippet configuration
+### Snippet configuration
 
 The
 [snippet configuration](https://github.com/empathyco/x-archetype/blob/main/public/snippet-script.js)
@@ -253,7 +251,7 @@ does **not use any cookies** in its libraries.
 
 :::
 
-#### Callbacks and Interface X events types
+### Callbacks and Interface X events types
 
 You can use a **callback** to subscribe to specific **X&nbsp;events&nbsp;types** to perform
 particular actions when triggered.
@@ -293,7 +291,7 @@ However, every module has its own sort of components (e.g. Empathize X events, S
 etc.). See the corresponding `events.types.ts` file for each module in the
 [X&nbsp;Components library in GitHub](https://github.com/empathyco/x/tree/main/packages/x-components/src/x-modules).
 
-#### X API
+### X API
 
 The
 [X&nbsp;API](https://github.com/empathyco/x/blob/main/packages/x-components/src/x-installer/api/base-api.ts)

package/docs/build-search-ui/web-how-to-use-x-components-guide.md

@@ -8,8 +8,6 @@ tags:
   - how to
 ---
 
-# How to use and configure Interface X Components in your project
-
 Interface X Components are like building blocks that you pick up and mix to craft your
 search UI experiences. The goal of using components is to include only the components you want,
 wherever you want.

package/docs/build-search-ui/web-x-architecture.md

@@ -7,9 +7,7 @@ tags:
   - architecture
 ---
 
-# How Interface X works
-
-<img :src="$withBase('/assets/media/interfacex-architecture.svg')" alt="Interface X architecture">
+![Interface X architecture](~@assets/media/interface/x-architecture.svg)
 
 <FootNote>
 

package/docs/build-search-ui/web-x-components-development-guide.md

@@ -9,8 +9,6 @@ tags:
   - x components library
 ---
 
-# Develop using the Interface X Components library
-
 In this tutorial, you’ll learn the basics to integrate the Interface X Components library
 in your own project to craft enticing Vue search experiences for your commerce store in a matter of
 minutes.

package/docs/experience-search-and-discovery/README.md

@@ -2,8 +2,6 @@
 title: Experience search & discovery
 ---
 
-# Experience search & discovery
-
 Search inevitably is key when people look for specific products in an online store. It's the door
 to the entire product catalogue, so having an outstanding, well-structured, and optimized search UI
 is a must.
@@ -12,8 +10,8 @@ However, it’s not enough. With the advanced features provided by some well-kno
 shoppers need a new dimension to **connect effortlessly** to the most relevant products, enjoy a
 **smooth user experience**, and take advantage of **outstanding search and discovery capabilities**.
 
-<img :src="$withBase('/assets/media/intro_experience_and_search.svg')" alt="Experience search and discovery">
-<br/>
+![Experience search and discovery](~@assets/media/interface/experience-search-intro.svg)
+
 
 ## Interface X and Interface X for Apps, the solution
 

package/docs/experience-search-and-discovery/empathize.md

@@ -1,15 +1,16 @@
 ---
 title: Empathize UI
+tags:
+    - predictive layer
+    - search box
 ---
 
-# Empathize
-
 Empathize is a UI container, but not just any container. It’s the
 **[predictive layer](/explore-empathy-platform/overview/predictive-layer.md)** for your search
 experience that is usually displayed below the search box. Consider it the natural companion of the
 **[search box](search-box.md)**, featuring search suggestions and recommendations.
 
-![Empathize](~@assets/media/xcomponents_func_empathize.gif)
+![Empathize](~@assets/media/interface/x-empathize.gif)
 
 One of the characteristics of Interface X Components is that you can place them
 wherever you want. However, you know that the placement of the search box in your shop matters. So,
@@ -72,13 +73,17 @@ addition to or replacing the search box focus. You may prefer to make it more ac
 Keyboard Navigation component. Your shoppers can navigate the components in Empathize with the
 keyboard arrow keys.
 
-<!--
-**Enhance Empathize usability with...**
+**Enhance Empathize usability with...**  
+
 - Keyboard scroll
 - Keyboard navigation
--->
 
-<!--link to keyboard navigation components when available-->
+::: interact
+
+Learn more on how to improve the usability of the Empathize UI component using the [Base Scroll](/develop-empathy-platform/ui-reference/components/base-components/scroll/x-components.base-scroll.md) and [Base Keyboard Navigation](/develop-empathy-platform/ui-reference/components/base-components/x-components.base-keyboard-navigation.md) components in the X&nbsp;Components UI Reference.
+
+:::
+
 
 ## Spot the difference
 

package/docs/experience-search-and-discovery/facets-and-filters.md

@@ -1,15 +1,15 @@
 ---
 title: Facets & Filters UI
+tag:
+  - faceted
 ---
 
-# Facets & Filters UI
-
 Facets and Filters allow your shoppers to organize your product catalogue in different categories
 and narrow the search results to better find what they are looking for. Shoppers can set filters
 according to the categories or facets defined in the faceted menu, which is usually located on the
 left or upper side of the search engine results page or product listing page.
 
-<img :src="$withBase('/assets/media/x-components_func_facets.gif')" alt="Facets"> <br>
+![Facets](~@assets/media/interface/x-facets.gif)
 
 X&nbsp;Components for facets present how you have categorized your products, displaying the
 different aspects available (brand, price, color…), while the filter-related components render the
@@ -43,7 +43,7 @@ time, giving them the opportunity to establish a **dialogue** with your product
 decide what results to display by adding and clearing filters, or make information on product
 results **clearer and more accessible**, meeting different types of faceting layouts.
 
-<img :src="$withBase('/assets/media/x-components_func_facets.png')" alt="Facets" />
+![Facets](~@assets/media/interface/x-facets.svg)
 
 ::: details Rendering facets and filters
 

package/docs/experience-search-and-discovery/history-queries.md

@@ -2,12 +2,10 @@
 title: History Queries UI
 ---
 
-# History Queries UI
-
 The History Queries UI component displays the search history, allowing shoppers to check previous
 searches and revisit products they’ve viewed before in a few clicks.
 
-![History Queries](~@assets/media/xcomponents_func_historyqueries.gif)
+![History Queries](~@assets/media/interface/x-history-queries.gif)
 
 ::: interact
 

package/docs/experience-search-and-discovery/id-results.md

@@ -1,15 +1,16 @@
 ---
 title: ID Results UI
+tags:
+  - identifier results
 ---
 
-# ID Results UI
 
 The Identifier Results UI component presents a type of search results intended for product reference
 codes. When shoppers start typing, a reference code query type is detected, and a list displays
 instantly with query-matching product results. When shoppers select an identifier result hint from
 the list, they go directly to the product detail page (PDP).
 
-<img :src="$withBase('/assets/media/xcomponents_func_idresults.gif')" alt="ID Results">
+![ID Results](~@assets/media/interface/x-id-results.gif)
 
 :::warning
 

package/docs/experience-search-and-discovery/my-history.md

@@ -4,7 +4,7 @@ title: My History UI
 
 The My History UI component displays the complete list of history queries, allowing shoppers to reuse previously searched queries.  
 
-![My History](~@assets/media/overview_myhistory.svg)
+![My History](~@assets/media/features/overview-my-history.svg)
 
 ::: interact
 

package/docs/experience-search-and-discovery/next-queries.md

@@ -1,14 +1,15 @@
 ---
 title: Next Queries UI
+tags:
+  - popular next queries
+  - what's next
 ---
 
-# Next Queries UI
-
 The Next Queries UI component provides shoppers with ideas on what to search for next based on their
 last search. Since next queries are related to the last query, they appear after performing a first
 search.
 
-![Next Queries](~@assets/media/xcomponents_func_nextqueries.gif)
+![Next Queries](~@assets/media/interface/x-next-queries.gif)
 
 Next queries can be **organic**, using information on the most common searches that are performed
 successively or within a same session by shoppers, or **curated**, created manually by the

package/docs/experience-search-and-discovery/popular-searches.md

@@ -1,14 +1,18 @@
 ---
 title: Popular Searches UI
+tags:
+  - top searches
+  - top terms
+  - search trends
+  - top queries
+  - trending
 ---
 
-# Popular Searches UI
-
 The Popular Searches UI component displays what are the top search queries during a specific time.
 This type of suggestion can show up even before shoppers have started entering a query or when there
 are no search results to show.
 
-![Popular Searches](~@assets/media/xcomponents_func_popularsearches.gif)
+![Popular Searches](~@assets/media/interface/x-popular-searches.gif)
 
 ::: warning
 

package/docs/experience-search-and-discovery/product-results-ui.md

@@ -1,9 +1,9 @@
 ---
 title: Product results UI
+tags:
+  - results layout
 ---
 
-# Product results UI
-
 After launching a search, some shoppers may just want to take a quick look around, reviewing only
 product thumbnails and quick info on the SERP. While others will prefer to have a more detailed
 overview of the product results with large and multiple images. That’s why the display of results is
@@ -14,7 +14,7 @@ tailor the display to create the best product discovery experience for your shop
 elements and product-related information you want to include when displaying product results such as
 the price, a picture, or even an add-to-cart button.
 
-![X Components for results display](~@assets/media/overview_product_card.svg)
+![X Components for results display](~@assets/media/features/overview-product-results-card.svg)
 
 <FootNote>
 

package/docs/experience-search-and-discovery/query-suggestions.md

@@ -1,14 +1,15 @@
 ---
 title: Query Suggestions UI
+tags:
+  - search suggestions
+  - search as you type
 ---
 
-# Query Suggestions UI
-
 The Query Suggestions UI component helps your shoppers with hints of what to look for to get
 relevant results. They complete and nail down the query as shoppers type without needing to keep
 typing.
 
-![Query Suggestions](~@assets/media/xcomponents_func_querysuggestions.gif)
+![Query Suggestions](~@assets/media/interface/x-query-suggestions.gif)
 
 ::: warning
 

package/docs/experience-search-and-discovery/recommendations.md

@@ -1,14 +1,19 @@
 ---
 title: Recommendations UI
+tags:
+  - top clicked
+  - top searched
+  - trending
+  - trending products
+  - top products
+  - popular
 ---
 
-# Recommendations UI
-
 The Recommendations UI component shows the most clicked products on the SERP, based on shopper
 interaction within a defined period. They help your shoppers to explore your product catalogue,
 guiding them to specific products without the need to launch any queries.
 
-<img :src="$withBase('/assets/media/xcomponents_func_recommendations.gif')" alt="Recommendations]">
+![Recommendations](~@assets/media/interface/x-recommendations.gif)
 
 ::: warning
 

package/docs/experience-search-and-discovery/related-tags.md

@@ -1,16 +1,17 @@
 ---
 title: Related Tags UI
+tags:
+  - tags
+  - related keywords
 ---
 
-# Related Tags UI
-
 The Related Tags UI component helps your shoppers to refine a specific search query and find what
 they’re looking for with just one click. They only appear after the search process is completed, and
 the results appear to fine-tune the search with extra information and get highly relevant results.
 They are shown as labels usually at the top of the results page, but can be displayed anywhere
 instead.
 
-![Related Tags](~@assets/media/xcomponents_func_relatedtags.gif)
+![Related Tags](~@assets/media/interface/x-related-tags.gif)
 
 ::: warning
 
@@ -27,7 +28,7 @@ Can't quite capture the concept? Learn more about
 
 :::
 
-<!-- You can configure the behaviour of Related Tags and decide whether they’re selectable or not. If Related Tags aren’t selectable, they modify the initial query syntax by adding the related-search keywords to the query term initially typed in the search bar. Otherwise, the initial query syntax will still remain so that shoppers can select or deselect Related Tags at their ease, exploring different options and combinations. -->
+<!-- You can configure the behavior of Related Tags and decide whether they’re selectable or not. If Related Tags aren’t selectable, they modify the initial query syntax by adding the related-search keywords to the query term initially typed in the search bar. Otherwise, the initial query syntax will still remain so that shoppers can select or deselect Related Tags at their ease, exploring different options and combinations. -->
 
 ## Tailor the web experience
 

package/docs/experience-search-and-discovery/search-box.md

@@ -1,14 +1,17 @@
 ---
 title: Search Box UI
+tags: 
+  - search input
+  - search bar
+  - search field
+  - input
 ---
 
-# Search Box UI
-
 The Search Box UI Component is the main entry point for search where shoppers can type what
 they're looking for in your shop. It usually includes an input field, a search button, and a clear
 button.
 
-<img :src="$withBase('/assets/media/xcomponents_func_searchbox.svg')" alt="Search Box"> <br>
+![Search box](~@assets/media/interface/x-search-box.svg)
 
 ::: interact
 

package/docs/experience-search-and-discovery/serp-ui.md

@@ -1,14 +1,16 @@
 ---
 title: SERP UI
+tags:
+  - results layout
+  - grid
+  - results grid
 ---
 
-# SERP UI
-
 To handle and display search results, the layout of results and other related discovery features is
 paramount. For example, how to arrange results on the SERP or the features shoppers expect to easily
 navigate and organize results are key points to have in mind. <br/>
 
-![X Components for results layout](~@assets/media/xcomponents_func_results_layout.svg)
+![X Components for results layout](~@assets/media/interface/x-results-layout.svg)
 
 <FootNote>
 

package/docs/experience-search-and-discovery/web-local-storage.md

@@ -6,10 +6,9 @@ tags:
   - cookies
   - local storage
   - history queries
+  - cookieless
 ---
 
-# Interface X data privacy and browser local storage
-
 Interface X for web **does not use cookies** for storing data. The
 [Interface X Components](readme.md#interface-x-and-interface-x-for-apps-the-solution) use the web browser's local storage to save the technical data
 required to provide the services associated with the search & discovery experience. The data remains

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.198",
+  "version": "3.0.0-alpha.199",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -136,5 +136,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "4a29a1da84c3f6b541b4eca201ba72de17602e3e"
+  "gitHead": "73d3c1c9481f8d2bb82947932c40549f14d40023"
 }