@dodlhuat/basix 1.0.0 → 1.1.0

package/css/virtual-dropdown.scss

@@ -1,142 +1,201 @@
-@use "parameters" as *;
-@use "properties";
-
-.virtual-dropdown {
-  .custom-dropdown {
-    position: relative;
-    width: 100%;
-    max-width: 300px;
-    font-family:
-      system-ui,
-      -apple-system,
-      sans-serif;
-    user-select: none;
-    display: inline-block;
-  }
-
-  .dropdown-trigger {
-    background: #fff;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    padding: 10px 12px;
-    cursor: pointer;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    transition: border-color 0.2s;
-  }
-
-  .dropdown-trigger:focus,
-  .custom-dropdown.open .dropdown-trigger {
-    border-color: #3498db;
-    box-shadow: $shadow;
-    outline: none;
-  }
-
-  .trigger-text {
-    color: #333;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .trigger-text:not(.has-value) {
-    color: #999;
-  }
-
-  .trigger-arrow {
-    font-size: 0.8em;
-    color: #666;
-    margin-left: 8px;
-  }
-
-  .dropdown-menu {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 100%;
-    background: #fff;
-    border: 1px solid #ccc;
-    border-top: none;
-    border-radius: 0 0 4px 4px;
-    box-shadow: $shadow;
-    z-index: 1000;
-    display: none;
-    opacity: 0;
-    transform: translateY(-10px);
-    transition:
-      opacity 0.2s,
-      transform 0.2s;
-  }
-
-  .dropdown-menu.open {
-    display: block;
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  .dropdown-search {
-    padding: 8px;
-    border-bottom: 1px solid #eee;
-  }
-
-  .dropdown-search input {
-    width: 100%;
-    padding: 8px;
-    border: 1px solid #ddd;
-    border-radius: 3px;
-    box-sizing: border-box;
-  }
-
-  .dropdown-list-wrapper {
-    max-height: 250px;
-    overflow-y: auto;
-    position: relative;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .dropdown-list-scroller {
-    position: relative;
-  }
-
-  .virtual-content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-  }
-
-  .dropdown-item {
-    padding: 0 12px;
-    cursor: pointer;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .dropdown-item:hover {
-    background-color: #f5f9ff;
-    color: #3498db;
-  }
-
-  .dropdown-item.selected {
-    background-color: #e6f3ff;
-    color: #2980b9;
-    font-weight: 500;
-  }
-
-  .dropdown-item input[type="checkbox"] {
-    margin-right: 10px;
-    pointer-events: none;
-    width: auto;
-  }
-
-  @media (max-width: 600px) {
-    .custom-dropdown {
-      max-width: 100%;
-    }
-  }
-}
+@use "parameters" as *;
+@use "properties";
+
+.virtual-dropdown {
+  .custom-dropdown {
+    position: relative;
+    width: 100%;
+    user-select: none;
+    display: inline-block;
+  }
+
+  .dropdown-trigger {
+    background: var(--background);
+    border: 1px solid var(--divider);
+    border-radius: $border-radius;
+    padding: 0 calc($spacing * 0.75);
+    min-height: $form-height;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: border-color 0.2s, box-shadow 0.2s, border-radius 0.15s, border-bottom-color 0.15s;
+  }
+
+  // Focus without open — show ring
+  .dropdown-trigger:focus {
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent);
+    outline: none;
+  }
+
+  // Open — flatten bottom, hide bottom border so menu connects flush
+  .custom-dropdown.open .dropdown-trigger {
+    border-color: var(--accent-color);
+    border-radius: $border-radius $border-radius 0 0;
+    border-bottom-color: var(--background);
+    box-shadow: none;
+    outline: none;
+  }
+
+  .trigger-text {
+    color: var(--primary-text);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &:not(.has-value) {
+      color: var(--secondary-text);
+    }
+  }
+
+  .trigger-arrow {
+    font-size: 0.75em;
+    color: var(--secondary-text);
+    margin-left: calc($spacing / 2);
+    flex-shrink: 0;
+    display: inline-block;
+    transition: transform 0.2s ease;
+  }
+
+  .custom-dropdown.open .trigger-arrow {
+    transform: rotate(180deg);
+  }
+
+  // visibility trick: transitions work in both directions; display:none/block skips them
+  .dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    background: var(--background);
+    border: 1px solid var(--accent-color);
+    border-top: none;
+    border-radius: 0 0 $border-radius $border-radius;
+    box-shadow: $shadow;
+    z-index: 1000;
+    visibility: hidden;
+    opacity: 0;
+    transform: translateY(-4px);
+    pointer-events: none;
+    transition:
+      opacity 0.18s ease,
+      transform 0.18s ease,
+      visibility 0s 0.18s; // delay visibility until fade-out ends
+  }
+
+  .dropdown-menu.open {
+    visibility: visible;
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+    transition:
+      opacity 0.18s ease,
+      transform 0.18s ease,
+      visibility 0s 0s; // switch visible immediately on open
+  }
+
+  .dropdown-search {
+    padding: calc($spacing / 2);
+    border-bottom: 1px solid var(--divider);
+
+    input {
+      width: 100%;
+      padding: 0 calc($spacing / 2);
+      height: $form-height;
+      border: 1px solid var(--divider);
+      border-radius: calc($border-radius / 2);
+      background: var(--background);
+      color: var(--primary-text);
+      box-sizing: border-box;
+      outline: none;
+      transition: border-color 0.2s;
+
+      &:focus {
+        border-color: var(--accent-color);
+      }
+    }
+  }
+
+  .dropdown-list-wrapper {
+    max-height: 250px;
+    overflow-y: auto;
+    position: relative;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .dropdown-list-scroller {
+    position: relative;
+  }
+
+  .virtual-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+
+  .dropdown-item {
+    padding: 0 calc($spacing * 0.75);
+    cursor: pointer;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    background: var(--background);
+    color: var(--primary-text);
+    transition: background-color 0.15s, color 0.15s;
+
+    &:hover {
+      background-color: var(--hover);
+      color: var(--accent-color);
+    }
+
+    &.selected {
+      background-color: color-mix(in srgb, var(--accent-color) 10%, transparent);
+      color: var(--accent-color);
+      font-weight: 500;
+    }
+
+    input[type="checkbox"] {
+      appearance: none;
+      -webkit-appearance: none;
+      flex-shrink: 0;
+      align-self: center;
+      width: calc($spacing * 0.8);
+      height: calc($spacing * 0.8);
+      min-height: unset;
+      max-height: calc($spacing * 0.8);
+      border: 1.5px solid var(--divider);
+      border-radius: calc($border-radius / 2);
+      background: var(--background);
+      margin-right: calc($spacing * 0.6);
+      pointer-events: none;
+      position: relative;
+      transition: border-color 0.15s, background-color 0.15s;
+
+      &:checked {
+        background-color: var(--accent-color);
+        border-color: var(--accent-color);
+
+        &::after {
+          content: '';
+          position: absolute;
+          left: 50%;
+          top: 42%;
+          width: 28%;
+          height: 48%;
+          border-right: 1.5px solid white;
+          border-bottom: 1.5px solid white;
+          transform: translate(-50%, -55%) rotate(45deg);
+        }
+      }
+    }
+  }
+
+  @media (max-width: 600px) {
+    .custom-dropdown {
+      max-width: 100%;
+    }
+  }
+}

package/js/carousel.js

@@ -1,5 +1,6 @@
 class Carousel {
     constructor(elementOrSelector, options = {}) {
+        this.autoPlayTimer = null;
         const element = typeof elementOrSelector === 'string'
             ? document.querySelector(elementOrSelector)
             : elementOrSelector;
@@ -58,14 +59,14 @@ class Carousel {
             this.dots.push(dot);
         });
         this.root.appendChild(this.dotsNav);
+        this.root.setAttribute('tabindex', '0');
     }
     bindEvents() {
         this.nextButton.addEventListener('click', () => this.moveToNextSlide());
         this.prevButton.addEventListener('click', () => this.moveToPrevSlide());
         this.dotsNav.addEventListener('click', (e) => {
             const targetDot = e.target.closest('button');
-            if (!targetDot)
-                return;
+            if (!targetDot) return;
             const targetIndex = this.dots.findIndex(dot => dot === targetDot);
             this.moveToSlide(targetIndex);
         });
@@ -73,23 +74,38 @@ class Carousel {
             this.slideWidth = this.slides[0].getBoundingClientRect().width;
             this.moveToSlide(this.currentIndex, false);
         });
+        // Keyboard navigation
+        this.root.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowLeft')  this.moveToPrevSlide();
+            if (e.key === 'ArrowRight') this.moveToNextSlide();
+        });
+        // Pause autoplay on hover / focus
+        if (this.options.autoPlay) {
+            this.root.addEventListener('mouseenter', () => this.pauseAutoPlay());
+            this.root.addEventListener('mouseleave', () => this.resumeAutoPlay());
+            this.root.addEventListener('focusin',    () => this.pauseAutoPlay());
+            this.root.addEventListener('focusout',   () => this.resumeAutoPlay());
+        }
         this.addTouchSupport();
     }
     moveToSlide(targetIndex, animate = true) {
         if (targetIndex < 0) {
-            if (this.options.loop)
-                targetIndex = this.slides.length - 1;
-            else
-                targetIndex = 0;
+            if (this.options.loop) targetIndex = this.slides.length - 1;
+            else targetIndex = 0;
+        } else if (targetIndex >= this.slides.length) {
+            if (this.options.loop) targetIndex = 0;
+            else targetIndex = this.slides.length - 1;
         }
-        else if (targetIndex >= this.slides.length) {
-            if (this.options.loop)
-                targetIndex = 0;
-            else
-                targetIndex = this.slides.length - 1;
+        if (!animate) {
+            this.track.style.transitionDuration = '0ms';
         }
         const amountToMove = -1 * (this.slideWidth * targetIndex);
         this.track.style.transform = `translateX(${amountToMove}px)`;
+        if (!animate) {
+            requestAnimationFrame(() => {
+                this.track.style.transitionDuration = '';
+            });
+        }
         this.updateDots(targetIndex);
         this.currentIndex = targetIndex;
     }
@@ -111,23 +127,34 @@ class Carousel {
             isDragging = true;
         }, { passive: true });
         this.track.addEventListener('touchend', (e) => {
-            if (!isDragging)
-                return;
+            if (!isDragging) return;
             const endX = e.changedTouches[0].clientX;
             const diffX = startX - endX;
             if (Math.abs(diffX) > 50) {
-                if (diffX > 0)
-                    this.moveToNextSlide();
-                else
-                    this.moveToPrevSlide();
+                if (diffX > 0) this.moveToNextSlide();
+                else this.moveToPrevSlide();
             }
             isDragging = false;
         });
     }
     startAutoPlay() {
-        setInterval(() => {
+        this.autoPlayTimer = window.setInterval(() => {
             this.moveToNextSlide();
         }, this.options.autoPlayInterval);
     }
+    pauseAutoPlay() {
+        if (this.autoPlayTimer !== null) {
+            clearInterval(this.autoPlayTimer);
+            this.autoPlayTimer = null;
+        }
+    }
+    resumeAutoPlay() {
+        if (this.options.autoPlay && this.autoPlayTimer === null) {
+            this.startAutoPlay();
+        }
+    }
+    destroy() {
+        this.pauseAutoPlay();
+    }
 }
 export { Carousel };