@empathyco/x-components 6.0.0-alpha.228 → 6.0.0-alpha.229

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.0.0-alpha.229](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.228...@empathyco/x-components@6.0.0-alpha.229) (2026-03-26)
+
+### Bug Fixes
+
+* RST-5653 motive search layer fails to close properly and lacks fluidity (#2058)
+
+
 ## [6.0.0-alpha.228](https://github.com/empathyco/x/compare/@empathyco/x-components@6.0.0-alpha.227...@empathyco/x-components@6.0.0-alpha.228) (2026-03-25)
 
 **Note:** Version bump only for package @empathyco/x-components

package/core/index.js

@@ -1,11 +1,13 @@
-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 { default as AnimateClipPath } from '../js/components/animations/animate-clip-path.vue.js';
+import '../js/components/animations/animate-clip-path.vue2.js';
+export { default as AnimateScale } from '../js/components/animations/animate-scale.vue.js';
+import '../js/components/animations/animate-scale.vue2.js';
+export { default as AnimateTranslate } from '../js/components/animations/animate-translate.vue.js';
+import '../js/components/animations/animate-translate.vue2.js';
 export { default as AnimateWidth } from '../js/components/animations/animate-width.vue.js';
 export { default as ChangeHeight } from '../js/components/animations/change-height.vue.js';
 export { default as CollapseHeight } from '../js/components/animations/collapse-height.vue.js';
 export { default as CollapseWidth } from '../js/components/animations/collapse-width.vue.js';
-export { createDirectionalAnimationFactory } from '../js/components/animations/create-directional-animation-factory.js';
 export { default as CrossFade } from '../js/components/animations/cross-fade.vue.js';
 export { default as FadeAndSlide } from '../js/components/animations/fade-and-slide.vue.js';
 export { default as Fade } from '../js/components/animations/fade.vue.js';

package/core/index.js.map

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

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

@@ -1,56 +1,25 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [animateClipPath](./x-components.animateclippath.md)
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [AnimateClipPath](./x-components.animateclippath.md)
 
-## animateClipPath() function
-
-Returns a transition component to wrap an element passed in the default slot and animating its clip-path using inset and with the origin passed as parameter.
+## AnimateClipPath variable
 
 **Signature:**
 
 ```typescript
-animateClipPath: (animationOrigin?: import("../create-directional-animation-factory").AnimationOrigin) => import("vue").DefineComponent
+_default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    animationOrigin: {
+        type: PropType<AnimationOrigin>;
+        default: string;
+    };
+}>, (_ctx: any, _cache: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    animationOrigin: {
+        type: PropType<AnimationOrigin>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    animationOrigin: AnimationOrigin;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-animationOrigin
-
-
-</td><td>
-
-import("../create-directional-animation-factory").AnimationOrigin
-
-
-</td><td>
-
-_(Optional)_ The origin of the animation. This means where the animation starts and ends. For example 'left' makes the element animate from the left and back; 'left-to-right' makes it animate from left to right. If not provided the default value is 'top'.
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-import("vue").DefineComponent
-
-A Transition Component.
-

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

@@ -1,56 +1,25 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [animateScale](./x-components.animatescale.md)
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [AnimateScale](./x-components.animatescale.md)
 
-## animateScale() function
-
-Returns a transition component to wrap an element passed in the default slot and animating its scale using transform and with the transform origin passed as parameter.
+## AnimateScale variable
 
 **Signature:**
 
 ```typescript
-animateScale: (animationOrigin?: import("../create-directional-animation-factory").AnimationOrigin) => import("vue").DefineComponent
+_default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    animationOrigin: {
+        type: PropType<AnimationOrigin>;
+        default: string;
+    };
+}>, (_ctx: any, _cache: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    animationOrigin: {
+        type: PropType<AnimationOrigin>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    animationOrigin: AnimationOrigin;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-animationOrigin
-
-
-</td><td>
-
-import("../create-directional-animation-factory").AnimationOrigin
-
-
-</td><td>
-
-_(Optional)_ The origin of the transform animation. This means where the animation starts and ends. For example 'left' makes the element animate from the left and back; 'left-to-right' makes it animate from left to right. If not provided the default value is 'top'.
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-import("vue").DefineComponent
-
-A Transition Component.
-

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

@@ -1,56 +1,25 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [animateTranslate](./x-components.animatetranslate.md)
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [AnimateTranslate](./x-components.animatetranslate.md)
 
-## animateTranslate() function
-
-Returns a transition component to wrap an element passed in the default slot and animating its translate using transform and with the transform origin passed as parameter.
+## AnimateTranslate variable
 
 **Signature:**
 
 ```typescript
-animateTranslate: (animationOrigin?: import("../create-directional-animation-factory").AnimationOrigin) => import("vue").DefineComponent
+_default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    animationOrigin: {
+        type: PropType<AnimationOrigin>;
+        default: string;
+    };
+}>, (_ctx: any, _cache: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    animationOrigin: {
+        type: PropType<AnimationOrigin>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    animationOrigin: AnimationOrigin;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```
-
-## Parameters
-
-<table><thead><tr><th>
-
-Parameter
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-animationOrigin
-
-
-</td><td>
-
-import("../create-directional-animation-factory").AnimationOrigin
-
-
-</td><td>
-
-_(Optional)_ The origin of the transform animation. This means where the animation starts and ends. For example 'left' makes the element animate from the left and back; 'left-to-right' makes it animate from left to right. If not provided the default value is 'top'.
-
-
-</td></tr>
-</tbody></table>
-
-**Returns:**
-
-import("vue").DefineComponent
-
-A Transition Component.
-

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

@@ -17,8 +17,12 @@ Component for use as Layout to be filled with the rest of the components.
 _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     devMode: BooleanConstructor;
 }>, {
-    rightAsideAnimation: import("vue").DefineComponent;
-    leftAsideAnimation: import("vue").DefineComponent;
+    rightAsideAnimation: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+    leftAsideAnimation: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
     setPosition: (position: number) => void;
     isBackdropVisible: import("vue").ComputedRef<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

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

@@ -182,39 +182,6 @@ Description
 Default implementation for the [HistoryQueriesActions.addQueryToHistory](./x-components.historyqueriesactions.addquerytohistory.md)<!-- -->.
 
 
-</td></tr>
-<tr><td>
-
-[animateClipPath(animationOrigin)](./x-components.animateclippath.md)
-
-
-</td><td>
-
-Returns a transition component to wrap an element passed in the default slot and animating its clip-path using inset and with the origin passed as parameter.
-
-
-</td></tr>
-<tr><td>
-
-[animateScale(animationOrigin)](./x-components.animatescale.md)
-
-
-</td><td>
-
-Returns a transition component to wrap an element passed in the default slot and animating its scale using transform and with the transform origin passed as parameter.
-
-
-</td></tr>
-<tr><td>
-
-[animateTranslate(animationOrigin)](./x-components.animatetranslate.md)
-
-
-</td><td>
-
-Returns a transition component to wrap an element passed in the default slot and animating its translate using transform and with the transform origin passed as parameter.
-
-
 </td></tr>
 <tr><td>
 
@@ -3628,6 +3595,33 @@ AI [XModule](./x-components.xmodule.md) implementation. This module is auto-regi
 This component receives a required `facet` with [BooleanFilter](./x-types.booleanfilter.md) as prop and renders a button, which on clicked emits the [FacetsXEvents.UserClickedAllFilter](./x-components.facetsxevents.userclickedallfilter.md) event. By default the rendered button displays a message with the facet label but this content is customizable through the default slot.
 
 
+</td></tr>
+<tr><td>
+
+[AnimateClipPath](./x-components.animateclippath.md)
+
+
+</td><td>
+
+
+</td></tr>
+<tr><td>
+
+[AnimateScale](./x-components.animatescale.md)
+
+
+</td><td>
+
+
+</td></tr>
+<tr><td>
+
+[AnimateTranslate](./x-components.animatetranslate.md)
+
+
+</td><td>
+
+
 </td></tr>
 <tr><td>
 

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

@@ -16,7 +16,9 @@ _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     };
     animation: {
         type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
-        default: () => import("vue").DefineComponent;
+        default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>;
     };
     animationIntervalMs: {
         type: NumberConstructor;
@@ -33,7 +35,9 @@ _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     };
     animation: {
         type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
-        default: () => import("vue").DefineComponent;
+        default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>;
     };
     animationIntervalMs: {
         type: NumberConstructor;

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

@@ -17,13 +17,17 @@ Component for use as Layout to be filled with the rest of the Components.
 _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     asideAnimation: {
         type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
-        default: () => import("vue").DefineComponent;
+        default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>;
     };
     devMode: BooleanConstructor;
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     asideAnimation: {
         type: (StringConstructor | ObjectConstructor | FunctionConstructor)[];
-        default: () => import("vue").DefineComponent;
+        default: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>;
     };
     devMode: BooleanConstructor;
 }>> & Readonly<{}>, {

package/docs/API-reference/components/common/animations/x-components.animate-clip-path.md

@@ -0,0 +1,19 @@
+---
+
+title: AnimateClipPath
+
+---
+
+# AnimateClipPath
+
+## Props
+
+| Name                         | Description | Type                         | Default            |
+| ---------------------------- | ----------- | ---------------------------- | ------------------ |
+| <code>animationOrigin</code> |             | <code>AnimationOrigin</code> | <code>'top'</code> |
+
+## Slots
+
+| Name                 | Description | Bindings<br />(name - type - description) |
+| -------------------- | ----------- | ----------------------------------------- |
+| <code>default</code> |             | None                                      |

package/docs/API-reference/components/common/animations/x-components.animate-scale.md

@@ -0,0 +1,19 @@
+---
+
+title: AnimateScale
+
+---
+
+# AnimateScale
+
+## Props
+
+| Name                         | Description | Type                         | Default            |
+| ---------------------------- | ----------- | ---------------------------- | ------------------ |
+| <code>animationOrigin</code> |             | <code>AnimationOrigin</code> | <code>'top'</code> |
+
+## Slots
+
+| Name                 | Description | Bindings<br />(name - type - description) |
+| -------------------- | ----------- | ----------------------------------------- |
+| <code>default</code> |             | None                                      |

package/docs/API-reference/components/common/animations/x-components.animate-translate.md

@@ -0,0 +1,19 @@
+---
+
+title: AnimateTranslate
+
+---
+
+# AnimateTranslate
+
+## Props
+
+| Name                         | Description | Type                         | Default            |
+| ---------------------------- | ----------- | ---------------------------- | ------------------ |
+| <code>animationOrigin</code> |             | <code>AnimationOrigin</code> | <code>'top'</code> |
+
+## Slots
+
+| Name                 | Description | Bindings<br />(name - type - description) |
+| -------------------- | ----------- | ----------------------------------------- |
+| <code>default</code> |             | None                                      |

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

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

package/docs/API-reference/components/search-box/x-components.search-input-placeholder.md

@@ -8,12 +8,12 @@ title: SearchInputPlaceholder
 
 ## Props
 
-| Name                             | Description                                                                             | Type                       | Default                                              |
-| -------------------------------- | --------------------------------------------------------------------------------------- | -------------------------- | ---------------------------------------------------- |
-| <code>messages</code>            | List of messages to animate.                                                            | <code>string[]</code>      | <code></code>                                        |
-| <code>animation</code>           | Animation component used for the messages.                                              | <code>AnimationProp</code> | <code>() => animateTranslate('bottom-to-top')</code> |
-| <code>animationIntervalMs</code> | Time in milliseconds during which each message is visible.                              | <code>number</code>        | <code>1500</code>                                    |
-| <code>animateOnlyOnHover</code>  | Whether the messages animation is active only when hovering the search input or always. | <code>boolean</code>       | <code></code>                                        |
+| Name                             | Description                                                                             | Type                       | Default                                                                      |
+| -------------------------------- | --------------------------------------------------------------------------------------- | -------------------------- | ---------------------------------------------------------------------------- |
+| <code>messages</code>            | List of messages to animate.                                                            | <code>string[]</code>      | <code></code>                                                                |
+| <code>animation</code>           | Animation component used for the messages.                                              | <code>AnimationProp</code> | <code>() => h(AnimateTranslate, { animationOrigin: 'bottom-to-top' })</code> |
+| <code>animationIntervalMs</code> | Time in milliseconds during which each message is visible.                              | <code>number</code>        | <code>1500</code>                                                            |
+| <code>animateOnlyOnHover</code>  | Whether the messages animation is active only when hovering the search input or always. | <code>boolean</code>       | <code></code>                                                                |
 
 ## See it in action
 

package/js/components/animations/animate-clip-path.vue.js

@@ -0,0 +1,26 @@
+import { defineComponent, openBlock, createBlock, Transition, withCtx, renderSlot } from 'vue';
+
+var _sfc_main = /*@__PURE__*/ defineComponent({
+    __name: 'animate-clip-path',
+    props: {
+        animationOrigin: {
+            type: String,
+            default: 'top',
+        },
+    },
+    setup(__props) {
+        return (_ctx, _cache) => {
+            return (openBlock(), createBlock(Transition, {
+                name: `x-animate-clip-path--${__props.animationOrigin} x-animate-clip-path-`
+            }, {
+                default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "default")
+                ]),
+                _: 3 /* FORWARDED */
+            }, 8 /* PROPS */, ["name"]));
+        };
+    }
+});
+
+export { _sfc_main as default };
+//# sourceMappingURL=animate-clip-path.vue.js.map

