kitzo 2.0.22 → 2.0.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -25,7 +25,7 @@ npm i kitzo
25
25
  or
26
26
 
27
27
  ```javascript
28
- <script src="https://cdn.jsdelivr.net/npm/kitzo@2.0.22/dist/kitzo.umd.min.js"></script>
28
+ <script src="https://cdn.jsdelivr.net/npm/kitzo@2.0.24/dist/kitzo.umd.min.js"></script>
29
29
  ```
30
30
 
31
31
  > Attach this script tag in the html head tag and you are good to go.
package/dist/kitzo.esm.js CHANGED
@@ -403,6 +403,8 @@ function clippathStyles() {
403
403
  opacity: 0;
404
404
  clip-path: circle(0 at var(--kitzo-clippath-pos-x) var(--kitzo-clippath-pos-y));
405
405
  transition: var(--kitzo-clippath-transition);
406
+ font-family: inherit;
407
+ overflow: hidden;
406
408
  }
407
409
  .kitzo-clippath-div.show {
408
410
  opacity: 1;
@@ -499,6 +501,7 @@ function clippath(element, config = {}) {
499
501
  Object.assign(cloned.style, {
500
502
  backgroundColor: '#01c2b8',
501
503
  color: 'white',
504
+ fontFamily: getComputedStyle(btn).fontFamily || 'inherit',
502
505
  ...style,
503
506
  });
504
507
 
@@ -523,10 +526,14 @@ function clippath(element, config = {}) {
523
526
  document.addEventListener('mouseout', (e) => {
524
527
  const btn = e.target.closest('[data-kitzo-clippath]');
525
528
  if (btn) {
529
+ const { smooth } = clippathConfigMap.get(btn);
526
530
  clippathDiv.classList.remove('show');
527
- setTimeout(() => {
528
- clippathDiv.querySelectorAll('[data-temp-clippath-el]').forEach((el) => el.remove());
529
- }, 150);
531
+ setTimeout(
532
+ () => {
533
+ clippathDiv.querySelectorAll('[data-temp-clippath-el]').forEach((el) => el.remove());
534
+ },
535
+ smooth ? 150 : 150
536
+ );
530
537
  }
531
538
  });
532
539
 
package/dist/kitzo.umd.js CHANGED
@@ -409,6 +409,8 @@
409
409
  opacity: 0;
410
410
  clip-path: circle(0 at var(--kitzo-clippath-pos-x) var(--kitzo-clippath-pos-y));
411
411
  transition: var(--kitzo-clippath-transition);
412
+ font-family: inherit;
413
+ overflow: hidden;
412
414
  }
413
415
  .kitzo-clippath-div.show {
414
416
  opacity: 1;
@@ -505,6 +507,7 @@
505
507
  Object.assign(cloned.style, {
506
508
  backgroundColor: '#01c2b8',
507
509
  color: 'white',
510
+ fontFamily: getComputedStyle(btn).fontFamily || 'inherit',
508
511
  ...style,
509
512
  });
510
513
 
@@ -529,10 +532,14 @@
529
532
  document.addEventListener('mouseout', (e) => {
530
533
  const btn = e.target.closest('[data-kitzo-clippath]');
531
534
  if (btn) {
535
+ const { smooth } = clippathConfigMap.get(btn);
532
536
  clippathDiv.classList.remove('show');
533
- setTimeout(() => {
534
- clippathDiv.querySelectorAll('[data-temp-clippath-el]').forEach((el) => el.remove());
535
- }, 150);
537
+ setTimeout(
538
+ () => {
539
+ clippathDiv.querySelectorAll('[data-temp-clippath-el]').forEach((el) => el.remove());
540
+ },
541
+ smooth ? 150 : 150
542
+ );
536
543
  }
537
544
  });
538
545
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kitzo",
3
- "version": "2.0.22",
3
+ "version": "2.0.24",
4
4
  "description": "A lightweight JavaScript UI micro-library.",
5
5
  "type": "module",
6
6
  "main": "./dist/kitzo.umd.js",