@empathyco/x-components 5.0.0-alpha.10 → 5.0.0-alpha.11

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 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.11](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.10...@empathyco/x-components@5.0.0-alpha.11) (2024-05-13)
+
+
+### Features
+
+* replace `AnimationsMixin` with `useCollapseAnimation` composable (#1468) ([e3ee9d9](https://github.com/empathyco/x/commit/e3ee9d94f9acc4abdcd1c591a754c86d9a6abbb7))
+
+
+
 ## [5.0.0-alpha.10](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.9...@empathyco/x-components@5.0.0-alpha.10) (2024-05-09)
 
 

package/core/index.js

@@ -6,12 +6,12 @@ export { default as Fade } from '../js/components/animations/fade.vue.js';
 export { default as FadeAndSlide } from '../js/components/animations/fade-and-slide.vue.js';
 export { default as StaggeredFadeAndSlide } from '../js/components/animations/staggered-fade-and-slide.vue.js';
 export { default as StaggeringTransitionGroup } from '../js/components/animations/staggering-transition-group.vue.js';
-export { createCollapseAnimationMixin } from '../js/components/animations/animations.mixin.js';
 export { default as DisableAnimationMixin } from '../js/components/animations/disable-animation.mixin.js';
 export { createDirectionalAnimationFactory } from '../js/components/animations/create-directional-animation-factory.js';
 export { animateClipPath } from '../js/components/animations/animate-clip-path/animate-clip-path.factory.js';
 export { animateScale } from '../js/components/animations/animate-scale/animate-scale.factory.js';
 export { animateTranslate } from '../js/components/animations/animate-translate/animate-translate.factory.js';
+export { useCollapseAnimation } from '../js/components/animations/use-collapse-animation.js';
 export { default as BaseColumnPickerDropdown } from '../js/components/column-picker/base-column-picker-dropdown.vue.js';
 export { default as BaseColumnPickerList } from '../js/components/column-picker/base-column-picker-list.vue.js';
 export { default as BaseCurrency } from '../js/components/currency/base-currency.vue.js';

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

@@ -1,5 +1,4 @@
 
-
 .x-uppercase {
   text-transform: uppercase;
 }
@@ -34,6 +33,7 @@
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
 }
+
 .x-static {
   position: static !important;
 }
@@ -3387,12 +3387,12 @@
 .x-text--stroke.x-small {
   --x-string-text-decoration-small: line-through;
 }
-:root {
-  --x-color-text-secondary: var(--x-color-base-neutral-35);
-}
 .x-text--secondary {
   --x-color-text-default: var(--x-color-text-secondary);
 }
+:root {
+  --x-color-text-secondary: var(--x-color-base-neutral-35);
+}
 .x-text--light.x-text {
   --x-number-font-weight-text: var(--x-number-font-weight-base-light);
 }
@@ -4941,10 +4941,6 @@
   --x-number-zoom-scale-picture: 1.1;
   --x-number-zoom-duration-picture: 0.3s;
 }
-:root {
-  --x-number-zoom-scale-picture: 1.1;
-  --x-number-zoom-duration-picture: 0.3s;
-}
 
 .x-picture--zoom .x-picture-image {
   transition: transform var(--x-number-zoom-duration-picture) ease-out;
@@ -4952,6 +4948,10 @@
 .x-picture--zoom .x-picture-image:hover {
   transform: scale(var(--x-number-zoom-scale-picture));
 }
+:root {
+  --x-number-zoom-scale-picture: 1.1;
+  --x-number-zoom-duration-picture: 0.3s;
+}
 :root {
   --x-number-aspect-ratio-picture: 1;
 }
@@ -4981,24 +4981,6 @@
   --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
   --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
 }
