@empathyco/x-components 5.0.0-alpha.9 → 6.0.0-alpha.2

package/docs/API-reference/components/common/animations/x-components.staggered-fade-and-slide.md

@@ -7,19 +7,21 @@ title: StaggeredFadeAndSlide
 # StaggeredFadeAndSlide
 
 Renders a transition group wrapping the elements passed in the default slot and animating them with
-an staggered fade and slide animation.
+a staggered fade and slide animation.
 
 ## Props
 
-| Name                | Description                                                                    | Type                 | Default           |
-| ------------------- | ------------------------------------------------------------------------------ | -------------------- | ----------------- |
-| <code>appear</code> | Indicates if the transition must be applied on the initial render of the node. | <code>boolean</code> | <code>true</code> |
+| Name                 | Description                                                                    | Type                 | Default            |
+| -------------------- | ------------------------------------------------------------------------------ | -------------------- | ------------------ |
+| <code>appear</code>  | Indicates if the transition must be applied on the initial render of the node. | <code>boolean</code> | <code>true</code>  |
+| <code>tag</code>     | The tag of the node to render to the DOM.                                      | <code>string</code>  | <code>'div'</code> |
+| <code>stagger</code> | The time in ms to stagger each item.                                           | <code>number</code>  | <code>25</code>    |
 
 ## Slots
 
-| Name                 | Description                         | Bindings<br />(name - type - description) |
-| -------------------- | ----------------------------------- | ----------------------------------------- |
-| <code>default</code> | (Required) Transition-group content | None                                      |
+| Name                 | Description | Bindings<br />(name - type - description) |
+| -------------------- | ----------- | ----------------------------------------- |
+| <code>default</code> |             | None                                      |
 
 The Staggered fade and slide components works as the normal fade and slide components, but it also
 adds a configurable delay to each transition.
@@ -39,8 +41,8 @@ or the `stagger` props:
 
 ```vue
 <StaggeredFadeAndSlide tag="ul" :stagger="50">
-  <li>Element to animate</li>
-  <li>Element to animate</li>
-  <li>Element to animate</li>
+  <li key="1">Element to animate</li>
+  <li key="2">Element to animate</li>
+  <li key="3">Element to animate</li>
 </StaggeredFadeAndSlide>
 ```

package/docs/API-reference/components/common/layouts/x-components.fixed-header-and-asides-layout.md

@@ -1,3 +1,7 @@
+---
+title: FixedHeaderAndAsidesLayout
+---
+
 ---
 
 title: FixedHeaderAndAsidesLayout
@@ -10,9 +14,9 @@ Component for use as Layout to be filled with the rest of the components.
 
 ## Props
 
-| Name                 | Description                                                                 | Type                 | Default            |
-| -------------------- | --------------------------------------------------------------------------- | -------------------- | ------------------ |
-| <code>devMode</code> | Enables the devMode, which shows the available slots to use with its names. | <code>boolean</code> | <code>false</code> |
+| Name                 | Description                                                                 | Type                 | Default       |
+| -------------------- | --------------------------------------------------------------------------- | -------------------- | ------------- |
+| <code>devMode</code> | Enables the devMode, which shows the available slots to use with its names. | <code>boolean</code> | <code></code> |
 
 ## Slots
 

package/docs/API-reference/components/common/layouts/x-components.multi-column-max-width-layout.md

@@ -1,3 +1,7 @@
+---
+title: MultiColumnMaxWidthLayout
+---
+
 ---
 
 title: MultiColumnMaxWidthLayout
@@ -10,10 +14,10 @@ Component for use as Layout to be filled with the rest of the Components.
 
 ## Props
 
-| Name                        | Description                                                                 | Type                 | Default                         |
-| --------------------------- | --------------------------------------------------------------------------- | -------------------- | ------------------------------- |
-| <code>devMode</code>        | Enables the devMode, which shows the available slots to use with its names. | <code>boolean</code> | <code>false</code>              |
-| <code>asideAnimation</code> | The animation used for the Main Aside.                                      | <code>Vue</code>     | <code>() => AnimateWidth</code> |
+| Name                        | Description                                                                 | Type                       | Default                         |
+| --------------------------- | --------------------------------------------------------------------------- | -------------------------- | ------------------------------- |
+| <code>asideAnimation</code> | The animation used for the Main Aside.                                      | <code>AnimationProp</code> | <code>() => AnimateWidth</code> |
+| <code>devMode</code>        | Enables the devMode, which shows the available slots to use with its names. | <code>boolean</code>       | <code></code>                   |
 
 ## Slots
 

package/docs/API-reference/components/common/layouts/x-components.single-column-layout.md

