@andreyshpigunov/x 0.4.4 → 0.5.0

package/src/components/x/colors.css

@@ -12,6 +12,8 @@ All right reserved.
   .color-warning
   .color-danger
   .color-error
+  .color-black
+  .color-white
   .color-grey
   
   .bg-primary
@@ -19,6 +21,8 @@ All right reserved.
   .bg-warning
   .bg-danger
   .bg-error
+  .bg-black
+  .bg-white
   .bg-grey
 */
 
@@ -28,6 +32,8 @@ All right reserved.
   --color-warning: #ff8800;
   --color-danger: #ee3333;
   --color-error: #ee3333;
+  --color-black: #fff;
+  --color-white: #000;
   --color-grey: #f4f5f6;
 }
 
@@ -46,6 +52,12 @@ All right reserved.
 .color-error {
   color: var(--color-error);
 }
+.color-black {
+  color: var(--color-black);
+}
+.color-white {
+  color: var(--color-white);
+}
 .color-grey {
   color: var(--color-grey);
 }
@@ -65,6 +77,12 @@ All right reserved.
 .bg-error {
   background-color: var(--color-error);
 }
+.bg-black {
+  background-color: var(--color-black);
+}
+.bg-white {
+  background-color: var(--color-white);
+}
 .bg-grey {
   background-color: var(--color-grey);
 }

package/src/components/x/dropdown.css