-:root {
-  --x-size-border-radius-picture-default: 0;
-  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
-  --x-size-border-radius-right-picture-default: var(--x-size-border-radius-picture-default);
-  --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-picture-default);
-  --x-size-border-radius-left-picture-default: var(--x-size-border-radius-picture-default);
-  --x-color-background-picture-default: transparent;
-  --x-color-fill-picture-placeholder-path-default: var(--x-color-base-neutral-70);
-  --x-color-fill-picture-placeholder-rect-default: var(--x-color-base-neutral-95);
-  --x-color-fill-picture-fallback-path-default: var(--x-color-base-neutral-70);
-  --x-color-fill-picture-fallback-rect-default: var(--x-color-base-neutral-95);
-  --x-object-fit-picture-default: contain;
-  --x-object-fit-picture-fallback-default: var(--x-object-fit-picture-default);
-  --x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
-  --x-mix-blend-mode-picture-default: normal;
-  --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
-  --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
-}
 
 .x-picture {
   display: block;
@@ -7308,18 +7290,14 @@
   --x-size-width-icon-s: var(--x-size-base-03);
   --x-size-height-icon-s: var(--x-size-base-03);
 }
-:root {
-  --x-size-width-icon-s: var(--x-size-base-03);
-  --x-size-height-icon-s: var(--x-size-base-03);
-}
 
 .x-icon--s {
   --x-size-width-icon-default: var(--x-size-width-icon-s);
   --x-size-height-icon-default: var(--x-size-height-icon-s);
 }
 :root {
-  --x-size-width-icon-m: var(--x-size-base-05);
-  --x-size-height-icon-m: var(--x-size-base-05);
+  --x-size-width-icon-s: var(--x-size-base-03);
+  --x-size-height-icon-s: var(--x-size-base-03);
 }
 :root {
   --x-size-width-icon-m: var(--x-size-base-05);
@@ -7331,8 +7309,8 @@
   --x-size-height-icon-default: var(--x-size-height-icon-m);
 }
 :root {
-  --x-size-width-icon-l: var(--x-size-base-06);
-  --x-size-height-icon-l: var(--x-size-base-06);
+  --x-size-width-icon-m: var(--x-size-base-05);
+  --x-size-height-icon-m: var(--x-size-base-05);
 }
 :root {
   --x-size-width-icon-l: var(--x-size-base-06);
@@ -7343,6 +7321,10 @@
   --x-size-width-icon-default: var(--x-size-width-icon-l);
   --x-size-height-icon-default: var(--x-size-height-icon-l);
 }
