npm - @andreyshpigunov/x - Versions diffs - 0.3.89 → 0.4.1 - Mend

@andreyshpigunov/x 0.3.89 → 0.4.1

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.

Files changed (65) hide show

package/.github/workflows/publish.yml +1 -1
package/README.md +1 -1
package/assets/css/app.css +1 -0
package/assets/img/github-mark-white.png +0 -0
package/assets/img/github-mark.png +0 -0
package/assets/js/app.js +1 -0
package/cheatsheet.html +427 -0
package/dist/x.css +1 -1
package/dist/x.js +1 -3
package/index.html +34 -38
package/package.json +52 -47
package/postcss.config.cjs +0 -2
package/src/components/x/animate.js +39 -45
package/src/components/x/appear.js +19 -26
package/src/components/x/autocomplete.js +22 -10
package/src/components/x/buttons.css +38 -16
package/src/components/x/colors.css +47 -41
package/src/components/x/debug.css +2 -2
package/src/components/x/device.js +39 -33
package/src/components/x/dropdown.css +2 -3
package/src/components/x/dropdown.js +16 -9
package/src/components/x/flex.css +146 -109
package/src/components/x/flow.css +12 -6
package/src/components/x/form.css +3 -3
package/src/components/x/form.js +12 -9
package/src/components/x/grid.css +78 -42
package/src/components/x/helpers.css +601 -438
package/src/components/x/hover.js +20 -9
package/src/components/x/icons.css +12 -12
package/src/components/x/lazyload.js +17 -8
package/src/components/x/lib.js +15 -1
package/src/components/x/links.css +2 -6
package/src/components/x/loadmore.js +17 -5
package/src/components/x/modal.css +4 -22
package/src/components/x/modal.js +14 -5
package/src/components/x/reset.css +1 -15
package/src/components/x/scroll.css +4 -9
package/src/components/x/scroll.js +14 -1
package/src/components/x/sheets.css +0 -3
package/src/components/x/sheets.js +157 -37
package/src/components/x/slider.css +10 -1
package/src/components/x/slider.js +15 -0
package/src/components/x/space.css +22 -2
package/src/components/x/sticky.css +10 -15
package/src/components/x/sticky.js +21 -4
package/src/components/x/typo.css +14 -40
package/src/css/app.css +92 -93
package/src/css/x.css +191 -213
package/src/js/app.js +9 -9
package/src/js/x.js +37 -41
package/assets/github-mark-white.png +0 -0
package/assets/github-mark.png +0 -0
package/assets/logo-inverse.png +0 -0
package/babel.config.cjs +0 -4
package/dist/app.css +0 -1
package/dist/app.js +0 -1
package/dist/index.html +0 -2182
package/dist/logo.png +0 -0
package/jest.config.mjs +0 -7
package/jsdoc.json +0 -11
package/vite.config.js +0 -31
/package/assets/{alpha.png → img/alpha.png} +0 -0
/package/assets/{apple-touch-icon.png → img/apple-touch-icon.png} +0 -0
/package/assets/{logo.png → img/logo.png} +0 -0
/package/assets/{logo.svg → img/logo.svg} +0 -0

package/dist/index.html DELETED Viewed

