@andreyshpigunov/x 0.3.89 → 0.4.1

package/src/components/x/animate.js

@@ -22,25 +22,19 @@
  *   "classRemove": true
  * }'></div>
  *
- * Next.js: call init() in useEffect(); on route change call destroy() in cleanup and init() after mount.
  * SSR-safe: init/destroy no-op when window is undefined.
  *
  * @example
- * // Next.js — _app.tsx or layout
- * import { useEffect } from 'react';
- * import { usePathname } from 'next/navigation';
- * import { animate } from '@andreyshpigunov/x/animate';
- *
- * export default function App({ Component, pageProps }) {
- *   const pathname = usePathname();
- *
- *   useEffect(() => {
- *     animate.init();
- *     return () => animate.destroy();
- *   }, [pathname]);
- *
- *   return <Component {...pageProps} />;
- * }
+ * // Vanilla JS — plain HTML
+ * // index.html:
+ * // <script type="module">
+ * //   import { animate } from './src/components/x/animate.js';
+ * //   window.coverOut = (item) => {
+ * //     // item.progress is 0..1 (string with 4 decimals)
+ * //     item.element.style.setProperty('--progress', item.progress);
+ * //   };
+ * //   window.addEventListener('DOMContentLoaded', () => animate.init());
+ * // </script>
  *
  * @author Andrey Shpigunov
  * @version 0.4