+:root {
+  --x-size-width-icon-l: var(--x-size-base-06);
+  --x-size-height-icon-l: var(--x-size-base-06);
+}
 :root {
   --x-color-stroke-icon-default: currentColor;
   --x-color-fill-icon-default: none;
@@ -7413,6 +7395,13 @@
 .x-grid-list--cols-auto .x-grid-list__item {
   min-width: var(--x-size-min-width-grid-item);
 }
+:root {
+  --x-size-margin-filter-children: 0;
+  --x-size-padding-top-filter-children: 0;
+  --x-size-padding-right-filter-children: 0;
+  --x-size-padding-bottom-filter-children: 0;
+  --x-size-padding-left-filter-children: var(--x-size-base-05);
+}
 .x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
 .x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
 .x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
@@ -7420,11 +7409,36 @@
   margin-left: auto;
 }
 :root {
-  --x-size-margin-filter-children: 0;
-  --x-size-padding-top-filter-children: 0;
-  --x-size-padding-right-filter-children: 0;
-  --x-size-padding-bottom-filter-children: 0;
-  --x-size-padding-left-filter-children: var(--x-size-base-05);
+  --x-color-background-filter-default: transparent;
+  --x-color-border-filter-default: var(--x-color-background-filter-default);
+  --x-color-text-filter-default: var(--x-color-text-default);
+  --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
+  --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
+  --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
+  --x-size-border-width-filter-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
+  --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
+  --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
+  --x-size-padding-top-filter-default: var(--x-size-base-03);
+  --x-size-padding-right-filter-default: 0;
+  --x-size-padding-bottom-filter-default: var(--x-size-base-03);
+  --x-size-padding-left-filter-default: 0;
+  --x-size-gap-filter-default: var(--x-size-base-03);
+  --x-font-family-filter-default: var(--x-font-family-text);
+  --x-size-font-filter-default: var(--x-size-font-text);
+  --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
+  --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
+  --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
+  --x-number-font-weight-filter-count-default-selected: var(
+    --x-number-font-weight-filter-count-default
+  );
+  --x-size-line-height-filter-default: var(--x-size-line-height-text);
 }
 :root {
   --x-size-margin-filter-children: 0;
@@ -7459,36 +7473,22 @@
   width: 100%;
 }
 :root {
-  --x-color-background-filter-default: transparent;
-  --x-color-border-filter-default: var(--x-color-background-filter-default);
-  --x-color-text-filter-default: var(--x-color-text-default);
-  --x-color-background-filter-default-selected: var(--x-color-background-filter-default);
-  --x-color-border-filter-default-selected: var(--x-color-border-filter-default);
-  --x-color-text-filter-default-selected: var(--x-color-text-filter-default);
-  --x-size-border-width-filter-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-width-right-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-width-bottom-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-width-left-filter-default: var(--x-size-border-width-filter-default);
-  --x-size-border-radius-filter-default: var(--x-size-border-radius-base-none);
-  --x-size-border-radius-top-left-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-border-radius-top-right-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-border-radius-bottom-right-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-border-radius-bottom-left-filter-default: var(--x-size-border-radius-filter-default);
-  --x-size-padding-top-filter-default: var(--x-size-base-03);
-  --x-size-padding-right-filter-default: 0;
-  --x-size-padding-bottom-filter-default: var(--x-size-base-03);
-  --x-size-padding-left-filter-default: 0;
-  --x-size-gap-filter-default: var(--x-size-base-03);
-  --x-font-family-filter-default: var(--x-font-family-text);
-  --x-size-font-filter-default: var(--x-size-font-text);
-  --x-number-font-weight-filter-default: var(--x-number-font-weight-base-regular);
-  --x-number-font-weight-filter-default-selected: var(--x-number-font-weight-base-bold);
-  --x-number-font-weight-filter-count-default: var(--x-number-font-weight-base-light);
-  --x-number-font-weight-filter-count-default-selected: var(
-    --x-number-font-weight-filter-count-default
-  );
-  --x-size-line-height-filter-default: var(--x-size-line-height-text);
+  --x-size-border-radius-picture-default: 0;
+  --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
+  --x-size-border-radius-right-picture-default: var(--x-size-border-radius-picture-default);
+  --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-picture-default);
+  --x-size-border-radius-left-picture-default: var(--x-size-border-radius-picture-default);
+  --x-color-background-picture-default: transparent;
+  --x-color-fill-picture-placeholder-path-default: var(--x-color-base-neutral-70);
+  --x-color-fill-picture-placeholder-rect-default: var(--x-color-base-neutral-95);
+  --x-color-fill-picture-fallback-path-default: var(--x-color-base-neutral-70);
+  --x-color-fill-picture-fallback-rect-default: var(--x-color-base-neutral-95);
+  --x-object-fit-picture-default: contain;
+  --x-object-fit-picture-fallback-default: var(--x-object-fit-picture-default);
+  --x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
+  --x-mix-blend-mode-picture-default: normal;
+  --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
+  --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
 }
 :root {
   --x-color-background-filter-default: transparent;
@@ -7616,34 +7616,6 @@
   --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
   --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
 }
-:root {
-  --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
-  --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
-  --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
-  --x-size-padding-facet-header-outlined: var(--x-size-base-03);
-  --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
-}
-
-.x-facet--outlined.x-facet,
-.x-facet--outlined .x-facet {
-  --x-color-border-facet-default: var(--x-color-border-facet-outlined);
-  --x-size-border-width-facet-default: var(--x-size-border-width-facet-outlined);
-  --x-size-border-width-top-facet-default: var(--x-size-border-width-top-facet-outlined);
-  --x-size-border-width-right-facet-default: var(--x-size-border-width-right-facet-outlined);
-  --x-size-border-width-bottom-facet-default: var(--x-size-border-width-bottom-facet-outlined);
-  --x-size-border-width-left-facet-default: var(--x-size-border-width-left-facet-outlined);
-  --x-size-padding-facet-header-default: var(--x-size-padding-facet-header-outlined);
-  --x-size-padding-top-facet-header-default: var(--x-size-padding-top-facet-header-outlined);
-  --x-size-padding-right-facet-header-default: var(--x-size-padding-right-facet-header-outlined);
-  --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-outlined);
-  --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-outlined);
-}
 :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);