@@ -1,2182 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" class="noTransitions antialiased">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>X — Javascript library with interesting features</title>
-  <meta name="description" content="Small and simple Javascript library with interesting features">
-  <link rel="shortcut icon" href="https://andreyshpigunov.github.io/x/favicon.ico">
-  <link rel="icon" href="https://andreyshpigunov.github.io/x/favicon.svg" type="image/svg+xml">
-  <link rel="apple-touch-icon" href="https://andreyshpigunov.github.io/x/assets/apple-touch-icon.png">
-  <script type="module" crossorigin src="./app.js"></script>
-  <link rel="modulepreload" crossorigin href="./x.js">
-  <link rel="stylesheet" crossorigin href="./app.css">
-</head>
-<body id="top" x-animate='{
-  "start": "0px",
-  "end": "-50vh",
-  "functionName": "headerAnimation"
-}'>
-  <header class="header flex aic sticky px5 m:px6 l:px8 unselectable">
-    <div class="header-version nowrap">0.3.88</div>
-    <div class="header-logo mxa">
-      <a role="button" x-scrollto="#top">
-        <img src="./logo.png" alt="x" />
-      </a>
-    </div>
-    <div class="header-github">
-      <a href="https://github.com/andreyshpigunov/x" target="_blank"></a>
-    </div>
-  </header>
-  <div class="element3" x-animate='{
-    "start": "50vh",
-    "end": "-100px",
-    "functionName": "element3",
-    "class": "active",
-    "classRemove": true
-  }'>
-    <div class="element3-figure"></div>
-  </div>
-  <section class="section-header mt8 px5 m:px6 l:px8" x-appear>
-    <h1 class="mxa ac max800">Small and simple CSS & JavaScript library with interesting features</h1>
-    <div class="flex">
-      <div class="mt4">
-        <button x-dropdown-open class="button button--dropdown" tabindex="1">Menu left</button>
-        <ul x-dropdown>
-          <li><a href="/admin/settings/profile/">Профильное образование в педагогическом</a></li>
-          <li><a href="/logout/">Выйти</a></li>
-          <li class="divider"></li>
-          <li><span class="op4">Version 0.5</span></li>
-        </ul>
-      </div>
-      <div class="mt4 mxa">
-        <input x-dropdown-open type="text" tabindex="2"/>
-        <ul x-dropdown id="test">
-          <li><a onclick="alert('It works!')">Test it!</a></li>
-          <li><a onclick="alert('It works!')">Test it!</a></li>
-          <li><a onclick="alert('It works!')">Test it!</a></li>
-          <li><a onclick="alert('It works!')">Test it!</a></li>
-          <li><span class="op4">Начните вводить название города</span></li>
-          <li><span class="op4">Загрузка...</span></li>
-        </ul>
-      </div>
-      <div class="mt4">
-        <button x-dropdown-open class="button button--dropdown" tabindex="3">Menu right</button>
-        <ul x-dropdown>
-          <li><a href="/admin/settings/profile/">Профиль</a></li>
-          <li><a href="/logout/">Выйти</a></li>
-          <li class="divider"></li>
-          <li><span class="op4">Version 0.5</span></li>
-        </ul>
-      </div>
-    </div>
-  </section>
-  <div class="element2" x-animate='{
-    "start": "70vh",
-    "end": "-100px",
-    "functionName": "element1",
-    "class": "active",
-    "classRemove": true
-  }'>
-    <div class="element2-figure"></div>
-  </div>
-  <section class="section-header mt6 px5 m:px6 l:px8">
-    <h2 class="ac">JS plugins</h2>
-  </section>
-  <section class="section-content mt7 px5 m:px6 l:px8">
-    <div class="container">
-      <div class="grid g1 m:g2 l:g3 xl:g4 gap6">
-        <div class="c1">
-          <h3><a class="link" x-modal-open="modalAnimate">Animate</a></h3>
-          <div x-animate='{
-            "trigger": ".jsAnimateExample",
-            "start": "80vh",
-            "end": "20vh",
-            "functionName": "animateExample",
-            "class": "active",
-            "classRemove": true
-          }'></div>
-          <div class="jsAnimateExample breakWord"></div>
-          <progress id="progress" value="0" max="1"></progress>
-          <canvas class="block" id="canvas" width="200" height="200"></canvas>
-          <script>
-            let canvas = document.querySelector('#canvas');
-            let context = canvas.getContext('2d');
-            let centerx = context.canvas.width / 2;
-            let centery = context.canvas.height / 2;
-            function animateExample(params) {
-              let el = document.querySelector('.jsAnimateExample');
-              let progress = document.querySelector('#progress');
-              el.innerHTML = 'Progress: ' + params.progress + ' (' + Math.round(params.progress * 100) + '%)';
-              progress.value = params.progress;
-              let a = 2;
-              let b = 2;
-              let deg = params.progress * 360;
-              context.clearRect(0, 0, 200, 200);
-              context.moveTo(centerx, centery);
-              context.beginPath();
-              for (i = 0; i < deg; i++) {
-                let angle = 0.1 * i;
-                let x = centerx + (a + b * angle) * Math.cos(angle);
-                let y = centery + (a + b * angle) * Math.sin(angle);
-                context.lineTo(x, y);
-              }
-              context.strokeStyle = '#aaa';
-              context.stroke();
-            }
-          </script>
-        </div>
-        <div class="c1">
-          <h3><a class="link" x-modal-open="modalAppear">Appear</a></h3>
-          <style>.exampleAppear1,.exampleAppear2{opacity:0;will-change:opacity;transition:opacity 1s ease-out .4s}.exampleAppear2{transition-delay:1s}.exampleAppear1.appeared,.exampleAppear2.visible{opacity:1;background:var(--color-grey)}</style>
-          <div class="exampleAppear1 flex jcc py5 r3" x-appear>Appeared</div>
-          <div class="exampleAppear2 flex jcc py5 mt2 r3" x-appear>Visible</div>
-        </div>
-        <div class="c1">
-          <h3><a class="link" x-modal-open="modalDevice">Device</a></h3>
-          <div class="jsDeviceExample breakWord"></div>
-          <script>
-            document.addEventListener('DOMContentLoaded', () => {
-              if (x.device) {
-                function renderDevice() {
-                  setTimeout(() => {
-                    let content = '';
-                    Object.keys(x.device)
-                      .filter(key => !(typeof key === 'string' && key.charAt(0) === '_'))
-                      .forEach(key => {
-                        let val = x.device[key];
-                        if (typeof val === 'object') {
-                          val = JSON.stringify(val);
-                        }
-                        content += key + ': ' + val + '<br>'
-                    })
-                    x.lib.render('.jsDeviceExample', content)
-                  }, 200)
-                }
-                renderDevice(x.device);
-                const debouncedRenderDevice = x.lib.debounce(renderDevice, 200);
-                window.addEventListener('resize', debouncedRenderDevice)
-              }
-            })
-          </script>
-        </div>
-        <div class="c1">
-          <h3><a class="link" x-modal-open="modalForm">Form</a></h3>
-          <div>Form fields binding.</div>
-          <div class="flex aic gap2 my2">
-            <input class="max160" type="text" name="exampleText" placeholder="Type something" />
-            <span class="jsExampleTextValue m2">...</span>
-          </div>
-          <div>Simple calculator</div>
-          <div class="my2">
-            <input class="max40 ac" name="exampleVal1" type="text" value="2" maxlength="1" pattern="[0-9]{1}" /> +
-            <input class="max40 ac" name="exampleVal2" type="text" value="2" maxlength="1" pattern="[0-9]{1}" /> =
-            <input class="max40 ac" name="exampleSum" type="text" pattern="[0-9]{1}" readonly />
-          </div>
-          <div>Custom logic</div>
-          <div class="my2">
-            <select class="max80" name="exampleSelect">
-              <option value="1">One</option>
-              <option value="2">Two</option>
-              <option value="3">Three</option>
-            </select> →
-            <input class="max60" type="text" name="exampleSelectValue" />
-          </div>
-          <div class="flex aic gap2">
-            <label><input id="radio1" type="radio" name="exampleSelectRadio" value="1" /> 1</label>
-            <label><input id="radio2" type="radio" name="exampleSelectRadio" value="2" /> 2</label>
-            <label><input id="radio3" type="radio" name="exampleSelectRadio" value="3" /> 3</label>
-          </div>
-          <script>
-            document.addEventListener('DOMContentLoaded', function() {
-              x.form.onUpdate('[name=exampleText]', (el) => {
-                !el.value ? value = '...' : value = el.value;
-                x.lib.render('.jsExampleTextValue', value);
-              });
-              x.form.onUpdate('[name=exampleSelect]', (el) => {
-                qs('[name=exampleSelectValue]').value = el.value;
-                qs('#radio' + el.value).checked = true;
-              });
-              x.form.onUpdate('[name=exampleSelectValue]', (el) => {
-                var val = ['', '1', '2', '3'].includes(el.value) ? el.value : 1;
-                el.value = val;
-                qs('[name=exampleSelect]').value = val;
-                // Reset radio buttons
-                let radio = qsa('[name=exampleSelectRadio]');
-                for (let rad of radio) rad.checked = false;
-                // Select radio button
-                if (el.value != '') qs('#radio' + el.value).checked = true;
-              });
-              let radio = qsa('[name=exampleSelectRadio]');
-              for (let rad of radio) {
-                x.form.onUpdate(rad, (el) => {
-                  let val = qs('[name=exampleSelectRadio]:checked').value;
-                  qs('[name=exampleSelect]').value = el.value;
-                  qs('[name=exampleSelectValue]').value = el.value;
-                });
-              }
-              let upd = ['[name=exampleSelect]', '[name=exampleSelectValue]']
-              x.form.update(upd);
-              let fields = ['[name=exampleVal1]', '[name=exampleVal2]']
-              x.form.onUpdate(fields, calc);
-              function calc() {
-                let val1 = qs('[name=exampleVal1]').value || 0;
-                let val2 = qs('[name=exampleVal2]').value || 0;
-                let sum = parseInt(val1) + parseInt(val2);
-                x.form.setValue('[name=exampleSum]', sum);
-              }
-              calc();
-            })
-          </script>
-          <div x-modal="modalForm" class="modal--hash" data-window-class="max1000">
-            <h2>Form</h2>
-            <p>Useful utilities for forms interactivity.</p>
-            <p>They add the ability to set the values of the input, textarea and select fields, triggering events that can then be processed. In this way, you can link form fields with the necessary functions. For example, the dynamic calculation of the amount entered in the fields and others.</p>
-            <h3>Methods</h3>
-            <div class="scroll">
-              <table class="dataTable">
-                <tr>
-                  <th width="50%">Method</th>
-                  <th width="50%">Desdription</th>
-                </tr>
-                <tr>
-                  <td><code>x.form.setChecked(element, checked = false)</code></td>
-                  <td>Analog for element.checked = bool</td>
-                </tr>
-                <tr>
-                  <td><code>x.form.setValue(element, value)</code></td>
-                  <td>Analog for element.value = string</td>
-                </tr>
-                <tr>
-                  <td><code>x.form.onUpdate([elements], callback)</code></td>
-                  <td>
-                    Listen events on elements from array.<br>
-                    <code>[elements]</code> — selectors array<br>
-                    <code>callback</code> — callback function
-                  </td>
-                </tr>
-                <tr>
-                  <td><code>x.form.update([elements], callback)</code></td>
-                  <td>
-                    Manually dispatch update event for elements from array.<br>
-                    <code>[elements]</code> — selectors array<br>
-                    <code>callback</code> — callback function
-                  </td>
-                </tr>
-              </table>
-            </div>
-          </div>
-        </div>
-        <div class="c1">
-          <h3><a class="link" x-modal-open="modalHover">Hover</a></h3>
-          <div>
-            <a href="#1" onclick="return false" x-hover>Link</a>
-            <a href="#1" onclick="return false" x-hover>Link</a>
-            <a href="#1" onclick="return false" x-hover>Link</a>
-            ...
-            <a href="#1" onclick="return false" x-hover>Link</a>
-          </div>
-          <div class="mt2">
-            <a href="#2" onclick="return false" x-hover>
-              <img class="r3" src="https://anapa-surfing.ru/-/data/articles/photos/416/800x600q80c/img-0476.jpg" width="800" height="600" />
-            </a>
-            <a href="#2" onclick="return false" x-hover>Photo link</a>
-          </div>
-        </div>
-        <div class="c1">
-          <h3><a class="link" x-modal-open="modalLazyload">Lazyload</a></h3>
-          <div>Image loaded lazy.</div>
-          <div class="mt2">
-            <img class="r3" src="https://seosecret.id/placeholder/800x600/ffffff/584959/Loading.../png" x-lazyload data-src="https://anapa-surfing.ru/-/data/articles/photos/416/800x600q80c/img-0426.jpg" data-srcset="https://anapa-surfing.ru/-/data/articles/photos/416/800x600q80c/img-0426.jpg 1x" width="800" height="600" />
-          </div>
-        </div>
-        <div class="c1">
-          <h3><a class="link" x-modal-open="modalLib">Lib</a></h3>
-          <div class="jsLibExample">
-            x.lib.random(1000, 100000) → <span class="jsLibRandom"></span><br>
-            x.lib.number(<span class="jsLibRandom"></span>) → <span class="jsLibNumber"></span><br>
-            x.lib.numberDecline(<span class="jsLibRandom"></span>, 'item', 'items', 'items') →
-            <span class="jsLibNumberDecline"></span><br>
-            x.lib.isEmail('hello@mail.dev') → <span class="jsLibIsEmailTrue"></span><br>
-            x.lib.isEmail('hello@mail') → <span class="jsLibIsEmailFalse"></span><br>
-            x.lib.makePassword(8) → <code class="jsLibMakePassword"></code><br>
-          </div>
-          <div class="flex gap3 aic mt1">
-            <span class="jsLibExampleUpdate pointer unselectable">↺</span>
-            <a class="link link--dashed fs14" x-modal-open="modalLib">Show all methods</a>
-          </div>
-          <script>
-            document.addEventListener('DOMContentLoaded', function() {
-              function libExample() {
-                let random = x.lib.random(1000, 100000);
-                x.lib.render('.jsLibRandom', random);
-                x.lib.render('.jsLibNumber', x.lib.number(random));
-                x.lib.render('.jsLibNumberDecline', random + ' ' + x.lib.numberDecline(random, 'item', 'items', 'items'));
-                x.lib.render('.jsLibIsEmailTrue', x.lib.isEmail('hello@mail.dev') ? 'true' : 'false');
-                x.lib.render('.jsLibIsEmailFalse', x.lib.isEmail('hello@mail') ? 'true' : 'false');
-                x.lib.render('.jsLibMakePassword', x.lib.makePassword(8))
-              }
-              libExample();
-              qs('.jsLibExampleUpdate').addEventListener('click', libExample);
-            })
-          </script>
-        </div>
-        <div class="c1">
-          <h3><a class="link" x-modal-open="modalLoadmore">Loadmore</a></h3>
-          <div>Load new data on content scrolling.</div>
-          <div class="flex fw gap3 mt2">
-            <a role="button" class="button" x-modal-open="modalExampleLoadmore">Show example posts</a>
-          </div>
-          <div x-modal="modalExampleLoadmore">
-            <div id="posts">
-              <h2>Posts</h2>
-            </div>
-            <div id="postsLoader" class="flex jcc py5">
-              <div class="max100">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle fill="none" stroke-opacity="1" stroke="#888888" stroke-width=".5" cx="100" cy="100" r="0"><animate attributeName="r" calcMode="spline" dur="2" values="1;80" keyTimes="0;1" keySplines="0 .2 .5 1" repeatCount="indefinite"></animate><animate attributeName="stroke-width" calcMode="spline" dur="2" values="0;25" keyTimes="0;1" keySplines="0 .2 .5 1" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" calcMode="spline" dur="2" values="1;0" keyTimes="0;1" keySplines="0 .2 .5 1" repeatCount="indefinite"></animate></circle></svg>
-              </div>
-            </div>
-            <div x-loadmore='{"functionName": "loadPosts"}'></div>
-          </div>
-          <script>
-            document.addEventListener('DOMContentLoaded', function() {
-              class Posts {
-                constructor() {
-                  this.all = false
-                }
-                async load(page) {
-                  if (!this.all) {
-                    x.lib.show('#postsLoader');
-                    let skip = (page - 1) * 50;
-                    let response = await fetch('https://dummyjson.com/posts/?limit=50&skip=' + skip);
-                    let data = await response.json();
-                    x.lib.hide('#postsLoader');
-                    x.lib.render('#posts', () => {
-                      let result = `<h3>Page ${page}</h3>`;
-                      if (data.posts.length) {
-                        for (let post of data.posts) {
-                          result += `<p>${post.title}</p>`
-                        }
-                      }
-                      return result;
-                    }, 'beforeend');
-                    if (data.limit < 50) this.all = true
-                    return true
-                  } else {
-                    return false
-                  }
-                }
-              }
-              const posts = new Posts();
-              window.loadPosts = posts.load.bind(posts);
-            })
-          </script>
-        </div>
-        <div class="c1">
-          <h3><a class="link" x-modal-open="modalModal">Modal</a></h3>
-          <div class="flex fw gap3">
-            <a role="button" class="button" x-modal-open="modalExampleTest">Test modal</a>
-            <a role="button" class="button" x-modal-open="modalExampleUniq">Unique modal</a>
-            <a role="button" class="button" x-modal-open="modalExampleStory">Modal with long story</a>
-          </div>
-          <h6>API call:</h6>
-          <a class="link link--dashed" onclick="x.modal.show('modalExampleTest')">x.modal.show('modalExampleTest')</a>
-          <div x-modal="modalExampleTest">
-            <h2>Test modal</h2>
-            <p>John was a young man who lived in a small town. He had always dreamed of traveling the world and seeing new places. One day, he decided to pack his bags and go on a journey.</p>
-            <p>He first went to Europe, where he visited many countries. He saw the Eiffel Tower in Paris, the Coliseum in Rome, and the canals of Venice. He also tried local food and drinks, which were very delicious.</p>
-            <p>After Europe, John went to Asia. There he explored the temples of India, the Great Wall of China, and the rice fields of Japan. He learned about different cultures and religions, which made him more open-minded.</p>
-            <p>Finally, John came back home, but he knew that he would soon go on another adventure. His travels had given him a lot of new experiences and knowledge, and he was ready for more.</p>
-            <div class="flex gap3 mt6">
-              <a role="button" class="button modal-close">Close</a>
-              <a role="button" class="button" x-modal-open="modalExampleInModal">Modal in modal</a>
-              <a role="button" class="button" x-modal-open="modalExampleUniq">Unique modal</a>
-            </div>
-          </div>
-          <div x-modal="modalExampleInModal">
-            <h2>Modal in modal</h2>
-            <p>Opening this window, you are not closed all the other windows on the page.</p>
-          </div>
-          <div x-modal="modalExampleUniq" class="modal--uniq">
-            <h2>Unique modal</h2>
-            <p>Opening this window, you are closed all the other windows on the page.</p>
-          </div>
-          <div x-modal="modalExampleStory" class="modal--hash">
-            <div class="fs20">
-              <h1>Font size 20px</h1>
-              <h2>Header 2</h2>
-              <p>In a faraway land, there was a beautiful sea that stretched as far as the eye could see. The sea was known for its mysterious depths and powerful waves, which had been explored by many brave sailors over the years. One day, a young man named Jack decided to set out on a journey to explore the sea and discover its secrets.</p>
-              <p>Jack had always been fascinated by the stories he had heard about the sea, and he wanted to see it for himself. He packed his bags with all the necessary supplies and set off on his journey. As he sailed across the open waters, he felt a sense of excitement and anticipation. He knew that he was about to embark on an adventure that would change his life forever.</p>
-              <h3>Header 3</h3>
-              <p>As he approached the sea, Jack saw how vast and majestic it was. The waves were rolling in, creating a symphony of sound that filled the air. Jack felt a deep connection to the sea, as if it were calling him to come closer. He lowered his sails and let the boat drift towards the shore.</p>
-              <h4>Header 4</h4>
-              <p>As he approached the sea, Jack saw how vast and majestic it was. The waves were rolling in, creating a symphony of sound that filled the air. Jack felt a deep connection to the sea, as if it were calling him to come closer. He lowered his sails and let the boat drift towards the shore.</p>
-              <h5>Header 5</h5>
-              <p>As he approached the sea, Jack saw how vast and majestic it was. The waves were rolling in, creating a symphony of sound that filled the air. Jack felt a deep connection to the sea, as if it were calling him to come closer. He lowered his sails and let the boat drift towards the shore.</p>
-            </div>
-            <div class="fs16 mt7">
-              <h1>Font size 16px</h1>
-              <h2>Header 2</h2>
-              <p>In a faraway land, there was a beautiful sea that stretched as far as the eye could see. The sea was known for its mysterious depths and powerful waves, which had been explored by many brave sailors over the years. One day, a young man named Jack decided to set out on a journey to explore the sea and discover its secrets.</p>
-              <p>Jack had always been fascinated by the stories he had heard about the sea, and he wanted to see it for himself. He packed his bags with all the necessary supplies and set off on his journey. As he sailed across the open waters, he felt a sense of excitement and anticipation. He knew that he was about to embark on an adventure that would change his life forever.</p>
-              <h3>Header 3</h3>
-              <p>As he approached the sea, Jack saw how vast and majestic it was. The waves were rolling in, creating a symphony of sound that filled the air. Jack felt a deep connection to the sea, as if it were calling him to come closer. He lowered his sails and let the boat drift towards the shore.</p>
-              <h4>Header 4</h4>
-              <p>As he approached the sea, Jack saw how vast and majestic it was. The waves were rolling in, creating a symphony of sound that filled the air. Jack felt a deep connection to the sea, as if it were calling him to come closer. He lowered his sails and let the boat drift towards the shore.</p>
-              <h5>Header 5</h5>
-              <p>As he approached the sea, Jack saw how vast and majestic it was. The waves were rolling in, creating a symphony of sound that filled the air. Jack felt a deep connection to the sea, as if it were calling him to come closer. He lowered his sails and let the boat drift towards the shore.</p>
-            </div>
-            <div class="fs14 mt7">
-              <h1>Font size 14px</h1>
-              <h2>Header 2</h2>
-              <p>In a faraway land, there was a beautiful sea that stretched as far as the eye could see. The sea was known for its mysterious depths and powerful waves, which had been explored by many brave sailors over the years. One day, a young man named Jack decided to set out on a journey to explore the sea and discover its secrets.</p>
-              <p>Jack had always been fascinated by the stories he had heard about the sea, and he wanted to see it for himself. He packed his bags with all the necessary supplies and set off on his journey. As he sailed across the open waters, he felt a sense of excitement and anticipation. He knew that he was about to embark on an adventure that would change his life forever.</p>
-              <h3>Header 3</h3>
-              <p>As he approached the sea, Jack saw how vast and majestic it was. The waves were rolling in, creating a symphony of sound that filled the air. Jack felt a deep connection to the sea, as if it were calling him to come closer. He lowered his sails and let the boat drift towards the shore.</p>
-              <h4>Header 4</h4>
-              <p>As he approached the sea, Jack saw how vast and majestic it was. The waves were rolling in, creating a symphony of sound that filled the air. Jack felt a deep connection to the sea, as if it were calling him to come closer. He lowered his sails and let the boat drift towards the shore.</p>
-              <h5>Header 5</h5>
-              <p>As he approached the sea, Jack saw how vast and majestic it was. The waves were rolling in, creating a symphony of sound that filled the air. Jack felt a deep connection to the sea, as if it were calling him to come closer. He lowered his sails and let the boat drift towards the shore.</p>
-            </div>
-            <div class="fs12 mt7">
-              <h1>Font size 12px</h1>
-              <h2>Header 2</h2>
-              <p>In a faraway land, there was a beautiful sea that stretched as far as the eye could see. The sea was known for its mysterious depths and powerful waves, which had been explored by many brave sailors over the years. One day, a young man named Jack decided to set out on a journey to explore the sea and discover its secrets.</p>
-              <p>Jack had always been fascinated by the stories he had heard about the sea, and he wanted to see it for himself. He packed his bags with all the necessary supplies and set off on his journey. As he sailed across the open waters, he felt a sense of excitement and anticipation. He knew that he was about to embark on an adventure that would change his life forever.</p>
-              <h3>Header 3</h3>
-              <p>As he approached the sea, Jack saw how vast and majestic it was. The waves were rolling in, creating a symphony of sound that filled the air. Jack felt a deep connection to the sea, as if it were calling him to come closer. He lowered his sails and let the boat drift towards the shore.</p>
-              <h4>Header 4</h4>
-              <p>As he approached the sea, Jack saw how vast and majestic it was. The waves were rolling in, creating a symphony of sound that filled the air. Jack felt a deep connection to the sea, as if it were calling him to come closer. He lowered his sails and let the boat drift towards the shore.</p>
-              <h5>Header 5</h5>
-              <p>As he approached the sea, Jack saw how vast and majestic it was. The waves were rolling in, creating a symphony of sound that filled the air. Jack felt a deep connection to the sea, as if it were calling him to come closer. He lowered his sails and let the boat drift towards the shore.</p>
-            </div>
-            <div class="fs20 mt7">
-              <p class="fs20">Headers test 20px</p>
-              <hr />
-              <h1>In a faraway land, there was a beautiful sea that stretched as far as the eye could see. The sea was known for its mysterious depths and powerful waves, which had been explored by many brave sailors over the years. One day, a young man named Jack decided to set out on a journey to explore the sea and discover its secrets.</h1>
-              <h2>Jack had always been fascinated by the stories he had heard about the sea, and he wanted to see it for himself. He packed his bags with all the necessary supplies and set off on his journey. As he sailed across the open waters, he felt a sense of excitement and anticipation. He knew that he was about to embark on an adventure that would change his life forever.</h2>
-              <h3>As he approached the sea, Jack saw how vast and majestic it was. The waves were rolling in, creating a symphony of sound that filled the air. Jack felt a deep connection to the sea, as if it were calling him to come closer. He lowered his sails and let the boat drift towards the shore.</h3>
-              <h4>When he reached the beach, Jack stepped onto the sand and took a deep breath. The salty air filled his lungs, and he felt alive. He looked up at the sky and saw the sun shining brightly above him. It was a perfect day to begin his exploration.</h4>
-            </div>
-            <div class="fs16 mt7">
-              <p class="fs20">Headers test 16px</p>
-              <hr />
-              <h1>In a faraway land, there was a beautiful sea that stretched as far as the eye could see. The sea was known for its mysterious depths and powerful waves, which had been explored by many brave sailors over the years. One day, a young man named Jack decided to set out on a journey to explore the sea and discover its secrets.</h1>
-              <h2>Jack had always been fascinated by the stories he had heard about the sea, and he wanted to see it for himself. He packed his bags with all the necessary supplies and set off on his journey. As he sailed across the open waters, he felt a sense of excitement and anticipation. He knew that he was about to embark on an adventure that would change his life forever.</h2>
-              <h3>As he approached the sea, Jack saw how vast and majestic it was. The waves were rolling in, creating a symphony of sound that filled the air. Jack felt a deep connection to the sea, as if it were calling him to come closer. He lowered his sails and let the boat drift towards the shore.</h3>
-              <h4>When he reached the beach, Jack stepped onto the sand and took a deep breath. The salty air filled his lungs, and he felt alive. He looked up at the sky and saw the sun shining brightly above him. It was a perfect day to begin his exploration.</h4>
-            </div>
-            <div class="fs14 mt7">
-              <p class="fs20">Headers test 14px</p>
-              <hr />
-              <h1>In a faraway land, there was a beautiful sea that stretched as far as the eye could see. The sea was known for its mysterious depths and powerful waves, which had been explored by many brave sailors over the years. One day, a young man named Jack decided to set out on a journey to explore the sea and discover its secrets.</h1>
-              <h2>Jack had always been fascinated by the stories he had heard about the sea, and he wanted to see it for himself. He packed his bags with all the necessary supplies and set off on his journey. As he sailed across the open waters, he felt a sense of excitement and anticipation. He knew that he was about to embark on an adventure that would change his life forever.</h2>
-              <h3>As he approached the sea, Jack saw how vast and majestic it was. The waves were rolling in, creating a symphony of sound that filled the air. Jack felt a deep connection to the sea, as if it were calling him to come closer. He lowered his sails and let the boat drift towards the shore.</h3>
-              <h4>When he reached the beach, Jack stepped onto the sand and took a deep breath. The salty air filled his lungs, and he felt alive. He looked up at the sky and saw the sun shining brightly above him. It was a perfect day to begin his exploration.</h4>
-            </div>
-            <div class="fs12 mt7">
-              <p class="fs20">Headers test 12px</p>
-              <hr />
-              <h1>In a faraway land, there was a beautiful sea that stretched as far as the eye could see. The sea was known for its mysterious depths and powerful waves, which had been explored by many brave sailors over the years. One day, a young man named Jack decided to set out on a journey to explore the sea and discover its secrets.</h1>
-              <h2>Jack had always been fascinated by the stories he had heard about the sea, and he wanted to see it for himself. He packed his bags with all the necessary supplies and set off on his journey. As he sailed across the open waters, he felt a sense of excitement and anticipation. He knew that he was about to embark on an adventure that would change his life forever.</h2>
-              <h3>As he approached the sea, Jack saw how vast and majestic it was. The waves were rolling in, creating a symphony of sound that filled the air. Jack felt a deep connection to the sea, as if it were calling him to come closer. He lowered his sails and let the boat drift towards the shore.</h3>
-              <h4>When he reached the beach, Jack stepped onto the sand and took a deep breath. The salty air filled his lungs, and he felt alive. He looked up at the sky and saw the sun shining brightly above him. It was a perfect day to begin his exploration.</h4>
-            </div>
-            <h2>The Sea: A Story of Adventure and Discovery</h2>
-            <p>In a faraway land, there was a beautiful sea that stretched as far as the eye could see. The sea was known for its mysterious depths and powerful waves, which had been explored by many brave sailors over the years. One day, a young man named Jack decided to set out on a journey to explore the sea and discover its secrets.</p>
-            <p>Jack had always been fascinated by the stories he had heard about the sea, and he wanted to see it for himself. He packed his bags with all the necessary supplies and set off on his journey. As he sailed across the open waters, he felt a sense of excitement and anticipation. He knew that he was about to embark on an adventure that would change his life forever.</p>
-            <p>As he approached the sea, Jack saw how vast and majestic it was. The waves were rolling in, creating a symphony of sound that filled the air. Jack felt a deep connection to the sea, as if it were calling him to come closer. He lowered his sails and let the boat drift towards the shore.</p>
-            <p>When he reached the beach, Jack stepped onto the sand and took a deep breath. The salty air filled his lungs, and he felt alive. He looked up at the sky and saw the sun shining brightly above him. It was a perfect day to begin his exploration.</p>
-            <p>Jack began walking along the shore, taking in the beauty of the sea. He watched the waves crashing against the rocks, creating a spray of water that shimmered in the sunlight. He listened to the seagulls flying overhead, their cries echoing across the horizon.</p>
-            <figure>
-              <img src="https://anapa-surfing.ru/data/articles/photos/412/24958842-1985911258085644-8924492843955900298-o.jpg" alt="" />
-              <figcaption>Ivan backloop</figcaption>
-            </figure>
-            <p>After walking for some time, Jack came upon a small fishing village. The villagers were friendly and welcoming, and they invited Jack to stay for a while. Jack accepted their offer and spent several days learning about their way of life. He helped them with their fishing and learned about the local customs and traditions.</p>
-            <p>One day, while sitting on the dock, Jack noticed something strange in the distance. There was a dark cloud on the horizon, moving towards them. The villagers became worried, and Jack realized that a storm was approaching.</p>
-            <p>The storm hit the village with full force, bringing strong winds and heavy rain. Jack huddled in a corner, trying to stay dry. When the storm finally passed, Jack emerged from his hiding place and looked around.</p>
-            <blockquote>Jack began walking along the shore, taking in the beauty of the sea. He watched the waves crashing against the rocks, creating a spray of water that shimmered in the sunlight. He listened to the seagulls flying overhead, their cries echoing across the horizon.</blockquote>
-            <h2>Waves</h2>
-            <p>The waves were always there, crashing against the shore. They were a constant reminder of the power and beauty of nature. The waves came in all shapes and sizes, from gentle ripples to towering breakers.</p>
-            <p>Some people feared the waves, seeing them as a threat. But others saw them as something to be admired and respected. The waves could be calm and peaceful, or they could be wild and unpredictable.</p>
-            <p>One day, I decided to go to the beach and watch the waves. I sat on the sand and watched as they rolled in, one after another. I listened to their rhythmic sound and felt the spray of water on my face.</p>
-            <p>I watched as the sun set over the horizon, casting a golden glow over the waves. It was a beautiful sight, and I knew that I would never forget it.</p>
-            <p>As I walked back home, I thought about the waves and what they meant to me. They were more than just water moving up and down. They were symbols of life's ups and downs, of its beauty and its power.</p>
-            <h2>Table demo</h2>
-            <table class="maxw">
-              <tr>
-                <th class="w40">#</th>
-                <th>Name</th>
-                <th class="w80">Age</th>
-                <th>City</th>
-              </tr>
-              <tr>
-                <th>1</th>
-                <td>Andrey</td>
-                <td>38</td>
-                <td>Anapa</td>
-              </tr>
-              <tr>
-                <th>2</th>
-                <td>Anna</td>
-                <td>35</td>
-                <td>Krasnodar</td>
-              </tr>
-              <tr>
-                <th>3</th>
-                <td>Viktor</td>
-                <td>29</td>
-                <td>Moscow</td>
-              </tr>
-            </table>
-            <h2>Lists demo</h2>
-            <h3>Unordered list</h3>
-            <ul>
-              <li>One</li>
-              <li>Two</li>
-              <ul>
-                <li>One</li>
-                <li>Two</li>
-                <ul>
-                  <li>One</li>
-                  <li>Two</li>
-                  <li>Three</li>
-                </ul>
-                <li>Three</li>
-              </ul>
-              <li>Three</li>
-            </ul>
-            <h3>Ordered list</h3>
-            <ol>
-              <li>One</li>
-              <li>Two</li>
-              <ol>
-                <li>One</li>
-                <li>Two</li>
-                <ol>
-                  <li>One</li>
-                  <li>Two</li>
-                  <li>Three</li>
-                </ol>
-                <li>Three</li>
-              </ol>
-              <li>Three</li>
-            </ol>
-            <h3>Definition list</h3>
-            <dl>
-              <dt>One</dt>
-              <dd>The firts number</dd>
-              <dt>Two</dt>
-              <dd>The second number</dd>
-              <dt>Three</dt>
-              <dd>The third number</dd>
-            </dl>
-          </div>
-        </div>
-        <div class="c1">
-          <h3><a class="link" x-modal-open="modalScroll">Scroll</a></h3>
-        </div>
-        <div class="c1">
-          <h3><a class="link" x-modal-open="modalSheets">Sheets</a></h3>
-          <div x-sheets class="sheets-example unselectable">
-            <div class="button--tabs">
-              <a class="button hidden" x-sheet-open="sheet0">First</a>
-              <a class="button active" x-sheet-open="sheetA">Bird</a>
-              <a class="button" x-sheet-open="sheetB">Sea</a>
-              <a class="button hidden" x-sheet-open="sheetC">Last</a>
-            </div>
-            <div class="mt3">
-              <div x-sheet="sheetA">Once I saw a little bird outside my window. It was chirping happily and looking for food. I put some seeds on the windowsill, and it ate them right away.</div>
-              <div x-sheet="sheetB">Once I saw a ship on the sea. It was sailing smoothly and leaving a trail in the water. The sun was setting, making the scene even more beautiful.
-                <div x-sheets class="sheets-example mt3">
-                  <div class="button--tabs">
-                    <a class="button" x-sheet-open="sheetA1">Bird</a>
-                    <a class="button" x-sheet-open="sheetB1">Sea</a>
-                  </div>
-                  <div class="mt3">
-                    <div x-sheet="sheetA1">Once I saw a little bird outside my window. It was chirping happily and looking for food. I put some seeds on the windowsill, and it ate them right away.</div>
-                    <div x-sheet="sheetB1">Once I saw a ship on the sea. It was sailing smoothly and leaving a trail in the water. The sun was setting, making the scene even more beautiful.</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div x-sheets class="mt3 flex aic gap2 sheets-example">
-            <div class="button--tabs">
-              <a class="button active" x-sheet-open="sheetHappy">Happy</a>
-              <a class="button" x-sheet-open="sheetSad">Sad</a>
-            </div>
-            <div class="fs30">
-              <div x-sheet="sheetHappy">🙂</div>
-              <div x-sheet="sheetSad">😕</div>
-            </div>
-          </div>
-        </div>
-        <div class="c1">
-          <h3><a class="link" x-modal-open="modalSlider">Slider</a></h3>
-          <style>.slider .slider-item:first-child img{border-radius:var(--space-3)0 0 var(--space-3)}.slider .slider-item:last-child img{border-radius:0 var(--space-3)var(--space-3)0}</style>
-          <div x-slider='{"gap":2}' class="ratio4x3 r3">
-            <div><img data-srcset="https://anapa-surfing.ru/-/data/articles/photos/416/800x600q80c/img-0430.jpg 2x" alt=""></div>
-            <div><img data-src="https://anapa-surfing.ru/-/data/articles/photos/416/800x600q80c/img-0320.jpg" alt=""></div>
-            <div><img data-src="https://anapa-surfing.ru/-/data/articles/photos/416/800x600q80c/img-0401.jpg" alt=""></div>
-            <div><img data-src="https://anapa-surfing.ru/-/data/articles/photos/416/800x600q80c/img-0450.jpg" alt=""></div>
-            <div><img data-src="https://anapa-surfing.ru/-/data/articles/photos/416/800x600q80c/img-0405.jpg" alt=""></div>
-          </div>
-          <div class="mt2 touch-hide">Move cursor on photo.</div>
-          <div class="mt2 touch-show">Drag left or right</div>
-          <div x-modal="modalSlider">
-            <div class="h1">Slider</div>
-            <p>Hover and mouseover photos slider.</p>
-            <p>Working only on desktops.</p>
-            <p><code>✍🏻 Documentation in progress</code></p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section class="mt7 px5 m:px6 l:px8">
-    <div class="container max1000">
-      <div class="grid g1 m:g2 gap6">
-        <div class="c1 ac">
-          <h2>CSS</h2>
-          <ul class="reset fs18 flow s1" style="column-count:2">
-            <li><a class="link" x-modal-open="modalBreakpoints">Breakpoints</a></li>
-            <li><a class="link" x-modal-open="modalReset">Reset</a></li>
-            <li><a class="link" x-modal-open="modalSpaces">Spaces</a></li>
-            <li><a class="link" x-modal-open="modalLinks">Links</a></li>
-            <li><a class="link" x-modal-open="modalTypo">Typo</a></li>
-            <li><a class="link" x-modal-open="modalForms">Forms</a></li>
-            <li><a class="link" x-modal-open="modalHelpers">Helpers</a></li>
-            <li><a class="link" x-modal-open="modalButtons">Buttons</a></li>
-            <li><a class="link" x-modal-open="modalGrid">Grid</a></li>
-            <li><a class="link" x-modal-open="modalFlex">Flex</a></li>
-            <li><a class="link" x-modal-open="modalFlow">Flow</a></li>
-            <li><a class="link" x-modal-open="modalIcons">Icons</a></li>
-            <li><a class="link" x-modal-open="modalColors">Colors</a></li>
-          </ul>
-        </div>
-        <div class="c1 ac">
-          <h2>JS</h2>
-          <ul class="reset fs18 flow s1" style="column-count:2">
-            <li><a class="link" x-modal-open="modalAnimate">Animate</a></li>
-            <li><a class="link" x-modal-open="modalAppear">Appear</a></li>
-            <li><a class="link" x-modal-open="modalDevice">Device</a></li>
-            <li><a class="link" x-modal-open="modalForm">Form</a></li>
-            <li><a class="link" x-modal-open="modalHover">Hover</a></li>
-            <li><a class="link" x-modal-open="modalLazyload">Lazyload</a></li>
-            <li><a class="link" x-modal-open="modalLib">Lib</a></li>
-            <li><a class="link" x-modal-open="modalLoadmore">Loadmore</a></li>
-            <li><a class="link" x-modal-open="modalModal">Modal</a></li>
-            <li><a class="link" x-modal-open="modalScroll">Scroll</a></li>
-            <li><a class="link" x-modal-open="modalSheets">Sheets</a></li>
-            <li><a class="link" x-modal-open="modalSlider">Slider</a></li>
-            <li><a class="link" x-modal-open="modalSticky">Sticky</a></li>
-          </ul>
-        </div>
-        <div class="c1 m:c2 ac fw600 flex fc m:fr jcc gap2">
-          <div>⚠️</div>
-          <div>Documentation in progress, read details in code</div>
-          <div>⚠️</div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section class="section-header mt8 px5 m:px6 l:px8">
-    <h2 class="ac">Start usage</h2>
-  </section>
-  <div class="element1" x-animate='{
-    "start": "100vh",
-    "end": "-100px",
-    "functionName": "element1",
-    "class": "active",
-    "classRemove": true
-  }'>
-    <div class="element1-figure"></div>
-  </div>
-  <section class="section-content mt7 px5 m:px6 l:px8">
-    <div class="container max700">
-      <h3>HTML</h3>
-      <p>Manually download <a class="button button--label" href="https://cdn.jsdelivr.net/gh/andreyshpigunov/x@latest/dist/x.js">x.js</a> and <a class="button button--label" href="https://cdn.jsdelivr.net/gh/andreyshpigunov/x@latest/dist/x.css">x.css</a> and connect them in HTML.</p>
-      <p>In the <code>&lt;head&gt;</code> tag, as first style.</p>
-      <div class="codeBlock">
-        <code>&lt;link rel="stylesheet" href="x.css"/&gt;</code>
-      </div>
-      <p>At the end of page, before <code>&lt;/body&gt;</code> tag, as first script.</p>
-      <div class="codeBlock">
-        <code>&lt;script src="x.js"&gt;&lt;/script&gt;</code>
-        <code>&lt;script&gt;x.init();&lt;/script&gt;</code>
-      </div>
-      <hr class="my7" />
-      <h3>NPM</h3>
-      <p>Install package in project folder:</p>
-      <div class="codeBlock">
-        <code>$ npm i @andreyshpigunov/x</code>
-      </div>
-      <p>Import module in app.js:</p>
-      <div class="codeBlock">
-        <code>import { x } from '@andreyshpigunov/x';</code>
-        <code>x.init();</code>
-      </div>
-      <p>Best way to connect styles, download them from CDN and import manually in app.css:</p>
-      <div class="codeBlock">
-        <code>@import "../components/x.css";</code>
-      </div>
-      <hr class="my7" />
-      <h3>CDN links</h3>
-      <p class="breakWord">
-        Latest release:<br>
-        <a href="https://cdn.jsdelivr.net/gh/andreyshpigunov/x@1.0.0/dist/x.css">https://cdn.jsdelivr.net/gh/andreyshpigunov/x@1.0.0/dist/x.css</a><br>
-        <a href="https://cdn.jsdelivr.net/gh/andreyshpigunov/x@1.0.0/dist/x.js">https://cdn.jsdelivr.net/gh/andreyshpigunov/x@1.0.0/dist/x.js</a>
-      </p>
-      <p class="breakWord">
-        Latest build:<br>
-        <a href="https://cdn.jsdelivr.net/gh/andreyshpigunov/x@latest/dist/x.css">https://cdn.jsdelivr.net/gh/andreyshpigunov/x@latest/dist/x.css</a><br>
-        <a href="https://cdn.jsdelivr.net/gh/andreyshpigunov/x@latest/dist/x.js">https://cdn.jsdelivr.net/gh/andreyshpigunov/x@latest/dist/x.js</a>
-      </p>
-      <hr class="my7" />
-      <h3>Project on GitHub</h3>
-      <p><a href="https://github.com/andreyshpigunov/x">https://github.com/andreyshpigunov/x</a></p>
-      <hr class="my7" />
-    </div>
-  </section>
-  <div x-modal="modalBreakpoints" class="modal--hash" data-window-class="max1000">
-      <h2>Breakpoints</h2>
-      <p>Mobile first breakpoints</p>
-      <p>
-        <code>s</code>, <code>m</code>, <code>l</code>, <code>xl</code> use <code>min-size</code>
-      </p>
-      <pre class="fs14 mono">
----------------------------
-|  s  |  m  |  l   |  xl  |
----------------------------
-|  0  | 600 | 1000 | 1400 |
----------------------------</pre>
-    <p>
-      <code>s</code> - default size, not using prefix <code>s:</code><br>
-      <code>m</code> - medium size<br>
-      <code>l</code> - large size<br>
-      <code>xl</code> - xlarge size
-    </p>
-    <h3>Custom media</h3>
-    <p>X use <a href="https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media" target="_blank">PostCSS custom media plugin</a> for compiling styles.</p>
-    <pre class="fs14 mono">
-<span class="op4">/* Setting for PostCSS custom media plugin */</span>
-@custom-media --small  (min-width: 0px);
-@custom-media --medium (min-width: 600px);
-@custom-media --large  (min-width: 1000px);
-@custom-media --xlarge (min-width: 1400px);
-@custom-media --dark (prefers-color-scheme: dark);</pre>
-  </div>
-  <div x-modal="modalReset" class="modal--hash" data-window-class="max1000">
-    <h2>Reset</h2>
-    <p>Global styles reset and base variables.</p>
-    <h3>Variables</h3>
-    <pre class="fs14 mono">
---line-height: 1.5;
---font-color: #000;
---font-size-coeff: 62.5%;
---font-size: 1.6rem;
---font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
---font-family-mono: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
---background-color: #fff;</pre>
-  </div>
-  <div x-modal="modalSpaces" class="modal--hash" data-window-class="max1000">
-    <h2>Spaces</h2>
-    <p>Global spaces.</p>
-    <p class="fs12">
-      1rem = 10px by default (16px * var(--font-size-coeff)<br>
-      16px - default font size in most browsers
-    </p>
-    <h3>Variables</h3>
-    <pre class="fs14 mono">
---space-0:  0;
---space-1:  0.4rem;
---space-2:  0.8rem;
---space-3:  1.2rem;
---space-4:  1.6rem;
---space-5:  2.4rem;
---space-6:  3.2rem;
---space-7:  4.8rem;
---space-8:  6.4rem;
---space-9:  9.6rem;
---space-10: 12.8rem;</pre>
-  </div>
-  <div x-modal="modalLinks" class="modal--hash" data-window-class="max1000">
-    <h2>Links</h2>
-    <p>Links styling.</p>
-    <h3>Elements</h3>
-    <pre class="fs14 mono">
-a
-a.link
-a.hover
-a.active
-a.link--noline
-a.link--underline
-a.link--dashed
-a.link--dotted
-a.link--wavy</pre>
-    <h3>Example</h3>
-    <div class="flex gap4 m:gap6 fs20 m:fs24">
-      <a class="link link--noline">noline</a>
-      <a class="link link--underline">underline</a>
-      <a class="link link--dashed">dashed</a>
-      <a class="link link--dotted">dotted</a>
-      <a class="link link--wavy">wavy</a>
-    </div>
-    <h3>Variables</h3>
-    <pre class="fs14 mono">
---link-color: #0060bb;
---link-decoration-line: underline;
---link-decoration-style: solid;
-<span class="op4">/* Additional variables and their default values: */</span>
---link-color-hover: var(--link-color);
---link-color-visited: var(--link-color);
---link-decoration-line-hover: var(--link-decoration-line-hover, var(--link-decoration-line));
---link-decoration-style-hover: var(--link-decoration-style-hover, var(--link-decoration-style));
---link-decoration-thickness: .06em;
---link-decoration-color: color-mix(in srgb, currentcolor, transparent 75%);
---link-decoration-color-hover: currentcolor;
---link-decoration-color-visited: currentcolor;
---link-underline-offset: .25em;
---link-transition: all .1s ease-out;</pre>
-  </div>
-  <div x-modal="modalIcons" class="modal--hash" data-window-class="max1000">
-    <h2>Icons</h2>
-    <div class="mt6">
-      <pre class="fs14 mono">.icon - icon with default size 1em
-.icon--[10-60] step 2 (m,l) - modifier with size in px</pre>
-    </div>
-  </div>
-  <div x-modal="modalColors" class="modal--hash" data-window-class="max1000">
-    <h2>Colors</h2>
-    <div class="mt6">
-      <pre class="fs14 mono"><span class="textPrimary">.colorPrimary</span>
-<span class="textSuccess">.colorSuccess</span>
-<span class="textWarning">.colorWarning</span>
-<span class="textDanger">.colorDanger</span>
-<span class="bgPrimary textWhite button button--label">.bgPrimary</span>
-<span class="bgSuccess textWhite button button--label">.bgSuccess</span>
-<span class="bgWarning textWhite button button--label">.bgWarning</span>
-<span class="bgDanger textWhite button button--label">.bgDanger</span>
-<span class="bgGrey textWhite button button--label">.bgGrey</span>
-.color[ColorName] (d) - text color
-.bg[ColorName] (d) — background color</pre>
-    </div>
-    <div class="mt6">All color names here: <a class="button button--label bgBeige" href="https://147colors.com" target="_blank"><div class="strike fw700 mr1">147</div> Colors →</a></div>
-    <div class="mt2">Colors by tones: <a class="button button--label" href="https://colorscheme.ru/html-colors.html" target="_blank">colorscheme.ru</a></div>
-  </div>
-  <div x-modal="modalTypo" class="modal--hash" data-window-class="max1000">
-    <h2>Typo</h2>
-    <h3>Elements</h3>
-    <pre class="fs14 mono">
-.h[1-6]
-.mono
-.italic
-.strike
-.fs[10-19] step 1 (m,l,xl) - size in rem - 1.0, 1.1, 1.2, ..., 1.9
-.fs[20-80] step 2 (m,l,xl) - size in rem - 2.0, 2.2, 2.4, ..., 8.0
-.fw[100-900] step 100 (m,l,xl)
-.ls[0-4] (m,l,xl)
-.lh[0-9] (m,l,xl)  - values: 1.0-1.9</pre>
-    <h3>Variables</h3>
-    <pre class="fs14 mono">
---headers-margin-top: 1em;
---headers-margin-bottom: .75em;
---headers-font-family: var(--font-family);
---headers-font-weight: 700;
---headers-font-color: var(--font-color);
---h1-font-size: 3.2rem;
---h2-font-size: 2.4rem;
---h3-font-size: 2.0rem;
---h4-font-size: 1.6rem;
---h5-font-size: 1.4rem;
---h6-font-size: 1.2rem;
---h1-line-height: 1.3;
---h2-line-height: 1.4;
---paragraph-margin: 1em;
---figure-margin: 2.5em auto 2em;
---figcaption-margin-top: .5em;
---figcaption-font-size: var(--font-size);
---figcaption-color: #999;
---blockquote-margin: 2em 0;
---blockquote-padding: 1em 2em;
---blockquote-border: solid .2em var(--font-color);
---table-padding: .5em .75em;
---table-border: 1px solid #ccc;
---table-header-font-weight: 700;</pre>
-  </div>
-  <div x-modal="modalForms" class="modal--hash" data-window-class="max1000">
-    <h2>Forms</h2>
-    <p>Form elements.</p>
-    <h3>Modifiers</h3>
-    <pre class="fs14 mono">
-.error</pre>
-    <h3>Variables</h3>
-    <pre class="fs14 mono">
---forms-width: 400px;
---forms-height: 4rem;
---forms-side-padding: 1rem;
---forms-font-size: var(--font-size);
---forms-font-color: #000;
---forms-font-color-readonly: #000;
---forms-font-color-disabled: #666;
---forms-font-color-placeholder: #ccc;
---forms-border-width: .16rem;
---forms-border-radius: .8rem;
---forms-border-color: #ddd;
---forms-border-color-focused: #8cf;
---forms-border-color-error: #f00;
---forms-border-color-readonly: #ddd;
---forms-border-color-disabled: #ddd;
---forms-background-color: #fff;
---forms-background-color-readonly: #fafafa;
---forms-background-color-disabled: #f6f6f6;</pre>
-  </div>
-  <div x-modal="modalButtons" class="modal--hash" data-window-class="max1000">
-    <h2>Buttons</h2>
-    <div class="flow s4">
-      <div class="flex fw gap4">
-        <button class="button button--label">Label</button>
-        <button class="button button--label button--primary">Label</button>
-        <button class="button button--label button--success">Label</button>
-        <button class="button button--label button--danger">Label</button>
-        <button class="button button--label button--warning">Label</button>
-        <button class="button button--label button--white">Label</button>
-        <button class="button button--label button--black">Label</button>
-        <button class="button button--label button--clear">Label</button>
-      </div>
-      <div class="flex fw gap4">
-        <button class="button fs12">Button</button>
-        <button class="button fs12 button--primary">Button</button>
-        <button class="button fs12 button--success">Button</button>
-        <button class="button fs12 button--danger">Button</button>
-        <button class="button fs12 button--warning">Button</button>
-        <button class="button fs12 button--white">Button</button>
-        <button class="button fs12 button--black">Button</button>
-        <button class="button fs12 button--clear">Button</button>
-      </div>
-      <div class="flex fw gap4">
-        <button class="button">Button</button>
-        <button class="button button--primary">Button</button>
-        <button class="button button--success">Button</button>
-        <button class="button button--danger">Button</button>
-        <button class="button button--warning">Button</button>
-        <button class="button button--white">Button</button>
-        <button class="button button--black">Button</button>
-        <button class="button button--clear">Button</button>
-      </div>
-      <div class="flex fw gap4">
-        <button class="button fs20">Button</button>
-        <button class="button fs20 button--primary">Button</button>
-        <button class="button fs20 button--success">Button</button>
-        <button class="button fs20 button--danger">Button</button>
-        <button class="button fs20 button--warning">Button</button>
-        <button class="button fs20 button--white">Button</button>
-        <button class="button fs20 button--black">Button</button>
-        <button class="button fs20 button--clear">Button</button>
-      </div>
-      <div class="flex fw gap4">
-        <button class="button fs24">Button</button>
-        <button class="button fs24 button--primary">Button</button>
-        <button class="button fs24 button--success">Button</button>
-        <button class="button fs24 button--danger">Button</button>
-        <button class="button fs24 button--warning">Button</button>
-        <button class="button fs24 button--white">Button</button>
-        <button class="button fs24 button--black">Button</button>
-        <button class="button fs24 button--clear">Button</button>
-      </div>
-    </div>
-    <h3>Elements</h3>
-    <pre class="fs14 mono">
-.button
-.button--label
-.button--primary
-.button--success
-.button--warning
-.button--danger
-.button--white
-.button--black
-.button--clear</pre>
-  <h3>Variables</h3>
-  <pre class="fs14 mono"><span class="op4">/* Required variables */</span>
---button-height-coeff: 2.5;
---button-side-padding-coeff: 1.25;
---button-color: var(--color-grey);
---button-font-color: #000;
---button-transition: all .1s ease-out;
---button-font-size: var(--font-size);
---button-transform: scale(1);
---button-transform-hover: scale(1);
---button-transform-active: scale(.98);
---button-transform-origin: center;
-<span class="op4">/* Additional variables and their default values: */
---button-height: 4rem;
---button-side-padding: 2rem;
---button-font-family: var(--font-family);
---button-font-weight: 400;
---button-disabled-opacity: .5;
---button-border-radius: calc(var(--button-font-size) * 0.6);
---button-color-hover: auto;
---button-color-active: auto;
---button-font-color-hover: auto;
---button-font-color-active: auto;</span></pre>
-  </div>
-  <div x-modal="modalFlex" class="modal--hash" data-window-class="max1000">
-    <h2>Flex</h2>
-    <p>Flexbox.</p>
-    <h3>Elements</h3>
-    <pre class="fs14 mono">
-.flex
-.flex.fr  (m,l,xl)  - flex row
-.flex.fc  (m,l,xl)  - flex column
-.flex.fw  (m,l,xl)  - flex wrap
-.flex.fnw (m,l,xl)  - flex nowrap
-<span class="op4">/* Align items */</span>
-.flex.ais  (m,l,xl)  - stretch
-.flex.aifs (m,l,xl)  - flex start
-.flex.aic  (m,l,xl)  - center
-.flex.aife (m,l,xl)  - flex end
-<span class="op4">/* Justify content */</span>
-.flex.jcfs (m,l,xl)  - flex start
-.flex.jcc  (m,l,xl)  - center
-.flex.jcfe (m,l,xl)  - flex end
-.flex.jcsb (m,l,xl)  - space between
-.flex.jcsa (m,l,xl)  - space around
-.flex.jcse (m,l,xl)  - space evenly
-.flex > .c[1-12]/[1-12] (m,l,xl) - column width "column/columns"</pre>
-  </div>
-  <div x-modal="modalGrid" class="modal--hash" data-window-class="max1000">
-    <h2>Grid</h2>
-    <p>Multicolumn adaptive grid (1–12 columns).</p>
-    <h3>Elements</h3>
-    <pre class="fs14 mono">
-.grid
-.grid.g[1-12]           (m,l,xl)  - columns limit in grid
-.grid > .c[1-12]        (m,l,xl)  - column width
-.grid > .c[1-12]/[1-12] (m,l,xl)  - columns range for content</pre>
-  </div>
-  <div x-modal="modalFlow" class="modal--hash" data-window-class="max1000">
-    <h2>Flow</h2>
-    <p>Vertical flow of elements with equal spaces between them.</p>
-    <h3>Elements</h3>
-    <pre class="fs14 mono">
-.flow
-.flow.s[0-10] (m,l,xl) - vertical space</pre>
-  </div>
-  <div x-modal="modalHelpers" class="modal--hash" data-window-class="max1000">
-    <h2>Helpers</h2>
-    <p>Helper classes.</p>
-    <h3>Elements</h3>
-    <pre class="fs14 mono">
-.container
-.unselectable
-.unclickable
-.upper
-.lower
-.capitalize
-.nowrap
-.hyphens
-.pointer    | cursor pointer
-.toe        | text overflow ellipsis
-.toe2       | toe 2 lines
-.toe3       | toe 3 lines
-.oh         | overflow hidden
-.touch-show | show on touch devices
-.touch-hide | hide on touch devices
-.rel        | position relative
-.abs        | position absolute
-.ins        | position absolute inset 0
-.fit-none (m,l,xl)    | object fit none
-.fit-cover (m,l,xl)   | object fit cover
-.fit-contain (m,l,xl) | object fit containt
-.t[0-10] (m,l,xl)  | top
-.b[0-10] (m,l,xl)  | bottom
-.z[0-10] (m,l,xl)  | z-index
-.op[0-10] (m,l,xl) | opacity
-.ratio1x1 (m,l,xl)
-.ratio2x1 (m,l,xl)
-.ratio3x1 (m,l,xl)
-.ratio4x1 (m,l,xl)
-.ratio3x2 (m,l,xl)
-.ratio4x3 (m,l,xl)
-.ratio16x9 (m,l,xl)
-.ratio1x2 (m,l,xl)
-.ratio1x3 (m,l,xl)
-.ratio1x4 (m,l,xl)
-.ratio2x3 (m,l,xl)
-.ratio3x4 (m,l,xl)
-.ratio9x16 (m,l,xl)
-.breakWord
-.visuallyHidden
-.invisible
-.scrollResponsive
-.hidden     =(s,m,l-xl)
-.hiddenNext =(s,m,l-xl)
-.fulscreen | min width and min height 100vw/vh
-.max (m,l,xl)  | max width 100%
-.w[10-190] step 10    (m,l,xl) | width
-.w[200-380] step 20   (m,l,xl)
-.w[400-1600] step 100 (m,l,xl)
-.max[10-190] step 10    (m,l,xl) | max width
-.max[200-380] step 20   (m,l,xl)
-.max[400-1600] step 100 (m,l,xl)
-.min[10-190] step 10    (m,l,xl) | min width
-.min[200-380] step 20   (m,l,xl)
-.min[400-1600] step 100 (m,l,xl)
-.block       (m,l,xl)
-.inline      (m,l,xl)
-.inlineBlock (m,l,xl)
-.al (m,l,xl) | aligh left
-.ar (m,l,xl) | align right
-.ac (m,l,xl) | align center
-.aj (m,l,xl) | align justify
-.m[0-10]  (m,l,xl)  | margin
-.mx[0-10] (m,l,xl) | margin x
-.my[0-10] (m,l,xl) | margin y
-.mt[0-10] (m,l,xl) | margin top
-.mb[0-10] (m,l,xl) | margin bottom
-.ml[0-10] (m,l,xl) | margin left
-.mr[0-10] (m,l,xl) | margin right
-.ma  (m,l,xl)  | margin auto
-.mxa (m,l,xl)
-.mya (m,l,xl)
-.mta (m,l,xl)
-.mba (m,l,xl)
-.mla (m,l,xl)
-.mra (m,l,xl)
-.p[0-10]  (m,l,xl) | padding
-.px[0-10] (m,l,xl) | padding x
-.py[0-10] (m,l,xl) | padding y
-.pt[0-10] (m,l,xl) | padding top
-.pb[0-10] (m,l,xl) | padding bottom
-.pl[0-10] (m,l,xl) | padding left
-.pr[0-10] (m,l,xl) | padding right
-.gap[0-10]  (m,l,xl)
-.gapx[0-10] (m,l,xl)
-.gapy[0-10] (m,l,xl)
-.r[0-10] (m,l,xl) | radius
-.r100    (m,l,xl) | radius 100%
-.sh[0-10] (m,l) | shadow
-.o[0-12] (m,l,xl) | order
-.noPrint</pre>
-    <h3>Variables</h3>
-    <pre class="fs14 mono">
---container-max-width: 1600px;
---shadow-1:  0 2px 4px #00000018;
---shadow-2:  0 4px 8px #00000018;
---shadow-3:  0 6px 12px #00000018;
---shadow-4:  0 8px 16px #00000018;
---shadow-5:  0 10px 20px #00000018;
---shadow-6:  0 12px 24px #00000018;
---shadow-7:  0 14px 28px #00000018;
---shadow-8:  0 16px 32px #00000018;
---shadow-9:  0 18px 36px #00000018;
---shadow-10: 0 20px 40px #00000018;</pre>
-    <h3>Shadows</h3>
-    <div class="grid g1 m:g2 l:g3 gap6">
-      <div class="c1 p6 r4 sh1">
-        --shadow-1
-      </div>
-      <div class="c1 p6 r4 sh2">
-        --shadow-2
-      </div>
-      <div class="c1 p6 r4 sh3">
-        --shadow-3
-      </div>
-      <div class="c1 p6 r4 sh4">
-        --shadow-4
-      </div>
-      <div class="c1 p6 r4 sh5">
-        --shadow-5
-      </div>
-      <div class="c1 p6 r4 sh6">
-        --shadow-6
-      </div>
-      <div class="c1 p6 r4 sh7">
-        --shadow-7
-      </div>
-      <div class="c1 p6 r4 sh8">
-        --shadow-8
-      </div>
-      <div class="c1 p6 r4 sh9">
-        --shadow-9
-      </div>
-      <div class="c1 p6 r4 sh10">
-        --shadow-10
-      </div>
-    </div>
-  </div>
-  <div x-modal="modalModal" class="modal--hash" data-window-class="max1000">
-    <h2>Modals</h2>
-    <nav class="modalNavigation sticky unselectable">
-      <div class="modalNavigation-inner">
-        <a x-scrollto='{"parent": "#modalModal .modal-outer", "target": "#modalModalMain", "offset": 100}'>Описание</a>
-        <a x-scrollto='{"parent": "#modalModal .modal-outer", "target": "#modalModalApi", "offset": 100}'>API</a>
-        <a x-scrollto='{"parent": "#modalModal .modal-outer", "target": "#modalModalEvents", "offset": 100}'>События</a>
-        <a x-scrollto='{"parent": "#modalModal .modal-outer", "target": "#modalModalCss", "offset": 100}'>CSS</a>
-        <a x-scrollto='{"parent": "#modalModal .modal-outer", "target": "#modalModalExamples", "offset": 100}'>Примеры</a>
-      </div>
-    </nav>
-    <div id="modalModalMain">
-      <p>Универсальные модальные окна.</p>
-      <p>Вызов модального окна:</p>
-      <div class="codeBlock">
-        <code>&lt;a x-modal-open="myModal"&gt;Open modal&lt;/a&gt;</code>
-      </div>
-      <p>Шаблон модального окна:</p>
-      <div class="codeBlock">
-        <code>&lt;div x-modal="myModal" class="[custom-classes]"</code>
-        <code>  data-window-class="[modal-window-classes]"&gt;</code>
-        <code>  &lt;p&gt;Hello modal!&lt;/p&gt;</code>
-        <code>  &lt;p&gt;&lt;a class="button modal-close"&gt;Close&lt;/a&gt;&lt;/p&gt; — optional</code>
-        <code>&lt;/div&gt;</code>
-      </div>
-      <p>
-        <code>[custom-classes]</code> — классы, которые будут добавлены элементу .modal после генерации модального окна на основе шаблона.<br>
-        <code>[modal-window-classes]</code> — классы, которые будут добавлены элементу .modal-window после генерации модального окна на основе шаблона.<br>
-        <code>.uniq</code> — класс, закрывающий все открытые окна при открытии данного окна, добавляется в <code>[custom-classes]</code>.<br>
-        <code>.hash</code> — если класс добавлен в <code>[custom-classes]</code>, окна, открываясь, будут добавлять хэш в конец адресной строки. Также при загрузке страницы с хэшем модального окна, оно автоматически будет открываться.
-      </p>
-      <p>Эффекты в <code>[custom-classes]</code>:</p>
-      <div class="codeBlock">
-        <code>.effectIn</code>
-        <code>.effectOut</code>
-        <code>.effectUp</code>
-        <code>.effectDown</code>
-        <code>.effectLeft</code>
-        <code>.effectRight</code>
-      </div>
-      <p>
-        После инициализации, шаблон модального окна преобразуется в готовый код, который добавляется в конце страницы перед <code>&lt;/body&gt;</code>. Если это поведение необходимо изменить, добавьте класс <code>.modal-here</code> элементу, в который вы хотите инициализировать модальные окна.
-      </p>
-      <p>Код инициализированного модального окна:</p>
-      <div class="codeBlock">
-        <code>&lt;div id="myModal" class="modal [custom-classes]"&gt;</code>
-        <code>  &lt;div class="modal-overlay">&lt;/div&gt;</code>
-        <code>  &lt;div class="modal-outer"&gt;</code>
-        <code>    &lt;div class="modal-inner"&gt;</code>
-        <code>      &lt;div class="modal-window [modal-window-classes]"&gt;</code>
-        <code>        ...</code>
-        <code>        Содержимое, которое было внутри</code>
-        <code>        тега с классом .modal-content</code>
-        <code>        ...</code>
-        <code>        &lt;div class="modal-rail"&gt;</code>
-        <code>          &lt;a role="button" class="modal-close"&gt;&lt;/a&gt;</code>
-        <code>        &lt;/div&gt;</code>
-        <code>      &lt;/div&gt;</code>
-        <code>    &lt;/div&gt;</code>
-        <code>  &lt;/div&gt;</code>
-        <code>&lt;/div&gt;</code>
-      </div>
-    </div>
-    <div id="modalModalApi" class="mt5">
-      <h3>API</h3>
-      <table class="dataTable">
-        <tr>
-          <th width="40%">Метод</th>
-          <th width="60%">Описание</th>
-        </tr>
-        <tr>
-          <td><code>x.modal.show(id)</code></td>
-          <td>Показывает модальное окно</td>
-        </tr>
-        <tr>
-          <td><code>x.modal.hide(id)</code></td>
-          <td>Скрывает модальное окно</td>
-        </tr>
-        <tr>
-          <td><code>x.modal.hideAll()</code></td>
-          <td>Скрывает все модальные окна</td>
-        </tr>
-        <tr>
-          <td><code>x.modal.isActive(id)</code></td>
-          <td>Проверяет активность модального окна</td>
-        </tr>
-      </table>
-    </div>
-    <div id="modalModalEvents" class="mt5">
-      <h3>События</h3>
-      <table class="dataTable">
-        <tr>
-          <th width="40%">Событие</th>
-          <th width="60%">Описание</th>
-        </tr>
-        <tr>
-          <td><code>modal:ready</code></td>
-          <td>Модальное окно открыто, но еще не показано</td>
-        </tr>
-        <tr>
-          <td><code>modal:open</code></td>
-          <td>Модальное окно открыто и показано</td>
-        </tr>
-        <tr>
-          <td><code>modal:close</code></td>
-          <td>Модальное окно закрыть</td>
-        </tr>
-      </table>
-      <p>Пример обработки:</p>
-      <div class="codeBlock">
-        <code>let modal = document.getElementById('modal-test')</code>
-        <code>modal.addEventListener('modal:ready', (event) => { ... })</code>
-        <code>modal.addEventListener('modal:open', (event) => { ... })</code>
-        <code>modal.addEventListener('modal:close', (event) => { ... })</code>
-      </div>
-    </div>
-    <div id="modalModalCss" class="mt5">
-      <h3>CSS</h3>
-      <table class="dataTable">
-        <tr>
-          <th width="40%">Переменная</th>
-          <th width="60%">Значение по умолчанию</th>
-        </tr>
-        <tr>
-          <td><code>--modal-margin-top</code></td>
-          <td><code>3vw</code></td>
-        </tr>
-        <tr>
-          <td><code>--modal-margin-bottom</code></td>
-          <td><code>3vw</code></td>
-        </tr>
-        <tr>
-          <td><code>--modal-margin-left</code></td>
-          <td><code>3vw</code></td>
-        </tr>
-        <tr>
-          <td><code>--modal-margin-right</code></td>
-          <td><code>3vw</code></td>
-        </tr>
-        <tr>
-          <td><code>--modal-padding-top</code></td>
-          <td><code>clamp(2.5rem, 4vw, 5rem)</code></td>
-        </tr>
-        <tr>
-          <td><code>--modal-padding-bottom</code></td>
-          <td><code>clamp(2.5rem, 4vw, 5rem)</code></td>
-        </tr>
-        <tr>
-          <td><code>--modal-padding-left</code></td>
-          <td><code>clamp(4rem, 4vw, 5rem)</code></td>
-        </tr>
-        <tr>
-          <td><code>--modal-padding-right</code></td>
-          <td><code>clamp(4rem, 4vw, 5rem)</code></td>
-        </tr>
-        <tr>
-          <td><code>--modal-background</code></td>
-          <td><code>#fff</code></td>
-        </tr>
-        <tr>
-          <td><code>--modal-box-shadow</code></td>
-          <td><code>0 10px 40px #00000044</code></td>
-        </tr>
-        <tr>
-          <td><code>--modal-border-radius</code></td>
-          <td><code>1.6rem</code></td>
-        </tr>
-        <tr>
-          <td><code>--modal-closer-area</code></td>
-          <td><code>4rem</code></td>
-        </tr>
-        <tr>
-          <td><code>--modal-closer-size</code></td>
-          <td><code>2.6rem</code></td>
-        </tr>
-        <tr>
-          <td><code>--modal-closer-width</code></td>
-          <td><code>0.2rem</code></td>
-        </tr>
-        <tr>
-          <td><code>--modal-closer-color</code></td>
-          <td><code>#ccc</code></td>
-        </tr>
-        <tr>
-          <td><code>--modal-closer-color-hover</code></td>
-          <td><code>#f00</code></td>
-        </tr>
-        <tr>
-          <td><code>--modal-overlay-background-color</code></td>
-          <td><code>#00000066</code></td>
-        </tr>
-      </table>
-    </div>
-    <div id="modalModalExamples" class="mt5">
-      <h3>Примеры</h3>
-      <p class="flex gap3">
-        <a role="button" class="button" x-modal-open="modalTest">Тестовое окошко</a>
-        <a role="button" class="button" onclick="x.modal.show('modalTest')"><code>x.modal.show('modalTest')</code></a>
-        <a role="button" class="button" x-modal-open="modalUniq">Уникальное окно</a>
-      </p>
-      <iframe height="720" style="width: 100%;" scrolling="no" title="Auto / Modal init" src="https://codepen.io/andreyshpigunov/embed/vYXZGpm?height=700&theme-id=dark&default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
-      <br>
-      <br>
-      <iframe height="800" style="width: 100%;" scrolling="no" title="Auto / Modals examples" src="https://codepen.io/andreyshpigunov/embed/KKgqzBE?height=800&theme-id=dark&default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
-    </div>
-  </div>
-  <div x-modal="modalTest" class="">
-    <h2>Тестовое окошко</h2>
-    <p>Вот так просто оно выглядит. Данная страница тоже показана в модальном окне.</p>
-    <a class="button modal-close">Закрыть</a>
-  </div>
-  <div x-modal="modalUniq" class="modal--uniq">
-    <h2>Уникальное окно</h2>
-    <p>Открыв это окно, вы закрыли все остальные окна на странице. Включая окно со страницей документации.</p>
-  </div>
-  <div x-modal="modalScroll" class="modal--hash" data-window-class="max1000">
-    <h2>Scroll</h2>
-    <nav class="modalNavigation sticky unselectable">
-      <div class="modalNavigation-inner">
-        <a x-scrollto='{"parent": "#modalScroll .modal-outer", "target": "#modalScrollMain", "offset": 100}'>Описание</a>
-        <a x-scrollto='{"parent": "#modalScroll .modal-outer", "target": "#modalScrollApi", "offset": 100}'>API</a>
-        <a x-scrollto='{"parent": "#modalScroll .modal-outer", "target": "#modalScrollParams", "offset": 100}'>Параметры</a>
-      </div>
-    </nav>
-    <div id="modalScrollMain">
-      <p>Прокрутка страницы к указанному элементу.</p>
-      <p>Краткий вызов:</p>
-      <div class="codeBlock">
-        <code>&lt;div id="top" class="top"&gt;&lt;/div&gt;</code>
-        <code>&lt;a x-scrollto="top"&gt;Наверх&lt;/a&gt;</code>
-        <code>&lt;a x-scrollto="#top"&gt;Наверх&lt;/a&gt;</code>
-      </div>
-      <p>Вызов с <a class="link link--dashed" x-scrollto='{"parent": "#modalScroll .modal-outer", "target": "#modalScrollParams"}'>параметрами</a> в формате JSON:</p>
-      <div class="codeBlock">
-        <code>&lt;a x-scrollto='{</code>
-        <code>  "parent": window,</code>
-        <code>  "target": "#top",</code>
-        <code>  "duration": 400,</code>
-        <code>  "offset": 0,</code>
-        <code>  "classActive": "active",</code>
-        <code>  "hash": false</code>
-        <code>}'&gt;Наверх&lt;/a&gt;</code>
-      </div>
-    </div>
-    <div id="modalScrollApi" class="mt5">
-      <h3>API</h3>
-      <p>Варианты вызовов:</p>
-      <div class="codeBlock">
-        <code>x.scroll.to('top')</code>
-        <code>x.scroll.to('#top')</code>
-        <code>let top = document.getElementById('top')</code>
-        <code>x.scroll.to(top)</code>
-        <code>x.scroll.to({</code>
-        <code>  parent: window,</code>
-        <code>  target: "#top",</code>
-        <code>  duration: 400,</code>
-        <code>  offset: 0,</code>
-        <code>  classActive: "active",</code>
-        <code>  hash: false</code>
-        <code>})</code>
-      </div>
-      <p>Метод поддерживает асинхронный вызов:</p>
-      <div class="codeBlock">
-        <code>x.scroll.to(element).then((e) => { alert('Готово!') })</code>
-      </div>
-    </div>
-    <div id="modalScrollParams" class="mt5">
-      <h3>Параметры вызова</h3>
-      <table class="dataTable">
-        <tr>
-          <th width="20%">Параметр</th>
-          <th width="20%">Формат</th>
-          <th width="20%">По умолчанию</th>
-          <th width="40%">Описание</th>
-        </tr>
-        <tr>
-          <td><code>parent</code></td>
-          <td><code>string, element</code></td>
-          <td><code>window</code></td>
-          <td><code>id</code>, селектор или элемент.</td>
-        </tr>
-        <tr>
-          <td><code>target</code></td>
-          <td><code>string, element</code></td>
-          <td><code></code></td>
-          <td>
-            <code>id</code>, селектор или элемент, к которому нужно совершить прокрутку.<br>
-            <b>Обязательный</b>
-          </td>
-        </tr>
-        <tr>
-          <td><code>duration</code></td>
-          <td><code>int</code></td>
-          <td><code>400</code></td>
-          <td>Продолжительность в мс.</td>
-        </tr>
-        <tr>
-          <td><code>offset</code></td>
-          <td><code>int</code></td>
-          <td><code>0</code></td>
-          <td>Отступ от верха окна при окончании прокрутки в px.</td>
-        </tr>
-        <tr>
-          <td><code>classActive</code></td>
-          <td><code>string</code></td>
-          <td><code>"active"</code></td>
-          <td>Класс, добавляемый к элементу, когда цель прокрутки находится в зоне видимости.</td>
-        </tr>
-        <tr>
-          <td><code>hash</code></td>
-          <td><code>bool</code></td>
-          <td><code>false</code></td>
-          <td>Добавлять хэш в адресной строке после прокрутки или нет.</td>
-        </tr>
-      </table>
-    </div>
-  </div>
-  <div x-modal="modalAnimate" class="modal--hash" data-window-class="max1000">
-    <h2>Animate</h2>
-    <nav class="modalNavigation sticky unselectable">
-      <div class="modalNavigation-inner">
-        <a x-scrollto='{"parent": "#modalAnimate .modal-outer", "target": "#modalAnimateMain", "offset": 100}'>About</a>
-        <a x-scrollto='{"parent": "#modalAnimate .modal-outer", "target": "#modalAnimateParams", "offset": 100}'>Params</a>
-        <a x-scrollto='{"parent": "#modalAnimate .modal-outer", "target": "#modalAnimateExamples", "offset": 100}'>Example</a>
-      </div>
-    </nav>
-    <div id="modalAnimateMain" class="mt5">
-      <p>Animating elements when scrolling the page.</p>
-      <p>Example of use with a trigger:</p>
-      <div class="codeBlock">
-        <code>&lt;div id="trigger"&gt;&lt;/div&gt;</code>
-        <code>&lt;div class="element" x-animate='{</code>
-        <code>  "parent": window,</code>
-        <code>  "trigger": "#trigger",</code>
-        <code>  "start": "120vh",</code>
-        <code>  "end": "0vh",</code>
-        <code>  "functionName": "coverOut",</code>
-        <code>  "class": "fixed",</code>
-        <code>  "classRemove": true</code>
-        <code>}'&gt;...&lt;/div&gt;</code>
-      </div>
-    </div>
-    <div id="modalAnimateParams" class="mt5">
-      <h3>Params</h3>
-      <table class="dataTable">
-        <tr>
-          <th width="25%">Param</th>
-          <th width="25%">Type</th>
-          <th width="50%">Description</th>
-        </tr>
-        <tr>
-            <td><code>parent</code></td>
-            <td><code>string</code></td>
-            <td>Scrolled parent element selector Default: <code>window</code>.</td>
-        </tr>
-        <tr>
-          <td><code>trigger</code></td>
-          <td><code>string</code></td>
-          <td>The element selector, whose position we are tracking when scrolling. If there is no <code>trigger</code>, the trigger is the animated element itself.</td>
-        </tr>
-        <tr>
-          <td><code>start</code></td>
-          <td><code>string</code></td>
-          <td>
-            The starting point of the animation (the distance from the top of the window in px, vh or %).<br>
-            <b>Required</b>
-          </td>
-        </tr>
-        <tr>
-          <td><code>end</code></td>
-          <td><code>string</code></td>
-          <td>
-            Animation end point (distance from the top of the window in px, vh or %).<br>
-            <b>Required</b>
-          </td>
-        </tr>
-        <tr>
-          <td><code>functionName</code></td>
-          <td><code>string</code></td>
-          <td>
-            The name of the global function that is performed when the tracked element is moved between the start and end points of the animation. The function receives an object with the <code>progress</code> parameter, which varies from 0 to 1.<br>
-            <b>Required</b>
-          </td>
-        </tr>
-        <tr>
-          <td><code>class</code></td>
-          <td><code>string</code></td>
-          <td>A class that is added to an animated element when it is in the process of being animated.</td>
-        </tr>
-        <tr>
-          <td><code>classRemove</code></td>
-          <td><code>bool = false</code></td>
-          <td>To delete or not the class set by the previous parameter after the end of the animation.</td>
-        </tr>
-      </table>
-      <p>If the animation is performed in a separate scrollable element, you need to add the <code>.animate-scrollarea</code> class to this element.</p>
-    </div>
-    <div id="modalAnimateExamples" class="mt5">
-      <h3>Example</h3>
-      <iframe height="400" style="width: 100%;" scrolling="no" title="Auto / Animation example" src="https://codepen.io/andreyshpigunov/embed/jOMwrGE?height=400&theme-id=dark&default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
-    </div>
-  </div>
-  <div x-modal="modalSheets" class="modal--hash" data-window-class="max1000">
-    <h2>Sheets</h2>
-    <nav class="modalNavigation sticky unselectable">
-      <div class="modalNavigation-inner">
-        <a x-scrollto='{"parent": "#modalSheets .modal-outer", "target": "#modalSheetsMain", "offset": 100}'>Описание</a>
-        <a x-scrollto='{"parent": "#modalSheets .modal-outer", "target": "#modalSheetsApi", "offset": 100}'>API</a>
-        <a x-scrollto='{"parent": "#modalSheets .modal-outer", "target": "#modalSheetsExamples", "offset": 100}'>Примеры</a>
-      </div>
-    </nav>
-    <div id="modalSheetsMain">
-      <p>Создает табы с содержимым.</p>
-      <p>Шаблон:</p>
-      <div class="codeBlock">
-        <code>&lt;div x-sheets&gt;</code>
-        <code>  &lt;a x-sheet-open="sheetA" class="active"&gt;Sheet&lt;/a&gt;</code>
-        <code>  &lt;a x-sheet-open="sheetB"&gt;Sheet&lt;/a&gt;</code>
-        <code>  &lt;div x-sheet="sheetA"&gt;Sheet content&lt;/div&gt;</code>
-        <code>  &lt;div x-sheet="sheetB"&gt;Sheet content&lt;/div&gt;</code>
-        <code>&lt;/div&gt;</code>
-      </div>
-      <p>Первый таб в шаблоне активен по умолчанию, для этого добавлен класс <code>.active</code>.</p>
-      <p>Табы и их содержимое можно свободно вкладывать в другие теги в пределах <code>x-sheets</code>.</p>
-    </div>
-    <div id="modalSheetsApi" class="mt5">
-      <h3>API</h3>
-      <table class="dataTable">
-        <tr>
-          <th width="40%">Метод</th>
-          <th width="60%">Описание</th>
-        </tr>
-        <tr>
-          <td><code>x.sheets.show(x-sheet)</code></td>
-          <td>Показывает нужный таб</td>
-        </tr>
-      </table>
-    </div>
-    <div id="modalSheetsExamples" class="mt5">
-      <h3>Примеры</h3>
-      <iframe height="300" style="width: 100%;" scrolling="no" title="Auto / Tab sheets" src="https://codepen.io/andreyshpigunov/embed/qBpJaeO?theme-id=dark&default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
-      <br>
-      <br>
-      <div class="sheets">
-        <div>
-          <a role="button" class="sheets-tab button" data-sheet="sheet1">Tab 1</a>
-          <a role="button" class="sheets-tab button" data-sheet="sheet2">Tab 2</a>
-          <a role="button" class="sheets-tab button" data-sheet="sheet3">Tab 3</a>
-        </div>
-        <div class="p2">
-          <div id="sheet1" class="sheets-body">Body 1</div>
-          <div id="sheet2" class="sheets-body">Body 2</div>
-          <div id="sheet3" class="sheets-body">Body 3</div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div x-modal="modalLoadmore" class="modal--hash" data-window-class="max1000">
-    <h2>Loadmore</h2>
-    <nav class="modalNavigation sticky unselectable">
-      <div class="modalNavigation-inner">
-        <a x-scrollto='{"parent": "#modalLoadmore .modal-outer", "target": "#modalLoadmoreMain", "offset": 100}'>Описание</a>
-        <a x-scrollto='{"parent": "#modalLoadmore .modal-outer", "target": "#modalLoadmoreParams", "offset": 100}'>Параметры</a>
-      </div>
-    </nav>
-    <div id="modalLoadmoreMain">
-      <p>Загрузка данных при прокрутке до элемента. Можно использовать как бесконечную прокрутку, добавив элемент в конце списка и подгружая в него данные, по мере его появления.</p>
-      <p>Пример использования с триггером:</p>
-      <div class="codeBlock">
-        <code>&lt;div data-loadmore='{</code>
-        <code>  "functionName": "load",</code>
-        <code>  "offset": 100</code>
-        <code>}'&gt;&lt;/div&gt;</code>
-        <code>&lt;script&gt;</code>
-        <code>  function load(page) { ... }</code>
-        <code>&lt;/script&gt;</code>
-      </div>
-      <p>При появлении блока с data-loadmore в границах экрана, будет выполнена функция, имя который указано в functionName. Функции будет передан параметр page, значение которого увеличивается с каждым вызовом.</p>
-      <p>Остановить выполнение функции можно методом:</p>
-      <div class="codeBlock">
-        <code>x.loadmore.unwatch()</code>
-      </div>
-    </div>
-    <div id="modalLoadmoreParams" class="mt5">
-      <h3>Параметры вызова</h3>
-      <table class="dataTable">
-        <tr>
-          <th width="20%">Параметр</th>
-          <th width="20%">Формат</th>
-          <th width="20%">По умолчанию</th>
-          <th width="40%">Описание</th>
-        </tr>
-        <tr>
-          <td><code>functionName</code></td>
-          <td><code>string</code></td>
-          <td></td>
-          <td>
-            Имя функции, которую нужно выполнить.<br>
-            <b>Обязательный</b>
-          </td>
-        </tr>
-        <tr>
-          <td><code>offset</code></td>
-          <td><code>int</code></td>
-          <td><code>0</code></td>
-          <td>Смещение выполнения за границу экрана. Например, если указать 100, то функция выполнится, когда до появления элемента на экране останется 100 и менее пикселей.</td>
-        </tr>
-      </table>
-      <p>Если анимация производится в отдельном прокручиваемом элементе, нужно добавить этому элементу класс <code>.animate-scrollarea</code>.</p>
-    </div>
-  </div>
-  <div x-modal="modalLazyload" class="modal--hash" data-window-class="max1000">
-    <h2>Lazyload</h2>
-    <p>Отложенная загрузка изображений.</p>
-    <p>В настоящее время большинство браузеров поддерживает нативную «ленивую загрузку» <code>loading="lazy"</code>, используйте данный плагин только в случае крайней необходимости. Например, иногда нужно отследить загрузилось ли изображение.</p>
-    <p>Пример нативного кода:</p>
-    <div class="codeBlock">
-      <code>&lt;img src="image.jpg" data-srcset="..." alt="" loading="lazy"/&gt;</code>
-    </div>
-    <p>Пример использования плагина:</p>
-    <div class="codeBlock">
-      <code>&lt;img class="lazyload" src="alpha.png" data-src="image.jpg" data-srcset="..." alt=""/&gt;</code>
-    </div>
-    <p>После загрузки изображения с классом <code>.lazyload</code>, к нему добавится класс <code>.loaded</code>.</p>
-  </div>
-  <div x-modal="modalAppear" class="modal--hash" data-window-class="max1000">
-    <h2>Appear</h2>
-    <p>Добавляет классы <code>.appeared</code> и <code>.visible</code> на элементе, появившемся в зоне видимости.</p>
-    <p>Пример использования:</p>
-    <div class="codeBlock">
-      <code>&lt;div x-appear&gt;...&lt;/div&gt;</code>
-    </div>
-    <p>Когда элемент появится в зоне видимости, к нему добавятся 2 класса, <code>.appeared</code> и <code>.visible</code>. Класс <code>.appeared</code> останется навсегда, а класс <code>.visible</code> удалится при исчезновении элемента из зоны видимости.</p>
-  </div>
-  <div x-modal="modalHover" class="modal--hash" data-window-class="max1000">
-    <h2>Hover</h2>
-    <p>Синхронизирует наведение <code>.hover</code> у отдельно расположенных элементов, имеющих общую ссылку. Для активации элементам нужно добавить класс <code>.syncHover</code>.</p>
-    <p>Пример использования:</p>
-    <div class="codeBlock">
-      <code>&lt;div class="product"&gt;</code>
-      <code>  &lt;div class="product-photo"&gt;</code>
-      <code>    &lt;a href="/product/" class="syncHover"&gt;</code>
-      <code>      &lt;img src="product.jpg" alt=""/&gt;</code>
-      <code>    &lt;/a&gt;</code>
-      <code>  &lt;div&gt;</code>
-      <code>  &lt;div class="product-title"&gt;</code>
-      <code>    &lt;a href="/product/" class="syncHover"&gt;Товар&lt;/a&gt;</code>
-      <code>  &lt;/div&gt;</code>
-      <code>&lt;/div&gt;</code>
-    </div>
-    <p>В данном примере при наведении на фото или название товара, обоим элементам <code>&lt;a&gt;</code> добавится класс <code>.hover</code>, так как у них одинаковая ссылка. Данный метод часто позволяет избежать нарушений в семантике, не оборачивая весь блок в тег <code>&lt;a&gt;</code>.</p>
-  </div>
-  <div x-modal="modalDevice" class="modal--hash" data-window-class="max1000">
-    <h2>Device</h2>
-    <p>Определяет устройство и браузер пользователя.</p>
-    <p>Использование:</p>
-    <div class="codeBlock">
-      <code>if (x.device.[name]) { ... }</code>
-    </div>
-    <p>
-      <code>name</code> — значения для проверки.<br>
-      Браузеры: <code>ie</code>, <code>firefox</code>, <code>safari</code>, <code>webkit</code>, <code>chrome</code>, <code>opera</code><br>
-      ОС и устройства: <code>windows</code>, <code>macos</code>, <code>linux</code>, <code>ios</code>, <code>ipad</code>, <code>ipod</code>, <code>iphone</code>, <code>android</code><br>
-      Мобильность: <code>mobile</code>, <code>desktop</code><br>
-      Поддержка js: <code>js</code>
-    </p>
-    <p>Примеры:</p>
-    <div class="codeBlock">
-      <code>if (x.device.ie) { ... }</code>
-      <code>if (x.device.windows) { ... }</code>
-      <code>if (x.device.iphone) { ... }</code>
-      <code>if (x.device.mobile) { ... }</code>
-      <code>if (x.device.js) { ... }</code>
-    </div>
-    <p>Определение размеров экрана:</p>
-    <div class="codeBlock">
-      <code>let width = x.device.width</code>
-      <code>let height = x.device.height</code>
-    </div>
-  </div>
-  <div x-modal="modalLib" class="modal--hash" data-window-class="max1000">
-    <h2>Lib</h2>
-    <p>Набор полезных методов.</p>
-    <h3>Шорткаты</h3>
-    <div class="codeBlock">
-      <code>qs: (s, o = document) => o.querySelector(s)</code>
-      <code>qsa: (s, o = document) => o.querySelectorAll(s)</code>
-    </div>
-    <p>Пример использования:</p>
-    <div class="codeBlock">
-      <code>x.lib.qs('.product-name')</code>
-      <code>x.lib.qsa('.product-item')</code>
-    </div>
-    <h3>Функции</h3>
-    <h4><code class="fs16">x.lib.hide(element)</code></h4>
-    <p>
-      Скрывает элемент, добавляя класс <code>.hidden</code>.<br>
-      <code>element</code> — селектор или элемент.
-    </p>
-    <h4><code class="fs16">x.lib.show(element)</code></h4>
-    <p>
-      Показывает элемент, убирая класс <code>.hidden</code>.<br>
-      <code>element</code> — селектор или элемент.
-    </p>
-    <h4><code class="fs16">x.lib.reload()</code></h4>
-    <p>Перезагружает страницу.</p>
-    <h4><code class="fs16">x.lib.reloadWithHash(hash)</code></h4>
-    <p>Перезагружает страницу, добавляя к ней указанный хэш.</p>
-    <h4><code class="fs16">x.lib.redirectTo(url)</code></h4>
-    <p>Перенаправляет на URL.</p>
-    <h4><code class="fs16">x.lib.updateURL(url, title)</code></h4>
-    <p>
-      Обновляет title и URL страницы без перезагрузки.<br>
-      Поддерживает добавлени хэша: <code>x.lib.updateURL('#ok')</code>
-    </p>
-    <h4><code class="fs16">x.lib.random(a, b)</code></h4>
-    <p>Создает произвольное число, больше <code>a</code> и меньше <code>b</code>.</p>
-    <h4><code class="fs16">x.lib.price(price)</code></h4>
-    <p>Форматирует цену в вид: <code>9 999 999.99</code></p>
-    <h4><code class="fs16">x.lib.number(a)</code></h4>
-    <p>Форматирует число.</p>
-    <h4><code class="fs16">x.lib.numberDecline(a, b, c, d)</code></h4>
-    <p>Склонение числительных.</p>
-    <p>Пример:</p>
-    <div class="codeBlock">
-      <code>x.lib.numberDecline(10, 'час', 'часа', 'часов') -> 10 часов</code>
-    </div>
-    <h4><code class="fs16">x.lib.addClass(element, readyClass = 'ready', activeClass = 'active', delay = 50)
-      </code></h4>
-    <p>Последовательное добавление класса. Иногда удобно использовать, когда требуется задержка, пока не завершится анимация.</p>
-    <p>Пример:</p>
-    <div class="codeBlock">
-      <code>x.lib.addClass('.product-info', 'ready', 'show')</code>
-    </div>
-    <p>Добавляет элементу <code>.product-info</code> сначала класс <code>.ready</code>, а через 50 мс (по умолчанию) класс <code>.show</code>.</p>
-    <h4><code class="fs16">x.lib.removeClass(element, readyClass = 'ready', activeClass = 'active', delay = 200)
-      </code></h4>
-    <p>Последовательное удаление класса. Иногда удобно использовать, когда требуется задержка, пока не завершится анимация.</p>
-    <p>Пример:</p>
-    <div class="codeBlock">
-      <code>x.lib.removeClass('.product-info', 'ready', 'show')</code>
-    </div>
-    <p>У элемента <code>.product-info</code> сначала убирает класс <code>.show</code>, а через 50 мс (по умолчанию) класс <code>.ready</code>.</p>
-    <h4><code class="fs16">x.lib.toggleClass(element, readyClass, activeClass, delayAdd, delayRemove)
-      </code></h4>
-    <p>Последовательное переключение классов. Иногда удобно использовать, когда требуется задержка, пока не завершится анимация. По очереди запускает <code>addClass</code> и <code>removeClass</code>.</p>
-    <h4><code class="fs16">x.lib.makePassword(length, selector)
-      </code></h4>
-    <p>Создает пароль указанной длины (по умолчанию — 8).</p>
-    <p>Если созданный пароль сразу нужно вставить в поле input или textarea, вы можете указать выражение для querySelector этого поля в переменной selector.</p>
-    <p><a class="button small" onclick="alert(x.lib.makePassword())">Придумать пароль!</a></p>
-    <h4><code class="fs16">x.lib.loadScript(path, callback, type = 'async|defer')</code></h4>
-    <p>Загружает скрипт и добавляет его в конец перед <code>&lt;/body&gt;</code>. После успешной загрузки выполняется <code>callback</code>.</p>
-    <p>Пример:</p>
-    <div class="codeBlock">
-      <code>x.lib.loadScript(</code>
-      <code>  '/path/to/file.js',</code>
-      <code>  () => { Callback function... },</code>
-      <code>  'async'</code>
-      <code>)</code>
-    </div>
-    <h4><code class="fs16">x.lib.deffered(code, delay = 10000)</code></h4>
-    <p>Отложенное выполнение кода. Анонимная функция с кодом <code>() => { code }</code> будет запущена через время <code>delay</code> (по умолчанию 10 с), либо по наступлении одного из событий: <code>scroll</code>, <code>resize</code>, <code>click</code>, <code>keydown</code>, <code>mouseover</code>, <code>touchmove</code>.</p>
-    <p>Пример:</p>
-    <div class="codeBlock">
-      <code>x.lib.deffered(</code>
-      <code>  () => { Code... },</code>
-      <code>  10000</code>
-      <code>)</code>
-    </div>
-    <h4><code class="fs16">x.lib.runOnAppear(selector, callback, options)</code></h4>
-    <p>Выполнение кода при его появлении во Viewport (по умолчанию ближе чем за 100px за Viewport). Анонимная функция с кодом <code>() => { code }</code> будет запущена при приближении указанного блока к Viewport.</p>
-    <p>Пример:</p>
-    <div class="codeBlock">
-      <code>x.lib.runOnAppear(</code>
-      <code>  '.css_selector',</code>
-      <code>  () => { Code... },</code>
-      <code>  options (не обязательно)</code>
-      <code>)</code>
-    </div>
-    <h4><code class="fs16">x.lib.isEmail(email)</code></h4>
-    <p>Определяет валидность адреса электропочты.</p>
-    <h4><code class="fs16">x.lib.alertErrors(data)</code></h4>
-    <p>
-      Показывает алерт с ошибками.<br>
-      <code>data</code> — объект (ключ: значение), массив или строка.<br>
-      Каждая ошибка будет выведена с новой строки (разделены <code>\n</code>).
-    </p>
-    <h4><code class="fs16">x.lib.printErrors(data)</code></h4>
-    <p>
-      Печатает ошибки.<br>
-      <code>data</code> — объект (ключ: значение), массив или строка.<br>
-      Каждая ошибка будет выведена с новой строки (разделены <code>&lt;br/&gt;</code>).
-    </p>
-    <h4><code class="fs16">async render(selector, data, placement = null)</code></h4>
-    <h4><code class="fs16">[x-render]  |  Render JavaScript in 'x-render' attribute</code></h4>
-  </div>
-  <footer class="p6 ac fs14">
-    <a href="mailto:andrey@shpigunov.ru">andrey@shpigunov.ru</a>
-    <div class="mt1" x-render="new Date().getFullYear()"></div>
-  </footer>
-  <div class="flex aic jcse m4">
-    <div>
-      <button x-dropdown-open class="button button--dropdown" tabindex="4">Bottom menu</button>
-      <ul x-dropdown role="menu" tabindex="-1">
-        <li><a href="/admin/settings/profile/">Профиль</a></li>
-        <li><a href="/logout/">Выйти</a></li>
-        <li><a href="/admin/settings/profile/">Профиль</a></li>
-        <li><a href="/logout/">Выйти</a></li>
-        <li class="divider"></li>
-        <li><span class="op4">Version 0.5</span></li>
-      </ul>
-    </div>
-  </div>
-</body>
-</html>