package/js/components/animations/animate-clip-path.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate-clip-path.vue.js","sources":["../../../../src/components/animations/animate-clip-path.vue"],"sourcesContent":["<template>\n  <Transition :name=\"`x-animate-clip-path--${animationOrigin} x-animate-clip-path-`\">\n    <slot />\n  </Transition>\n</template>\n\n<script setup lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { AnimationOrigin } from './types'\n\ndefineProps({\n  animationOrigin: {\n    type: String as PropType<AnimationOrigin>,\n    default: 'top',\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-animate-clip-path--enter-active,\n.x-animate-clip-path--leave-active {\n  transition: clip-path var(--x-duration-animation, 0.3s) ease-out;\n  clip-path: inset(0 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--top.x-animate-clip-path--enter-from,\n.x-animate-clip-path--top.x-animate-clip-path--leave-to {\n  clip-path: inset(0 0 100% 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--bottom.x-animate-clip-path--enter-from,\n.x-animate-clip-path--bottom.x-animate-clip-path--leave-to {\n  clip-path: inset(100% 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--top-to-bottom.x-animate-clip-path--enter-from {\n  clip-path: inset(0 0 100% 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--top-to-bottom.x-animate-clip-path--leave-to {\n  clip-path: inset(100% 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--bottom-to-top.x-animate-clip-path--enter-from {\n  clip-path: inset(100% 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--bottom-to-top.x-animate-clip-path--leave-to {\n  clip-path: inset(0 0 100% 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--left.x-animate-clip-path--enter-from,\n.x-animate-clip-path--left.x-animate-clip-path--leave-to {\n  clip-path: inset(0 100% 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--right.x-animate-clip-path--enter-from,\n.x-animate-clip-path--right.x-animate-clip-path--leave-to {\n  clip-path: inset(0 0 0 100% round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--left-to-right.x-animate-clip-path--enter-from {\n  clip-path: inset(0 100% 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--left-to-right.x-animate-clip-path--leave-to {\n  clip-path: inset(0 0 0 100% round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--right-to-left.x-animate-clip-path--enter-from {\n  clip-path: inset(0 0 0 100% round var(--x-size-border-radius-animation-clip-path, 0));\n}\n.x-animate-clip-path--right-to-left.x-animate-clip-path--leave-to {\n  clip-path: inset(0 100% 0 0 round var(--x-size-border-radius-animation-clip-path, 0));\n}\n</style>\n"],"names":["_createBlock","_Transition","_renderSlot"],"mappings":";;;;;;;;;;;;iCACEA,WAAA,CAEaC,UAAA,EAAA;AAFA,gBAAA,IAAI,0BAA0B,OAAA,CAAA,eAAe,CAAA,qBAAA;;iCACxD,MAAQ;AAAR,oBAAAC,UAAA,CAAQ,IAAA,CAAA,MAAA,EAAA,SAAA;;;;;;;;;;"}