@@ -7676,6 +7648,34 @@
     --x-size-border-width-left-facet-header-line
   );
 }
+:root {
+  --x-color-border-facet-outlined: var(--x-color-base-neutral-70);
+  --x-size-border-width-facet-outlined: var(--x-size-border-width-base);
+  --x-size-border-width-top-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-right-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-bottom-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-left-facet-outlined: var(--x-size-border-width-facet-outlined);
+  --x-size-padding-facet-header-outlined: var(--x-size-base-03);
+  --x-size-padding-top-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-right-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-bottom-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-left-facet-header-outlined: var(--x-size-padding-facet-header-outlined);
+}
+
+.x-facet--outlined.x-facet,
+.x-facet--outlined .x-facet {
+  --x-color-border-facet-default: var(--x-color-border-facet-outlined);
+  --x-size-border-width-facet-default: var(--x-size-border-width-facet-outlined);
+  --x-size-border-width-top-facet-default: var(--x-size-border-width-top-facet-outlined);
+  --x-size-border-width-right-facet-default: var(--x-size-border-width-right-facet-outlined);
+  --x-size-border-width-bottom-facet-default: var(--x-size-border-width-bottom-facet-outlined);
+  --x-size-border-width-left-facet-default: var(--x-size-border-width-left-facet-outlined);
+  --x-size-padding-facet-header-default: var(--x-size-padding-facet-header-outlined);
+  --x-size-padding-top-facet-header-default: var(--x-size-padding-top-facet-header-outlined);
+  --x-size-padding-right-facet-header-default: var(--x-size-padding-right-facet-header-outlined);
+  --x-size-padding-bottom-facet-header-default: var(--x-size-padding-bottom-facet-header-outlined);
+  --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-outlined);
+}
 :root {
   --x-color-background-facet-default: transparent;
   --x-color-border-facet-default: var(--x-color-background-facet-default);
@@ -8045,13 +8045,13 @@
 :root {
   --x-size-width-dropdown-l: 202px;
 }
-:root {
-  --x-size-width-dropdown-l: 202px;
-}
 
 .x-dropdown.x-dropdown--l {
   --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
 }
+:root {
+  --x-size-width-dropdown-l: 202px;
+}
 :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);
@@ -8582,11 +8582,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 {
@@ -8604,6 +8599,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);
@@ -8719,28 +8719,6 @@
   --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
   --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
 }