@@ -53,7 +47,7 @@ import { lib } from './lib';
  * Scroll-based animation controller.
  */
 class Animate {
-
+  
   constructor() {
     /**
      * Prevents multiple `requestAnimationFrame` calls.
@@ -61,42 +55,42 @@ class Animate {
      * @private
      */
     this._ticking = false;
-
+    
     /**
      * Array of animation items parsed from `[x-animate]` elements.
      * @type {Object[]}
      * @private
      */
     this._animations = [];
-
+    
     /**
      * Bound scroll handler for `requestAnimationFrame`.
      * @type {Function}
      * @private
      */
     this._scroll = this._scroll.bind(this);
-
+    
     /**
      * Bound raw scroll/resize handler.
      * @type {Function}
      * @private
      */
     this._scrollHandler = this._scrollHandler.bind(this);
-
+    
     /**
      * Indicates whether `init()` was called.
      * @type {boolean}
      * @private
      */
     this._initialized = false;
-
+    
     /**
      * Set of parent elements being listened to for scroll.
      * @type {Set<HTMLElement|Window>}
      * @private
      */
     this._parents = new Set();
-
+    
     /**
      * NodeList of elements with `[x-animate]`.
      * @type {NodeListOf<HTMLElement>|null}
@@ -104,25 +98,25 @@ class Animate {
      */
     this._elements = null;
   }
-
+  
   /**
    * Initializes or reinitializes animation tracking for `[x-animate]` elements.
    */
   init() {
     if (typeof window === 'undefined') return;
-
+    
     this._cleanup();
-
+    
     this._elements = lib.qsa('[x-animate]');
     if (!this._elements?.length) return;
-
+    
     this._parseElementsAnimations();
     if (!this._animations.length) return;
-
+    
     this._setupListeners();
     this._initialized = true;
   }
-
+  
   /**
    * Removes all listeners and resets internal state.
    *
@@ -131,27 +125,27 @@ class Animate {
   _cleanup() {
     if (!this._initialized) return;
     if (typeof window === 'undefined') return;
-
+    
     this._parents.forEach(parent => {
       parent.removeEventListener('scroll', this._scrollHandler);
     });
     window.removeEventListener('resize', this._scrollHandler);
-
+    
     this._ticking = false;
     this._animations = [];
     this._parents = new Set();
     this._elements = null;
     this._initialized = false;
   }
-
+  
   /**
-   * Stops observing and resets state. Use when unmounting (e.g. Next.js route change).
+   * Stops observing and resets state. Use when unmounting (page change / removing DOM).
    */
   destroy() {
     if (typeof window === 'undefined') return;
     this._cleanup();
   }
-
+  
   /**
    * Parses `[x-animate]` attributes and creates animation configuration for each element.
    *
@@ -181,7 +175,7 @@ class Animate {
       }
     }
   }
-
+  
   /**
    * Sets up scroll and resize event listeners for unique parent containers.
    *
@@ -195,7 +189,7 @@ class Animate {
       }
     }
     window.addEventListener('resize', this._scrollHandler);
-
+    
     const runScroll = () => requestAnimationFrame(() => this._scroll());
     if (document.readyState === 'complete') {
       runScroll();
@@ -203,7 +197,7 @@ class Animate {
       window.addEventListener('load', runScroll, { once: true });
     }
   }
-
+  
   /**
    * Raw scroll/resize event handler with throttling via `requestAnimationFrame`.
    *
@@ -218,7 +212,7 @@ class Animate {
       });
     }
   }
-
+  
   /**
    * Main animation logic executed on scroll or resize.
    *
@@ -242,9 +236,9 @@ class Animate {
       const hasStart = !isNaN(start);
       const hasEnd = !isNaN(end);
       const fn = item.fn;
-
+      
       if (item.log) console.log(top, start, end, item);
-
+      
       if (hasStart && hasEnd) {
         item.duration = start - end;
         const inRange = top <= start && top >= end;
@@ -291,7 +285,7 @@ class Animate {
       }
     }
   }
-
+  
   /**
    * Converts a value like '120vh', '50%' or '300' into pixels.
    *
@@ -305,9 +299,9 @@ class Animate {
     if (typeof value !== 'string') return NaN;
     const num = parseFloat(value);
     if (!/[%vh]/.test(value)) return num;
-    const height = value.includes('vh')
-      ? document.documentElement.clientHeight
-      : (parent === window ? document.documentElement.clientHeight : parent.clientHeight);
+    const height = value.includes('vh') ?
+      document.documentElement.clientHeight :
+      (parent === window ? document.documentElement.clientHeight : parent.clientHeight);
     return (height * num) / 100;
   }
 }
@@ -316,4 +310,4 @@ class Animate {
  * Singleton export of the Animate controller.
  * @type {Animate}
  */
-export const animate = new Animate();
+export const animate = new Animate();

package/src/components/x/appear.js

@@ -31,25 +31,18 @@
  * - `visible` – Dispatched when the element becomes visible.
  * - `invisible` – Dispatched when the element leaves the viewport.
  *
- * Next.js: call init() in useEffect(); on route change call destroy() in cleanup and init() after mount.
  * SSR-safe: init/destroy no-op when window is undefined.
  *
  * @example
- * // Next.js — _app.tsx or layout
- * import { useEffect } from 'react';
- * import { usePathname } from 'next/navigation';
- * import { appear } from '@andreyshpigunov/x/appear';
- *
- * export default function App({ Component, pageProps }) {
- *   const pathname = usePathname();
- *
- *   useEffect(() => {
- *     appear.init(); // or appear.init({ once: true, rootMargin: '50px' })
- *     return () => appear.destroy();
- *   }, [pathname]);
- *
- *   return <Component {...pageProps} />;
- * }
+ * // Vanilla JS — plain HTML
+ * // index.html:
+ * // <div x-appear>Hello!</div>
+ * // <script type="module">
+ * //   import { appear } from './src/components/x/appear.js';
+ * //   window.addEventListener('DOMContentLoaded', () => {
+ * //     appear.init({ once: false, rootMargin: '0px', threshold: 0 });
+ * //   });
+ * // </script>
  *
  * @author Andrey Shpigunov
  * @version 0.4
@@ -64,7 +57,7 @@ import { lib } from './lib';
  * Uses IntersectionObserver to track elements with [x-appear] attribute and manage classes.
  */
 class Appear {
-
+  
   constructor() {
     this._targets = [];
     this._observer = null;
@@ -78,7 +71,7 @@ class Appear {
     };
     this._observerCallback = this._observerCallback.bind(this);
   }
-
+  
   /**
    * Initializes or reinitializes the observer and starts observing elements.
    *
@@ -93,24 +86,24 @@ class Appear {
   init(config = {}) {
     if (typeof window === 'undefined') return;
     if (!('IntersectionObserver' in window)) return;
-
+    
     this._options = { ...this._options, ...config };
-
+    
     if (this._observer) {
       this._observer.disconnect();
       this._observer = null;
     }
-
+    
     this._targets = lib.qsa('[x-appear]');
     if (!this._targets.length) return;
-
+    
     const { root, rootMargin, threshold } = this._options;
     this._observer = new IntersectionObserver(this._observerCallback, { root: root || null, rootMargin, threshold });
     for (let i = 0; i < this._targets.length; i++) {
       this._observer.observe(this._targets[i]);
     }
   }
-
+  
   /**
    * Stops observing all elements and resets state. Use when unmounting (e.g. SPA).
    */
@@ -122,7 +115,7 @@ class Appear {
     }
     this._targets = [];
   }
-
+  
   /**
    * IntersectionObserver callback. Handles visibility changes for tracked elements.
    *
@@ -132,7 +125,7 @@ class Appear {
   _observerCallback(entries) {
     const { appearedClass, visibleClass, once } = this._options;
     const observer = this._observer;
-
+    
     for (let i = 0; i < entries.length; i++) {
       const entry = entries[i];
       const target = entry.target;
@@ -159,4 +152,4 @@ class Appear {
  * Singleton export of the Appear observer.
  * @type {Appear}
  */
-export const appear = new Appear();
+export const appear = new Appear();

package/src/components/x/autocomplete.js

@@ -13,19 +13,31 @@
  * - `autocomplete.init(dropdownId, options)` – Binds to dropdown by id; options: loadData, mapData, renderItem, onSelect, resetFunc, emptyStateHtml, defaultStateHtml, loadingStateHtml.
  * - `autocomplete.destroy()` – Removes listeners and resets state.
  *
- * Next.js: call init() in useEffect after mount; call destroy() in cleanup on route change.
  * SSR-safe: init/destroy no-op when window is undefined.
  *
  * @example
- * // Next.js — in a component with a dropdown by id="searchDropdown"
- * useEffect(() => {
- *   autocomplete.init('searchDropdown', {
- *     loadData: async () => fetch('/api/search').then(r => r.json()),
- *     renderItem: (item) => `<li data-item='${JSON.stringify(item)}'>${item.name}</li>`,
- *     onSelect: (item) => { setValue(item.name); }
- *   });
- *   return () => autocomplete.destroy();
- * }, []);
+ * // Vanilla JS — plain HTML
+ * // index.html:
+ * // <div id="searchDropdown">
+ * //   <input x-dropdown-open type="text" placeholder="Search…" />
+ * //   <ul x-dropdown></ul>
+ * // </div>
+ * //
+ * // <script type="module">
+ * //   import { autocomplete } from './src/components/x/autocomplete.js';
+ * //   // dropdown.js must be loaded too (for open/close behavior)
+ * //   window.addEventListener('DOMContentLoaded', () => {
+ * //     autocomplete.init('searchDropdown', {
+ * //       loadData: async (ctx) => {
+ * //         const q = ctx.field.value.trim();
+ * //         const r = await fetch(`/api/search?q=${encodeURIComponent(q)}`);
+ * //         return r.json();
+ * //       },
+ * //       renderItem: (item) => `<li data-item='${JSON.stringify(item)}'>${item.name}</li>`,
+ * //       onSelect: (item) => { console.log('selected', item); }
+ * //     });
+ * //   });
+ * // </script>
  *
  * @author Andrey Shpigunov
  * @version 0.4

package/src/components/x/buttons.css

@@ -6,7 +6,6 @@ Created by Andrey Shpigunov at 20.03.2025
 All right reserved.
 ----------------------------------------*/
 
-
 /*
   .button
   .button--label
@@ -17,9 +16,10 @@ All right reserved.
   .button--white
   .button--black
   .button--clear
+  .button--dropdown
+  .buttons-group
 */
 
-
 :root {
   /*
     External variables:
@@ -51,12 +51,11 @@ All right reserved.
   --button-box-shadow-hover: 0 .1rem .1rem #00000022;
   --button-box-shadow-active: inset 0 0 .1rem #00000011;
   --button-disabled-opacity: .5;
+  --button-border-radius: calc(var(--button-font-size) * 0.6);
 
   /* Strength of hover (lighten) / active (darken). Override on :root or .button--* to tune. */
   --button-hover-lighten: 10%;
   --button-active-darken: 5%;
-
-  --button-border-radius: calc(var(--button-font-size) * 0.6);
   
   /*
     Additional variables and their default values:
@@ -68,11 +67,18 @@ All right reserved.
   */
 }
 
-
 .button, [type=submit] {
   /* Computed on the element so var(--button-color) respects .button--primary etc. */
-  --button-color-hover: color-mix(in oklab, var(--button-color) calc(100% - var(--button-hover-lighten)), white var(--button-hover-lighten));
-  --button-color-active: color-mix(in oklab, var(--button-color) calc(100% - var(--button-active-darken)), black var(--button-active-darken));
+  --button-color-hover: color-mix(
+      in oklab,
+      var(--button-color) calc(100% - var(--button-hover-lighten)),
+      white var(--button-hover-lighten)
+    );
+  --button-color-active: color-mix(
+      in oklab,
+      var(--button-color) calc(100% - var(--button-active-darken)),
+      black var(--button-active-darken)
+    );
   --button-font-color-hover: var(--button-font-color);
   --button-font-color-active: var(--button-font-color);
 
@@ -153,7 +159,14 @@ All right reserved.
 }
 
 
-/* Predefined styles */
+/* Predefined styles & colors */
+
+.button--spacy {
+  padding-top: calc(var(--button-font-size) * var(--button-side-padding-coeff) * 0.75);
+  padding-bottom: calc(var(--button-font-size) * var(--button-side-padding-coeff) * 0.75);
+  padding-left: calc(var(--button-font-size) * var(--button-side-padding-coeff) * 1.25);
+  padding-right: calc(var(--button-font-size) * var(--button-side-padding-coeff) * 1.25);
+}
 
 .button--label {
   --button-height: calc(var(--line-height) * 1em);
@@ -194,7 +207,10 @@ All right reserved.
   --button-box-shadow-active: none;
 }
 
-.button--tabs {
+
+/* Group */
+
+.buttons-group {
   display: flex;
   gap: calc(var(--space-1) / 2);
   
@@ -213,15 +229,21 @@ All right reserved.
   }
 }
 
-.button.button--dropdown {
-  --button-padding-calculated: calc(var(--button-font-size) * var(--button-side-padding-coeff));
-  padding-right: calc(var(--button-side-padding, var(--button-padding-calculated)) * 1.8);
+
+/* Dropdown button */
+
+.button--dropdown {
+  --var: calc(var(--button-font-size) * var(--button-side-padding-coeff));
+  padding-right: calc(var(--button-side-padding, --var) * 1.8);
 
   &::after {
     content: '';
     display: block;
     position: absolute;
-    right: var(--button-side-padding, calc(var(--button-font-size) * var(--button-side-padding-coeff)));
+    right: var(
+      --button-side-padding,
+      calc(var(--button-font-size) * var(--button-side-padding-coeff)
+    ));
     width: .5em;
     height: .5em;
     margin-top: -.05em;
@@ -234,12 +256,12 @@ All right reserved.
     transition: opacity .1s ease-out;
   }
 }
-.dropdown--bottom .button.button--dropdown::after {
+.dropdown--bottom .button--dropdown::after {
   transform: rotate(225deg);
-  margin-top: .3em;
+  margin-top: .35em;
 }
 
-.button.button--dropdown.active {
+.button--dropdown.active {
   &::after {
     opacity: 1;
   }

package/src/components/x/colors.css

@@ -1,32 +1,27 @@
 /*----------------------------------------
 colors.css / x
-Colors from https://147colors.com
+Colors
 
 Created by Andrey Shpigunov at 20.03.2025
 All right reserved.
 ----------------------------------------*/
 
-
 /*
-  .colorPrimary
-  .colorSuccess
-  .colorWarning
-  .colorDanger
-  .colorError
-  .colorGrey
-  
-  .bgPrimary
-  .bgSuccess
-  .bgWarning
-  .bgDanger
-  .bgError
-  .bgGrey
+  .color-primary
+  .color-success
+  .color-warning
+  .color-danger
+  .color-error
+  .color-grey
   
-  .color[ColorName] - color (d)
-  .bg[ColorName] - background color (d)
+  .bg-primary
+  .bg-success
+  .bg-warning
+  .bg-danger
+  .bg-error
+  .bg-grey
 */
 
-
 :root {
   --color-primary: #0088ee;
   --color-success: #33c433;
@@ -36,29 +31,40 @@ All right reserved.
   --color-grey: #f4f5f6;
 }
 
-
-.colorPrimary { color: var(--color-primary) !important }
-.colorSuccess { color: var(--color-success) !important }
-.colorWarning { color: var(--color-warning) !important }
-.colorDanger  { color: var(--color-danger) !important }
-.colorError   { color: var(--color-error) !important }
-.bgPrimary   { background-color: var(--color-primary) !important }
-.bgSuccess   { background-color: var(--color-success) !important }
-.bgWarning   { background-color: var(--color-warning) !important }
-.bgDanger    { background-color: var(--color-danger) !important }
-.bgError     { background-color: var(--color-error) !important }
-.bgGrey      { background-color: var(--color-grey) !important }
-
-
-@each $color in AliceBlue, AntiqueWhite, Aqua, Azure, Beige, Bisque, Black, BlanchedAlmond, Blue, BlueViolet, Brown, Burlywood, CadetBlue, Chartreuse, Chocolate, Coral, CornflowerBlue, Cornsilk, Crimson, Cyan, DarkBlue, DarkCyan, DarkGoldenrod, DarkGray, DarkGreen, DarkGrey, DarkKhaki, DarkMagenta, DarkOliveGreen, DarkOrange, DarkOrchid, DarkRed, DarkSalmon, DarkSeaGreen, DarkSlateBlue, DarkSlateGray, DarkSlateGrey, DarkTurquoise, DarkViolet, DeepPink, DeepSkyBlue, DimGray, DimGrey, DodgerBlue, FireBrick, FloralWhite, ForestGreen, Fuchsia, Gainsboro, GhostWhite, Gold, Goldenrod, Gray, Green, GreenYellow, Grey, HoneyDew, HotPink, IndianRed, Indigo, Ivory, Khaki, Lavender, LavenderBlush, LawnGreen, LemonChiffon, LightBlue, LightCoral, LightCyan, LightGoldenrodYellow, LightGray, LightGreen, LightGrey, LightPink, LightSalmon, LightSeaGreen, LightSkyBlue, LightSlateGray, LightSlateGrey, LightSteelBlue, LightYellow, Lime, LimeGreen, Linen, Magenta, Maroon, MediumAquaMarine, MediumBlue, MediumOrchid, MediumPurple, MediumSeaGreen, MediumSlateBlue, MediumSpringGreen, MediumTurquoise, MediumVioletRed, MidnightBlue, MintCream, MistyRose, Moccasin, NavajoWhite, Navy, OldLace, Olive, OliveDrab, Orange, OrangeRed, Orchid, PaleGoldenrod, PaleGreen, PaleTurquoise, PaleVioletRed, PapayaWhip, PeachPuff, Peru, Pink, Plum, PowderBlue, Purple, RebeccaPurple, Red, RosyBrown, RoyalBlue, SaddleBrown, Salmon, SandyBrown, SeaGreen, SeaShell, Sienna, Silver, SkyBlue, SlateBlue, SlateGray, SlateGrey, Snow, SpringGreen, SteelBlue, Tan, Teal, Thistle, Tomato, Turquoise, Violet, Wheat, White, WhiteSmoke, Yellow, YellowGreen {
-  
-  .color$(color) { color: $(color) !important }
-  .bg$(color) { background-color: $(color) !important }
+.color-primary {
+  color: var(--color-primary);
+}
+.color-success {
+  color: var(--color-success);
+}
+.color-warning {
+  color: var(--color-warning);
+}
+.color-danger {
+  color: var(--color-danger);
+}
+.color-error {
+  color: var(--color-error);
+}
+.color-grey {
+  color: var(--color-grey);
 }
 
-@media (--dark) {
-  @each $color in AliceBlue, AntiqueWhite, Aqua, Azure, Beige, Bisque, Black, BlanchedAlmond, Blue, BlueViolet, Brown, Burlywood, CadetBlue, Chartreuse, Chocolate, Coral, CornflowerBlue, Cornsilk, Crimson, Cyan, DarkBlue, DarkCyan, DarkGoldenrod, DarkGray, DarkGreen, DarkGrey, DarkKhaki, DarkMagenta, DarkOliveGreen, DarkOrange, DarkOrchid, DarkRed, DarkSalmon, DarkSeaGreen, DarkSlateBlue, DarkSlateGray, DarkSlateGrey, DarkTurquoise, DarkViolet, DeepPink, DeepSkyBlue, DimGray, DimGrey, DodgerBlue, FireBrick, FloralWhite, ForestGreen, Fuchsia, Gainsboro, GhostWhite, Gold, Goldenrod, Gray, Green, GreenYellow, Grey, HoneyDew, HotPink, IndianRed, Indigo, Ivory, Khaki, Lavender, LavenderBlush, LawnGreen, LemonChiffon, LightBlue, LightCoral, LightCyan, LightGoldenrodYellow, LightGray, LightGreen, LightGrey, LightPink, LightSalmon, LightSeaGreen, LightSkyBlue, LightSlateGray, LightSlateGrey, LightSteelBlue, LightYellow, Lime, LimeGreen, Linen, Magenta, Maroon, MediumAquaMarine, MediumBlue, MediumOrchid, MediumPurple, MediumSeaGreen, MediumSlateBlue, MediumSpringGreen, MediumTurquoise, MediumVioletRed, MidnightBlue, MintCream, MistyRose, Moccasin, NavajoWhite, Navy, OldLace, Olive, OliveDrab, Orange, OrangeRed, Orchid, PaleGoldenrod, PaleGreen, PaleTurquoise, PaleVioletRed, PapayaWhip, PeachPuff, Peru, Pink, Plum, PowderBlue, Purple, RebeccaPurple, Red, RosyBrown, RoyalBlue, SaddleBrown, Salmon, SandyBrown, SeaGreen, SeaShell, Sienna, Silver, SkyBlue, SlateBlue, SlateGray, SlateGrey, Snow, SpringGreen, SteelBlue, Tan, Teal, Thistle, Tomato, Turquoise, Violet, Wheat, White, WhiteSmoke, Yellow, YellowGreen {
-    .d\:color$(color) { color: $(color) !important }
-    .d\:bg$(color) { background-color: $(color) !important }
-  }
+.bg-primary {
+  background-color: var(--color-primary);
+}
+.bg-success {
+  background-color: var(--color-success);
+}
+.bg-warning {
+  background-color: var(--color-warning);
+}
+.bg-danger {
+  background-color: var(--color-danger);
+}
+.bg-error {
+  background-color: var(--color-error);
+}
+.bg-grey {
+  background-color: var(--color-grey);
 }

package/src/components/x/debug.css

@@ -37,8 +37,8 @@ All right reserved.
       list-style-type: decimal;
       
       & li {
-        margin-top: 10px !important;
-        margin-bottom: 10px !important;
+        margin-top: 10px;
+        margin-bottom: 10px;
         
         & .sql-log-query {
           word-break: break-all;