@@ -1,3 +1,7 @@
+---
+title: SingleColumnLayout
+---
+
 ---
 
 title: SingleColumnLayout
@@ -10,10 +14,10 @@ Component for use as Layout to be filled with the rest of the Components.
 
 ## Props
 
-| Name                        | Description                                                                 | Type                 | Default                                      |
-| --------------------------- | --------------------------------------------------------------------------- | -------------------- | -------------------------------------------- |
-| <code>devMode</code>        | Enables the devMode, which shows the available slots to use with its names. | <code>boolean</code> | <code>false</code>                           |
-| <code>asideAnimation</code> | The animation used for the Main Aside.                                      | <code>Vue</code>     | <code>() => animateTranslate('right')</code> |
+| Name                        | Description                                                                 | Type                       | Default                                      |
+| --------------------------- | --------------------------------------------------------------------------- | -------------------------- | -------------------------------------------- |
+| <code>asideAnimation</code> | The animation used for the Main Aside.                                      | <code>AnimationProp</code> | <code>() => animateTranslate('right')</code> |
+| <code>devMode</code>        | Enables the devMode, which shows the available slots to use with its names. | <code>boolean</code>       | <code></code>                                |
 
 ## Slots
 

package/docs/API-reference/components/common/modals/x-components.base-events-modal.md

@@ -15,12 +15,12 @@ possibility to customize the modal content.
 
 ## Props
 
-| Name                            | Description                                                                   | Type                | Default                                                                                     |
-| ------------------------------- | ----------------------------------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------- |
-| <code>animation</code>          | Animation to use for opening/closing the modal.                               | <code>union</code>  | <code></code>                                                                               |
-| <code>eventsToOpenModal</code>  | Array of XEvent to listen to open the modal.                                  | <code>Array</code>  | <code>(): XEvent[] => ['UserClickedOpenEventsModal']</code>                                 |
-| <code>eventsToCloseModal</code> | Array of XEvent to listen to close the modal.                                 | <code>Array</code>  | <code>(): XEvent[] => ['UserClickedCloseEventsModal', 'UserClickedOutOfEventsModal']</code> |
-| <code>bodyClickEvent</code>     | Event to emit when any part of the website out of the modal has been clicked. | <code>XEvent</code> | <code>'UserClickedOutOfEventsModal'</code>                                                  |
+| Name                            | Description                                                                   | Type                       | Default                                                                                     |
+| ------------------------------- | ----------------------------------------------------------------------------- | -------------------------- | ------------------------------------------------------------------------------------------- |
+| <code>eventsToOpenModal</code>  | Array of XEvent to listen to open the modal.                                  | <code>XEvent[]</code>      | <code>(): XEvent[] => ['UserClickedOpenEventsModal']</code>                                 |
+| <code>eventsToCloseModal</code> | Array of XEvent to listen to close the modal.                                 | <code>XEvent[]</code>      | <code>(): XEvent[] => ['UserClickedCloseEventsModal', 'UserClickedOutOfEventsModal']</code> |
+| <code>bodyClickEvent</code>     | Event to emit when any part of the website out of the modal has been clicked. | <code>XEvent</code>        | <code>'UserClickedOutOfEventsModal'</code>                                                  |
+| <code>animation</code>          | Animation to use for opening/closing the modal.                               | <code>AnimationProp</code> | <code></code>                                                                               |
 
 ## Slots
 

package/docs/API-reference/components/common/modals/x-components.base-id-modal-close.md

@@ -17,10 +17,9 @@ full customization with the 'closing-element' slot and exposes the 'closeModal'
 
 ## Slots
 
-| Name                         | Description                                                                   | Bindings<br />(name - type - description)                               |
-| ---------------------------- | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
-| <code>closing-element</code> | closing-element. It's the element that will trigger the modal closing. It's a | **closeModal** <code>Function</code> - The function to close the modal. |
-| <code>default</code>         | (Required) Button content with a text, an icon or both                        | None                                                                    |
+| Name                 | Description                                            | Bindings<br />(name - type - description) |
+| -------------------- | ------------------------------------------------------ | ----------------------------------------- |
+| <code>default</code> | (Required) Button content with a text, an icon or both | None                                      |
 
 ## Events
 

package/docs/API-reference/components/common/modals/x-components.base-id-modal-open.md

@@ -18,10 +18,9 @@ function.
 
 ## Slots
 