-:root {
-  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
-}
-
-.x-button--card.x-button,
-.x-button--card .x-button {
-  --x-size-border-radius-button-default: var(--x-size-border-radius-button-card);
-  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-card);
-  --x-size-border-radius-top-right-button-default: var(
-    --x-size-border-radius-top-right-button-card
-  );
-  --x-size-border-radius-bottom-right-button-default: var(
-    --x-size-border-radius-bottom-right-button-card
-  );
-  --x-size-border-radius-bottom-left-button-default: var(
-    --x-size-border-radius-bottom-left-button-card
-  );
-}
 :root {
   --x-color-background-badge-default: var(--x-color-base-neutral-10);
   --x-color-text-badge-default: var(--x-color-base-neutral-100);
@@ -8800,6 +8778,28 @@
 .x-badge-container {
   position: relative;
 }
+:root {
+  --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
+}
+
+.x-button--card.x-button,
+.x-button--card .x-button {
+  --x-size-border-radius-button-default: var(--x-size-border-radius-button-card);
+  --x-size-border-radius-top-left-button-default: var(--x-size-border-radius-top-left-button-card);
+  --x-size-border-radius-top-right-button-default: var(
+    --x-size-border-radius-top-right-button-card
+  );
+  --x-size-border-radius-bottom-right-button-default: var(
+    --x-size-border-radius-bottom-right-button-card
+  );
+  --x-size-border-radius-bottom-left-button-default: var(
+    --x-size-border-radius-bottom-left-button-card
+  );
+}
 :root {
   --x-size-base-01: 2px;
   --x-size-base-02: 4px;
@@ -8822,6 +8822,13 @@
   --x-size-base-19: 280px;
   --x-size-base-20: 344px;
 }
+:root {
+  --x-size-border-radius-base-none: 0;
+  --x-size-border-radius-base-s: var(--x-size-base-02);
+  --x-size-border-radius-base-m: var(--x-size-base-06);
+  --x-size-border-radius-base-pill: 99999px;
+  --x-size-border-width-base: 1px;
+}
 :root {
   --x-color-base-lead: #243d48;
   --x-color-base-auxiliary: #bfe1ec;
@@ -8834,11 +8841,4 @@
   --x-color-base-enable: #00705c;
   --x-color-base-disable: #e11f26;
   --x-color-base-transparent: transparent;
-}
-:root {
-  --x-size-border-radius-base-none: 0;
-  --x-size-border-radius-base-s: var(--x-size-base-02);
-  --x-size-border-radius-base-m: var(--x-size-base-06);
-  --x-size-border-radius-base-pill: 99999px;
-  --x-size-border-width-base: 1px;
 }

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

@@ -2,20 +2,28 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [CollapseHeight](./x-components.collapseheight.md)
 
-## CollapseHeight class
+## CollapseHeight variable
 
 Renders a transition wrapping the element passed in the default slot and animating it with a height animation.
 
 **Signature:**
 
 ```typescript
-export default class CollapseHeight extends Vue 
+_default: import("vue").DefineComponent<{
+    appear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    expand: (element: HTMLElement) => void;
+    cleanUpAnimationStyles: (element: HTMLElement) => void;
+    collapse: (element: HTMLElement) => void;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    appear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    appear: boolean;
+}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [appear](./x-components.collapseheight.appear.md) |  | boolean | Indicates if the transition must be applied on the initial render of the node. |
-

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

@@ -2,20 +2,28 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [CollapseWidth](./x-components.collapsewidth.md)
 
-## CollapseWidth class
+## CollapseWidth variable
 
 Renders a transition wrapping the element passed in the default slot and animating it with a width animation.
 
 **Signature:**
 
 ```typescript
-export default class CollapseWidth extends Vue 
+_default: import("vue").DefineComponent<{
+    appear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    expand: (element: HTMLElement) => void;
+    cleanUpAnimationStyles: (element: HTMLElement) => void;
+    collapse: (element: HTMLElement) => void;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    appear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    appear: boolean;
+}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [appear](./x-components.collapsewidth.appear.md) |  | boolean | Indicates if the transition must be applied on the initial render of the node. |
-

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

@@ -27,8 +27,6 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [BaseXAPI](./x-components.basexapi.md) | Default implementation for [XAPI](./x-components.xapi.md)<!-- -->. |
 |  [ClearHistoryQueries](./x-components.clearhistoryqueries.md) | A button that when is pressed, emits the [HistoryQueriesXEvents.UserPressedClearHistoryQueries](./x-components.historyqueriesxevents.userpressedclearhistoryqueries.md) event, expressing the user intention to clear the whole history of queries. |
 |  [ClearSearchInput](./x-components.clearsearchinput.md) | This component renders a button to delete the current query. |
-|  [CollapseHeight](./x-components.collapseheight.md) | Renders a transition wrapping the element passed in the default slot and animating it with a height animation. |
-|  [CollapseWidth](./x-components.collapsewidth.md) | Renders a transition wrapping the element passed in the default slot and animating it with a width animation. |
 |  [DefaultFacetsService](./x-components.defaultfacetsservice.md) | Default implementation for the [FacetsService](./x-components.facetsservice.md)<!-- -->. |
 |  [DefaultPDPAddToCartService](./x-components.defaultpdpaddtocartservice.md) | Default implementation for the [PDPAddToCartService](./x-components.pdpaddtocartservice.md)<!-- -->. |
 |  [DeviceDetector](./x-components.devicedetector.md) | This component helps to detect or setting a device, that can be used later to create different layouts optimized for different devices. This detected device is available under the [XComponentAliasAPI.device](./x-components.xcomponentaliasapi.device.md) property. |
@@ -110,7 +108,6 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [assertXPluginOptionsAreValid(options)](./x-components.assertxpluginoptionsarevalid.md) | Asserts that the passed options object is valid, providing helpful error messages. |
 |  [capitalize(str)](./x-components.capitalize.md) | Util to capitalize a string . |
 |  [clone(something)](./x-components.clone.md) | Deeply clones an object or an array. |
-|  [createCollapseAnimationMixin(property)](./x-components.createcollapseanimationmixin.md) | Adds parametrized methods to a component to allow the collapsing of the provided property. |
 |  [createFetchAndSaveActions({ fetch, onSuccess, onError, onCancel })](./x-components.createfetchandsaveactions.md) | Utility to create an action that requests and save some data asynchronously, with the option to cancel the request at any moment. This factory provides with the standard flow for requesting, cancelling, handling errors for a module, while also taking care of its status. |
 |  [createRawFilters(filterIds)](./x-components.createrawfilters.md) | Helper method which creates the filter entity from the filter ir of the url. |
 |  [createSetQueryTaggingFromQueryPreview()](./x-components.createsetquerytaggingfromquerypreview.md) | Factory helper to create a wire to set the queryTagging. |
@@ -157,6 +154,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [throttle(wire, timeInMs, options)](./x-components.throttle.md) | Creates a throttled [Wire](./x-components.wire.md)<!-- -->. Being throttled means that it will only be executed once every couple of milliseconds given by the <code>timeInMs</code> parameter. |
 |  [toKebabCase(str)](./x-components.tokebabcase.md) | Util to transform string a into kebab case. |
 |  [use$x()](./x-components.use_x.md) | Function which returns the <code>$x</code> object from the current component instance. |
+|  [useCollapseAnimation(property)](./x-components.usecollapseanimation.md) | Returns parametrized methods to use in a component to allow the collapsing of the provided property. |
 |  [useEmitDisplayEvent({ element, taggingRequest, eventMetadata })](./x-components.useemitdisplayevent.md) | Composable that emits a <code>TrackableElementDisplayed</code> event whenever the provided element appears in the viewport for the first time. |
 |  [useFacets(props)](./x-components.usefacets.md) | Composable to share Facets logic. |
 |  [useGetter(module, getters)](./x-components.usegetter.md) | Function which returns the requested getters as a dictionary of getters. |
@@ -441,6 +439,8 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [clearSelectedQueryPreviewWire](./x-components.clearselectedquerypreviewwire.md) | Clears the selected query preview object from queries preview module. |
 |  [clearSelectedRelatedTags](./x-components.clearselectedrelatedtags.md) | Clear the selected related tags. |
 |  [CloseMainModal](./x-components.closemainmodal.md) | Button to close the [MainModal](./x-components.mainmodal.md)<!-- -->. |
+|  [CollapseHeight](./x-components.collapseheight.md) | Renders a transition wrapping the element passed in the default slot and animating it with a height animation. |
+|  [CollapseWidth](./x-components.collapsewidth.md) | Renders a transition wrapping the element passed in the default slot and animating it with a width animation. |
 |  [CornerArrowLeft](./x-components.cornerarrowleft.md) |  |
 |  [CornerArrowRight](./x-components.cornerarrowright.md) |  |
 |  [CrossFade](./x-components.crossfade.md) | Renders a transition wrapping the element passed in the default slot. The transition fades between the two toggled elements at the same time. |

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

@@ -0,0 +1,30 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [useCollapseAnimation](./x-components.usecollapseanimation.md)
+
+## useCollapseAnimation() function
+
+Returns parametrized methods to use in a component to allow the collapsing of the provided property.
+
+**Signature:**
+
+```typescript
+export declare function useCollapseAnimation(property: AnimatedProperty): {
+    expand: (element: HTMLElement) => void;
+    cleanUpAnimationStyles: (element: HTMLElement) => void;
+    collapse: (element: HTMLElement) => void;
+};
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  property | AnimatedProperty | The property that will be animated. |
+
+**Returns:**
+
+{ expand: (element: HTMLElement) =&gt; void; cleanUpAnimationStyles: (element: HTMLElement) =&gt; void; collapse: (element: HTMLElement) =&gt; void; }
+
+Composable for the module.
+

package/js/components/animations/collapse-height.vue.js

@@ -37,7 +37,7 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = undefined;
   /* scoped */
-  const __vue_scope_id__ = "data-v-a801a3a8";
+  const __vue_scope_id__ = "data-v-3ad4c84c";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */

package/js/components/animations/collapse-height.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapse-height.vue.js","sources":["../../../../src/components/animations/collapse-height.vue"],"sourcesContent":["<template>\n  <transition\n    v-on=\"$listeners\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n    name=\"x-collapse-height-\"\n    v-bind=\"$attrs\"\n    :appear=\"appear\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { createCollapseAnimationMixin } from './animations.mixin';\n\n  /**\n   * Renders a transition wrapping the element passed in the default slot and animating\n   * it with a height animation.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [createCollapseAnimationMixin('height')],\n    inheritAttrs: false\n  })\n  export default class CollapseHeight extends Vue {\n    /**\n     * Indicates if the transition must be applied on the initial render of the node.\n     */\n    @Prop({\n      type: Boolean,\n      default: true\n    })\n    public appear!: boolean;\n    // TODO Add support for extending enter, after-enter and leave transitions\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-collapse-height {\n    &--enter-active,\n    &--leave-active {\n      transition: height 0.3s ease-out;\n      overflow: hidden;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe CollapseHeight component is intended to be used as animation to wrap an element with v-if or\nv-show and animate it. The animation consists on scale its height size from 0 to auto. This\ntransition does not work with components that have vertical margin, padding or border.\n\nUsed wrapping a component:\n\n```vue\n<CollapseHeight>\n  <ComponentOrElement v-if=\"open\"/>\n</CollapseHeight>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"collapse-height.vue.js","sources":["../../../../src/components/animations/collapse-height.vue"],"sourcesContent":["<template>\n  <transition\n    v-on=\"$listeners\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n    name=\"x-collapse-height-\"\n    v-bind=\"$attrs\"\n    :appear=\"appear\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import { useCollapseAnimation } from './use-collapse-animation';\n\n  /**\n   * Renders a transition wrapping the element passed in the default slot and animating\n   * it with a height animation.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'CollapseHeight',\n    inheritAttrs: false,\n    props: {\n      /**\n       * Indicates if the transition must be applied on the initial render of the node.\n       */\n      appear: {\n        type: Boolean,\n        default: true\n      }\n    },\n    setup: function () {\n      return useCollapseAnimation('height');\n    }\n    // TODO Add support for extending enter, after-enter and leave transitions\n  });\n</script>\n\n<style lang=\"scss\" scoped>\n  .x-collapse-height {\n    &--enter-active,\n    &--leave-active {\n      transition: height 0.3s ease-out;\n      overflow: hidden;\n    }\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe CollapseHeight component is intended to be used as animation to wrap an element with v-if or\nv-show and animate it. The animation consists on scale its height size from 0 to auto. This\ntransition does not work with components that have vertical margin, padding or border.\n\nUsed wrapping a component:\n\n```vue\n<CollapseHeight>\n  <ComponentOrElement v-if=\"open\"/>\n</CollapseHeight>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}