@empathyco/x-components 5.0.0-alpha.1 → 5.0.0-alpha.3

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.0-alpha.3](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.2...@empathyco/x-components@5.0.0-alpha.3) (2024-05-01)
+
+
+### Code Refactoring
+
+* **base-event-button:** migrate base-event-button component to Composition API (#1457) ([39a7a8e](https://github.com/empathyco/x/commit/39a7a8ed4767ae78d447e6ddca530c41f9f681dc))
+
+
+
+## [5.0.0-alpha.2](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.1...@empathyco/x-components@5.0.0-alpha.2) (2024-05-01)
+
+
+### Documentation
+
+* fix typo (#1455) ([44eae35](https://github.com/empathyco/x/commit/44eae359b33f9642eb9af02701fd6a3295a2deb9))
+
+
+
 ## [5.0.0-alpha.1](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.0...@empathyco/x-components@5.0.0-alpha.1) (2024-04-29)
 
 

package/design-system/deprecated-full-theme.css

@@ -1,22 +1,18 @@
 
-.x-underline {
-  -webkit-text-decoration-line: underline;
-          text-decoration-line: underline;
+.x-uppercase {
+  text-transform: uppercase;
 }
 
-.x-overline {
-  -webkit-text-decoration-line: overline;
-          text-decoration-line: overline;
+.x-lowercase {
+  text-transform: lowercase;
 }
 
-.x-line-through {
-  -webkit-text-decoration-line: line-through;
-          text-decoration-line: line-through;
+.x-capitalize {
+  text-transform: capitalize;
 }
 
-.x-no-underline {
-  -webkit-text-decoration-line: none;
-          text-decoration-line: none;
+.x-normal-case {
+  text-transform: none;
 }
 .x-static {
   position: static !important;
@@ -37,6 +33,26 @@
 .x-sticky {
   position: sticky !important;
 }
+.x-underline {
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+}
+
+.x-overline {
+  -webkit-text-decoration-line: overline;
+          text-decoration-line: overline;
+}
+
+.x-line-through {
+  -webkit-text-decoration-line: line-through;
+          text-decoration-line: line-through;
+}
+
+.x-no-underline {
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+}
+
 .x-padding--00 {
   padding: 0 !important;
 }
@@ -478,7 +494,6 @@
 [dir="rtl"] .x-padding--left-20 {
   padding-right: var(--x-size-base-20) !important;
 }
-
 .x-margin--auto {
   margin: auto !important;
 }
@@ -964,15 +979,6 @@
 .x-line-height--loose {
   line-height: 2 !important;
 }
-.x-font-weight--light {
-  font-weight: var(--x-number-font-weight-base-light) !important;
-}
-.x-font-weight--regular {
-  font-weight: var(--x-number-font-weight-base-regular) !important;
-}
-.x-font-weight--bold {
-  font-weight: var(--x-number-font-weight-base-bold) !important;
-}
 .x-line-clamp--2 {
   overflow: hidden !important;
   display: -webkit-box !important;
@@ -1007,6 +1013,15 @@
   -webkit-box-orient: vertical !important;
   -webkit-line-clamp: 6 !important;
 }
+.x-font-weight--light {
+  font-weight: var(--x-number-font-weight-base-light) !important;
+}
+.x-font-weight--regular {
+  font-weight: var(--x-number-font-weight-base-regular) !important;
+}
+.x-font-weight--bold {
+  font-weight: var(--x-number-font-weight-base-bold) !important;
+}
 .x-font-size--01 {
   font-size: var(--x-size-base-01) !important;
   line-height: 1.5;
@@ -1763,49 +1778,6 @@
 .x-border-width--left-10 {
   border-style: solid !important;
 }
-.x-border-color--lead {
-  border-color: var(--x-color-base-lead) !important;
-}
-
-.x-border-color--auxiliary {
-  border-color: var(--x-color-base-auxiliary) !important;
-}
-
-.x-border-color--neutral-10 {
-  border-color: var(--x-color-base-neutral-10) !important;
-}
-
-.x-border-color--neutral-35 {
-  border-color: var(--x-color-base-neutral-35) !important;
-}
-
-.x-border-color--neutral-70 {
-  border-color: var(--x-color-base-neutral-70) !important;
-}
-
-.x-border-color--neutral-95 {
-  border-color: var(--x-color-base-neutral-95) !important;
-}
-
-.x-border-color--neutral-100 {
-  border-color: var(--x-color-base-neutral-100) !important;
-}
-
-.x-border-color--accent {
-  border-color: var(--x-color-base-accent) !important;
-}
-
-.x-border-color--enable {
-  border-color: var(--x-color-base-enable) !important;
-}
-
-.x-border-color--disable {
-  border-color: var(--x-color-base-disable) !important;
-}
-
-.x-border-color--transparent {
-  border-color: var(--x-color-base-transparent) !important;
-}
 .x-border-radius--00 {
   border-radius: 0 !important;
 }
@@ -3314,63 +3286,63 @@
 [dir="rtl"] .x-border-radius--bottom-right-20 {
   border-bottom-left-radius: var(--x-size-base-20) !important;
 }
-.x-text--stroke.x-text {
-  --x-string-text-decoration: line-through;
-}
-.x-text--stroke.x-title1 {
-  --x-string-text-decoration-title1: line-through;
-}
-.x-text--stroke.x-title2 {
-  --x-string-text-decoration-title2: line-through;
-}
-.x-text--stroke.x-title3 {
-  --x-string-text-decoration-title3: line-through;
-}
-.x-text--stroke.x-small {
-  --x-string-text-decoration-small: line-through;
-}
-.x-background--lead {
-  background-color: var(--x-color-base-lead) !important;
+.x-border-color--lead {
+  border-color: var(--x-color-base-lead) !important;
 }
 
-.x-background--auxiliary {
-  background-color: var(--x-color-base-auxiliary) !important;
+.x-border-color--auxiliary {
+  border-color: var(--x-color-base-auxiliary) !important;
 }
 
-.x-background--neutral-10 {
-  background-color: var(--x-color-base-neutral-10) !important;
+.x-border-color--neutral-10 {
+  border-color: var(--x-color-base-neutral-10) !important;
 }
 
-.x-background--neutral-35 {
-  background-color: var(--x-color-base-neutral-35) !important;
+.x-border-color--neutral-35 {
+  border-color: var(--x-color-base-neutral-35) !important;
 }
 
-.x-background--neutral-70 {
-  background-color: var(--x-color-base-neutral-70) !important;
+.x-border-color--neutral-70 {
+  border-color: var(--x-color-base-neutral-70) !important;
 }
 
-.x-background--neutral-95 {
-  background-color: var(--x-color-base-neutral-95) !important;
+.x-border-color--neutral-95 {
+  border-color: var(--x-color-base-neutral-95) !important;
 }
 
-.x-background--neutral-100 {
-  background-color: var(--x-color-base-neutral-100) !important;
+.x-border-color--neutral-100 {
+  border-color: var(--x-color-base-neutral-100) !important;
 }
 
-.x-background--accent {
-  background-color: var(--x-color-base-accent) !important;
+.x-border-color--accent {
+  border-color: var(--x-color-base-accent) !important;
 }
 
-.x-background--enable {
-  background-color: var(--x-color-base-enable) !important;
+.x-border-color--enable {
+  border-color: var(--x-color-base-enable) !important;
 }
 
-.x-background--disable {
-  background-color: var(--x-color-base-disable) !important;
+.x-border-color--disable {
+  border-color: var(--x-color-base-disable) !important;
 }
 
-.x-background--transparent {
-  background-color: var(--x-color-base-transparent) !important;
+.x-border-color--transparent {
+  border-color: var(--x-color-base-transparent) !important;
+}
+.x-text--stroke.x-text {
+  --x-string-text-decoration: line-through;
+}
+.x-text--stroke.x-title1 {
+  --x-string-text-decoration-title1: line-through;
+}
+.x-text--stroke.x-title2 {
+  --x-string-text-decoration-title2: line-through;
+}
+.x-text--stroke.x-title3 {
+  --x-string-text-decoration-title3: line-through;
+}
+.x-text--stroke.x-small {
+  --x-string-text-decoration-small: line-through;
 }
 :root {
   --x-color-text-secondary: var(--x-color-base-neutral-35);
@@ -3433,6 +3405,108 @@
   --x-size-line-height-small: var(--x-size-line-height-base-s);
   --x-string-text-decoration-small: none;
 }
+:root {
+  --x-font-family-base: "Montserrat", sans-serif;
+  --x-size-font-base-xs: 12px;
+  --x-size-font-base-s: 14px;
+  --x-size-font-base-m: 16px;
+  --x-size-font-base-l: 18px;
+  --x-size-font-base-xl: 32px;
+  --x-number-font-weight-base-light: 300;
+  --x-number-font-weight-base-regular: 400;
+  --x-number-font-weight-base-bold: 600;
+  --x-size-line-height-base-s: 16px;
+  --x-size-line-height-base-m: 24px;
+  --x-size-line-height-base-l: 32px;
+  --x-color-text-default: var(--x-color-base-neutral-10);
+  --x-font-family-text: var(--x-font-family-base);
+  --x-size-font-text: var(--x-size-font-base-s);
+  --x-number-font-weight-text: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-text: var(--x-size-line-height-base-s);
+  --x-string-text-decoration-text: none;
+  --x-font-family-title1: var(--x-font-family-base);
+  --x-size-font-title1: var(--x-size-font-base-xl);
+  --x-number-font-weight-title1: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-title1: var(--x-size-line-height-base-l);
+  --x-string-text-decoration-title1: none;
+  --x-font-family-title2: var(--x-font-family-base);
+  --x-size-font-title2: var(--x-size-font-base-l);
+  --x-number-font-weight-title2: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-title2: var(--x-size-line-height-base-m);
+  --x-string-text-decoration-title2: none;
+  --x-font-family-title3: var(--x-font-family-base);
+  --x-size-font-title3: var(--x-size-font-base-m);
+  --x-number-font-weight-title3: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-title3: var(--x-size-line-height-base-m);
+  --x-string-text-decoration-title3: none;
+  --x-font-family-small: var(--x-font-family-base);
+  --x-size-font-small: var(--x-size-font-base-xs);
+  --x-number-font-weight-small: var(--x-number-font-weight-base-regular);
+  --x-size-line-height-small: var(--x-size-line-height-base-s);
+  --x-string-text-decoration-small: none;
+}
+
+.x,
+.x-text {
+  font-family: var(--x-font-family-text);
+  font-size: var(--x-size-font-text);
+  font-weight: var(--x-number-font-weight-text);
+  line-height: var(--x-size-line-height-text);
+  -webkit-text-decoration: var(--x-string-text-decoration);
+          text-decoration: var(--x-string-text-decoration);
+  color: var(--x-color-text-default);
+  margin: 0;
+}
+
+.x-title1 {
+  font-family: var(--x-font-family-title1);
+  font-size: var(--x-size-font-title1);
+  font-weight: var(--x-number-font-weight-title1);
+  line-height: var(--x-size-line-height-title1);
+  -webkit-text-decoration: var(--x-string-text-decoration-title1);
+          text-decoration: var(--x-string-text-decoration-title1);
+  color: var(--x-color-text-default);
+  margin: 0;
+}
+
+.x-title2 {
+  font-family: var(--x-font-family-title2);
+  font-size: var(--x-size-font-title2);
+  font-weight: var(--x-number-font-weight-title2);
+  line-height: var(--x-size-line-height-title2);
+  -webkit-text-decoration: var(--x-string-text-decoration-title2);
+          text-decoration: var(--x-string-text-decoration-title2);
+  color: var(--x-color-text-default);
+  margin: 0;
+}
+
+.x-title3 {
+  font-family: var(--x-font-family-title3);
+  font-size: var(--x-size-font-title3);
+  font-weight: var(--x-number-font-weight-title3);
+  line-height: var(--x-size-line-height-title3);
+  -webkit-text-decoration: var(--x-string-text-decoration-title3);
+          text-decoration: var(--x-string-text-decoration-title3);
+  color: var(--x-color-text-default);
+  margin: 0;
+}
+
+.x-small {
+  font-family: var(--x-font-family-small);
+  font-size: var(--x-size-font-small);
+  font-weight: var(--x-number-font-weight-small);
+  line-height: var(--x-size-line-height-small);
+  -webkit-text-decoration: var(--x-string-text-decoration-small);
+          text-decoration: var(--x-string-text-decoration-small);
+  color: var(--x-color-text-default);
+  margin: 0;
+}
+
+.x-ellipsis {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
 .x-text--bold.x-text {
   --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
 }
@@ -7535,14 +7609,6 @@
   --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
   --x-size-border-width-left-facet-header-line: 0;
 }
-:root {
-  --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
-  --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
-  --x-size-border-width-top-facet-header-line: 0;
-  --x-size-border-width-right-facet-header-line: 0;
-  --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
-  --x-size-border-width-left-facet-header-line: 0;
-}
 
 .x-facet--line.x-facet,
 .x-facet--line .x-facet {
@@ -7559,6 +7625,14 @@
     --x-size-border-width-left-facet-header-line
   );
 }
+:root {
+  --x-color-border-facet-header-line: var(--x-color-base-neutral-10);
+  --x-size-border-width-facet-header-line: var(--x-size-border-width-base);
+  --x-size-border-width-top-facet-header-line: 0;
+  --x-size-border-width-right-facet-header-line: 0;
+  --x-size-border-width-bottom-facet-header-line: var(--x-size-border-width-facet-header-line);
+  --x-size-border-width-left-facet-header-line: 0;
+}
 :root {
   --x-color-background-facet-default: transparent;
   --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -8465,11 +8539,6 @@
   --x-color-border-button-ghost: transparent;
   --x-color-text-button-ghost: var(--x-color-base-lead);
 }
-:root {
-  --x-color-background-button-ghost: transparent;
-  --x-color-border-button-ghost: transparent;
-  --x-color-text-button-ghost: var(--x-color-base-lead);
-}
 
 .x-button--ghost.x-button,
 .x-button--ghost .x-button {
@@ -8487,6 +8556,11 @@
 .x-button--ghost.x-button--ghost-end .x-button {
   --x-size-padding-right-button-default: 0;
 }
+:root {
+  --x-color-background-button-ghost: transparent;
+  --x-color-border-button-ghost: transparent;
+  --x-color-text-button-ghost: var(--x-color-base-lead);
+}
 :root {
   --x-color-background-button-default: var(--x-color-base-lead);
   --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8725,120 +8799,46 @@
   --x-size-border-radius-base-pill: 99999px;
   --x-size-border-width-base: 1px;
 }
-.x-uppercase {
-  text-transform: uppercase;
+.x-background--lead {
+  background-color: var(--x-color-base-lead) !important;
 }
 
-.x-lowercase {
-  text-transform: lowercase;
+.x-background--auxiliary {
+  background-color: var(--x-color-base-auxiliary) !important;
 }
 
-.x-capitalize {
-  text-transform: capitalize;
+.x-background--neutral-10 {
+  background-color: var(--x-color-base-neutral-10) !important;
 }
 
-.x-normal-case {
-  text-transform: none;
+.x-background--neutral-35 {
+  background-color: var(--x-color-base-neutral-35) !important;
 }
-:root {
-  --x-font-family-base: "Montserrat", sans-serif;
-  --x-size-font-base-xs: 12px;
-  --x-size-font-base-s: 14px;
-  --x-size-font-base-m: 16px;
-  --x-size-font-base-l: 18px;
-  --x-size-font-base-xl: 32px;
-  --x-number-font-weight-base-light: 300;
-  --x-number-font-weight-base-regular: 400;
-  --x-number-font-weight-base-bold: 600;
-  --x-size-line-height-base-s: 16px;
-  --x-size-line-height-base-m: 24px;
-  --x-size-line-height-base-l: 32px;
-  --x-color-text-default: var(--x-color-base-neutral-10);
-  --x-font-family-text: var(--x-font-family-base);
-  --x-size-font-text: var(--x-size-font-base-s);
-  --x-number-font-weight-text: var(--x-number-font-weight-base-regular);
-  --x-size-line-height-text: var(--x-size-line-height-base-s);
-  --x-string-text-decoration-text: none;
-  --x-font-family-title1: var(--x-font-family-base);
-  --x-size-font-title1: var(--x-size-font-base-xl);
-  --x-number-font-weight-title1: var(--x-number-font-weight-base-regular);
-  --x-size-line-height-title1: var(--x-size-line-height-base-l);
-  --x-string-text-decoration-title1: none;
-  --x-font-family-title2: var(--x-font-family-base);
-  --x-size-font-title2: var(--x-size-font-base-l);
-  --x-number-font-weight-title2: var(--x-number-font-weight-base-regular);
-  --x-size-line-height-title2: var(--x-size-line-height-base-m);
-  --x-string-text-decoration-title2: none;
-  --x-font-family-title3: var(--x-font-family-base);
-  --x-size-font-title3: var(--x-size-font-base-m);
-  --x-number-font-weight-title3: var(--x-number-font-weight-base-regular);
-  --x-size-line-height-title3: var(--x-size-line-height-base-m);
-  --x-string-text-decoration-title3: none;
-  --x-font-family-small: var(--x-font-family-base);
-  --x-size-font-small: var(--x-size-font-base-xs);
-  --x-number-font-weight-small: var(--x-number-font-weight-base-regular);
-  --x-size-line-height-small: var(--x-size-line-height-base-s);
-  --x-string-text-decoration-small: none;
+
+.x-background--neutral-70 {
+  background-color: var(--x-color-base-neutral-70) !important;
 }
 
-.x,
-.x-text {
-  font-family: var(--x-font-family-text);
-  font-size: var(--x-size-font-text);
-  font-weight: var(--x-number-font-weight-text);
-  line-height: var(--x-size-line-height-text);
-  -webkit-text-decoration: var(--x-string-text-decoration);
-          text-decoration: var(--x-string-text-decoration);
-  color: var(--x-color-text-default);
-  margin: 0;
+.x-background--neutral-95 {
+  background-color: var(--x-color-base-neutral-95) !important;
 }
 
-.x-title1 {
-  font-family: var(--x-font-family-title1);
-  font-size: var(--x-size-font-title1);
-  font-weight: var(--x-number-font-weight-title1);
-  line-height: var(--x-size-line-height-title1);
-  -webkit-text-decoration: var(--x-string-text-decoration-title1);
-          text-decoration: var(--x-string-text-decoration-title1);
-  color: var(--x-color-text-default);
-  margin: 0;
+.x-background--neutral-100 {
+  background-color: var(--x-color-base-neutral-100) !important;
 }
 
-.x-title2 {
-  font-family: var(--x-font-family-title2);
-  font-size: var(--x-size-font-title2);
-  font-weight: var(--x-number-font-weight-title2);
-  line-height: var(--x-size-line-height-title2);
-  -webkit-text-decoration: var(--x-string-text-decoration-title2);
-          text-decoration: var(--x-string-text-decoration-title2);
-  color: var(--x-color-text-default);
-  margin: 0;
+.x-background--accent {
+  background-color: var(--x-color-base-accent) !important;
 }
 
-.x-title3 {
-  font-family: var(--x-font-family-title3);
-  font-size: var(--x-size-font-title3);
-  font-weight: var(--x-number-font-weight-title3);
-  line-height: var(--x-size-line-height-title3);
-  -webkit-text-decoration: var(--x-string-text-decoration-title3);
-          text-decoration: var(--x-string-text-decoration-title3);
-  color: var(--x-color-text-default);
-  margin: 0;
+.x-background--enable {
+  background-color: var(--x-color-base-enable) !important;
 }
 
-.x-small {
-  font-family: var(--x-font-family-small);
-  font-size: var(--x-size-font-small);
-  font-weight: var(--x-number-font-weight-small);
-  line-height: var(--x-size-line-height-small);
-  -webkit-text-decoration: var(--x-string-text-decoration-small);
-          text-decoration: var(--x-string-text-decoration-small);
-  color: var(--x-color-text-default);
-  margin: 0;
+.x-background--disable {
+  background-color: var(--x-color-base-disable) !important;
 }
 
-.x-ellipsis {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
+.x-background--transparent {
+  background-color: var(--x-color-base-transparent) !important;
 }

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

@@ -2,26 +2,25 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseEventButton](./x-components.baseeventbutton.md)
 
-## BaseEventButton class
+## BaseEventButton variable
 
-Component to be reused that renders a `<button>` with the logic of emitting events to the bus on click. The events are passed as an object to prop [XEventsTypes](./x-components.xeventstypes.md)<!-- -->. The keys are the event name and the values are the payload of each event. All events are emitted with its respective payload. If any event doesn't need payload a `undefined` must be passed as value.
+Component to be reused that renders a `<button>` with the logic of emitting events to the bus on click. The events are passed as an object to prop [XEvent](./x-components.xevent.md)<!-- -->. The keys are the event name and the values are the payload of each event. All events are emitted with its respective payload. If any event doesn't need payload a `undefined` must be passed as value.
 
 **Signature:**
 
 ```typescript
-export default class BaseEventButton extends Vue 
+_default: import("vue").DefineComponent<{
+    events: {
+        type: PropType<Partial<XEventsTypes>>;
+        required: true;
+    };
+}, {
+    emitEvents: () => void;
+    rootRef: import("vue").Ref<HTMLButtonElement | undefined>;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    events: {
+        type: PropType<Partial<XEventsTypes>>;
+        required: true;
+    };
+}>>, {}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [events](./x-components.baseeventbutton.events.md) | <code>protected</code> | Partial&lt;[XEventsTypes](./x-components.xeventstypes.md)<!-- -->&gt; | (Required) A object where the keys are the [XEvent](./x-components.xevent.md) and the values are the payload of each event. |
-
-## Methods
-
-|  Method | Modifiers | Description |
-|  --- | --- | --- |
-|  [emitEvents()](./x-components.baseeventbutton.emitevents.md) | <code>protected</code> |  |
-

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

@@ -16,7 +16,6 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [BannersList](./x-components.bannerslist.md) | <p>It renders a [ItemsList](./x-components.itemslist.md) list of banners from [SearchState.banners](./x-components.searchstate.banners.md) by default using the <code>ItemsInjectionMixin</code>.</p><p>The component provides a default slot which wraps the whole component with the <code>banners</code> plus the <code>searchInjectedItems</code> which also contains the injected list items from the ancestor.</p><p>It also provides the parent slots to customize the items.</p> |
 |  [BaseColumnPickerDropdown](./x-components.basecolumnpickerdropdown.md) | <p>Column picker dropdown component renders [BaseDropdown](./x-components.basedropdown.md) component which options are the different columns you can set for a grid.</p><p>It emits [XEventsTypes.UserClickedColumnPicker](./x-components.xeventstypes.userclickedcolumnpicker.md) on dropdown input.</p> |
 |  [BaseColumnPickerList](./x-components.basecolumnpickerlist.md) | <p>Column picker list component renders a list of buttons to choose the columns number.</p><p>Additionally, this component exposes the following props to modify the classes of the elements: <code>buttonClass</code>.</p> |
-|  [BaseEventButton](./x-components.baseeventbutton.md) | Component to be reused that renders a <code>&lt;button&gt;</code> with the logic of emitting events to the bus on click. The events are passed as an object to prop [XEventsTypes](./x-components.xeventstypes.md)<!-- -->. The keys are the event name and the values are the payload of each event. All events are emitted with its respective payload. If any event doesn't need payload a <code>undefined</code> must be passed as value. |
 |  [BaseEventsModal](./x-components.baseeventsmodal.md) | Component containing a modal that emits a [XEventsTypes.UserClickedCloseEventsModal](./x-components.xeventstypes.userclickedcloseeventsmodal.md) when clicking outside the content rendered in the default slot and can receive, through the eventsToCloseModal prop, a list of [XEvent](./x-components.xevent.md) to listen to in order to close also the modal, eventsToOpenModal prop, another list of [XEvent](./x-components.xevent.md) to customize the events to listen to open the modal and a prop, displayOverlay, to display an overlay over the rest of the html. The default slot offers the possibility to customize the modal content. |
 |  [BaseHeaderTogglePanel](./x-components.baseheadertogglepanel.md) | Toggle panel which uses the base toggle panel, adds a header and manage the open / close state of the panel. |
 |  [BaseIdModal](./x-components.baseidmodal.md) | Component containing a modal expecting a required prop, named <code>modalId</code>. It reacts to <code>UserClickedOpenModal</code>, <code>UserClickedCloseModal</code> and <code>UserClickedOutOfModal</code> events, when their payload matches the component's 'modalId' prop, to handle its open/close state. The default slot offers the possibility to customise the modal content. |
@@ -393,6 +392,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [BaseAddToCart](./x-components.baseaddtocart.md) | Renders a button with a default slot. It receives the result with the data and emits [XEventsTypes.UserClickedResultAddToCart](./x-components.xeventstypes.userclickedresultaddtocart.md) to the bus on click mouse event. |
 |  [BaseCurrency](./x-components.basecurrency.md) | <p>Renders the value received as a property which always must be a JavaScript number, with the proper format provided as a string property or by injection. The rendered tag is a span in order to render a default inline HTML element.</p><p>Regarding the format or mask to be defined as string: - Use 'i' to define integer numbers. - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the format doesn't include decimals, it is filled with zeros until reach the length defined with 'd's. - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group. - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more than one character. - If you want to hide the decimal part if it's zero, you can add the <code>?</code> symbol after the decimal characters (e.g. 'i.iii,dd?', for <code>1234</code> you would get <code>1.234</code> instead of <code>1.234,00</code>). - Set whatever you need around the integers and decimals marks. - Default mask: 'i.iii,dd' which returns '1.345,67'.</p> |
 |  [BaseDropdown](./x-components.basedropdown.md) | Dropdown component that mimics a Select element behavior, but with the option to customize the toggle button and each item contents. |
+|  [BaseEventButton](./x-components.baseeventbutton.md) | Component to be reused that renders a <code>&lt;button&gt;</code> with the logic of emitting events to the bus on click. The events are passed as an object to prop [XEvent](./x-components.xevent.md)<!-- -->. The keys are the event name and the values are the payload of each event. All events are emitted with its respective payload. If any event doesn't need payload a <code>undefined</code> must be passed as value. |
 |  [BaseEventsModalClose](./x-components.baseeventsmodalclose.md) | Component contains an event button that emits [XEventsTypes.UserClickedCloseEventsModal](./x-components.xeventstypes.userclickedcloseeventsmodal.md) when clicked. It has a default slot to customize its contents. |
 |  [BaseEventsModalOpen](./x-components.baseeventsmodalopen.md) | Component contains an event button that emits [XEventsTypes.UserClickedOpenEventsModal](./x-components.xeventstypes.userclickedopeneventsmodal.md) when clicked. It has a default slot to customize its contents. |
 |  [BaseFallbackImage](./x-components.basefallbackimage.md) |  |

package/docs/API-reference/components/common/animations/x-components.staggering-transition-group.md

@@ -23,11 +23,11 @@ animations.
 ### Basic example
 
 Apart from all the props and events that the classic transition group has, the staggering transition
-group also exposes a new `stagger` property, which allows to configure the delay for each one of the
-nodes when animating.
+group also exposes a new `staggering` property, which allows to configure the delay for each one of
+the nodes when animating.
 
 ```vue
-<staggering-transition-group appear :stagger="50" name="staggered-fade-slide-">
+<staggering-transition-group appear :staggering="50" name="staggered-fade-slide-">
   <!-- @slot (Required) Transition-group content -->
   <slot />
 </staggering-transition-group>

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

@@ -7,15 +7,15 @@ title: BaseEventButton
 # BaseEventButton
 
 Component to be reused that renders a `<button>` with the logic of emitting events to the bus on
-click. The events are passed as an object to prop XEventsTypes. The keys are the event name and the
-values are the payload of each event. All events are emitted with its respective payload. If any
-event doesn't need payload a `undefined` must be passed as value.
+click. The events are passed as an object to prop XEvent. The keys are the event name and the values
+are the payload of each event. All events are emitted with its respective payload. If any event
+doesn't need payload a `undefined` must be passed as value.
 
 ## Props
 
-| Name                | Description                                                                                          | Type                 | Default       |
-| ------------------- | ---------------------------------------------------------------------------------------------------- | -------------------- | ------------- |
-| <code>events</code> | (Required) A object where the keys are the XEvent and the values<br />are the payload of each event. | <code>Partial</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> |
 
 ## Slots