-| Name                         | Description                                                                   | Bindings<br />(name - type - description)                             |
-| ---------------------------- | ----------------------------------------------------------------------------- | --------------------------------------------------------------------- |
-| <code>opening-element</code> | opening-element. It's the element that will trigger the modal opening. It's a | **openModal** <code>Function</code> - The function to open the modal. |
-| <code>default</code>         | (Required) Button content with a text, an icon or both                        | None                                                                  |
+| Name                 | Description                                            | Bindings<br />(name - type - description) |
+| -------------------- | ------------------------------------------------------ | ----------------------------------------- |
+| <code>default</code> | (Required) Button content with a text, an icon or both | None                                      |
 
 ## Events
 

package/docs/API-reference/components/common/modals/x-components.base-id-modal.md

@@ -13,10 +13,10 @@ offers the possibility to customise the modal content.
 
 ## Props
 
-| Name                   | Description                                                | Type                | Default       |
-| ---------------------- | ---------------------------------------------------------- | ------------------- | ------------- |
-| <code>animation</code> | Animation to use for opening/closing the modal.            | <code>union</code>  | <code></code> |
-| <code>modalId</code>   | The modalId to use for the open and close event listeners. | <code>string</code> | <code></code> |
+| Name                   | Description                                                | Type                       | Default       |
+| ---------------------- | ---------------------------------------------------------- | -------------------------- | ------------- |
+| <code>animation</code> | Animation to use for opening/closing the modal.            | <code>AnimationProp</code> | <code></code> |
+| <code>modalId</code>   | The modalId to use for the open and close event listeners. | <code>string</code>        | <code></code> |
 
 ## Slots
 

package/docs/API-reference/components/common/modals/x-components.base-modal.md

@@ -11,13 +11,15 @@ modals.
 
 ## Props
 
-| Name                           | Description                                                                                                                                                                                       | Type                 | Default                      |
-| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ---------------------------- |
-| <code>animation</code>         | Animation to use for opening/closing the modal. This animation only affects the content.                                                                                                          | <code>union</code>   | <code>() => NoElement</code> |
-| <code>overlayAnimation</code>  | Animation to use for the overlay (backdrop) part of the modal. By default, it uses<br />a fade transition.                                                                                        | <code>union</code>   | <code>() => Fade</code>      |
-| <code>open</code>              | Determines if the modal is open or not.                                                                                                                                                           | <code>boolean</code> | <code></code>                |
-| <code>focusOnOpen</code>       | Determines if the focused element changes to one inside the modal when it opens. Either the<br />first element with a positive tabindex or just the first focusable element.                      | <code>boolean</code> | <code>true</code>            |
-| <code>referenceSelector</code> | The reference selector of a DOM element to use as reference to position the modal.<br />This selector can be an ID or a class, if it is a class, it will use the first<br />element that matches. | <code>string</code>  | <code></code>                |
+| Name                           | Description                                                                                                                                                                                       | Type                       | Default                        |
+| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ------------------------------ |
+| <code>open</code>              | Determines if the modal is open or not.                                                                                                                                                           | <code>boolean</code>       | <code></code>                  |
+| <code>focusOnOpen</code>       | Determines if the focused element changes to one inside the modal when it opens. Either the<br />first element with a positive tabindex or just the first focusable element.                      | <code>boolean</code>       | <code>true</code>              |
+| <code>referenceSelector</code> | The reference selector of a DOM element to use as reference to position the modal.<br />This selector can be an ID or a class, if it is a class, it will use the first<br />element that matches. | <code>string</code>        | <code></code>                  |
+| <code>animation</code>         | Animation to use for opening/closing the modal.This animation only affects the content.                                                                                                           | <code>AnimationProp</code> | <code>() => NoAnimation</code> |
+| <code>overlayAnimation</code>  | Animation to use for the overlay (backdrop) part of the modal. By default, it uses<br />a fade transition.                                                                                        | <code>AnimationProp</code> | <code>() => Fade</code>        |
+| <code>contentClass</code>      | Class inherited by content element.                                                                                                                                                               | <code>string</code>        | <code></code>                  |
+| <code>overlayClass</code>      | Class inherited by overlay element.                                                                                                                                                               | <code>string</code>        | <code></code>                  |
 
 ## Events
 

package/docs/API-reference/components/common/modals/x-components.main-modal.md

@@ -10,10 +10,13 @@ A specialised version of a modal component, made to contain a full search applic
 
 ## Props
 
