@kerkhoff-ict/solora 2.0.7 → 2.1.0

package/dist/index.css

@@ -466,10 +466,6 @@
 .dropdown.open .dropdown-btn:after {
   transform: rotate(180deg);
 }
-.dropdown-btn:focus {
-  outline: 2px solid var(--color-primary, #0071e3);
-  outline-offset: 2px;
-}
 .dropdown-content {
   position: absolute;
   top: 100%;
@@ -478,12 +474,14 @@
   min-width: 10rem;
   border-radius: 12px;
   margin-top: 0.5rem;
-  background: rgba(255, 255, 255, 0.8);
+  overflow: hidden;
+  overflow-y: auto;
+  background: rgba(255, 255, 255, 0);
+  border: 1px solid rgba(255, 255, 255, 0.3);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
   max-height: 15rem;
-  overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
   opacity: 0;

package/dist/index.js

@@ -1870,18 +1870,20 @@ function initDropdowns() {
     };
     const initialItem = content.querySelector(".dropdown-item.active") || content.querySelector('.dropdown-item:not([aria-disabled="true"])');
     if (initialItem) setValue(initialItem);
+    const openDropdown = () => drop.classList.add("open");
+    const closeDropdown = () => drop.classList.remove("open");
     btn.addEventListener("click", (e) => {
       if (drop.getAttribute("aria-disabled") === "true") return;
       e.stopPropagation();
       drop.classList.toggle("open");
     });
     document.addEventListener("click", (e) => {
-      if (!drop.contains(e.target)) drop.classList.remove("open");
+      if (!drop.contains(e.target)) closeDropdown();
     });
     content.querySelectorAll(".dropdown-item").forEach((item) => {
       item.addEventListener("click", () => {
         setValue(item);
-        drop.classList.remove("open");
+        closeDropdown();
       });
     });
     let items = Array.from(content.querySelectorAll('.dropdown-item:not([aria-disabled="true"])'));
@@ -1890,7 +1892,7 @@ function initDropdowns() {
       if (drop.getAttribute("aria-disabled") === "true") return;
       if (!["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.key)) return;
       e.preventDefault();
-      drop.classList.add("open");
+      openDropdown();
       if (e.key === "ArrowDown") {
         index = (index + 1) % items.length;
         items.forEach((i) => i.classList.remove("active"));
@@ -1905,10 +1907,10 @@ function initDropdowns() {
       }
       if (e.key === "Enter") {
         setValue(items[index]);
-        drop.classList.remove("open");
+        closeDropdown();
       }
       if (e.key === "Escape") {
-        drop.classList.remove("open");
+        closeDropdown();
       }
     });
     btn.setAttribute("tabindex", "0");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerkhoff-ict/solora",
-  "version": "2.0.7",
+  "version": "2.1.0",
   "description": "Simple CSS component library",
   "main": "dist/index.js",
   "style": "dist/index.css",