@@ -87,24 +87,24 @@ All right reserved.
 .dropdown {
   position: relative;
   
-  &.dropdown--right > [x-dropdown] {
+  &.dropdown_right > [x-dropdown] {
     right: 0;
     left: auto;
   }
-  &.dropdown--bottom > [x-dropdown] {
+  &.dropdown_bottom > [x-dropdown] {
     bottom: 100%;
     top: auto;
     transform-origin: bottom;
   }
-  &.dropdown--ready > [x-dropdown] {
+  &.dropdown_ready > [x-dropdown] {
     display: block;
     pointer-events: auto;
   }
-  &.dropdown--open > [x-dropdown] {
+  &.dropdown_open > [x-dropdown] {
     opacity: 1;
     transform: scale(1);
   }
-  &.dropdown--wrap > [x-dropdown] li {
+  &.dropdown_wrap > [x-dropdown] li {
     & > a,
     & > span {
       white-space: wrap;

package/src/components/x/dropdown.js

@@ -46,7 +46,7 @@
  * Preventing auto-close on click:
  * ```html
  * <ul x-dropdown>
- *   <li class="dropdown--stay">
+ *   <li class="dropdown_stay">
  *     <button>This area won't close dropdown</button>
  *   </li>
  * </ul>
@@ -80,10 +80,10 @@
  * CSS classes:
  *
  * - `.dropdown` – Added to parent container
- * - `.dropdown--open` – Added when dropdown is open
- * - `.dropdown--right` – Added when menu needs to align right (overflow prevention)
- * - `.dropdown--bottom` – Added when menu needs to align bottom (overflow prevention)
- * - `.dropdown--ready` – Temporarily added during position calculation
+ * - `.dropdown_open` – Added when dropdown is open
+ * - `.dropdown_right` – Added when menu needs to align right (overflow prevention)
+ * - `.dropdown_bottom` – Added when menu needs to align bottom (overflow prevention)
+ * - `.dropdown_ready` – Temporarily added during position calculation
  * - `.active` – Added to trigger when dropdown is open
  * - `.hover` – Added on focus for better visual feedback
  *
@@ -123,7 +123,7 @@ import { lib } from './lib';
  * Features:
  * - Supports multiple dropdowns on the page.
  * - Keyboard navigation (Enter, Space, ArrowDown, ArrowUp, Home, End, Escape).
- * - Automatic positioning with overflow handling (adds `.dropdown--right`, `.dropdown--bottom`).
+ * - Automatic positioning with overflow handling (adds `.dropdown_right`, `.dropdown_bottom`).
  * - Adds `.hover` class on focus for triggers and menu items.
  * - Safe `init()` with cleanup and reinitialization support.
  *
@@ -412,7 +412,7 @@ class Dropdown {
    * @private
    */
   _toggleDropdown(parent, trigger) {
-    const isOpen = parent.classList.contains('dropdown--open');
+    const isOpen = parent.classList.contains('dropdown_open');
     this.closeAllDropdowns();
     if (!isOpen) this._open(parent, trigger);
   }
@@ -432,7 +432,7 @@ class Dropdown {
     this._adjustPosition(parent, menu);
 
     lib.addClass(trigger, 'active');
-    lib.addClass(parent, 'dropdown--open', 20);
+    lib.addClass(parent, 'dropdown_open', 20);
     trigger.setAttribute('aria-expanded', 'true');
 
     this._fireEvent(parent, 'aftershow');
@@ -446,22 +446,22 @@ class Dropdown {
    * @private
    */
   _adjustPosition(parent, menu) {
-    parent.classList.add('dropdown--ready');
+    parent.classList.add('dropdown_ready');
     const rect = menu.getBoundingClientRect();
-    parent.classList.remove('dropdown--ready');
+    parent.classList.remove('dropdown_ready');
 
     const vw = window.innerWidth;
     const docHeight = document.documentElement.scrollHeight;
 
-    parent.classList.remove('dropdown--right', 'dropdown--bottom');
+    parent.classList.remove('dropdown_right', 'dropdown_bottom');
 
     if (rect.right > vw) {
-      parent.classList.add('dropdown--right');
+      parent.classList.add('dropdown_right');
     }
 
     const menuBottomInDoc = window.scrollY + rect.bottom;
     if (menuBottomInDoc > docHeight) {
-      parent.classList.add('dropdown--bottom');
+      parent.classList.add('dropdown_bottom');
     }
   }
 
@@ -498,8 +498,8 @@ class Dropdown {
    * dropdown.closeAllDropdowns();
    */
   closeAllDropdowns() {
-    if (!document.querySelector('.dropdown--open')) return;
-    const openDropdowns = lib.qsa('.dropdown--open');
+    if (!document.querySelector('.dropdown_open')) return;
+    const openDropdowns = lib.qsa('.dropdown_open');
     for (const parent of openDropdowns) {
       this._close(parent);
     }
@@ -523,8 +523,8 @@ class Dropdown {
       trigger.setAttribute('aria-expanded', 'false');
     }
   
-    await lib.removeClass(parent, 'dropdown--open', 200);
-    parent.classList.remove('dropdown--right', 'dropdown--bottom');
+    await lib.removeClass(parent, 'dropdown_open', 200);
+    parent.classList.remove('dropdown_right', 'dropdown_bottom');
   
     this._fireEvent(parent, 'afterhide');
   
@@ -551,8 +551,8 @@ class Dropdown {
     if (Dropdown._globalListenersAttached) return;
 
     this._globalClickHandler = e => {
-      if (e.target.closest('[x-dropdown-open]') || e.target.closest('[x-dropdown] .dropdown--stay')) return;
-      if (!document.querySelector('.dropdown--open')) return;
+      if (e.target.closest('[x-dropdown-open]') || e.target.closest('[x-dropdown] .dropdown_stay')) return;
+      if (!document.querySelector('.dropdown_open')) return;
       this.closeAllDropdowns();
     };
     document.addEventListener('click', this._globalClickHandler);

package/src/components/x/helpers.css

@@ -49,15 +49,15 @@ All right reserved.
   .ratio2x3  (s,m,l,xl)
   .ratio3x4  (s,m,l,xl)
   .ratio9x16 (s,m,l,xl)
-  .break-word
-  .visually-hidden
+  .breakWord
+  .visuallyHidden
   .invisible
   .scroll-responsive
   .hidden       (s,m,l,xl)
   .hidden-next  (s,m,l,xl)
   .block        (s,m,l,xl)
   .inline       (s,m,l,xl)
-  .inline-block (s,m,l,xl)
+  .inlineBlock (s,m,l,xl)
   .fullscreen
   .max                    (s,m,l,xl)
   .w[10-190] step 10      (s,m,l,xl)
@@ -455,11 +455,11 @@ html.touch .touch-hide { display: none }
 
 
 /* !- Break word, invisible, scroll */
-.break-word {
+.breakWord {
   overflow-wrap: anywhere;
   word-break: break-word;
 }
-.visually-hidden {
+.visuallyHidden {
   position: absolute;
   top: 0;
   left: 0;
@@ -482,7 +482,7 @@ html.touch .touch-hide { display: none }
 /* !- Display */
 .block { display: block }
 .inline { display: inline }
-.inline-block { display: inline-block }
+.inlineBlock { display: inline-block }
 .table { display: table }
 
 
@@ -512,7 +512,7 @@ html.touch .touch-hide { display: none }
 @media (min-width: 640px) {
   .s\:block { display: block }
   .s\:inline { display: inline }
-  .s\:inline-block { display: inline-block }
+  .s\:inlineBlock { display: inline-block }
   .s\:table { display: table }
   .s\:flex { display: flex }
   .s\:grid { display: grid }
@@ -520,7 +520,7 @@ html.touch .touch-hide { display: none }
 @media (min-width: 768px) {
   .m\:block { display: block }
   .m\:inline { display: inline }
-  .m\:inline-block { display: inline-block }
+  .m\:inlineBlock { display: inline-block }
   .m\:table { display: table }
   .m\:flex { display: flex }
   .m\:grid { display: grid }
@@ -528,7 +528,7 @@ html.touch .touch-hide { display: none }
 @media (min-width: 1024px) {
   .l\:block { display: block }
   .l\:inline { display: inline }
-  .l\:inline-block { display: inline-block }
+  .l\:inlineBlock { display: inline-block }
   .l\:table { display: table }
   .l\:flex { display: flex }
   .l\:grid { display: grid }
@@ -536,7 +536,7 @@ html.touch .touch-hide { display: none }
 @media (min-width: 1280px) {
   .xl\:block { display: block }
   .xl\:inline { display: inline }
-  .xl\:inline-block { display: inline-block }
+  .xl\:inlineBlock { display: inline-block }
   .xl\:table { display: table }
   .xl\:flex { display: flex }
   .xl\:grid { display: grid }

package/src/components/x/icons.css

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

package/src/components/x/lib.js

@@ -90,8 +90,8 @@
  *   const items = lib.qsa('li', container);
  *
  * Classes with delay (for transitions):
- *   await lib.addClass('.element', 'active', 100); // Adds --ready class, waits 100ms, then adds active
- *   await lib.removeClass('.element', 'active', 200); // Removes active, waits 200ms, removes --ready
+ *   await lib.addClass('.element', 'active', 100); // Adds _ready class, waits 100ms, then adds active
+ *   await lib.removeClass('.element', 'active', 200); // Removes active, waits 200ms, removes _ready
  *
  * Formatting:
  *   lib.price(1234.56);        // "1 234.56"
@@ -333,7 +333,7 @@ class Lib {
     if (!len) return;
 
     if (delay > 0) {
-      const readyClass = className.replace(/--.*/, '') + '--ready';
+      const readyClass = className.replace(/_.*/, '') + '_ready';
       for (let i = 0; i < len; i++) items[i].classList.add(readyClass);
       await new Promise(res => setTimeout(res, delay));
     }
@@ -357,7 +357,7 @@ class Lib {
 
     if (delay > 0) {
       await new Promise(res => setTimeout(res, delay));
-      const readyClass = className.replace(/--.*/, '') + '--ready';
+      const readyClass = className.replace(/_.*/, '') + '_ready';
       for (let i = 0; i < len; i++) items[i].classList.remove(readyClass);
     }
   }

package/src/components/x/links.css

@@ -14,11 +14,11 @@ All right reserved.
   a.link
   a.hover
   a.active
-  a.link--noline
-  a.link--underline
-  a.link--dashed
-  a.link--dotted
-  a.link--wavy
+  a.link_noline
+  a.link_underline
+  a.link_dashed
+  a.link_dotted
+  a.link_wavy
 */
 
 :root {
@@ -82,19 +82,19 @@ a {
   
   /* Link predefined styles */
   
-  &.link--noline {
+  &.link_noline {
     --link-decoration-line: none;
   }
-  &.link--underline {
+  &.link_underline {
     --link-decoration-line: underline;
   }
-  &.link--dashed {
+  &.link_dashed {
     --link-decoration-style: dashed;
   }
-  &.link--dotted {
+  &.link_dotted {
     --link-decoration-style: dotted;
   }
-  &.link--wavy {
+  &.link_wavy {
     --link-decoration-style: wavy;
   }
 }

package/src/components/x/modal.css

@@ -49,21 +49,21 @@ html.modal--active body {
   pointer-events: none;
   display: none;
 }
-.modal--ready {
+.modal_ready {
   z-index: 10000;
   pointer-events: all;
   display: block;
 }
-.modal--z1  { z-index: 10001 }
-.modal--z2  { z-index: 10002 }
-.modal--z3  { z-index: 10003 }
-.modal--z4  { z-index: 10004 }
-.modal--z5  { z-index: 10005 }
-.modal--z6  { z-index: 10006 }
-.modal--z7  { z-index: 10007 }
-.modal--z8  { z-index: 10008 }
-.modal--z9  { z-index: 10009 }
-.modal--z10 { z-index: 10010 }
+.modal_z1  { z-index: 10001 }
+.modal_z2  { z-index: 10002 }
+.modal_z3  { z-index: 10003 }
+.modal_z4  { z-index: 10004 }
+.modal_z5  { z-index: 10005 }
+.modal_z6  { z-index: 10006 }
+.modal_z7  { z-index: 10007 }
+.modal_z8  { z-index: 10008 }
+.modal_z9  { z-index: 10009 }
+.modal_z10 { z-index: 10010 }
 
 /* !- Overlay */
 .modal-overlay {
@@ -161,7 +161,7 @@ html.modal--active body {
     }
   }
 }
-.modal--active .modal-rail {
+.modal_active .modal-rail {
   
   .modal-close {
     opacity: 1;
@@ -187,7 +187,7 @@ html.modal--active body {
     opacity: 0;
     transition: opacity .2s ease-out;
   }
-  &.modal--active .modal-overlay {
+  &.modal_active .modal-overlay {
     opacity: 1;
   }
 }
@@ -201,68 +201,68 @@ html.modal--active body {
     transform-origin: center top;
     transition: all .2s ease-out;
   }
-  &.modal--active .modal-window {
+  &.modal_active .modal-window {
     transform: scale(1);
     opacity: 1;
   }
 }
 
 /* !- Zoom in */
-.modal--effect-in {
+.modal_effect-in {
   & .modal-window {
     transform: scale(.9);
   }
-  &.modal--active .modal-window {
+  &.modal_active .modal-window {
     transform: scale(1);
   }
 }
 
 /* !- Zoom out */
-.modal--effect-out {
+.modal_effect-out {
   & .modal-window {
     transform: scale(1.1);
   }
-  &.modal--active .modal-window {
+  &.modal_active .modal-window {
     transform: scale(1);
   }
 }
 
 /* !- Slide up */
-.modal--effect-up {
+.modal_effect-up {
   & .modal-window {
     transform: translateY(30px);
   }
-  &.modal--active .modal-window {
+  &.modal_active .modal-window {
     transform: translateY(0);
   }
 }
 
 /* !- Slide down */
-.modal--effect-down {
+.modal_effect-down {
   & .modal-window {
     transform: translateY(-30px);
   }
-  &.modal--active .modal-window {
+  &.modal_active .modal-window {
     transform: translateY(0);
   }
 }
 
 /* !- Slide from left */
-.modal--effect-left {
+.modal_effect-left {
   & .modal-window {
     transform: translateX(-30px);
   }
-  &.modal--active .modal-window {
+  &.modal_active .modal-window {
     transform: translateX(0);
   }
 }
 
 /* !- Slide from right */
-.modal--effect-right {
+.modal_effect-right {
   & .modal-window {
     transform: translateX(30px);
   }
-  &.modal--active .modal-window {
+  &.modal_active .modal-window {
     transform: translateX(0);
   }
 }

package/src/components/x/modal.js

@@ -13,7 +13,7 @@
  *   modal.init();
  *
  * HTML structure:
- *   <div x-modal="myModal" class="modal--hash" data-window-class="max800">
+ *   <div x-modal="myModal" class="modal_hash" data-window-class="max800">
  *     <h2>Modal Title</h2>
  *     <p>Modal content goes here</p>
  *     <button class="modal-close">Close</button>
@@ -92,8 +92,8 @@
  *
  * - `x-modal="id"` - Required attribute to define modal
  * - `x-modal-open="id"` - Attribute for links/buttons that open modal
- * - `modal--hash` - Class to enable URL hash integration (#id)
- * - `modal--uniq` - Class to close other modals when this one opens
+ * - `modal_hash` - Class to enable URL hash integration (#id)
+ * - `modal_uniq` - Class to close other modals when this one opens
  * - `data-window-class` - Attribute to add classes to modal window
  *
  * Features:
@@ -102,8 +102,8 @@
  * - ESC key to close topmost modal
  * - Click overlay to close
  * - Click .modal-close button to close
- * - URL hash integration (modal--hash class)
- * - Unique modal mode (modal--uniq class)
+ * - URL hash integration (modal_hash class)
+ * - Unique modal mode (modal_uniq class)
  * - Lock mechanism to prevent overlapping animations
  * - Global classes on <html> element
  *
@@ -136,7 +136,7 @@
  * @example
  * // Vanilla JS — plain HTML
  * // index.html:
- * // <div x-modal="myModal" class="modal--hash" data-window-class="max800">
+ * // <div x-modal="myModal" class="modal_hash" data-window-class="max800">
  * //   <h2>Title</h2>
  * //   <p>Content</p>
  * //   <button type="button" class="modal-close">Close</button>
@@ -291,7 +291,7 @@ class Modal {
 
       if (window.location.hash === '#' + id) {
         const el = lib.qs('#' + id);
-        if (el && el.classList.contains('modal--hash')) this.show(id);
+        if (el && el.classList.contains('modal_hash')) this.show(id);
       }
     }
   }
@@ -304,7 +304,7 @@ class Modal {
    */
   _setupGlobalListeners() {
     this._clickHandler = e => {
-      if (!lib.qs('.modal--active')) return;
+      if (!lib.qs('.modal_active')) return;
       const target = e.target;
       const isClose = target.classList && target.classList.contains('modal-close');
       const isOverlay = !target.closest || !target.closest('.modal-window');
@@ -317,7 +317,7 @@ class Modal {
 
     this._keydownHandler = e => {
       if (e.key !== 'Escape') return;
-      const modals = lib.qsa('.modal--active');
+      const modals = lib.qsa('.modal_active');
       const len = modals.length;
       if (!len) return;
       const id = modals[len - 1].getAttribute('id');
@@ -351,24 +351,24 @@ class Modal {
     const modal = lib.qs('#' + id);
     if (!modal) return;
 
-    if (modal.classList.contains('modal--uniq')) await this.hideAll();
+    if (modal.classList.contains('modal_uniq')) await this.hideAll();
 
     this.lockCount++;
     try {
-      await lib.addClass(modal, 'modal--ready');
+      await lib.addClass(modal, 'modal_ready');
       await lib.sleep(10);
       modal.dispatchEvent(new CustomEvent('modal:ready'));
 
-      if (modal.classList.contains('modal--hash')) history.replaceState(null, '', '#' + id);
+      if (modal.classList.contains('modal_hash')) history.replaceState(null, '', '#' + id);
 
       if (this.html) {
-        lib.addClass(this.html, 'modal--active');
-        lib.addClass(this.html, id + '--active');
+        lib.addClass(this.html, 'modal_active');
+        lib.addClass(this.html, id + '_active');
       }
       lib.addClass('[x-modal-open=' + id + ']', 'active');
       this.modalLevel++;
-      lib.addClass(modal, 'modal--z' + this.modalLevel);
-      await lib.addClass(modal, 'modal--active');
+      lib.addClass(modal, 'modal_z' + this.modalLevel);
+      await lib.addClass(modal, 'modal_active');
 
       const modalOuter = lib.qs('.modal-outer', modal);
       if (modalOuter) modalOuter.scrollTo(0, 1);
@@ -398,16 +398,16 @@ class Modal {
 
     this.lockCount++;
     try {
-      if (modal.classList.contains('modal--hash') && window.location.hash === '#' + id) {
+      if (modal.classList.contains('modal_hash') && window.location.hash === '#' + id) {
         history.replaceState(null, document.title, window.location.pathname + window.location.search);
       }
       lib.removeClass('[x-modal-open=' + id + ']', 'active');
-      await lib.removeClass(modal, 'modal--active', 200);
-      lib.removeClass(modal, 'modal--z' + this.modalLevel);
+      await lib.removeClass(modal, 'modal_active', 200);
+      lib.removeClass(modal, 'modal_z' + this.modalLevel);
       modal.dispatchEvent(new CustomEvent('modal:close'));
-      if (this.html) lib.removeClass(this.html, id + '--active');
+      if (this.html) lib.removeClass(this.html, id + '_active');
       this.modalLevel--;
-      if (this.modalLevel === 0 && this.html) lib.removeClass(this.html, 'modal--active');
+      if (this.modalLevel === 0 && this.html) lib.removeClass(this.html, 'modal_active');
     } catch (_) {
     } finally {
       this.lockCount--;
@@ -422,7 +422,7 @@ class Modal {
    */
   async hideAll() {
     if (typeof document === 'undefined') return;
-    const modals = lib.qsa('.modal--active');
+    const modals = lib.qsa('.modal_active');
     for (let i = 0; i < modals.length; i++) {
       const id = modals[i].getAttribute('id');
       if (id) await this.hide(id);
@@ -437,7 +437,7 @@ class Modal {
   isActive(id) {
     if (typeof document === 'undefined' || !id || typeof id !== 'string' || !this._isValidId(id)) return false;
     const modal = lib.qs('#' + id);
-    return modal ? modal.classList.contains('modal--active') : false;
+    return modal ? modal.classList.contains('modal_active') : false;
   }
 }