package/js/components/animations/{animate-clip-path/animate-clip-path.style.css.js → animate-clip-path.vue2.js}

@@ -1,7 +1,7 @@
-import injectCss from '../../../../tools/inject-css.js';
+import injectCss from '../../../tools/inject-css.js';
 
 var css = ".x-animate-clip-path--enter-active,.x-animate-clip-path--leave-active{clip-path:inset(0 0 0 0 round var(--x-size-border-radius-animation-clip-path,0));transition:clip-path var(--x-duration-animation,.3s) ease-out}.x-animate-clip-path--top.x-animate-clip-path--enter-from,.x-animate-clip-path--top.x-animate-clip-path--leave-to{clip-path:inset(0 0 100% 0 round var(--x-size-border-radius-animation-clip-path,0))}.x-animate-clip-path--bottom.x-animate-clip-path--enter-from,.x-animate-clip-path--bottom.x-animate-clip-path--leave-to{clip-path:inset(100% 0 0 0 round var(--x-size-border-radius-animation-clip-path,0))}.x-animate-clip-path--top-to-bottom.x-animate-clip-path--enter-from{clip-path:inset(0 0 100% 0 round var(--x-size-border-radius-animation-clip-path,0))}.x-animate-clip-path--bottom-to-top.x-animate-clip-path--enter-from,.x-animate-clip-path--top-to-bottom.x-animate-clip-path--leave-to{clip-path:inset(100% 0 0 0 round var(--x-size-border-radius-animation-clip-path,0))}.x-animate-clip-path--bottom-to-top.x-animate-clip-path--leave-to{clip-path:inset(0 0 100% 0 round var(--x-size-border-radius-animation-clip-path,0))}.x-animate-clip-path--left.x-animate-clip-path--enter-from,.x-animate-clip-path--left.x-animate-clip-path--leave-to{clip-path:inset(0 100% 0 0 round var(--x-size-border-radius-animation-clip-path,0))}.x-animate-clip-path--right.x-animate-clip-path--enter-from,.x-animate-clip-path--right.x-animate-clip-path--leave-to{clip-path:inset(0 0 0 100% round var(--x-size-border-radius-animation-clip-path,0))}.x-animate-clip-path--left-to-right.x-animate-clip-path--enter-from{clip-path:inset(0 100% 0 0 round var(--x-size-border-radius-animation-clip-path,0))}.x-animate-clip-path--left-to-right.x-animate-clip-path--leave-to,.x-animate-clip-path--right-to-left.x-animate-clip-path--enter-from{clip-path:inset(0 0 0 100% round var(--x-size-border-radius-animation-clip-path,0))}.x-animate-clip-path--right-to-left.x-animate-clip-path--leave-to{clip-path:inset(0 100% 0 0 round var(--x-size-border-radius-animation-clip-path,0))}";
 injectCss(css);
 
 export { css };