-| Name                     | Description                                                                                                                                                                  | Type                       | Default            |
-| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ------------------ |
-| <code>animation</code>   | Animation to use for opening/closing the modal.                                                                                                                              | <code>AnimationProp</code> | <code></code>      |
-| <code>focusOnOpen</code> | Determines if the focused element changes to one inside the modal when it opens. Either the<br />first element with a positive tabindex or just the first focusable element. | <code>boolean</code>       | <code>false</code> |
+| Name                              | Description                                                                                                                                                                  | Type                                                | Default                                                               |
+| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | --------------------------------------------------------------------- |
+| <code>animation</code>            | Animation to use for opening/closing the modal.                                                                                                                              | <code>AnimationProp</code>                          | <code></code>                                                         |
+| <code>closeEvents</code>          | Events to listen for closing the main modal.                                                                                                                                 | <code>XEvent[]</code>                               | <code>() => ['UserClickedCloseX', 'UserClickedOutOfMainModal']</code> |
+| <code>focusOnOpen</code>          | Determines if the focused element changes to one inside the modal when it opens. Either the<br />first element with a positive tabindex or just the first focusable element. | <code>boolean</code>                                | <code>false</code>                                                    |
+| <code>openEvents</code>           | Events to listen for opening the main modal.                                                                                                                                 | <code>XEvent[]</code>                               | <code>() => ['UserClickedOpenX', 'UserOpenXProgrammatically']</code>  |
+| <code>outOfModalClickEvent</code> | Event to be emitted by the modal when clicked out of its content.                                                                                                            | <code>(String as PropType<XEvent>) \|\| null</code> | <code>'UserClickedOutOfMainModal'</code>                              |
 
 ## Slots
 
