@andreyshpigunov/x 0.3.89 → 0.4.1

package/src/components/x/hover.js

@@ -59,7 +59,7 @@
  *   Attaches event listeners to the document for mouseenter and mouseleave events.
  *   Safe to call multiple times (no-op after first call). SSR-safe: no-op when document is undefined.
  *
- * @method destroy() - Removes document listeners and resets state. Use on SPA unmount / Next.js.
+ * @method destroy() - Removes document listeners and resets state. Use on SPA unmount / page change.
  *
  *   @example
  *     import { hover } from './hover.js';
@@ -85,14 +85,25 @@
  * - Efficient CSS selector matching with `CSS.escape()` for special characters
  * - Minimal DOM manipulation (only toggles class on matching elements)
  *
- * Next.js: call hover.init() in useEffect; in cleanup call hover.destroy().
- *
  * @example
- * // Next.js — layout or _app
- * useEffect(() => {
- *   hover.init();
- *   return () => hover.destroy();
- * }, []);
+ * // Vanilla JS — plain HTML
+ * // index.html:
+ * // <nav>
+ * //   <a href="/about" x-hover>About</a>
+ * // </nav>
+ * // <footer>
+ * //   <a href="/about" x-hover>Learn More</a>
+ * // </footer>
+ * //
+ * // <style>
+ * //   a.hover { text-decoration: underline; }
+ * // </style>
+ * //
+ * // <script type="module">
+ * //   import { hover } from './src/components/x/hover.js';
+ * //   window.addEventListener('DOMContentLoaded', () => hover.init());
+ * //   window.addEventListener('pagehide', () => hover.destroy());
+ * // </script>
  *
  * @author Andrey Shpigunov
  * @version 0.3