-//# sourceMappingURL=animate-clip-path.style.css.js.map
+//# sourceMappingURL=animate-clip-path.vue2.js.map

package/js/components/animations/animate-clip-path.vue2.js.map

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

package/js/components/animations/animate-clip-path.vue3.js

@@ -0,0 +1,7 @@
+import _sfc_main from './animate-clip-path.vue.js';
+import './animate-clip-path.vue2.js';
+
+
+
+export { _sfc_main as default };
+//# sourceMappingURL=animate-clip-path.vue3.js.map

package/js/components/animations/animate-clip-path.vue3.js.map

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

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

@@ -0,0 +1,26 @@
+import { defineComponent, openBlock, createBlock, Transition, withCtx, renderSlot } from 'vue';
+
+var _sfc_main = /*@__PURE__*/ defineComponent({
+    __name: 'animate-scale',
+    props: {
+        animationOrigin: {
+            type: String,
+            default: 'top',
+        },
+    },
+    setup(__props) {
+        return (_ctx, _cache) => {
+            return (openBlock(), createBlock(Transition, {
+                name: `x-animate-scale--${__props.animationOrigin} x-animate-scale-`
+            }, {
+                default: withCtx(() => [
+                    renderSlot(_ctx.$slots, "default")
+                ]),
+                _: 3 /* FORWARDED */
+            }, 8 /* PROPS */, ["name"]));
+        };
+    }
+});
+
+export { _sfc_main as default };
+//# sourceMappingURL=animate-scale.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"animate-scale.vue.js","sources":["../../../../src/components/animations/animate-scale.vue"],"sourcesContent":["<template>\n  <Transition :name=\"`x-animate-scale--${animationOrigin} x-animate-scale-`\">\n    <slot />\n  </Transition>\n</template>\n\n<script setup lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { AnimationOrigin } from './types'\n\ndefineProps({\n  animationOrigin: {\n    type: String as PropType<AnimationOrigin>,\n    default: 'top',\n  },\n})\n</script>\n\n<style lang=\"css\">\n.x-animate-scale--enter-active,\n.x-animate-scale--leave-active,\n.x-animate-scale--enter-active *,\n.x-animate-scale--leave-active * {\n  animation-duration: var(--x-duration-animation, 0.3s);\n  animation-timing-function: linear;\n}\n.x-animate-scale--enter-active,\n.x-animate-scale--leave-active {\n  overflow: hidden;\n}\n.x-animate-scale--enter-active.x-animate-scale--top,\n.x-animate-scale--enter-active.x-animate-scale--bottom,\n.x-animate-scale--enter-active.x-animate-scale--top-to-bottom,\n.x-animate-scale--enter-active.x-animate-scale--bottom-to-top,\n.x-animate-scale--leave-active.x-animate-scale--top,\n.x-animate-scale--leave-active.x-animate-scale--bottom,\n.x-animate-scale--leave-active.x-animate-scale--top-to-bottom,\n.x-animate-scale--leave-active.x-animate-scale--bottom-to-top {\n  animation-name: containerAnimationY;\n}\n.x-animate-scale--enter-active.x-animate-scale--top > *,\n.x-animate-scale--enter-active.x-animate-scale--bottom > *,\n.x-animate-scale--enter-active.x-animate-scale--top-to-bottom > *,\n.x-animate-scale--enter-active.x-animate-scale--bottom-to-top > *,\n.x-animate-scale--leave-active.x-animate-scale--top > *,\n.x-animate-scale--leave-active.x-animate-scale--bottom > *,\n.x-animate-scale--leave-active.x-animate-scale--top-to-bottom > *,\n.x-animate-scale--leave-active.x-animate-scale--bottom-to-top > * {\n  animation-name: contentAnimationY;\n}\n.x-animate-scale--enter-active.x-animate-scale--left,\n.x-animate-scale--enter-active.x-animate-scale--right,\n.x-animate-scale--enter-active.x-animate-scale--left-to-right,\n.x-animate-scale--enter-active.x-animate-scale--right-to-left,\n.x-animate-scale--leave-active.x-animate-scale--left,\n.x-animate-scale--leave-active.x-animate-scale--right,\n.x-animate-scale--leave-active.x-animate-scale--left-to-right,\n.x-animate-scale--leave-active.x-animate-scale--right-to-left {\n  animation-name: containerAnimationX;\n}\n.x-animate-scale--enter-active.x-animate-scale--left > *,\n.x-animate-scale--enter-active.x-animate-scale--right > *,\n.x-animate-scale--enter-active.x-animate-scale--left-to-right > *,\n.x-animate-scale--enter-active.x-animate-scale--right-to-left > *,\n.x-animate-scale--leave-active.x-animate-scale--left > *,\n.x-animate-scale--leave-active.x-animate-scale--right > *,\n.x-animate-scale--leave-active.x-animate-scale--left-to-right > *,\n.x-animate-scale--leave-active.x-animate-scale--right-to-left > * {\n  animation-name: contentAnimationX;\n}\n.x-animate-scale--leave-active,\n.x-animate-scale--leave-active > * {\n  animation-direction: reverse;\n}\n.x-animate-scale--top.x-animate-scale--enter-active,\n.x-animate-scale--top.x-animate-scale--leave-active,\n.x-animate-scale--top.x-animate-scale--enter-active > *,\n.x-animate-scale--top.x-animate-scale--leave-active > * {\n  transform-origin: top center;\n}\n.x-animate-scale--bottom.x-animate-scale--enter-active,\n.x-animate-scale--bottom.x-animate-scale--leave-active,\n.x-animate-scale--bottom.x-animate-scale--enter-active > *,\n.x-animate-scale--bottom.x-animate-scale--leave-active > * {\n  transform-origin: bottom center;\n}\n.x-animate-scale--left.x-animate-scale--enter-active,\n.x-animate-scale--left.x-animate-scale--leave-active,\n.x-animate-scale--left.x-animate-scale--enter-active > *,\n.x-animate-scale--left.x-animate-scale--leave-active > * {\n  transform-origin: left center;\n}\n.x-animate-scale--right.x-animate-scale--enter-active,\n.x-animate-scale--right.x-animate-scale--leave-active,\n.x-animate-scale--right.x-animate-scale--enter-active > *,\n.x-animate-scale--right.x-animate-scale--leave-active > * {\n  transform-origin: right center;\n}\n.x-animate-scale--top-to-bottom.x-animate-scale--enter-active,\n.x-animate-scale--top-to-bottom > *.x-animate-scale--enter-active {\n  transform-origin: top center;\n}\n.x-animate-scale--top-to-bottom.x-animate-scale--leave-active,\n.x-animate-scale--top-to-bottom > *.x-animate-scale--leave-active {\n  transform-origin: bottom center;\n}\n.x-animate-scale--bottom-to-top.x-animate-scale--enter-active,\n.x-animate-scale--bottom-to-top > *.x-animate-scale--enter-active {\n  transform-origin: bottom center;\n}\n.x-animate-scale--bottom-to-top.x-animate-scale--leave-active,\n.x-animate-scale--bottom-to-top > *.x-animate-scale--leave-active {\n  transform-origin: top center;\n}\n.x-animate-scale--left-to-right.x-animate-scale--enter-active,\n.x-animate-scale--left-to-right > *.x-animate-scale--enter-active {\n  transform-origin: left center;\n}\n.x-animate-scale--left-to-right.x-animate-scale--leave-active,\n.x-animate-scale--left-to-right > *.x-animate-scale--leave-active {\n  transform-origin: right center;\n}\n.x-animate-scale--right-to-left.x-animate-scale--enter-active,\n.x-animate-scale--right-to-left > *.x-animate-scale--enter-active {\n  transform-origin: right center;\n}\n.x-animate-scale--right-to-left.x-animate-scale--leave-active,\n.x-animate-scale--right-to-left > *.x-animate-scale--leave-active {\n  transform-origin: left center;\n}\n\n@keyframes containerAnimationY {\n  0% {\n    transform: scaleY(0);\n  }\n  5.5555555556% {\n    transform: scaleY(0.0000762079);\n  }\n  11.1111111111% {\n    transform: scaleY(0.0012193263);\n  }\n  16.6666666667% {\n    transform: scaleY(0.0061728395);\n  }\n  22.2222222222% {\n    transform: scaleY(0.0195092212);\n  }\n  27.7777777778% {\n    transform: scaleY(0.0476299345);\n  }\n  33.3333333333% {\n    transform: scaleY(0.0987654321);\n  }\n  38.8888888889% {\n    transform: scaleY(0.1829751562);\n  }\n  44.4444444444% {\n    transform: scaleY(0.3121475385);\n  }\n  50% {\n    transform: scaleY(0.5);\n  }\n  55.5555555556% {\n    transform: scaleY(0.6878524615);\n  }\n  61.1111111111% {\n    transform: scaleY(0.8170248438);\n  }\n  66.6666666667% {\n    transform: scaleY(0.9012345679);\n  }\n  72.2222222222% {\n    transform: scaleY(0.9523700655);\n  }\n  77.7777777778% {\n    transform: scaleY(0.9804907788);\n  }\n  83.3333333333% {\n    transform: scaleY(0.9938271605);\n  }\n  88.8888888889% {\n    transform: scaleY(0.9987806737);\n  }\n  94.4444444444% {\n    transform: scaleY(0.9999237921);\n  }\n  100% {\n    transform: scaleY(1);\n  }\n}\n@keyframes contentAnimationY {\n  0% {\n    transform: scaleY(99999999);\n  }\n  5.5555555556% {\n    transform: scaleY(13122);\n  }\n  11.1111111111% {\n    transform: scaleY(820.125);\n  }\n  16.6666666667% {\n    transform: scaleY(162);\n  }\n  22.2222222222% {\n    transform: scaleY(51.2578125);\n  }\n  27.7777777778% {\n    transform: scaleY(20.9952);\n  }\n  33.3333333333% {\n    transform: scaleY(10.125);\n  }\n  38.8888888889% {\n    transform: scaleY(5.4652228238);\n  }\n  44.4444444444% {\n    transform: scaleY(3.2036132813);\n  }\n  50% {\n    transform: scaleY(2);\n  }\n  55.5555555556% {\n    transform: scaleY(1.4538001329);\n  }\n  61.1111111111% {\n    transform: scaleY(1.2239529895);\n  }\n  66.6666666667% {\n    transform: scaleY(1.1095890411);\n  }\n  72.2222222222% {\n    transform: scaleY(1.0500120029);\n  }\n  77.7777777778% {\n    transform: scaleY(1.019897404);\n  }\n  83.3333333333% {\n    transform: scaleY(1.0062111801);\n  }\n  88.8888888889% {\n    transform: scaleY(1.0012208149);\n  }\n  94.4444444444% {\n    transform: scaleY(1.0000762137);\n  }\n  100% {\n    transform: scaleY(1);\n  }\n}\n@keyframes containerAnimationX {\n  0% {\n    transform: scaleX(0);\n  }\n  5.5555555556% {\n    transform: scaleX(0.0000762079);\n  }\n  11.1111111111% {\n    transform: scaleX(0.0012193263);\n  }\n  16.6666666667% {\n    transform: scaleX(0.0061728395);\n  }\n  22.2222222222% {\n    transform: scaleX(0.0195092212);\n  }\n  27.7777777778% {\n    transform: scaleX(0.0476299345);\n  }\n  33.3333333333% {\n    transform: scaleX(0.0987654321);\n  }\n  38.8888888889% {\n    transform: scaleX(0.1829751562);\n  }\n  44.4444444444% {\n    transform: scaleX(0.3121475385);\n  }\n  50% {\n    transform: scaleX(0.5);\n  }\n  55.5555555556% {\n    transform: scaleX(0.6878524615);\n  }\n  61.1111111111% {\n    transform: scaleX(0.8170248438);\n  }\n  66.6666666667% {\n    transform: scaleX(0.9012345679);\n  }\n  72.2222222222% {\n    transform: scaleX(0.9523700655);\n  }\n  77.7777777778% {\n    transform: scaleX(0.9804907788);\n  }\n  83.3333333333% {\n    transform: scaleX(0.9938271605);\n  }\n  88.8888888889% {\n    transform: scaleX(0.9987806737);\n  }\n  94.4444444444% {\n    transform: scaleX(0.9999237921);\n  }\n  100% {\n    transform: scaleX(1);\n  }\n}\n@keyframes contentAnimationX {\n  0% {\n    transform: scaleX(99999999);\n  }\n  5.5555555556% {\n    transform: scaleX(13122);\n  }\n  11.1111111111% {\n    transform: scaleX(820.125);\n  }\n  16.6666666667% {\n    transform: scaleX(162);\n  }\n  22.2222222222% {\n    transform: scaleX(51.2578125);\n  }\n  27.7777777778% {\n    transform: scaleX(20.9952);\n  }\n  33.3333333333% {\n    transform: scaleX(10.125);\n  }\n  38.8888888889% {\n    transform: scaleX(5.4652228238);\n  }\n  44.4444444444% {\n    transform: scaleX(3.2036132813);\n  }\n  50% {\n    transform: scaleX(2);\n  }\n  55.5555555556% {\n    transform: scaleX(1.4538001329);\n  }\n  61.1111111111% {\n    transform: scaleX(1.2239529895);\n  }\n  66.6666666667% {\n    transform: scaleX(1.1095890411);\n  }\n  72.2222222222% {\n    transform: scaleX(1.0500120029);\n  }\n  77.7777777778% {\n    transform: scaleX(1.019897404);\n  }\n  83.3333333333% {\n    transform: scaleX(1.0062111801);\n  }\n  88.8888888889% {\n    transform: scaleX(1.0012208149);\n  }\n  94.4444444444% {\n    transform: scaleX(1.0000762137);\n  }\n  100% {\n    transform: scaleX(1);\n  }\n}\n</style>\n"],"names":["_createBlock","_Transition","_renderSlot"],"mappings":";;;;;;;;;;;;iCACEA,WAAA,CAEaC,UAAA,EAAA;AAFA,gBAAA,IAAI,sBAAsB,OAAA,CAAA,eAAe,CAAA,iBAAA;;iCACpD,MAAQ;AAAR,oBAAAC,UAAA,CAAQ,IAAA,CAAA,MAAA,EAAA,SAAA;;;;;;;;;;"}