@@ -82,3 +85,42 @@ The `contentClass` prop can be used to add classes to the modal content.
   };
 </script>
 ```
+
+### Customizing the modal events
+
+The modal events can be customized by changing its props values:
+
+- To add or subtract events to open or close the modal,
+- To modify or remove the default
+  [`UserClickedOutOfMainModal`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
+  that the modal emits.
+
+In this example, we are changing the `openEvents` prop to add another event, and removing the event
+that the modal would emit when the user clicks out of the modal.
+
+```vue live
+<template>
+  <div>
+    <OpenMainModal>Open X</OpenMainModal>
+    <MainModal
+      :openEvents="['UserClickedOpenX', 'UserOpenXProgrammatically', 'MyCustomXEvent']"
+      :outOfModalClickEvent="null"
+    >
+      <CloseMainModal>Close X</CloseMainModal>
+    </MainModal>
+  </div>
+</template>
+
+<script>
+  import { MainModal, CloseMainModal, OpenMainModal } from '@empathyco/x-components';
+
+  export default {
+    name: 'MainModalDemo',
+    components: {
+      MainModal,
+      CloseMainModal,
+      OpenMainModal
+    }
+  };
+</script>
+```

package/docs/API-reference/components/common/panels/x-components.base-header-toggle-panel.md

@@ -11,10 +11,11 @@ the panel.
 
 ## Props
 
-| Name                        | Description                                                             | Type                     | Default                      |
-| --------------------------- | ----------------------------------------------------------------------- | ------------------------ | ---------------------------- |
-| <code>animation</code>      | Animation component that will be used to animate the base-toggle-panel. | <code>TSTypeQuery</code> | <code>() => NoElement</code> |
-| <code>startCollapsed</code> | Handles if the panel is open by default.                                | <code>boolean</code>     | <code>false</code>           |
+| Name                        | Description                                                             | Type                       | Default                        |
+| --------------------------- | ----------------------------------------------------------------------- | -------------------------- | ------------------------------ |
+| <code>animation</code>      | Animation component that will be used to animate the base-toggle-panel. | <code>AnimationProp</code> | <code>() => NoAnimation</code> |
+| <code>startCollapsed</code> | Handles if the panel is open by default.                                | <code>boolean</code>       | <code></code>                  |
+| <code>headerClass</code>    | Class inherited by content element.                                     | <code>string</code>        | <code></code>                  |
 
 ## Slots
 

package/docs/API-reference/components/common/panels/x-components.base-id-toggle-panel.md

@@ -17,11 +17,11 @@ The default slot offers the possibility to customise the modal content.
 
 ## Props
 
-| Name                   | Description                                                                                                       | Type                 | Default                      |
-| ---------------------- | ----------------------------------------------------------------------------------------------------------------- | -------------------- | ---------------------------- |
-| <code>startOpen</code> | Shows the panel open at the beginning or not, depending on its state.                                             | <code>boolean</code> | <code>true</code>            |
-| <code>animation</code> | Animation component that will be used to animate the panel content.                                               | <code>Vue</code>     | <code>() => NoElement</code> |
-| <code>panelId</code>   | The id to link with the BaseIdTogglePanelButton.<br />Both components must use the same Id to make them interact. | <code>string</code>  | <code></code>                |
+| Name                   | Description                                                                                                       | Type                       | Default                        |
+| ---------------------- | ----------------------------------------------------------------------------------------------------------------- | -------------------------- | ------------------------------ |
+| <code>startOpen</code> | Shows the panel open at the beginning or not, depending on its state.                                             | <code>boolean</code>       | <code>true</code>              |
+| <code>animation</code> | Animation component that will be used to animate the panel content.                                               | <code>AnimationProp</code> | <code>() => NoAnimation</code> |
+| <code>panelId</code>   | The id to link with the BaseIdTogglePanelButton.<br />Both components must use the same Id to make them interact. | <code>string</code>        | <code></code>                  |
 
 ## Slots
 

package/docs/API-reference/components/common/panels/x-components.base-tabs-panel.md

@@ -10,12 +10,16 @@ Base Tabs Panel.
 
 ## Props
 
-| Name                          | Description                                                                | Type                 | Default                      |
-| ----------------------------- | -------------------------------------------------------------------------- | -------------------- | ---------------------------- |
-| <code>tabsAnimation</code>    | Animation component that will be used to animate the tabs list.            | <code>union</code>   | <code>'header'</code>        |
-| <code>contentAnimation</code> | Animation component that will be used to animate the selected tab content. | <code>union</code>   | <code>() => NoElement</code> |
-| <code>initialTab</code>       | The tab to be initially selected.                                          | <code>string</code>  | <code>''</code>              |
-| <code>allowTabDeselect</code> | Allows the tabs to be unselected.                                          | <code>boolean</code> | <code>false</code>           |
+| Name                          | Description                                                                | Type                       | Default                        |
+| ----------------------------- | -------------------------------------------------------------------------- | -------------------------- | ------------------------------ |
+| <code>tabsAnimation</code>    | Animation component that will be used to animate the tabs list.            | <code>AnimationProp</code> | <code>'header'</code>          |
+| <code>contentAnimation</code> | Animation component that will be used to animate the selected tab content. | <code>AnimationProp</code> | <code>() => NoAnimation</code> |
+| <code>initialTab</code>       | The tab to be initially selected.                                          | <code>string</code>        | <code>''</code>                |
+| <code>allowTabDeselect</code> | Allows the tabs to be unselected.                                          | <code>boolean</code>       | <code>false</code>             |
+| <code>activeTabClass</code>   | Class inherited by content element.                                        | <code>string</code>        | <code></code>                  |
+| <code>contentClass</code>     | Class inherited by content element.                                        | <code>string</code>        | <code></code>                  |
+| <code>tabClass</code>         | Class inherited by content element.                                        | <code>string</code>        | <code></code>                  |
+| <code>tabsListClass</code>    | Class inherited by content element.                                        | <code>string</code>        | <code></code>                  |
 
 ## Slots
 

package/docs/API-reference/components/common/result/x-components.base-result-image.md

@@ -10,12 +10,12 @@ Component to be reused that renders an `<img>`.
 
 ## Props
 
-| Name                              | Description                                                                                                   | Type                       | Default                      |
-| --------------------------------- | ------------------------------------------------------------------------------------------------------------- | -------------------------- | ---------------------------- |
-| <code>result</code>               | (Required) The @empathyco/x-types#Result information.                                                         | <code>Result</code>        | <code></code>                |
-| <code>loadAnimation</code>        | Animation to use when switching between the placeholder, the loaded image, or the failed<br />image fallback. | <code>animationProp</code> | <code>() => NoElement</code> |
-| <code>hoverAnimation</code>       | Animation to use when switching between the loaded image and the hover image.                                 | <code>animationProp</code> | <code></code>                |
-| <code>showNextImageOnHover</code> | Indicates if the next valid image should be displayed on hover.                                               | <code>boolean</code>       | <code>false</code>           |
+| Name                              | Description                                                                                                   | Type                       | Default                        |
+| --------------------------------- | ------------------------------------------------------------------------------------------------------------- | -------------------------- | ------------------------------ |
+| <code>result</code>               | (Required) The @empathyco/x-types#Result information.                                                         | <code>Result</code>        | <code></code>                  |
+| <code>loadAnimation</code>        | Animation to use when switching between the placeholder, the loaded image, or the failed<br />image fallback. | <code>animationProp</code> | <code>() => NoAnimation</code> |
+| <code>hoverAnimation</code>       | Animation to use when switching between the loaded image and the hover image.                                 | <code>animationProp</code> | <code></code>                  |
+| <code>showNextImageOnHover</code> | Indicates if the next valid image should be displayed on hover.                                               | <code>boolean</code>       | <code>false</code>             |
 
 ## Slots
 

package/docs/API-reference/components/common/result/x-components.result-variant-selector.md

@@ -17,11 +17,10 @@ logger warning on mount when result is not injected.
 
 ## Slots
 
-| Name                         | Description     | Bindings<br />(name - type - description)                                                                                                                                                                                                                                       |
-| ---------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| <code>default</code>         | Variants list   | **variants** <code>ResultVariant[]</code> - Array containing the available variants<br />**selectedVariant** <code>ResultVariant \| undefined</code> - The selected variant<br />**selectVariant** <code>(variant: ResultVariant) => void</code> - Callback to select a variant |
-| <code>variant</code>         | Variant item    | **variant** <code>ResultVariant</code> - The variant item<br />**isSelected** <code>boolean</code> - Indicates if the variant is selected<br />**selectVariant** <code>() => void</code> - Callback to select the variant                                                       |
-| <code>variant-content</code> | Variant content | **variant** <code>ResultVariant</code> - The variant item<br />**isSelected** <code>boolean</code> - Indicates if the variant is selected                                                                                                                                       |
+| Name                         | Description     | Bindings<br />(name - type - description)                                                                                                                                                                                 |
+| ---------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <code>variant</code>         | Variant item    | **variant** <code>ResultVariant</code> - The variant item<br />**isSelected** <code>boolean</code> - Indicates if the variant is selected<br />**selectVariant** <code>() => void</code> - Callback to select the variant |
+| <code>variant-content</code> | Variant content | **variant** <code>ResultVariant</code> - The variant item<br />**isSelected** <code>boolean</code> - Indicates if the variant is selected                                                                                 |
 
 ## Events
 

package/docs/API-reference/components/common/result/x-components.result-variants-provider.md

@@ -20,12 +20,6 @@ the selected variant to be used from a child.
 | <code>result</code>          | The original result containing the variants.                                                                                                                                                                                                                                                                                                                                                                 | <code>Result</code> | <code></code>                         |
 | <code>autoSelectDepth</code> | The provider by default will auto select the first variants of all levels.<br />This prop allows to limit the number of variants auto selected when the provider is created.<br />Take into account that the depth will be the variants level + 1, so, setting autoSelectDepth<br />to 0 will not select any variant, setting it to 1 will select only the first variant of the<br />first level, and so on. | <code>number</code> | <code>Number.POSITIVE_INFINITY</code> |
 
-## Slots
-
-| Name                 | Description | Bindings<br />(name - type - description) |
-| -------------------- | ----------- | ----------------------------------------- |
-| <code>default</code> |             | None                                      |
-
 ## Events
 
 A list of events that the component will emit:

package/docs/API-reference/components/common/scroll/x-components.base-scroll.md

@@ -11,13 +11,13 @@ when the user scrolls, the direction of scroll and if user reaches the start or
 
 ## Props
 
-| Name                                 | Description                                                                                                                                                                                                                  | Type                 | Default                                                                                                                                                                                                                      |
-| ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| <code>distanceToBottom</code>        | Distance to the end of the scroll that when reached will emit the<br />`scroll:about-to-end` event.                                                                                                                          | <code>number</code>  | <code>100</code>                                                                                                                                                                                                             |
-| <code>firstElementThresholdPx</code> | Positive vertical distance to still consider that the element is the first one visible.<br />For example, if set to 100, after scrolling 100 pixels, the first rendered element<br />will still be considered the first one. | <code>number</code>  | <code>100</code>                                                                                                                                                                                                             |
-| <code>throttleMs</code>              | Time duration to ignore the subsequent scroll events after an emission.<br />Higher values will decrease events precision but can prevent performance issues.                                                                | <code>number</code>  | <code>100</code>                                                                                                                                                                                                             |
-| <code>resetOnChange</code>           | If true (default), sets the scroll position to the top when certain events are emitted.                                                                                                                                      | <code>boolean</code> | <code>true</code>                                                                                                                                                                                                            |
-| <code>resetOn</code>                 | List of events that should reset the scroll when emitted.                                                                                                                                                                    | <code>XEvent</code>  | <code>() => [<br /> 'SearchBoxQueryChanged',<br /> 'SortChanged',<br /> 'SelectedFiltersChanged',<br /> 'SelectedFiltersForRequestChanged',<br /> 'SelectedRelatedTagsChanged',<br /> 'UserChangedExtraParams'<br />]</code> |
+| Name                                 | Description                                                                                                                                                                                                                  | Type                            | Default                                                                                                                                                                                                                      |
+| ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <code>distanceToBottom</code>        | Distance to the end of the scroll that when reached will emit the<br />`scroll:about-to-end` event.                                                                                                                          | <code>number</code>             | <code>100</code>                                                                                                                                                                                                             |
+| <code>firstElementThresholdPx</code> | Positive vertical distance to still consider that the element is the first one visible.<br />For example, if set to 100, after scrolling 100 pixels, the first rendered element<br />will still be considered the first one. | <code>number</code>             | <code>100</code>                                                                                                                                                                                                             |
+| <code>throttleMs</code>              | Time duration to ignore the subsequent scroll events after an emission.<br />Higher values will decrease events precision but can prevent performance issues.                                                                | <code>number</code>             | <code>100</code>                                                                                                                                                                                                             |
+| <code>resetOnChange</code>           | If true (default), sets the scroll position to the top when certain events are emitted.                                                                                                                                      | <code>boolean</code>            | <code>true</code>                                                                                                                                                                                                            |
+| <code>resetOn</code>                 | List of events that should reset the scroll when emitted.                                                                                                                                                                    | <code>XEvent \| XEvent[]</code> | <code>() => [<br /> 'SearchBoxQueryChanged',<br /> 'SortChanged',<br /> 'SelectedFiltersChanged',<br /> 'SelectedFiltersForRequestChanged',<br /> 'SelectedRelatedTagsChanged',<br /> 'UserChangedExtraParams'<br />]</code> |
 
 ## Events
 

package/docs/API-reference/components/common/suggestions/x-components.base-suggestions.md

@@ -11,13 +11,14 @@ default slot for working.
 
 ## Props
 
-| Name                             | Description                                                                                                     | Type                 | Default            |
-| -------------------------------- | --------------------------------------------------------------------------------------------------------------- | -------------------- | ------------------ |
-| <code>suggestions</code>         | The list of suggestions to render.                                                                              | <code>Array</code>   | <code></code>      |
-| <code>animation</code>           | Animation component that will be used to animate the suggestion.                                                | <code>union</code>   | <code>'ul'</code>  |
-| <code>maxItemsToRender</code>    | Number of suggestions to be rendered.                                                                           | <code>number</code>  | <code></code>      |
-| <code>showFacets</code>          | Boolean value to indicate if the facets should be rendered.                                                     | <code>boolean</code> | <code>false</code> |
-| <code>showPlainSuggestion</code> | When BaseSuggestions.showFacets is true, it indicates if the suggestion without<br />filter should be rendered. | <code>boolean</code> | <code>false</code> |
+| Name                             | Description                                                                                                                               | Type                       | Default            |
+| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ------------------ |
+| <code>suggestions</code>         | The list of suggestions to render.                                                                                                        | <code>Suggestion[]</code>  | <code></code>      |
+| <code>animation</code>           | Animation component that will be used to animate the suggestion.                                                                          | <code>AnimationProp</code> | <code>'ul'</code>  |
+| <code>maxItemsToRender</code>    | Number of suggestions to be rendered.                                                                                                     | <code>number</code>        | <code></code>      |
+| <code>showFacets</code>          | Boolean value to indicate if the facets should be rendered.                                                                               | <code>boolean</code>       | <code>false</code> |
+| <code>showPlainSuggestion</code> | When `showFacets` property of `BaseSuggestions` component is true, it indicates if the suggestion without<br />filter should be rendered. | <code>boolean</code>       | <code>false</code> |
+| <code>suggestionItemClass</code> | Class inherited by content element.                                                                                                       | <code>string</code>        | <code></code>      |
 
 ## Slots
 

package/docs/API-reference/components/common/x-components.base-dropdown.md

@@ -11,13 +11,13 @@ toggle button and each item contents.
 
 ## Props
 
-| Name                         | Description                                                                                                                                    | Type                              | Default                      |
-| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ---------------------------- |
-| <code>items</code>           | List of items to display.                                                                                                                      | <code>DropdownItem[]</code>       | <code></code>                |
-| <code>modelValue</code>      | The selected item.                                                                                                                             | <code>DropdownItem \| null</code> | <code></code>                |
-| <code>ariaLabel</code>       | Description of what the dropdown is used for.                                                                                                  | <code>string</code>               | <code></code>                |
-| <code>animation</code>       | Animation component to use for expanding the dropdown. This is a single element animation,<br />so only `<transition>` components are allowed. | <code>string \| typeof Vue</code> | <code>() => NoElement</code> |
-| <code>searchTimeoutMs</code> | Time to wait without receiving any keystroke before resetting the items search query.                                                          | <code>number</code>               | <code>1000</code>            |
+| Name                         | Description                                                                                                                                    | Type                              | Default                        |
+| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------------------------------ |
+| <code>items</code>           | List of items to display.                                                                                                                      | <code>DropdownItem[]</code>       | <code></code>                  |
+| <code>modelValue</code>      | The selected item.                                                                                                                             | <code>DropdownItem \| null</code> | <code></code>                  |
+| <code>ariaLabel</code>       | Description of what the dropdown is used for.                                                                                                  | <code>string</code>               | <code></code>                  |
+| <code>animation</code>       | Animation component to use for expanding the dropdown. This is a single element animation,<br />so only `<transition>` components are allowed. | <code>AnimationProp</code>        | <code>() => NoAnimation</code> |
+| <code>searchTimeoutMs</code> | Time to wait without receiving any keystroke before resetting the items search query.                                                          | <code>number</code>               | <code>1000</code>              |
 
 ## Events
 

package/docs/API-reference/components/common/x-components.base-event-button.md

@@ -13,9 +13,10 @@ doesn't need payload a `undefined` must be passed as value.
 
 ## Props
 
-| Name                | Description                                                             | Type                               | Default       |
-| ------------------- | ----------------------------------------------------------------------- | ---------------------------------- | ------------- |
-| <code>events</code> | An object where the keys are the XEvent and the values are the payload. | <code>Partial<XEventsTypes></code> | <code></code> |
+| Name                  | Description                                                             | Type                                          | Default       |
+| --------------------- | ----------------------------------------------------------------------- | --------------------------------------------- | ------------- |
+| <code>events</code>   | An object where the keys are the XEvent and the values are the payload. | <code>Partial<XEventsTypes></code>            | <code></code> |
+| <code>metadata</code> | The metadata property for the request on each query preview.            | <code>Omit<WireMetadata, 'moduleName'></code> | <code></code> |
 
 ## Slots
 

package/docs/API-reference/components/common/x-components.base-keyboard-navigation.md

@@ -11,10 +11,10 @@ include the navigable elements.
 
 ## Props
 
-| Name                                 | Description                                                                                                                                            | Type                 | Default                                                                                                              |
-| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------- | -------------------------------------------------------------------------------------------------------------------- |
-| <code>navigationHijacker</code>      | An array of TakeNavigationControl objects defining when to<br />take control of the keyboard navigation.                                               | <code>Array</code>   | <code>() => [<br /> { xEvent: 'UserPressedArrowKey', moduleName: 'searchBox', direction: 'ArrowDown' }<br />]</code> |
-| <code>eventsForDirectionLimit</code> | An EventsForDirectionLimit to emit when the user is already at the furthest element<br />in a direction and tries to keep going on the same direction. | <code>Partial</code> | <code>() => ({ ArrowUp: 'UserReachedEmpathizeTop' })</code>                                                          |
+| Name                                 | Description                                                                                                                                            | Type                                          | Default                                                                                                              |
+| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| <code>navigationHijacker</code>      | An array of TakeNavigationControl objects defining when to<br />take control of the keyboard navigation.                                               | <code>TakeNavigationControl[]</code>          | <code>() => [<br /> { xEvent: 'UserPressedArrowKey', moduleName: 'searchBox', direction: 'ArrowDown' }<br />]</code> |
+| <code>eventsForDirectionLimit</code> | An EventsForDirectionLimit to emit when the user is already at the furthest element<br />in a direction and tries to keep going on the same direction. | <code>Partial<EventsForDirectionLimit></code> | <code>() => ({ ArrowUp: 'UserReachedEmpathizeTop' })</code>                                                          |
 
 ## Slots
 

package/docs/API-reference/components/common/x-components.base-switch.md

@@ -11,16 +11,15 @@ prop, and emits a Vue event whenever the user clicks it.
 
 ## Props
 
-| Name               | Description | Type                 | Default       |
-| ------------------ | ----------- | -------------------- | ------------- |
-| <code>value</code> |             | <code>boolean</code> | <code></code> |
+| Name                    | Description | Type                 | Default            |
+| ----------------------- | ----------- | -------------------- | ------------------ |
+| <code>modelValue</code> |             | <code>boolean</code> | <code>false</code> |
 
 ## Events
 
-| Event name | Properties | Description |
-| ---------- | ---------- | ----------- |
-| change     |            |
-| input      |            |
+| Event name        | Properties | Description |
+| ----------------- | ---------- | ----------- |
+| update:modelValue |            |
 
 ## Events
 
@@ -34,7 +33,7 @@ _Try clicking it to see how it changes its state_
 
 ```vue live
 <template>
-  <BaseSwitch @change="value = !value" :value="value" />
+  <BaseSwitch @update:modelValue="value = !value" :modelValue="value" />
 </template>
 
 <script>