@@ -129,7 +140,7 @@ export class Hover {
   }
 
   /**
-   * Removes document listeners and resets state. Use on SPA unmount or Next.js cleanup.
+   * Removes document listeners and resets state. Use on SPA unmount / page change.
    * SSR-safe: no-op when document is undefined.
    */
   destroy() {

package/src/components/x/icons.css

@@ -9,7 +9,7 @@ All right reserved.
 
 /*
   .icon - base icon style
-  .icon--[10-60] step 2 (m,l) - icon size in px
+  .icon.s[10-60] step 2 (m,l) - icon size in px
 */
 
 .icon,
@@ -27,30 +27,30 @@ All right reserved.
 }
 
 @for $i from 10 to 60 by 2 {
-  .icon--$(i),
-  .icon--$(i) > svg,
-  .icon--$(i) > img {
+  .icon.s$(i),
+  .icon.s$(i) > svg,
+  .icon.s$(i) > img {
     width: calc($(i)rem / 10);
     height: calc($(i)rem / 10);
   }
 }
 
-@media (--medium) {
+@media (min-width: 768px) {
   @for $i from 10 to 60 by 2 {
-    .m\:icon--$(i),
-    .m\:icon--$(i) > svg,
-    .m\:icon--$(i) > img {
+    .m\:icon.s$(i),
+    .m\:icon.s$(i) > svg,
+    .m\:icon.s$(i) > img {
       width: calc($(i)rem / 10);
       height: calc($(i)rem / 10);
     }
   }
 }
 
-@media (--large) {
+@media (min-width: 1024px) {
   @for $i from 10 to 60 by 2 {
-    .l\:icon--$(i),
-    .l\:icon--$(i) > svg,
-    .l\:icon--$(i) > img {
+    .l\:icon.s$(i),
+    .l\:icon.s$(i) > svg,
+    .l\:icon.s$(i) > img {
       width: calc($(i)rem / 10);
       height: calc($(i)rem / 10);
     }

package/src/components/x/lazyload.js

@@ -89,14 +89,23 @@
  * - Use `data-srcset` for responsive images to reduce bandwidth
  * - Images are automatically unobserved after loading to reduce overhead
  *
- * Next.js: call lazyload.init() in useEffect; in cleanup call lazyload.destroy().
- *
  * @example
- * // Next.js — layout or _app
- * useEffect(() => {
- *   lazyload.init();
- *   return () => lazyload.destroy();
- * }, []);
+ * // Vanilla JS — plain HTML
+ * // index.html:
+ * // <img
+ * //   x-lazyload
+ * //   width="800"
+ * //   height="450"
+ * //   src="placeholder.jpg"
+ * //   data-src="image.jpg"
+ * //   alt="Lazy image"
+ * // />
+ * //
+ * // <script type="module">
+ * //   import { lazyload } from './src/components/x/lazyload.js';
+ * //   window.addEventListener('DOMContentLoaded', () => lazyload.init());
+ * //   window.addEventListener('pagehide', () => lazyload.destroy());
+ * // </script>
  *
  * @author Andrey Shpigunov
  * @version 0.2
@@ -149,7 +158,7 @@ class Lazyload {
   }
 
   /**
-   * Disconnects observer and clears reference. Use on SPA unmount or Next.js cleanup.
+   * Disconnects observer and clears reference. Use on SPA unmount / page change.
    * SSR-safe: no-op when window is undefined.
    */
   destroy() {

package/src/components/x/lib.js

@@ -156,7 +156,21 @@
  *   - Implement Content Security Policy (CSP) headers
  *   - Consider using a proper HTML sanitization library for complex cases
  *
- * Next.js: DOM methods no-op or return safe defaults when document/window undefined. Use lib on client (e.g. useEffect).
+ * SSR-safe: DOM methods no-op or return safe defaults when document/window undefined.
+ *
+ * @example
+ * // Vanilla JS — plain HTML
+ * // index.html:
+ * // <p id="out"></p>
+ * // <div x-render="'Hello from x-render'"></div>
+ * //
+ * // <script type="module">
+ * //   import { lib } from './src/components/x/lib.js';
+ * //   window.addEventListener('DOMContentLoaded', () => {
+ * //     const el = lib.qs('#out');
+ * //     if (el) el.textContent = lib.price(1234.56);
+ * //   });
+ * // </script>
  *
  * @author Andrey Shpigunov
  * @version 0.3

package/src/components/x/links.css

@@ -9,7 +9,6 @@ All right reserved.
 
 /* !- Links styles */
 
-
 /*
   a
   a.link
@@ -22,7 +21,6 @@ All right reserved.
   a.link--wavy
 */
 
-
 :root {
   --link-color: #0060cc;
   --link-decoration-line: underline;
@@ -43,7 +41,6 @@ All right reserved.
   */
 }
 
-
 a {
   
   &[role=button] {
@@ -83,7 +80,6 @@ a {
     text-decoration-color: var(--link-decoration-color-hover, currentcolor);
   }
   
-  
   /* Link predefined styles */
   
   &.link--noline {
@@ -109,6 +105,6 @@ a {
 a[href^="tel"],
 a[href^="tel"]:hover,
 a[href^="tel"]:active {
-  color: inherit !important;
-  text-decoration: inherit !important;
+  color: inherit;
+  text-decoration: inherit;
 }

package/src/components/x/loadmore.js

@@ -120,14 +120,26 @@
  * - Handle errors gracefully in callback functions
  * - Consider rate limiting for API calls
  *
- * Next.js: call init() in useEffect; call destroy() in cleanup (e.g. on unmount).
  * SSR-safe: init/destroy no-op when window/document is undefined.
  *
  * @example
- * useEffect(() => {
- *   loadmore.init();
- *   return () => loadmore.destroy();
- * }, []);
+ * // Vanilla JS — plain HTML
+ * // index.html:
+ * // <div class="items"></div>
+ * // <div x-loadmore='{"functionName": "loadMoreData"}'></div>
+ * //
+ * // <script type="module">
+ * //   import { loadmore } from './src/components/x/loadmore.js';
+ * //   window.loadMoreData = async (page) => {
+ * //     const r = await fetch(`/api/items?page=${page}`);
+ * //     const items = await r.json();
+ * //     const el = document.querySelector('.items');
+ * //     items.forEach((item) => el.appendChild(Object.assign(document.createElement('div'), { textContent: item.name })));
+ * //     return items.length > 0;
+ * //   };
+ * //   window.addEventListener('DOMContentLoaded', () => loadmore.init());
+ * //   window.addEventListener('pagehide', () => loadmore.destroy());
+ * // </script>
  *
  * @author Andrey Shpigunov
  * @version 0.3

package/src/components/x/modal.css

@@ -7,9 +7,6 @@ All right reserved.
 ----------------------------------------*/
 
 
-/* !- Modal windows */
-
-
 :root {
   --modal-margin-top: 3vw;
   --modal-margin-bottom: 3vw;
@@ -31,18 +28,15 @@ All right reserved.
   --modal-overlay-background-color: #00000066;
 }
 
-
 html.modal--active body {
   overflow: hidden;
 }
 
-
 /* !- Modal window content */
 [x-modal] {
   display: none;
 }
 
-
 /* !- Modal wrapper */
 .modal {
   position: fixed;
@@ -71,7 +65,6 @@ html.modal--active body {
 .modal--z9  { z-index: 10009 }
 .modal--z10 { z-index: 10010 }
 
-
 /* !- Overlay */
 .modal-overlay {
   position: absolute;
@@ -83,7 +76,6 @@ html.modal--active body {
   background-color: var(--modal-overlay-background-color);
 }
 
-
 /* ! -Main structure */
 .modal-outer {
   position: relative;
@@ -104,7 +96,6 @@ html.modal--active body {
   min-height: 100%;
 }
 
-
 /* !- Modal window */
 .modal-window {
   position: relative;
@@ -122,7 +113,6 @@ html.modal--active body {
   border-radius: var(--modal-border-radius);
 }
 
-
 /* !- Close cross */
 .modal-rail {
   position: absolute;
@@ -187,11 +177,10 @@ html.modal--active body {
   }
 }
 
-
-/* !- Effects
-   https://github.com/codrops/ModalWindowEffects */
-
-
+/*
+  !- Effects
+  https://github.com/codrops/ModalWindowEffects
+*/
 .modal {
   & .modal-overlay {
     will-change: opacity;
@@ -203,7 +192,6 @@ html.modal--active body {
   }
 }
 
-
 /* !- Default */
 .modal {
   & .modal-window {
@@ -219,7 +207,6 @@ html.modal--active body {
   }
 }
 
-
 /* !- Zoom in */
 .modal--effect-in {
   & .modal-window {
@@ -230,7 +217,6 @@ html.modal--active body {
   }
 }
 
-
 /* !- Zoom out */
 .modal--effect-out {
   & .modal-window {
@@ -241,7 +227,6 @@ html.modal--active body {
   }
 }
 
-
 /* !- Slide up */
 .modal--effect-up {
   & .modal-window {
@@ -252,7 +237,6 @@ html.modal--active body {
   }
 }
 
-
 /* !- Slide down */
 .modal--effect-down {
   & .modal-window {
@@ -263,7 +247,6 @@ html.modal--active body {
   }
 }
 
-
 /* !- Slide from left */
 .modal--effect-left {
   & .modal-window {
@@ -274,7 +257,6 @@ html.modal--active body {
   }
 }
 
-
 /* !- Slide from right */
 .modal--effect-right {
   & .modal-window {

package/src/components/x/modal.js

@@ -131,14 +131,23 @@
  * - Test modal behavior with nested modals
  * - Handle errors in event listeners gracefully
  *
- * Next.js: call modal.init() in useEffect; call modal.destroy() in cleanup (e.g. on unmount).
  * SSR-safe: init/destroy and DOM methods no-op when document/window is undefined.
  *
  * @example
- * useEffect(() => {
- *   modal.init();
- *   return () => modal.destroy();
- * }, []);
+ * // Vanilla JS — plain HTML
+ * // index.html:
+ * // <div x-modal="myModal" class="modal--hash" data-window-class="max800">
+ * //   <h2>Title</h2>
+ * //   <p>Content</p>
+ * //   <button type="button" class="modal-close">Close</button>
+ * // </div>
+ * // <a href="#myModal" x-modal-open="myModal">Open</a>
+ * //
+ * // <script type="module">
+ * //   import { modal } from './src/components/x/modal.js';
+ * //   window.addEventListener('DOMContentLoaded', () => modal.init());
+ * //   window.addEventListener('pagehide', () => modal.destroy());
+ * // </script>
  *
  * @author Andrey Shpigunov
  * @version 0.3

package/src/components/x/reset.css

@@ -14,12 +14,11 @@ All right reserved.
   ---------------------------
   |  s  |  m  |  l   |  xl  |  - main breakpoints
   ---------------------------
-  | 640 | 768 | 1024 | 1440 |  - min viewport size
+  | 640 | 768 | 1024 | 1280 |  - min viewport size
   ---------------------------
   All queries are mobile first.
 */
 
-
 :root {
   /* Base variables */
   --font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
@@ -46,19 +45,6 @@ All right reserved.
   --space-10: 6.4rem;
 }
 
-
-/* PostCSS custom media */
-/* https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media */
-
-/* Breakpoints */
-@custom-media --small  (min-width: 640px);   /* Small screen  [s]  */
-@custom-media --medium (min-width: 768px);   /* Medium screen [m]  */
-@custom-media --large  (min-width: 1024px);  /* Large screen  [l]  */
-@custom-media --xlarge (min-width: 1440px);  /* XLarge screen [xl] */
-/* Dark mode */
-@custom-media --dark (prefers-color-scheme: dark);
-
-
 html, body, main, div, span, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,

package/src/components/x/scroll.css

@@ -1,15 +1,12 @@
 /*----------------------------------------
 scroll.css / x
-Scroll
+Scroll — native CSS horizontal scroller
 
 Created by Andrey Shpigunov at 20.03.2025
 All right reserved.
 ----------------------------------------*/
 
 
-/* !- Scroll - native CSS horizontal scroller */
-
-
 /*
   .scroll
   .scroll--contain
@@ -17,14 +14,12 @@ All right reserved.
   .scroll--x-mandatory
 */
 
-
 :root {
   --scroll-scrollbar-size: 6px;
   --scroll-scrollbar-thumb-background: #00000011;
   --scroll-scrollbar-thumb-background-hover: #00000022;
 }
 
-
 .scroll {
   flex-wrap: nowrap;
   overflow-x: scroll;
@@ -34,7 +29,7 @@ All right reserved.
   -ms-overflow-style: none;
   /* Hide scrollbar in Firefox */
   scrollbar-width: none;
-  touch-action: pan-x !important;
+  touch-action: pan-x;
 
   &::-webkit-scrollbar {
     width: var(--scroll-scrollbar-size);
@@ -69,13 +64,13 @@ All right reserved.
 .scroll.scroll--x {
   overflow-x: scroll;
   overflow-y: hidden;
-  touch-action: pan-x !important;
+  touch-action: pan-x;
 }
 
 .scroll.scroll--y {
   overflow-x: hidden;
   overflow-y: scroll;
-  touch-action: pan-y !important;
+  touch-action: pan-y;
 }
 
 .scroll--contain {

package/src/components/x/scroll.js

@@ -47,7 +47,7 @@
  *   @example
  *     scroll.destroy();
  *
- * @method scrollTo(target | params) - Scrolls to element by id, selector, or element with options.
+ * @method scrollTo - Scrolls to element by id, selector, or options object.
  *   @param {string|HTMLElement|Object} params - Target element, selector, or options object.
  *   Options format:
  *   {
@@ -98,6 +98,19 @@
  * - Handle errors gracefully in scroll callbacks
  * - Consider accessibility (keyboard navigation, focus management)
  *
+ * @example
+ * // Vanilla JS — plain HTML
+ * // index.html:
+ * // <a x-scrollto='{"target":"#section","offset":80,"hash":true,"classActive":"active"}'>Go</a>
+ * // <div style="height: 120vh"></div>
+ * // <section id="section" style="height: 50vh; border: 1px solid #ccc;">Target</section>
+ * //
+ * // <script type="module">
+ * //   import { scroll } from './src/components/x/scroll.js';
+ * //   window.addEventListener('DOMContentLoaded', () => scroll.init());
+ * //   window.addEventListener('pagehide', () => scroll.destroy());
+ * // </script>
+ *
  * @author Andrey Shpigunov
  * @version 0.3
  * @since 2025-07-18

package/src/components/x/sheets.css

@@ -7,9 +7,6 @@ All right reserved.
 ----------------------------------------*/
 
 
-/* !- Sheets */
-
-
 [x-sheet]:not(.active) {
   display: none;
 }