@empathyco/x-components 7.2.1 → 7.2.3

package/js/components/animations/animate-translate3.vue.js

@@ -0,0 +1,7 @@
+import _sfc_main from './animate-translate.vue.js';
+import './animate-translate2.vue.js';
+
+
+
+export { _sfc_main as default };
+//# sourceMappingURL=animate-translate3.vue.js.map

package/js/components/animations/animate-translate3.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate-translate3.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/js/components/animations/animate-width.vue.js

@@ -1,6 +1,6 @@
-import _sfc_main from './animate-width.vue2.js';
+import _sfc_main from './animate-width2.vue.js';
 import { openBlock, createBlock, Transition, withCtx, renderSlot } from 'vue';
-import './animate-width.vue3.js';
+import './animate-width3.vue.js';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {

package/js/components/animations/{animate-width.vue2.js → animate-width2.vue.js}

@@ -10,4 +10,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=animate-width.vue2.js.map
+//# sourceMappingURL=animate-width2.vue.js.map

package/js/components/animations/{animate-width.vue2.js.map → animate-width2.vue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"animate-width.vue2.js","sources":["../../../../src/components/animations/animate-width.vue"],"sourcesContent":["<template>\n  <transition name=\"x-animate-width-\">\n    <!-- @slot (Required) Transition content -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\n/**\n * Renders a transition wrapping an element passed in the default slot and animating its width.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'AnimateWidth',\n})\n</script>\n\n<style lang=\"css\">\n.x-animate-width--enter-active,\n.x-animate-width--leave-active {\n  transition: width 0.3s ease-out;\n  overflow-x: hidden;\n}\n\n.x-animate-width--enter-from,\n.x-animate-width--leave-to {\n  width: 0 !important;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe AnimateWidth component is intended to be used as a prop in animatable components but also works\nas a transition to animate the width of an element.\n\n### Used as a prop in an animatable component:\n\n```vue\n<template>\n  <AnimatableComponent :animation=\"AnimateWidth\" />\n</template>\n\n<script setup>\nimport AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue'\n</script>\n```\n\n### Used as a regular Transition:\n\n```vue\n<template>\n  <div>\n    <button @click=\"visible = !visible\">Toggle</button>\n    <AnimateWidth>\n      <div v-if=\"visible\" style=\"width: 300px\">Element to animate</div>\n    </AnimateWidth>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue'\n\nconst visible = ref(true)\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAUA;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;AACrB,CAAA,CAAA;;;;"}
+{"version":3,"file":"animate-width2.vue.js","sources":["../../../../src/components/animations/animate-width.vue"],"sourcesContent":["<template>\n  <transition name=\"x-animate-width-\">\n    <!-- @slot (Required) Transition content -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\n/**\n * Renders a transition wrapping an element passed in the default slot and animating its width.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'AnimateWidth',\n})\n</script>\n\n<style lang=\"css\">\n.x-animate-width--enter-active,\n.x-animate-width--leave-active {\n  transition: width 0.3s ease-out;\n  overflow-x: hidden;\n}\n\n.x-animate-width--enter-from,\n.x-animate-width--leave-to {\n  width: 0 !important;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe AnimateWidth component is intended to be used as a prop in animatable components but also works\nas a transition to animate the width of an element.\n\n### Used as a prop in an animatable component:\n\n```vue\n<template>\n  <AnimatableComponent :animation=\"AnimateWidth\" />\n</template>\n\n<script setup>\nimport AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue'\n</script>\n```\n\n### Used as a regular Transition:\n\n```vue\n<template>\n  <div>\n    <button @click=\"visible = !visible\">Toggle</button>\n    <AnimateWidth>\n      <div v-if=\"visible\" style=\"width: 300px\">Element to animate</div>\n    </AnimateWidth>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport AnimateWidth from '@empathyco/x-components/js/components/animations/animate-width.vue'\n\nconst visible = ref(true)\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAUA;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;AACrB,CAAA,CAAA;;;;"}

package/js/components/animations/{animate-width.vue3.js → animate-width3.vue.js}

@@ -4,4 +4,4 @@ var css = ".x-animate-width--enter-active,.x-animate-width--leave-active{overflo
 injectCss(css);
 
 export { css };
-//# sourceMappingURL=animate-width.vue3.js.map
+//# sourceMappingURL=animate-width3.vue.js.map

package/js/components/animations/animate-width3.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate-width3.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -1,6 +1,6 @@
-import _sfc_main from './change-height.vue2.js';
+import _sfc_main from './change-height2.vue.js';
 import { openBlock, createElementBlock, createElementVNode, renderSlot } from 'vue';
-import './change-height.vue3.js';
+import './change-height3.vue.js';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 const _hoisted_1 = { class: "x-change-height" };

package/js/components/animations/{change-height.vue2.js → change-height2.vue.js}

@@ -29,4 +29,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=change-height.vue2.js.map
+//# sourceMappingURL=change-height2.vue.js.map

package/js/components/animations/{change-height.vue2.js.map → change-height2.vue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"change-height.vue2.js","sources":["../../../../src/components/animations/change-height.vue"],"sourcesContent":["<template>\n  <div class=\"x-change-height\">\n    <div ref=\"wrapper\">\n      <slot />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, onMounted, onUnmounted, ref } from 'vue'\n\nexport default defineComponent({\n  setup() {\n    const wrapper = ref<HTMLElement>()\n    const observer = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        if (entry.target.parentElement) {\n          entry.target.parentElement.style.height = `${entry.contentRect.height}px`\n        }\n      }\n    })\n\n    onMounted(() => {\n      if (wrapper.value?.parentElement) {\n        const height = wrapper.value.getBoundingClientRect().height\n        wrapper.value.parentElement.style.height = `${height}px`\n        observer.observe(wrapper.value)\n      }\n    })\n\n    onUnmounted(() => {\n      if (wrapper.value) {\n        observer.unobserve(wrapper.value)\n      }\n    })\n\n    return {\n      wrapper,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-change-height {\n  --x-change-height-duration: 0.3s;\n  overflow: hidden;\n  transition: all var(--x-change-height-duration) ease-out;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe ChangeHeight component automatically animates the height of its content when it changes size.\n\n### Basic usage:\n\n```vue\n<template>\n  <ChangeHeight>\n    <div>Content whose height will be animated</div>\n  </ChangeHeight>\n</template>\n\n<script setup>\nimport ChangeHeight from '@empathyco/x-components/js/components/animations/change-height.vue'\n</script>\n```\n\n### Example with dynamic content:\n\n```vue\n<template>\n  <div>\n    <button @click=\"expanded = !expanded\">Toggle</button>\n    <ChangeHeight>\n      <div v-if=\"expanded\" style=\"height: 200px; background: #eee;\">Expanded content</div>\n      <div v-else style=\"height: 50px; background: #ccc;\">Collapsed content</div>\n    </ChangeHeight>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport ChangeHeight from '@empathyco/x-components/js/components/animations/change-height.vue'\n\nconst expanded = ref(false)\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAWA,gBAAe,eAAe,CAAC;IAC7B,KAAK,GAAA;AACH,QAAA,MAAM,OAAM,GAAI,GAAG,EAAc;AACjC,QAAA,MAAM,QAAO,GAAI,IAAI,cAAc,CAAC,OAAM,IAAG;AAC3C,YAAA,KAAK,MAAM,KAAI,IAAK,OAAO,EAAE;AAC3B,gBAAA,IAAI,KAAK,CAAC,MAAM,CAAC,aAAa,EAAE;AAC9B,oBAAA,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,MAAK,GAAI,CAAA,EAAG,KAAK,CAAC,WAAW,CAAC,MAAM,IAAG;gBAC1E;YACF;AACF,QAAA,CAAC,CAAA;QAED,SAAS,CAAC,MAAI;AACZ,YAAA,IAAI,OAAO,CAAC,KAAK,EAAE,aAAa,EAAE;gBAChC,MAAM,MAAK,GAAI,OAAO,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC,MAAK;AAC1D,gBAAA,OAAO,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,MAAK,GAAI,CAAA,EAAG,MAAM,CAAA,EAAA,CAAG;AACvD,gBAAA,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAA;YAChC;AACF,QAAA,CAAC,CAAA;QAED,WAAW,CAAC,MAAI;AACd,YAAA,IAAI,OAAO,CAAC,KAAK,EAAE;AACjB,gBAAA,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAA;YAClC;AACF,QAAA,CAAC,CAAA;QAED,OAAO;YACL,OAAO;SACT;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"change-height2.vue.js","sources":["../../../../src/components/animations/change-height.vue"],"sourcesContent":["<template>\n  <div class=\"x-change-height\">\n    <div ref=\"wrapper\">\n      <slot />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, onMounted, onUnmounted, ref } from 'vue'\n\nexport default defineComponent({\n  setup() {\n    const wrapper = ref<HTMLElement>()\n    const observer = new ResizeObserver(entries => {\n      for (const entry of entries) {\n        if (entry.target.parentElement) {\n          entry.target.parentElement.style.height = `${entry.contentRect.height}px`\n        }\n      }\n    })\n\n    onMounted(() => {\n      if (wrapper.value?.parentElement) {\n        const height = wrapper.value.getBoundingClientRect().height\n        wrapper.value.parentElement.style.height = `${height}px`\n        observer.observe(wrapper.value)\n      }\n    })\n\n    onUnmounted(() => {\n      if (wrapper.value) {\n        observer.unobserve(wrapper.value)\n      }\n    })\n\n    return {\n      wrapper,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-change-height {\n  --x-change-height-duration: 0.3s;\n  overflow: hidden;\n  transition: all var(--x-change-height-duration) ease-out;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe ChangeHeight component automatically animates the height of its content when it changes size.\n\n### Basic usage:\n\n```vue\n<template>\n  <ChangeHeight>\n    <div>Content whose height will be animated</div>\n  </ChangeHeight>\n</template>\n\n<script setup>\nimport ChangeHeight from '@empathyco/x-components/js/components/animations/change-height.vue'\n</script>\n```\n\n### Example with dynamic content:\n\n```vue\n<template>\n  <div>\n    <button @click=\"expanded = !expanded\">Toggle</button>\n    <ChangeHeight>\n      <div v-if=\"expanded\" style=\"height: 200px; background: #eee;\">Expanded content</div>\n      <div v-else style=\"height: 50px; background: #ccc;\">Collapsed content</div>\n    </ChangeHeight>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport ChangeHeight from '@empathyco/x-components/js/components/animations/change-height.vue'\n\nconst expanded = ref(false)\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAWA,gBAAe,eAAe,CAAC;IAC7B,KAAK,GAAA;AACH,QAAA,MAAM,OAAM,GAAI,GAAG,EAAc;AACjC,QAAA,MAAM,QAAO,GAAI,IAAI,cAAc,CAAC,OAAM,IAAG;AAC3C,YAAA,KAAK,MAAM,KAAI,IAAK,OAAO,EAAE;AAC3B,gBAAA,IAAI,KAAK,CAAC,MAAM,CAAC,aAAa,EAAE;AAC9B,oBAAA,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,MAAK,GAAI,CAAA,EAAG,KAAK,CAAC,WAAW,CAAC,MAAM,IAAG;gBAC1E;YACF;AACF,QAAA,CAAC,CAAA;QAED,SAAS,CAAC,MAAI;AACZ,YAAA,IAAI,OAAO,CAAC,KAAK,EAAE,aAAa,EAAE;gBAChC,MAAM,MAAK,GAAI,OAAO,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC,MAAK;AAC1D,gBAAA,OAAO,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,MAAK,GAAI,CAAA,EAAG,MAAM,CAAA,EAAA,CAAG;AACvD,gBAAA,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAA;YAChC;AACF,QAAA,CAAC,CAAA;QAED,WAAW,CAAC,MAAI;AACd,YAAA,IAAI,OAAO,CAAC,KAAK,EAAE;AACjB,gBAAA,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,CAAA;YAClC;AACF,QAAA,CAAC,CAAA;QAED,OAAO;YACL,OAAO;SACT;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/animations/{change-height.vue3.js → change-height3.vue.js}

@@ -4,4 +4,4 @@ var css = ".x-change-height{--x-change-height-duration:0.3s;overflow:hidden;tran
 injectCss(css);
 
 export { css };
-//# sourceMappingURL=change-height.vue3.js.map
+//# sourceMappingURL=change-height3.vue.js.map

package/js/components/animations/change-height3.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"change-height3.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -1,6 +1,6 @@
-import _sfc_main from './collapse-height.vue2.js';
+import _sfc_main from './collapse-height2.vue.js';
 import { openBlock, createBlock, Transition, withCtx, renderSlot } from 'vue';
-import './collapse-height.vue3.js';
+import './collapse-height3.vue.js';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {

package/js/components/animations/{collapse-height.vue2.js → collapse-height2.vue.js}

@@ -25,4 +25,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=collapse-height.vue2.js.map
+//# sourceMappingURL=collapse-height2.vue.js.map

package/js/components/animations/{collapse-height.vue2.js.map → collapse-height2.vue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"collapse-height.vue2.js","sources":["../../../../src/components/animations/collapse-height.vue"],"sourcesContent":["<template>\n  <transition\n    name=\"x-collapse-height-\"\n    :appear=\"appear\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { 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 */\nexport default defineComponent({\n  name: 'CollapseHeight',\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() {\n    return useCollapseAnimation('height')\n  },\n  // TODO Add support for extending enter, after-enter and leave transitions\n})\n</script>\n\n<style lang=\"css\">\n.x-collapse-height--enter-active,\n.x-collapse-height--leave-active {\n  transition: height var(--x-collapse-height-transition-duration, 0.3s) ease-out;\n  overflow: hidden;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe CollapseHeight component is intended to be used as an animation to wrap an element with `v-if` or\n`v-show` and animate its height. The animation scales its height from 0 to auto. This transition does not work with components that have vertical margin, padding, or border.\n\n### Basic usage with `v-if`\n\n```vue\n<template>\n  <CollapseHeight>\n    <ComponentOrElement v-if=\"open\" />\n  </CollapseHeight>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport CollapseHeight from '@empathyco/x-components/js/components/animations/collapse-height.vue'\n\nconst open = ref(false)\n</script>\n```\n\n### Usage with `v-show`\n\n```vue\n<template>\n  <CollapseHeight>\n    <ComponentOrElement v-show=\"open\" />\n  </CollapseHeight>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport CollapseHeight from '@empathyco/x-components/js/components/animations/collapse-height.vue'\n\nconst open = ref(true)\n</script>\n```\n\n### Example with dynamic content\n\n```vue\n<template>\n  <div>\n    <button @click=\"open = !open\">Toggle</button>\n    <CollapseHeight>\n      <div v-if=\"open\" style=\"height: 200px; background: #eee;\">Expanded content</div>\n      <div v-else style=\"height: 50px; background: #ccc;\">Collapsed content</div>\n    </CollapseHeight>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport CollapseHeight from '@empathyco/x-components/js/components/animations/collapse-height.vue'\n\nconst open = ref(false)\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAiBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;AACtB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;IACD,KAAK,GAAA;AACH,QAAA,OAAO,oBAAoB,CAAC,QAAQ,CAAA;IACtC,CAAC;;AAEF,CAAA,CAAA;;;;"}
+{"version":3,"file":"collapse-height2.vue.js","sources":["../../../../src/components/animations/collapse-height.vue"],"sourcesContent":["<template>\n  <transition\n    name=\"x-collapse-height-\"\n    :appear=\"appear\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { 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 */\nexport default defineComponent({\n  name: 'CollapseHeight',\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() {\n    return useCollapseAnimation('height')\n  },\n  // TODO Add support for extending enter, after-enter and leave transitions\n})\n</script>\n\n<style lang=\"css\">\n.x-collapse-height--enter-active,\n.x-collapse-height--leave-active {\n  transition: height var(--x-collapse-height-transition-duration, 0.3s) ease-out;\n  overflow: hidden;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe CollapseHeight component is intended to be used as an animation to wrap an element with `v-if` or\n`v-show` and animate its height. The animation scales its height from 0 to auto. This transition does not work with components that have vertical margin, padding, or border.\n\n### Basic usage with `v-if`\n\n```vue\n<template>\n  <CollapseHeight>\n    <ComponentOrElement v-if=\"open\" />\n  </CollapseHeight>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport CollapseHeight from '@empathyco/x-components/js/components/animations/collapse-height.vue'\n\nconst open = ref(false)\n</script>\n```\n\n### Usage with `v-show`\n\n```vue\n<template>\n  <CollapseHeight>\n    <ComponentOrElement v-show=\"open\" />\n  </CollapseHeight>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport CollapseHeight from '@empathyco/x-components/js/components/animations/collapse-height.vue'\n\nconst open = ref(true)\n</script>\n```\n\n### Example with dynamic content\n\n```vue\n<template>\n  <div>\n    <button @click=\"open = !open\">Toggle</button>\n    <CollapseHeight>\n      <div v-if=\"open\" style=\"height: 200px; background: #eee;\">Expanded content</div>\n      <div v-else style=\"height: 50px; background: #ccc;\">Collapsed content</div>\n    </CollapseHeight>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport CollapseHeight from '@empathyco/x-components/js/components/animations/collapse-height.vue'\n\nconst open = ref(false)\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAiBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,gBAAgB;AACtB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;IACD,KAAK,GAAA;AACH,QAAA,OAAO,oBAAoB,CAAC,QAAQ,CAAA;IACtC,CAAC;;AAEF,CAAA,CAAA;;;;"}

package/js/components/animations/{collapse-height.vue3.js → collapse-height3.vue.js}

@@ -4,4 +4,4 @@ var css = ".x-collapse-height--enter-active,.x-collapse-height--leave-active{ove
 injectCss(css);
 
 export { css };
-//# sourceMappingURL=collapse-height.vue3.js.map
+//# sourceMappingURL=collapse-height3.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"collapse-height3.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -1,6 +1,6 @@
-import _sfc_main from './collapse-width.vue2.js';
+import _sfc_main from './collapse-width2.vue.js';
 import { openBlock, createBlock, Transition, withCtx, renderSlot } from 'vue';
-import './collapse-width.vue3.js';
+import './collapse-width3.vue.js';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {

package/js/components/animations/{collapse-width.vue2.js → collapse-width2.vue.js}

@@ -25,4 +25,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=collapse-width.vue2.js.map
+//# sourceMappingURL=collapse-width2.vue.js.map

package/js/components/animations/{collapse-width.vue2.js.map → collapse-width2.vue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"collapse-width.vue2.js","sources":["../../../../src/components/animations/collapse-width.vue"],"sourcesContent":["<template>\n  <transition\n    name=\"x-collapse-width-\"\n    :appear=\"appear\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { 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 width animation.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'CollapseWidth',\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() {\n    return useCollapseAnimation('width')\n  },\n  // TODO Add support for extending enter, after-enter and leave transitions\n})\n</script>\n\n<style lang=\"css\">\n.x-collapse-width--enter-active,\n.x-collapse-width--leave-active {\n  transition: width 0.3s ease-out;\n  overflow: hidden;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe CollapseWidth component is intended to be used as animation to wrap an element with `v-if` or\n`v-show` and animate its width. The animation scales its width from 0 to auto. This transition does not work with components that have horizontal margin, padding, or border. It also depends on the width of the child elements and not the root element.\n\n### Basic usage with `v-if`\n\n```vue\n<template>\n  <CollapseWidth>\n    <ComponentOrElement v-if=\"open\" />\n  </CollapseWidth>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport CollapseWidth from '@empathyco/x-components/js/components/animations/collapse-width.vue'\n\nconst open = ref(false)\n</script>\n```\n\n### Usage with `v-show`\n\n```vue\n<template>\n  <CollapseWidth>\n    <ComponentOrElement v-show=\"open\" />\n  </CollapseWidth>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport CollapseWidth from '@empathyco/x-components/js/components/animations/collapse-width.vue'\n\nconst open = ref(true)\n</script>\n```\n\n### Example with dynamic content\n\n```vue\n<template>\n  <div>\n    <button @click=\"open = !open\">Toggle</button>\n    <CollapseWidth>\n      <div v-if=\"open\" style=\"width: 200px; background: #eee;\">Expanded content</div>\n      <div v-else style=\"width: 50px; background: #ccc;\">Collapsed content</div>\n    </CollapseWidth>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport CollapseWidth from '@empathyco/x-components/js/components/animations/collapse-width.vue'\n\nconst open = ref(false)\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAiBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;AACrB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;IACD,KAAK,GAAA;AACH,QAAA,OAAO,oBAAoB,CAAC,OAAO,CAAA;IACrC,CAAC;;AAEF,CAAA,CAAA;;;;"}
+{"version":3,"file":"collapse-width2.vue.js","sources":["../../../../src/components/animations/collapse-width.vue"],"sourcesContent":["<template>\n  <transition\n    name=\"x-collapse-width-\"\n    :appear=\"appear\"\n    @enter=\"expand\"\n    @after-enter=\"cleanUpAnimationStyles\"\n    @leave=\"collapse\"\n  >\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { 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 width animation.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'CollapseWidth',\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() {\n    return useCollapseAnimation('width')\n  },\n  // TODO Add support for extending enter, after-enter and leave transitions\n})\n</script>\n\n<style lang=\"css\">\n.x-collapse-width--enter-active,\n.x-collapse-width--leave-active {\n  transition: width 0.3s ease-out;\n  overflow: hidden;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe CollapseWidth component is intended to be used as animation to wrap an element with `v-if` or\n`v-show` and animate its width. The animation scales its width from 0 to auto. This transition does not work with components that have horizontal margin, padding, or border. It also depends on the width of the child elements and not the root element.\n\n### Basic usage with `v-if`\n\n```vue\n<template>\n  <CollapseWidth>\n    <ComponentOrElement v-if=\"open\" />\n  </CollapseWidth>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport CollapseWidth from '@empathyco/x-components/js/components/animations/collapse-width.vue'\n\nconst open = ref(false)\n</script>\n```\n\n### Usage with `v-show`\n\n```vue\n<template>\n  <CollapseWidth>\n    <ComponentOrElement v-show=\"open\" />\n  </CollapseWidth>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport CollapseWidth from '@empathyco/x-components/js/components/animations/collapse-width.vue'\n\nconst open = ref(true)\n</script>\n```\n\n### Example with dynamic content\n\n```vue\n<template>\n  <div>\n    <button @click=\"open = !open\">Toggle</button>\n    <CollapseWidth>\n      <div v-if=\"open\" style=\"width: 200px; background: #eee;\">Expanded content</div>\n      <div v-else style=\"width: 50px; background: #ccc;\">Collapsed content</div>\n    </CollapseWidth>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport CollapseWidth from '@empathyco/x-components/js/components/animations/collapse-width.vue'\n\nconst open = ref(false)\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAiBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;AACrB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;IACD,KAAK,GAAA;AACH,QAAA,OAAO,oBAAoB,CAAC,OAAO,CAAA;IACrC,CAAC;;AAEF,CAAA,CAAA;;;;"}

package/js/components/animations/{collapse-width.vue3.js → collapse-width3.vue.js}

@@ -4,4 +4,4 @@ var css = ".x-collapse-width--enter-active,.x-collapse-width--leave-active{overf
 injectCss(css);
 
 export { css };
-//# sourceMappingURL=collapse-width.vue3.js.map
+//# sourceMappingURL=collapse-width3.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"collapse-width3.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/js/components/animations/cross-fade.vue.js

@@ -1,6 +1,6 @@
-import _sfc_main from './cross-fade.vue2.js';
+import _sfc_main from './cross-fade2.vue.js';
 import { openBlock, createBlock, Transition, withCtx, renderSlot } from 'vue';
-import './cross-fade.vue3.js';
+import './cross-fade3.vue.js';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {

package/js/components/animations/{cross-fade.vue2.js → cross-fade2.vue.js}

@@ -20,4 +20,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=cross-fade.vue2.js.map
+//# sourceMappingURL=cross-fade2.vue.js.map

package/js/components/animations/{cross-fade.vue2.js.map → cross-fade2.vue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"cross-fade.vue2.js","sources":["../../../../src/components/animations/cross-fade.vue"],"sourcesContent":["<template>\n  <transition name=\"x-cross-fade-\" :appear=\"appear\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\n/**\n * Renders a transition wrapping the element passed in the default slot. The transition\n * fades between the two toggled elements at the same time.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'CrossFade',\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})\n</script>\n\n<style lang=\"css\">\n.x-cross-fade--enter-active,\n.x-cross-fade--leave-active {\n  transition: opacity 0.25s ease-in-out;\n  mix-blend-mode: multiply;\n}\n\n.x-cross-fade--leave-active {\n  position: absolute;\n}\n\n.x-cross-fade--leave-to,\n.x-cross-fade--enter-from {\n  opacity: 0 !important;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe `CrossFade` component is intended to be used as an animation to wrap an element with `v-if` or `v-show` and animate it. The animation fades the new element into the previous one.\n\n### Basic usage with `v-if`\n\n```vue\n<template>\n  <CrossFade>\n    <ComponentOrElement v-if=\"open\" />\n  </CrossFade>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport CrossFade from '@empathyco/x-components/js/components/animations/cross-fade.vue'\n\nconst open = ref(false)\n</script>\n```\n\n### Usage with `v-show`\n\n```vue\n<template>\n  <CrossFade>\n    <ComponentOrElement v-show=\"open\" />\n  </CrossFade>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport CrossFade from '@empathyco/x-components/js/components/animations/cross-fade.vue'\n\nconst open = ref(true)\n</script>\n```\n\n### Example with dynamic content\n\n```vue\n<template>\n  <div>\n    <button @click=\"open = !open\">Toggle</button>\n    <CrossFade>\n      <div v-if=\"open\" style=\"background: #eee;\">Expanded content</div>\n      <div v-else style=\"background: #ccc;\">Collapsed content</div>\n    </CrossFade>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport CrossFade from '@empathyco/x-components/js/components/animations/cross-fade.vue'\n\nconst open = ref(false)\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAUA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"cross-fade2.vue.js","sources":["../../../../src/components/animations/cross-fade.vue"],"sourcesContent":["<template>\n  <transition name=\"x-cross-fade-\" :appear=\"appear\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\n/**\n * Renders a transition wrapping the element passed in the default slot. The transition\n * fades between the two toggled elements at the same time.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'CrossFade',\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})\n</script>\n\n<style lang=\"css\">\n.x-cross-fade--enter-active,\n.x-cross-fade--leave-active {\n  transition: opacity 0.25s ease-in-out;\n  mix-blend-mode: multiply;\n}\n\n.x-cross-fade--leave-active {\n  position: absolute;\n}\n\n.x-cross-fade--leave-to,\n.x-cross-fade--enter-from {\n  opacity: 0 !important;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe `CrossFade` component is intended to be used as an animation to wrap an element with `v-if` or `v-show` and animate it. The animation fades the new element into the previous one.\n\n### Basic usage with `v-if`\n\n```vue\n<template>\n  <CrossFade>\n    <ComponentOrElement v-if=\"open\" />\n  </CrossFade>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport CrossFade from '@empathyco/x-components/js/components/animations/cross-fade.vue'\n\nconst open = ref(false)\n</script>\n```\n\n### Usage with `v-show`\n\n```vue\n<template>\n  <CrossFade>\n    <ComponentOrElement v-show=\"open\" />\n  </CrossFade>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport CrossFade from '@empathyco/x-components/js/components/animations/cross-fade.vue'\n\nconst open = ref(true)\n</script>\n```\n\n### Example with dynamic content\n\n```vue\n<template>\n  <div>\n    <button @click=\"open = !open\">Toggle</button>\n    <CrossFade>\n      <div v-if=\"open\" style=\"background: #eee;\">Expanded content</div>\n      <div v-else style=\"background: #ccc;\">Collapsed content</div>\n    </CrossFade>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport CrossFade from '@empathyco/x-components/js/components/animations/cross-fade.vue'\n\nconst open = ref(false)\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAUA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;AACF,CAAA,CAAA;;;;"}

package/js/components/animations/{cross-fade.vue3.js → cross-fade3.vue.js}

@@ -4,4 +4,4 @@ var css = ".x-cross-fade--enter-active,.x-cross-fade--leave-active{mix-blend-mod
 injectCss(css);
 
 export { css };
-//# sourceMappingURL=cross-fade.vue3.js.map
+//# sourceMappingURL=cross-fade3.vue.js.map

package/js/components/animations/cross-fade3.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cross-fade3.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/js/components/animations/fade-and-slide.vue.js

@@ -1,6 +1,6 @@
-import _sfc_main from './fade-and-slide.vue2.js';
+import _sfc_main from './fade-and-slide2.vue.js';
 import { openBlock, createBlock, TransitionGroup, withCtx, renderSlot } from 'vue';
-import './fade-and-slide.vue3.js';
+import './fade-and-slide3.vue.js';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {

package/js/components/animations/{fade-and-slide.vue2.js → fade-and-slide2.vue.js}

@@ -33,4 +33,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=fade-and-slide.vue2.js.map
+//# sourceMappingURL=fade-and-slide2.vue.js.map

package/js/components/animations/{fade-and-slide.vue2.js.map → fade-and-slide2.vue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"fade-and-slide.vue2.js","sources":["../../../../src/components/animations/fade-and-slide.vue"],"sourcesContent":["<template>\n  <transition-group class=\"x-fade-and-slide\" :name=\"name\" :tag=\"tag\" :appear=\"appear\">\n    <!-- @slot (Required) Transition-group content -->\n    <slot />\n  </transition-group>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useDisableAnimation } from './use-disable-animation'\n\n/**\n * Renders a transition group wrapping the elements passed in the default slot and animating\n * them with a fade and slide animation.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'FadeAndSlide',\n  props: {\n    /**\n     * HTML Element that the transition-group children will be wrapped in.\n     */\n    tag: String,\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() {\n    /**\n     * The name of the animation.\n     */\n    const animationName = 'x-fade-and-slide-'\n\n    const { name } = useDisableAnimation(animationName)\n\n    return { name }\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-fade-and-slide--move,\n.x-fade-and-slide--enter-active,\n.x-fade-and-slide--leave-active {\n  transition:\n    opacity 0.2s ease-out,\n    transform 0.3s ease-out;\n}\n\n.x-fade-and-slide--enter-from,\n.x-fade-and-slide--leave-to {\n  transform: translate(-20%, 0);\n  opacity: 0;\n}\n\n.x-fade-and-slide--leave-active {\n  position: absolute;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe FadeAndSlide component is intended to be used as a prop in animatable components but also works\nas a wrapper of a transition group that can receive the tag it will render to as a prop.\n\n### Used as a prop in an animatable component\n\n```vue\n<template>\n  <AnimatableComponent :animation=\"FadeAndSlide\" />\n</template>\n\n<script setup>\nimport FadeAndSlide from '@empathyco/x-components/js/components/animations/fade-and-slide.vue'\n</script>\n```\n\n### Used as a regular component passing the tag as prop\n\n```vue\n<template>\n  <FadeAndSlide tag=\"ul\">\n    <li>Element to animate</li>\n    <li>Element to animate</li>\n    <li>Element to animate</li>\n  </FadeAndSlide>\n</template>\n\n<script setup>\nimport FadeAndSlide from '@empathyco/x-components/js/components/animations/fade-and-slide.vue'\n</script>\n```\n\n### Example with dynamic content\n\n```vue\n<template>\n  <FadeAndSlide tag=\"ul\">\n    <li v-for=\"item in items\" :key=\"item\">{{ item }}</li>\n  </FadeAndSlide>\n  <button @click=\"addItem\">Add Item</button>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport FadeAndSlide from '@empathyco/x-components/js/components/animations/fade-and-slide.vue'\n\nconst items = ref(['One', 'Two', 'Three'])\nfunction addItem() {\n  items.value.push(`Item ${items.value.length + 1}`)\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAWA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,GAAG,EAAE,MAAM;AACX;;AAEE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;IACD,KAAK,GAAA;AACH;;AAEE;QACF,MAAM,aAAY,GAAI,mBAAkB;QAExC,MAAM,EAAE,IAAG,KAAM,mBAAmB,CAAC,aAAa,CAAA;QAElD,OAAO,EAAE,IAAG,EAAE;IAChB,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"fade-and-slide2.vue.js","sources":["../../../../src/components/animations/fade-and-slide.vue"],"sourcesContent":["<template>\n  <transition-group class=\"x-fade-and-slide\" :name=\"name\" :tag=\"tag\" :appear=\"appear\">\n    <!-- @slot (Required) Transition-group content -->\n    <slot />\n  </transition-group>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useDisableAnimation } from './use-disable-animation'\n\n/**\n * Renders a transition group wrapping the elements passed in the default slot and animating\n * them with a fade and slide animation.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'FadeAndSlide',\n  props: {\n    /**\n     * HTML Element that the transition-group children will be wrapped in.\n     */\n    tag: String,\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() {\n    /**\n     * The name of the animation.\n     */\n    const animationName = 'x-fade-and-slide-'\n\n    const { name } = useDisableAnimation(animationName)\n\n    return { name }\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-fade-and-slide--move,\n.x-fade-and-slide--enter-active,\n.x-fade-and-slide--leave-active {\n  transition:\n    opacity 0.2s ease-out,\n    transform 0.3s ease-out;\n}\n\n.x-fade-and-slide--enter-from,\n.x-fade-and-slide--leave-to {\n  transform: translate(-20%, 0);\n  opacity: 0;\n}\n\n.x-fade-and-slide--leave-active {\n  position: absolute;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe FadeAndSlide component is intended to be used as a prop in animatable components but also works\nas a wrapper of a transition group that can receive the tag it will render to as a prop.\n\n### Used as a prop in an animatable component\n\n```vue\n<template>\n  <AnimatableComponent :animation=\"FadeAndSlide\" />\n</template>\n\n<script setup>\nimport FadeAndSlide from '@empathyco/x-components/js/components/animations/fade-and-slide.vue'\n</script>\n```\n\n### Used as a regular component passing the tag as prop\n\n```vue\n<template>\n  <FadeAndSlide tag=\"ul\">\n    <li>Element to animate</li>\n    <li>Element to animate</li>\n    <li>Element to animate</li>\n  </FadeAndSlide>\n</template>\n\n<script setup>\nimport FadeAndSlide from '@empathyco/x-components/js/components/animations/fade-and-slide.vue'\n</script>\n```\n\n### Example with dynamic content\n\n```vue\n<template>\n  <FadeAndSlide tag=\"ul\">\n    <li v-for=\"item in items\" :key=\"item\">{{ item }}</li>\n  </FadeAndSlide>\n  <button @click=\"addItem\">Add Item</button>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport FadeAndSlide from '@empathyco/x-components/js/components/animations/fade-and-slide.vue'\n\nconst items = ref(['One', 'Two', 'Three'])\nfunction addItem() {\n  items.value.push(`Item ${items.value.length + 1}`)\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAWA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,GAAG,EAAE,MAAM;AACX;;AAEE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;IACD,KAAK,GAAA;AACH;;AAEE;QACF,MAAM,aAAY,GAAI,mBAAkB;QAExC,MAAM,EAAE,IAAG,KAAM,mBAAmB,CAAC,aAAa,CAAA;QAElD,OAAO,EAAE,IAAG,EAAE;IAChB,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/animations/{fade-and-slide.vue3.js → fade-and-slide3.vue.js}

@@ -4,4 +4,4 @@ var css = ".x-fade-and-slide--enter-active,.x-fade-and-slide--leave-active,.x-fa
 injectCss(css);
 
 export { css };
-//# sourceMappingURL=fade-and-slide.vue3.js.map
+//# sourceMappingURL=fade-and-slide3.vue.js.map

package/js/components/animations/fade-and-slide3.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fade-and-slide3.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/js/components/animations/fade.vue.js

@@ -1,6 +1,6 @@
-import _sfc_main from './fade.vue2.js';
+import _sfc_main from './fade2.vue.js';
 import { openBlock, createBlock, Transition, withCtx, renderSlot } from 'vue';
-import './fade.vue3.js';
+import './fade3.vue.js';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {

package/js/components/animations/{fade.vue2.js → fade2.vue.js}

@@ -18,4 +18,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=fade.vue2.js.map
+//# sourceMappingURL=fade2.vue.js.map

package/js/components/animations/{fade.vue2.js.map → fade2.vue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"fade.vue2.js","sources":["../../../../src/components/animations/fade.vue"],"sourcesContent":["<template>\n  <transition name=\"x-fade-\" :appear=\"appear\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\n/**\n * Renders a transition wrapping the element passed in the default slot. The animation just fades\n * in/out the element by changing its opacity.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Fade',\n  props: {\n    /** Indicates if the transition must be applied on the initial render of the node. */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-fade--enter-active,\n.x-fade--leave-active {\n  transition: opacity 0.25s ease-in-out;\n}\n\n.x-fade--leave-to,\n.x-fade--enter-from {\n  opacity: 0 !important;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe `Fade` component is intended to be used as animation to wrap an element with `v-if` or `v-show` and animate it. The animation just fades in/out the element by changing its opacity.\n\n### Basic usage with `v-if`\n\n```vue live\n<template>\n  <Fade>\n    <ComponentOrElement v-if=\"open\" />\n  </Fade>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport Fade from '@empathyco/x-components/js/components/animations/fade.vue'\n\nconst open = ref(false)\n</script>\n```\n\n### Usage with `v-show`\n\n```vue live\n<template>\n  <Fade>\n    <ComponentOrElement v-show=\"open\" />\n  </Fade>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport Fade from '@empathyco/x-components/js/components/animations/fade.vue'\n\nconst open = ref(true)\n</script>\n```\n\n### Example with dynamic content\n\n```vue live\n<template>\n  <div>\n    <button @click=\"open = !open\">Toggle</button>\n    <Fade>\n      <div v-if=\"open\" style=\"background: #eee;\">Expanded content</div>\n      <div v-else style=\"background: #ccc;\">Collapsed content</div>\n    </Fade>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport Fade from '@empathyco/x-components/js/components/animations/fade.vue'\n\nconst open = ref(false)\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAUA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"fade2.vue.js","sources":["../../../../src/components/animations/fade.vue"],"sourcesContent":["<template>\n  <transition name=\"x-fade-\" :appear=\"appear\">\n    <!-- @slot (Required) to add content to the transition -->\n    <slot />\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\n/**\n * Renders a transition wrapping the element passed in the default slot. The animation just fades\n * in/out the element by changing its opacity.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'Fade',\n  props: {\n    /** Indicates if the transition must be applied on the initial render of the node. */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-fade--enter-active,\n.x-fade--leave-active {\n  transition: opacity 0.25s ease-in-out;\n}\n\n.x-fade--leave-to,\n.x-fade--enter-from {\n  opacity: 0 !important;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe `Fade` component is intended to be used as animation to wrap an element with `v-if` or `v-show` and animate it. The animation just fades in/out the element by changing its opacity.\n\n### Basic usage with `v-if`\n\n```vue live\n<template>\n  <Fade>\n    <ComponentOrElement v-if=\"open\" />\n  </Fade>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport Fade from '@empathyco/x-components/js/components/animations/fade.vue'\n\nconst open = ref(false)\n</script>\n```\n\n### Usage with `v-show`\n\n```vue live\n<template>\n  <Fade>\n    <ComponentOrElement v-show=\"open\" />\n  </Fade>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport Fade from '@empathyco/x-components/js/components/animations/fade.vue'\n\nconst open = ref(true)\n</script>\n```\n\n### Example with dynamic content\n\n```vue live\n<template>\n  <div>\n    <button @click=\"open = !open\">Toggle</button>\n    <Fade>\n      <div v-if=\"open\" style=\"background: #eee;\">Expanded content</div>\n      <div v-else style=\"background: #ccc;\">Collapsed content</div>\n    </Fade>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport Fade from '@empathyco/x-components/js/components/animations/fade.vue'\n\nconst open = ref(false)\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAUA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACF,KAAA;AACF,CAAA,CAAA;;;;"}

package/js/components/animations/{fade.vue3.js → fade3.vue.js}

@@ -4,4 +4,4 @@ var css = ".x-fade--enter-active,.x-fade--leave-active{transition:opacity .25s e
 injectCss(css);
 
 export { css };
-//# sourceMappingURL=fade.vue3.js.map
+//# sourceMappingURL=fade3.vue.js.map

package/js/components/animations/fade3.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fade3.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/js/components/animations/{no-animation.vue2.js → no-animation2.vue.js}

@@ -3,4 +3,4 @@ import _sfc_main from './no-animation.vue.js';
 
 
 export { _sfc_main as default };
-//# sourceMappingURL=no-animation.vue2.js.map
+//# sourceMappingURL=no-animation2.vue.js.map

package/js/components/animations/no-animation2.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-animation2.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/js/components/animations/staggered-fade-and-slide.vue.js

@@ -1,6 +1,6 @@
-import __default__ from './staggered-fade-and-slide.vue2.js';
+import __default__ from './staggered-fade-and-slide2.vue.js';
 import { openBlock, createBlock, TransitionGroup, withCtx, renderSlot } from 'vue';
-import './staggered-fade-and-slide.vue3.js';
+import './staggered-fade-and-slide3.vue.js';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {

package/js/components/animations/{staggered-fade-and-slide.vue2.js → staggered-fade-and-slide2.vue.js}

@@ -101,4 +101,4 @@ __default__.setup = __setup__
     : __injectCSSVars__;
 
 export { __default__ as default };
-//# sourceMappingURL=staggered-fade-and-slide.vue2.js.map
+//# sourceMappingURL=staggered-fade-and-slide2.vue.js.map

package/js/components/animations/{staggered-fade-and-slide.vue2.js.map → staggered-fade-and-slide2.vue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"staggered-fade-and-slide.vue2.js","sources":["../../../../src/components/animations/staggered-fade-and-slide.vue"],"sourcesContent":["<template>\n  <TransitionGroup\n    :appear=\"appear\"\n    :name=\"name\"\n    :tag=\"tag\"\n    @enter=\"onEnter\"\n    @after-enter=\"onAfterEnter\"\n  >\n    <slot />\n  </TransitionGroup>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, onUpdated } from 'vue'\nimport { useDisableAnimation } from './use-disable-animation'\n\n/**\n * Renders a transition group wrapping the elements passed in the default slot and animating\n * them with a staggered fade and slide animation.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'StaggeredFadeAndSlide',\n  props: {\n    /** Indicates if the transition must be applied on the initial render of the node. */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n    /** The tag of the node to render to the DOM. */\n    tag: {\n      type: String,\n      default: 'div',\n    },\n    /** The time in ms to stagger each item. */\n    stagger: {\n      type: Number,\n      default: 25,\n    },\n  },\n  setup(props) {\n    /** The duration of the transition in ms. */\n    const transitionDuration = 250\n    /** Indicates if there are new elements to animate. */\n    let isNewSet = true\n    /** The new elements to animate. */\n    let elementsToAnimate: Element[] = []\n    /** The name of the animation. */\n    const { name } = useDisableAnimation('x-staggered-fade-and-slide')\n\n    /**\n     * When the component is updated, we are considering that\n     * a new set of elements is being inserted, so we need\n     * to refresh the elements to animate.\n     */\n    onUpdated(() => {\n      isNewSet = true\n    })\n\n    /**\n     * Listener called when one frame the element is inserted.\n     * This calculates the stagger delay to be used as `transitionDelay` and finally resolve\n     * the transition end after the CSS transition duration plus stagger delay.\n     *\n     * @param el - Element inserted.\n     * @param done - Callback to indicate the transition end.\n     */\n    function onEnter(el: Element, done: () => void) {\n      if (isNewSet) {\n        refreshElementsToAnimate(el)\n      }\n\n      const elIndex = elementsToAnimate.indexOf(el)\n      const staggerDelay = elIndex > 0 ? elIndex * props.stagger : 0\n\n      ;(el as HTMLElement).style.transitionDelay = `${staggerDelay}ms`\n      setTimeout(done, transitionDuration + staggerDelay)\n    }\n\n    /**\n     * Finds he parent's children subset of new elements entering the DOM.\n     * This is achieved by filtering out the elements that are already animated.\n     * Those with 'transition-delay' equal to '0ms' are considered already animated.\n     *\n     * Also marks isNewSet as false as the elements are already updated.\n     *\n     * @param el - Current element.\n     */\n    function refreshElementsToAnimate(el: Element) {\n      elementsToAnimate = [...el.parentElement!.children].filter(\n        c => (c as HTMLElement).style.transitionDelay !== '0ms',\n      )\n      isNewSet = false\n    }\n\n    /**\n     * Listener called when the enter transition has finished.\n     * This resets the `transitionDelay`.\n     *\n     * @param el - Element inserted.\n     */\n    function onAfterEnter(el: Element) {\n      ;(el as HTMLElement).style.transitionDelay = '0ms'\n    }\n\n    return {\n      name,\n      onEnter,\n      onAfterEnter,\n      transitionDurationInMs: `${transitionDuration}ms`,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\">\n/* 1. Declare transitions */\n.x-staggered-fade-and-slide-enter-active,\n.x-staggered-fade-and-slide-leave-active {\n  transition: v-bind(transitionDurationInMs) ease-out;\n  transition-property: opacity, transform;\n}\n\n.x-staggered-fade-and-slide-move {\n  transition: transform v-bind(transitionDurationInMs) ease-out;\n}\n\n/* 2. Declare enter, from and leave to state */\n.x-staggered-fade-and-slide-enter,\n.x-staggered-fade-and-slide-enter-from,\n.x-staggered-fade-and-slide-leave-to {\n  opacity: 0;\n  transform: translate3d(0, 50%, 0);\n}\n\n/* 3. Ensure leaving items are taken out of layout flow so that moving animations can be\n        calculated correctly. */\n.x-staggered-fade-and-slide-leave-active {\n  position: absolute;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe StaggeredFadeAndSlide component works like the normal fade and slide components, but adds a configurable delay to each transition.\n\n### Used with animatable components\n\n```vue\n<template>\n  <AnimatableComponent :animation=\"StaggeredFadeAndSlide\" />\n</template>\n\n<script setup>\nimport StaggeredFadeAndSlide from '@empathyco/x-components/js/components/animations/staggered-fade-and-slide.vue'\n</script>\n```\n\n### Used as a regular component\n\nThis component exposes all the props and events of the transition group, like the `tag` or the `stagger` props:\n\n```vue\n<template>\n  <StaggeredFadeAndSlide tag=\"ul\" :stagger=\"50\">\n    <li v-for=\"item in items\" :key=\"item\">{{ item }}</li>\n  </StaggeredFadeAndSlide>\n  <button @click=\"addItem\">Add Item</button>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport StaggeredFadeAndSlide from '@empathyco/x-components/js/components/animations/staggered-fade-and-slide.vue'\n\nconst items = ref(['One', 'Two', 'Three'])\nfunction addItem() {\n  items.value.push(`Item ${items.value.length + 1}`)\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAgBA;;;;;AAKE;AACF,MAAK,WAAY,GAAG,eAAW,CAAA;AAC7B,IAAA,IAAI,EAAE,uBAAuB;AAC7B,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,GAAG,EAAE;AACH,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;;AAED,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,EAAE;AACZ,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;;QAET,MAAM,kBAAiB,GAAI,GAAE;;QAE7B,IAAI,QAAO,GAAI,IAAG;;QAElB,IAAI,iBAAiB,GAAc,EAAC;;QAEpC,MAAM,EAAE,IAAG,EAAE,GAAI,mBAAmB,CAAC,4BAA4B,CAAA;AAEjE;;;;AAIE;QACF,SAAS,CAAC,MAAI;YACZ,QAAO,GAAI,IAAG;AAChB,QAAA,CAAC,CAAA;AAED;;;;;;;AAOE;AACF,QAAA,SAAS,OAAO,CAAC,EAAW,EAAE,IAAgB,EAAA;YAC5C,IAAI,QAAQ,EAAE;gBACZ,wBAAwB,CAAC,EAAE,CAAA;YAC7B;YAEA,MAAM,UAAU,iBAAiB,CAAC,OAAO,CAAC,EAAE,CAAA;AAC5C,YAAA,MAAM,YAAW,GAAI,OAAM,GAAI,CAAA,GAAI,OAAM,GAAI,KAAK,CAAC,OAAM,GAAI,CAAA;YAE3D,EAAkB,CAAC,KAAK,CAAC,eAAc,GAAI,CAAA,EAAG,YAAY,IAAG;AAC/D,YAAA,UAAU,CAAC,IAAI,EAAE,kBAAiB,GAAI,YAAY,CAAA;QACpD;AAEA;;;;;;;;AAQE;QACF,SAAS,wBAAwB,CAAC,EAAW,EAAA;YAC3C,iBAAgB,GAAI,CAAC,GAAG,EAAE,CAAC,aAAc,CAAC,QAAQ,CAAC,CAAC,MAAM,CACxD,CAAA,IAAM,CAAiB,CAAC,KAAK,CAAC,oBAAoB,KAAK,CACzD;YACA,QAAO,GAAI,KAAI;QACjB;AAEA;;;;;AAKE;QACF,SAAS,YAAY,CAAC,EAAW,EAAA;AAC7B,YAAA,EAAkB,CAAC,KAAK,CAAC,eAAc,GAAI,KAAI;QACnD;QAEA,OAAO;YACL,IAAI;YACJ,OAAO;YACP,YAAY;YACZ,sBAAsB,EAAE,CAAA,EAAG,kBAAkB,CAAA,EAAA,CAAI;SACnD;IACF,CAAC;AACF,CAAA;;;;;;;;;;;;;"}
+{"version":3,"file":"staggered-fade-and-slide2.vue.js","sources":["../../../../src/components/animations/staggered-fade-and-slide.vue"],"sourcesContent":["<template>\n  <TransitionGroup\n    :appear=\"appear\"\n    :name=\"name\"\n    :tag=\"tag\"\n    @enter=\"onEnter\"\n    @after-enter=\"onAfterEnter\"\n  >\n    <slot />\n  </TransitionGroup>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, onUpdated } from 'vue'\nimport { useDisableAnimation } from './use-disable-animation'\n\n/**\n * Renders a transition group wrapping the elements passed in the default slot and animating\n * them with a staggered fade and slide animation.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'StaggeredFadeAndSlide',\n  props: {\n    /** Indicates if the transition must be applied on the initial render of the node. */\n    appear: {\n      type: Boolean,\n      default: true,\n    },\n    /** The tag of the node to render to the DOM. */\n    tag: {\n      type: String,\n      default: 'div',\n    },\n    /** The time in ms to stagger each item. */\n    stagger: {\n      type: Number,\n      default: 25,\n    },\n  },\n  setup(props) {\n    /** The duration of the transition in ms. */\n    const transitionDuration = 250\n    /** Indicates if there are new elements to animate. */\n    let isNewSet = true\n    /** The new elements to animate. */\n    let elementsToAnimate: Element[] = []\n    /** The name of the animation. */\n    const { name } = useDisableAnimation('x-staggered-fade-and-slide')\n\n    /**\n     * When the component is updated, we are considering that\n     * a new set of elements is being inserted, so we need\n     * to refresh the elements to animate.\n     */\n    onUpdated(() => {\n      isNewSet = true\n    })\n\n    /**\n     * Listener called when one frame the element is inserted.\n     * This calculates the stagger delay to be used as `transitionDelay` and finally resolve\n     * the transition end after the CSS transition duration plus stagger delay.\n     *\n     * @param el - Element inserted.\n     * @param done - Callback to indicate the transition end.\n     */\n    function onEnter(el: Element, done: () => void) {\n      if (isNewSet) {\n        refreshElementsToAnimate(el)\n      }\n\n      const elIndex = elementsToAnimate.indexOf(el)\n      const staggerDelay = elIndex > 0 ? elIndex * props.stagger : 0\n\n      ;(el as HTMLElement).style.transitionDelay = `${staggerDelay}ms`\n      setTimeout(done, transitionDuration + staggerDelay)\n    }\n\n    /**\n     * Finds he parent's children subset of new elements entering the DOM.\n     * This is achieved by filtering out the elements that are already animated.\n     * Those with 'transition-delay' equal to '0ms' are considered already animated.\n     *\n     * Also marks isNewSet as false as the elements are already updated.\n     *\n     * @param el - Current element.\n     */\n    function refreshElementsToAnimate(el: Element) {\n      elementsToAnimate = [...el.parentElement!.children].filter(\n        c => (c as HTMLElement).style.transitionDelay !== '0ms',\n      )\n      isNewSet = false\n    }\n\n    /**\n     * Listener called when the enter transition has finished.\n     * This resets the `transitionDelay`.\n     *\n     * @param el - Element inserted.\n     */\n    function onAfterEnter(el: Element) {\n      ;(el as HTMLElement).style.transitionDelay = '0ms'\n    }\n\n    return {\n      name,\n      onEnter,\n      onAfterEnter,\n      transitionDurationInMs: `${transitionDuration}ms`,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\">\n/* 1. Declare transitions */\n.x-staggered-fade-and-slide-enter-active,\n.x-staggered-fade-and-slide-leave-active {\n  transition: v-bind(transitionDurationInMs) ease-out;\n  transition-property: opacity, transform;\n}\n\n.x-staggered-fade-and-slide-move {\n  transition: transform v-bind(transitionDurationInMs) ease-out;\n}\n\n/* 2. Declare enter, from and leave to state */\n.x-staggered-fade-and-slide-enter,\n.x-staggered-fade-and-slide-enter-from,\n.x-staggered-fade-and-slide-leave-to {\n  opacity: 0;\n  transform: translate3d(0, 50%, 0);\n}\n\n/* 3. Ensure leaving items are taken out of layout flow so that moving animations can be\n        calculated correctly. */\n.x-staggered-fade-and-slide-leave-active {\n  position: absolute;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe StaggeredFadeAndSlide component works like the normal fade and slide components, but adds a configurable delay to each transition.\n\n### Used with animatable components\n\n```vue\n<template>\n  <AnimatableComponent :animation=\"StaggeredFadeAndSlide\" />\n</template>\n\n<script setup>\nimport StaggeredFadeAndSlide from '@empathyco/x-components/js/components/animations/staggered-fade-and-slide.vue'\n</script>\n```\n\n### Used as a regular component\n\nThis component exposes all the props and events of the transition group, like the `tag` or the `stagger` props:\n\n```vue\n<template>\n  <StaggeredFadeAndSlide tag=\"ul\" :stagger=\"50\">\n    <li v-for=\"item in items\" :key=\"item\">{{ item }}</li>\n  </StaggeredFadeAndSlide>\n  <button @click=\"addItem\">Add Item</button>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport StaggeredFadeAndSlide from '@empathyco/x-components/js/components/animations/staggered-fade-and-slide.vue'\n\nconst items = ref(['One', 'Two', 'Three'])\nfunction addItem() {\n  items.value.push(`Item ${items.value.length + 1}`)\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;AAgBA;;;;;AAKE;AACF,MAAK,WAAY,GAAG,eAAW,CAAA;AAC7B,IAAA,IAAI,EAAE,uBAAuB;AAC7B,IAAA,KAAK,EAAE;;AAEL,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,GAAG,EAAE;AACH,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;;AAED,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,EAAE;AACZ,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;;QAET,MAAM,kBAAiB,GAAI,GAAE;;QAE7B,IAAI,QAAO,GAAI,IAAG;;QAElB,IAAI,iBAAiB,GAAc,EAAC;;QAEpC,MAAM,EAAE,IAAG,EAAE,GAAI,mBAAmB,CAAC,4BAA4B,CAAA;AAEjE;;;;AAIE;QACF,SAAS,CAAC,MAAI;YACZ,QAAO,GAAI,IAAG;AAChB,QAAA,CAAC,CAAA;AAED;;;;;;;AAOE;AACF,QAAA,SAAS,OAAO,CAAC,EAAW,EAAE,IAAgB,EAAA;YAC5C,IAAI,QAAQ,EAAE;gBACZ,wBAAwB,CAAC,EAAE,CAAA;YAC7B;YAEA,MAAM,UAAU,iBAAiB,CAAC,OAAO,CAAC,EAAE,CAAA;AAC5C,YAAA,MAAM,YAAW,GAAI,OAAM,GAAI,CAAA,GAAI,OAAM,GAAI,KAAK,CAAC,OAAM,GAAI,CAAA;YAE3D,EAAkB,CAAC,KAAK,CAAC,eAAc,GAAI,CAAA,EAAG,YAAY,IAAG;AAC/D,YAAA,UAAU,CAAC,IAAI,EAAE,kBAAiB,GAAI,YAAY,CAAA;QACpD;AAEA;;;;;;;;AAQE;QACF,SAAS,wBAAwB,CAAC,EAAW,EAAA;YAC3C,iBAAgB,GAAI,CAAC,GAAG,EAAE,CAAC,aAAc,CAAC,QAAQ,CAAC,CAAC,MAAM,CACxD,CAAA,IAAM,CAAiB,CAAC,KAAK,CAAC,oBAAoB,KAAK,CACzD;YACA,QAAO,GAAI,KAAI;QACjB;AAEA;;;;;AAKE;QACF,SAAS,YAAY,CAAC,EAAW,EAAA;AAC7B,YAAA,EAAkB,CAAC,KAAK,CAAC,eAAc,GAAI,KAAI;QACnD;QAEA,OAAO;YACL,IAAI;YACJ,OAAO;YACP,YAAY;YACZ,sBAAsB,EAAE,CAAA,EAAG,kBAAkB,CAAA,EAAA,CAAI;SACnD;IACF,CAAC;AACF,CAAA;;;;;;;;;;;;;"}

package/js/components/animations/{staggered-fade-and-slide.vue3.js → staggered-fade-and-slide3.vue.js}

@@ -4,4 +4,4 @@ var css = ".x-staggered-fade-and-slide-enter-active,.x-staggered-fade-and-slide-
 injectCss(css);
 
 export { css };
-//# sourceMappingURL=staggered-fade-and-slide.vue3.js.map
+//# sourceMappingURL=staggered-fade-and-slide3.vue.js.map

package/js/components/animations/staggered-fade-and-slide3.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"staggered-fade-and-slide3.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/js/components/auto-progress-bar.vue.js

@@ -1,6 +1,6 @@
-import _sfc_main from './auto-progress-bar.vue2.js';
+import _sfc_main from './auto-progress-bar2.vue.js';
 import { openBlock, createElementBlock, createElementVNode, normalizeStyle, createCommentVNode } from 'vue';
-import './auto-progress-bar.vue3.js';
+import './auto-progress-bar3.vue.js';
 import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 
 const _hoisted_1 = {

package/js/components/{auto-progress-bar.vue2.js → auto-progress-bar2.vue.js}

@@ -46,4 +46,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=auto-progress-bar.vue2.js.map
+//# sourceMappingURL=auto-progress-bar2.vue.js.map

package/js/components/{auto-progress-bar.vue2.js.map → auto-progress-bar2.vue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"auto-progress-bar.vue2.js","sources":["../../../src/components/auto-progress-bar.vue"],"sourcesContent":["<template>\n  <div v-if=\"isLoading\" class=\"xds:progress-bar\" data-test=\"progress-bar\" role=\"progressbar\">\n    <div class=\"xds:progress-bar-fill\" :style=\"cssStyles\" data-test=\"progress-bar-line\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { StyleValue } from 'vue'\nimport { computed, defineComponent } from 'vue'\n\n/**\n * The auto progress bar component is useful for displaying a visual indicator of numerical data\n * in a bar shape.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'AutoProgressBar',\n  props: {\n    /**\n     * A boolean flag indicating if the bar is loading.\n     *\n     * @public\n     */\n    isLoading: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * The duration in seconds of the progress bar.\n     *\n     * @public\n     */\n    durationInSeconds: {\n      type: Number,\n      default: 5,\n    },\n  },\n  setup(props) {\n    /**\n     * Computed property to calculate the animation's duration.\n     *\n     * @returns The CSS styles of the animation.\n     *\n     * @internal\n     */\n    const cssStyles = computed<StyleValue>(() => ({\n      animationDuration: `${props.durationInSeconds}s`,\n    }))\n\n    return {\n      cssStyles,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-progress-bar {\n  display: inline-block;\n  overflow: hidden;\n  background-color: #dbe2e5;\n  border-radius: 4px;\n}\n\n.x-progress-bar-fill {\n  height: 4px;\n  background-color: #283034;\n  animation: slide linear;\n  transform-origin: left;\n}\n\n@keyframes slide {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n  after the user clicks the redirection button.\n- [`UserClickedAbortARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n  after the user clicks the abort redirection button.\n\n## See it in action\n\nHere you have a basic example of how the auto progress bar is rendered.\n\n```vue live\n<template>\n  <AutoProgressBar :isLoading=\"isLoading\" :durationInSeconds=\"durationInSeconds\" />\n</template>\n\n<script setup>\nimport { AutoProgressBar } from '@empathyco/x-components'\nconst isLoading = true\nconst durationInSeconds = 100\n</script>\n```\n\n### Play with props\n\nIn this example, the auto progress bar has been set to do an animation for 5 seconds. There is a way\nto cancel the animation by sending the isLoading prop to false.\n\n```vue live\n<template>\n  <AutoProgressBar :durationInSeconds=\"5\" :isLoading=\"true\" />\n</template>\n\n<script setup>\nimport { AutoProgressBar } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAUA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,iBAAiB,EAAE;AACjB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;;AAME;AACF,QAAA,MAAM,SAAQ,GAAI,QAAQ,CAAa,OAAO;AAC5C,YAAA,iBAAiB,EAAE,CAAA,EAAG,KAAK,CAAC,iBAAiB,CAAA,CAAA,CAAG;AACjD,SAAA,CAAC,CAAA;QAEF,OAAO;YACL,SAAS;SACX;IACF,CAAC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"auto-progress-bar2.vue.js","sources":["../../../src/components/auto-progress-bar.vue"],"sourcesContent":["<template>\n  <div v-if=\"isLoading\" class=\"xds:progress-bar\" data-test=\"progress-bar\" role=\"progressbar\">\n    <div class=\"xds:progress-bar-fill\" :style=\"cssStyles\" data-test=\"progress-bar-line\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport type { StyleValue } from 'vue'\nimport { computed, defineComponent } from 'vue'\n\n/**\n * The auto progress bar component is useful for displaying a visual indicator of numerical data\n * in a bar shape.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'AutoProgressBar',\n  props: {\n    /**\n     * A boolean flag indicating if the bar is loading.\n     *\n     * @public\n     */\n    isLoading: {\n      type: Boolean,\n      default: true,\n    },\n    /**\n     * The duration in seconds of the progress bar.\n     *\n     * @public\n     */\n    durationInSeconds: {\n      type: Number,\n      default: 5,\n    },\n  },\n  setup(props) {\n    /**\n     * Computed property to calculate the animation's duration.\n     *\n     * @returns The CSS styles of the animation.\n     *\n     * @internal\n     */\n    const cssStyles = computed<StyleValue>(() => ({\n      animationDuration: `${props.durationInSeconds}s`,\n    }))\n\n    return {\n      cssStyles,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-progress-bar {\n  display: inline-block;\n  overflow: hidden;\n  background-color: #dbe2e5;\n  border-radius: 4px;\n}\n\n.x-progress-bar-fill {\n  height: 4px;\n  background-color: #283034;\n  animation: slide linear;\n  transform-origin: left;\n}\n\n@keyframes slide {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserClickedARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n  after the user clicks the redirection button.\n- [`UserClickedAbortARedirection`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n  after the user clicks the abort redirection button.\n\n## See it in action\n\nHere you have a basic example of how the auto progress bar is rendered.\n\n```vue live\n<template>\n  <AutoProgressBar :isLoading=\"isLoading\" :durationInSeconds=\"durationInSeconds\" />\n</template>\n\n<script setup>\nimport { AutoProgressBar } from '@empathyco/x-components'\nconst isLoading = true\nconst durationInSeconds = 100\n</script>\n```\n\n### Play with props\n\nIn this example, the auto progress bar has been set to do an animation for 5 seconds. There is a way\nto cancel the animation by sending the isLoading prop to false.\n\n```vue live\n<template>\n  <AutoProgressBar :durationInSeconds=\"5\" :isLoading=\"true\" />\n</template>\n\n<script setup>\nimport { AutoProgressBar } from '@empathyco/x-components'\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;AAUA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,iBAAiB,EAAE;AACjB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,CAAC;AACX,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;;;AAME;AACF,QAAA,MAAM,SAAQ,GAAI,QAAQ,CAAa,OAAO;AAC5C,YAAA,iBAAiB,EAAE,CAAA,EAAG,KAAK,CAAC,iBAAiB,CAAA,CAAA,CAAG;AACjD,SAAA,CAAC,CAAA;QAEF,OAAO;YACL,SAAS;SACX;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/components/{auto-progress-bar.vue3.js → auto-progress-bar3.vue.js}

@@ -4,4 +4,4 @@ var css = ".x-progress-bar[data-v-0d4c162e]{background-color:#dbe2e5;border-radi
 injectCss(css);
 
 export { css };
-//# sourceMappingURL=auto-progress-bar.vue3.js.map
+//# sourceMappingURL=auto-progress-bar3.vue.js.map

package/js/components/auto-progress-bar3.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"auto-progress-bar3.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/js/components/base-dropdown.vue.js

@@ -1,6 +1,6 @@
-import _sfc_main from './base-dropdown.vue2.js';
+import _sfc_main from './base-dropdown2.vue.js';
 import { openBlock, createElementBlock, withKeys, withModifiers, normalizeClass, createElementVNode, renderSlot, createTextVNode, toDisplayString, createBlock, resolveDynamicComponent, withCtx, withDirectives, Fragment, renderList, vShow } from 'vue';
-import './base-dropdown.vue3.js';
+import './base-dropdown3.vue.js';
 import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 
 const _hoisted_1 = ["aria-expanded", "aria-controls", "aria-label"];

package/js/components/{base-dropdown.vue2.js → base-dropdown2.vue.js}

@@ -4,26 +4,26 @@ import { debounce } from '../utils/debounce.js';
 import { getTargetElement } from '../utils/html.js';
 import { normalizeString } from '../utils/normalize.js';
 import '../utils/storage.js';
-import './animations/animate-clip-path.vue2.js';
-import './animations/animate-scale.vue2.js';
-import './animations/animate-translate.vue2.js';
-import './animations/animate-width.vue2.js';
-import './animations/animate-width.vue3.js';
-import './animations/change-height.vue2.js';
-import './animations/change-height.vue3.js';
-import './animations/collapse-height.vue2.js';
-import './animations/collapse-height.vue3.js';
-import './animations/collapse-width.vue2.js';
-import './animations/collapse-width.vue3.js';
-import './animations/cross-fade.vue2.js';
-import './animations/cross-fade.vue3.js';
-import './animations/fade-and-slide.vue2.js';
-import './animations/fade-and-slide.vue3.js';
-import './animations/fade.vue2.js';
-import './animations/fade.vue3.js';
+import './animations/animate-clip-path2.vue.js';
+import './animations/animate-scale2.vue.js';
+import './animations/animate-translate2.vue.js';
+import './animations/animate-width2.vue.js';
+import './animations/animate-width3.vue.js';
+import './animations/change-height2.vue.js';
+import './animations/change-height3.vue.js';
+import './animations/collapse-height2.vue.js';
+import './animations/collapse-height3.vue.js';
+import './animations/collapse-width2.vue.js';
+import './animations/collapse-width3.vue.js';
+import './animations/cross-fade2.vue.js';
+import './animations/cross-fade3.vue.js';
+import './animations/fade-and-slide2.vue.js';
+import './animations/fade-and-slide3.vue.js';
+import './animations/fade2.vue.js';
+import './animations/fade3.vue.js';
 import _sfc_main$1 from './animations/no-animation.vue.js';
-import './animations/staggered-fade-and-slide.vue2.js';
-import './animations/staggered-fade-and-slide.vue3.js';
+import './animations/staggered-fade-and-slide2.vue.js';
+import './animations/staggered-fade-and-slide3.vue.js';
 
 let dropdownCount = 0;
 /**
@@ -297,4 +297,4 @@ var _sfc_main = defineComponent({
 });
 
 export { _sfc_main as default };
-//# sourceMappingURL=base-dropdown.vue2.js.map
+//# sourceMappingURL=base-dropdown2.vue.js.map