@andreyshpigunov/x 0.4.4 → 0.5.1

package/src/components/x/dropdown.css

@@ -21,143 +21,147 @@ All right reserved.
   --dropdown-divider-color: var(--color-grey);
 }
 
-[x-dropdown] {
-  display: none;
-  list-style: none;
-  position: absolute;
-  top: 100%;
-  z-index: 1000;
-  opacity: 0;
-  min-width: 22rem;
-  max-width: var(--dropdown-max-width);
-  max-height: clamp(0px, 80vh, 500px);
-  overflow: auto;
-  list-style: none;
-  padding: var(--dropdown-padding);
-  margin: 0;
-  background-color: var(--dropdown-backgroud-color);
-  border: none;
-  box-shadow: var(--dropdown-box-shadow);
-  border-radius: var(--dropdown-border-radius);
-  transform: scale(.95);
-  transform-origin: top;
-  transition: opacity .15s ease-out,
-              transform .15s ease-out;
-  pointer-events: none;
-  overscroll-behavior: contain;
+@layer dropdown {
   
-  @media (min-width: 768px) {
-    max-width: calc(var(--dropdown-max-width) * 1.2);
-  }
-  
-  & > li {
-    margin: 0;
-  }
-  
-  &::-webkit-scrollbar {
-    width: var(--scroll-scrollbar-size);
-    height: var(--scroll-scrollbar-size);
-  }
-  
-  &::-webkit-scrollbar-track {
-    background-color: none;
-    border-radius: var(--scroll-scrollbar-size);
-  }
-  
-  &::-webkit-scrollbar-thumb {
-    border-radius: var(--scroll-scrollbar-size);
-    background-color: var(--scroll-scrollbar-thumb-background);
-    will-change: background-color;
-    transition: background .2s ease-out;
-    cursor: pointer;
-  }
-  
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: var(--scroll-scrollbar-thumb-background-hover);
-  }
-  
-  &::-webkit-scrollbar-button,
-  &::-webkit-scrollbar-track-piece,
-  &::-webkit-scrollbar-corner,
-  &::-webkit-resizer {
+  [x-dropdown] {
     display: none;
-  }
-}
-
-.dropdown {
-  position: relative;
-  
-  &.dropdown--right > [x-dropdown] {
-    right: 0;
-    left: auto;
-  }
-  &.dropdown--bottom > [x-dropdown] {
-    bottom: 100%;
-    top: auto;
-    transform-origin: bottom;
-  }
-  &.dropdown--ready > [x-dropdown] {
-    display: block;
-    pointer-events: auto;
-  }
-  &.dropdown--open > [x-dropdown] {
-    opacity: 1;
-    transform: scale(1);
-  }
-  &.dropdown--wrap > [x-dropdown] li {
-    & > a,
-    & > span {
-      white-space: wrap;
+    list-style: none;
+    position: absolute;
+    top: 100%;
+    z-index: 1000;
+    opacity: 0;
+    min-width: 22rem;
+    max-width: var(--dropdown-max-width);
+    max-height: clamp(0px, 80vh, 500px);
+    overflow: auto;
+    list-style: none;
+    padding: var(--dropdown-padding);
+    margin: 0;
+    background-color: var(--dropdown-backgroud-color);
+    border: none;
+    box-shadow: var(--dropdown-box-shadow);
+    border-radius: var(--dropdown-border-radius);
+    transform: scale(.95);
+    transform-origin: top;
+    transition: opacity .15s ease-out,
+                transform .15s ease-out;
+    pointer-events: none;
+    overscroll-behavior: contain;
+    
+    @media (min-width: 768px) {
+      max-width: calc(var(--dropdown-max-width) * 1.2);
+    }
+    
+    & > li {
+      margin: 0;
+    }
+    
+    &::-webkit-scrollbar {
+      width: var(--scroll-scrollbar-size);
+      height: var(--scroll-scrollbar-size);
+    }
+    
+    &::-webkit-scrollbar-track {
+      background-color: none;
+      border-radius: var(--scroll-scrollbar-size);
+    }
+    
+    &::-webkit-scrollbar-thumb {
+      border-radius: var(--scroll-scrollbar-size);
+      background-color: var(--scroll-scrollbar-thumb-background);
+      will-change: background-color;
+      transition: background .2s ease-out;
+      cursor: pointer;
+    }
+    
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: var(--scroll-scrollbar-thumb-background-hover);
+    }
+    
+    &::-webkit-scrollbar-button,
+    &::-webkit-scrollbar-track-piece,
+    &::-webkit-scrollbar-corner,
+    &::-webkit-resizer {
+      display: none;
     }
   }
-}
-
-
-[x-dropdown] {
   
-  & li {
+  .dropdown {
+    position: relative;
     
-    &.divider {
-      height: 0;
-      padding: 0;
-      margin: var(--dropdown-padding) calc(-1 * var(--dropdown-padding));
-      border-bottom: 1px solid var(--dropdown-divider-color);
+    &.dropdown_right > [x-dropdown] {
+      right: 0;
+      left: auto;
     }
-    
-    & > a,
-    & > span {
+    &.dropdown_bottom > [x-dropdown] {
+      bottom: 100%;
+      top: auto;
+      transform-origin: bottom;
+    }
+    &.dropdown_ready > [x-dropdown] {
       display: block;
-      padding: var(--dropdown-item-padding);
-      line-height: 1.4;
-      color: var(--dropdown-item-font-color);
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      text-decoration: none;
-      overflow: hidden;
-      border: none;
-      border-radius: calc(var(--dropdown-border-radius) / 2);
-      background: var(--dropdown-item-background-color);
+      pointer-events: auto;
     }
-    
-    & > a {
-      will-change: color, background, transform;
-      transition: all .1s ease-out;
+    &.dropdown_open > [x-dropdown] {
+      opacity: 1;
       transform: scale(1);
-      transform-origin: bottom center;
+    }
+    &.dropdown_wrap > [x-dropdown] li {
+      & > a,
+      & > span {
+        white-space: wrap;
+      }
+    }
+  }
+  
+  
+  [x-dropdown] {
+    
+    & li {
       
-      &:focus-visible,
-      &.focus-visible,
-      &:hover,
-      &.hover,
-      &:active,
-      &.active {
-        color: var(--dropdown-item-font-color-hover);
-        background: var(--dropdown-item-background-color-hover);
+      &.divider {
+        height: 0;
+        padding: 0;
+        margin: var(--dropdown-padding) calc(-1 * var(--dropdown-padding));
+        border-bottom: 1px solid var(--dropdown-divider-color);
       }
       
-      &:active {
-        transform: scale(.99);
+      & > a,
+      & > span {
+        display: block;
+        padding: var(--dropdown-item-padding);
+        line-height: 1.4;
+        color: var(--dropdown-item-font-color);
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        text-decoration: none;
+        overflow: hidden;
+        border: none;
+        border-radius: calc(var(--dropdown-border-radius) / 2);
+        background: var(--dropdown-item-background-color);
+      }
+      
+      & > a {
+        will-change: color, background, transform;
+        transition: all .1s ease-out;
+        transform: scale(1);
+        transform-origin: bottom center;
+        
+        &:focus-visible,
+        &.focus-visible,
+        &:hover,
+        &.hover,
+        &:active,
+        &.active {
+          color: var(--dropdown-item-font-color-hover);
+          background: var(--dropdown-item-background-color-hover);
+        }
+        
+        &:active {
+          transform: scale(.99);
+        }
       }
     }
   }
+
 }

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);