kitzo 2.0.21 → 2.0.23

package/README.md

@@ -25,7 +25,7 @@ npm i kitzo
 or
 
 ```javascript
-<script src="https://cdn.jsdelivr.net/npm/kitzo@2.0.21/dist/kitzo.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/kitzo@2.0.23/dist/kitzo.umd.min.js"></script>
 ```
 
 > Attach this script tag in the html head tag and you are good to go.
@@ -117,9 +117,10 @@ document.querySelector('#search').addEventListener('input', (e) => {
 
 ```javascript
 kitzo.clippath(selectors | element | NodeList, {
-  text: string,
+  textOption: null | { selector: string, value: string | number },
   clippathSize: string | number,
   smooth: boolean,
+  class: string,
   style: object,
 });
 ```

package/dist/kitzo.esm.js

@@ -403,6 +403,7 @@ function clippathStyles() {
   opacity: 0;
   clip-path: circle(0 at var(--kitzo-clippath-pos-x) var(--kitzo-clippath-pos-y));
   transition: var(--kitzo-clippath-transition);
+  font-family: inherit;
 }
 .kitzo-clippath-div.show {
   opacity: 1;
@@ -499,6 +500,7 @@ function clippath(element, config = {}) {
         Object.assign(cloned.style, {
           backgroundColor: '#01c2b8',
           color: 'white',
+          fontFamily: getComputedStyle(btn).fontFamily || 'inherit',
           ...style,
         });
 
@@ -523,10 +525,14 @@ function clippath(element, config = {}) {
     document.addEventListener('mouseout', (e) => {
       const btn = e.target.closest('[data-kitzo-clippath]');
       if (btn) {
+        const { smooth } = clippathConfigMap.get(btn);
         clippathDiv.classList.remove('show');
-        setTimeout(() => {
-          clippathDiv.querySelectorAll('[data-temp-clippath-el]').forEach((el) => el.remove());
-        }, 150);
+        setTimeout(
+          () => {
+            clippathDiv.querySelectorAll('[data-temp-clippath-el]').forEach((el) => el.remove());
+          },
+          smooth ? 150 : 150
+        );
       }
     });
 

package/dist/kitzo.umd.js

@@ -409,6 +409,7 @@
   opacity: 0;
   clip-path: circle(0 at var(--kitzo-clippath-pos-x) var(--kitzo-clippath-pos-y));
   transition: var(--kitzo-clippath-transition);
+  font-family: inherit;
 }
 .kitzo-clippath-div.show {
   opacity: 1;
@@ -505,6 +506,7 @@
           Object.assign(cloned.style, {
             backgroundColor: '#01c2b8',
             color: 'white',
+            fontFamily: getComputedStyle(btn).fontFamily || 'inherit',
             ...style,
           });
 
@@ -529,10 +531,14 @@
       document.addEventListener('mouseout', (e) => {
         const btn = e.target.closest('[data-kitzo-clippath]');
         if (btn) {
+          const { smooth } = clippathConfigMap.get(btn);
           clippathDiv.classList.remove('show');
-          setTimeout(() => {
-            clippathDiv.querySelectorAll('[data-temp-clippath-el]').forEach((el) => el.remove());
-          }, 150);
+          setTimeout(
+            () => {
+              clippathDiv.querySelectorAll('[data-temp-clippath-el]').forEach((el) => el.remove());
+            },
+            smooth ? 150 : 150
+          );
         }
       });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitzo",
-  "version": "2.0.21",
+  "version": "2.0.23",
   "description": "A lightweight JavaScript UI micro-library.",
   "type": "module",
   "main": "./dist/kitzo.umd.js",