@andreyshpigunov/x 0.4.3 → 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/flex.css

@@ -30,10 +30,6 @@ All right reserved.
 */
 
 .flex { display: flex }
-@media (min-width: 640px)  { .s\:flex { display: flex } }
-@media (min-width: 768px)  { .m\:flex { display: flex } }
-@media (min-width: 1024px) { .l\:flex { display: flex } }
-@media (min-width: 1280px) { .xl\:flex { display: flex } }
 
 [class*=flex] {
   /* Columns */

package/src/components/x/grid.css

@@ -14,10 +14,6 @@ All right reserved.
 */
 
 .grid { display: grid }
-@media (min-width: 640px)  { .s\:grid { display: grid } }
-@media (min-width: 768px)  { .m\:grid { display: grid } }
-@media (min-width: 1024px) { .l\:grid { display: grid } }
-@media (min-width: 1280px) { .xl\:grid { display: grid } }
 
 [class*=grid] {
   width: 100%;

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;
@@ -479,6 +479,13 @@ html.touch .touch-hide { display: none }
 }
 
 
+/* !- Display */
+.block { display: block }
+.inline { display: inline }
+.inlineBlock { display: inline-block }
+.table { display: table }
+
+
 /* !- Hidden */
 .hidden,
 .hidden-next + * { display: none }
@@ -502,34 +509,37 @@ html.touch .touch-hide { display: none }
 
 
 /* !- Display */
-.block { display: block }
-.inline { display: inline }
-.inline-block { display: inline-block }
-.table { display: table }
-
 @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 }
 }
 @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 }
 }
 @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 }
 }
 @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);
   }
 }