@kerkhoff-ict/solora 2.1.2 → 2.1.4

package/dist/index.css

@@ -7,13 +7,20 @@
   cursor: pointer;
   transition: background 0.2s, filter 0.2s;
 }
-.btn-rounded {
-  padding: 0 !important;
-  display: flex;
+.btn-rounded-sm {
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  width: 2.2rem;
+  height: 2.2rem;
+  border-radius: 50%;
+  padding: 0;
   cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  background: var(--color-primary, #0071e3);
+  color: var(--color-text-light, #fff);
+  transition: background 0.2s, transform 0.2s;
 }
 .btn-sm {
   padding: 0.1875rem 1rem;

package/dist/index.js

@@ -1851,6 +1851,8 @@ function initMaximizeButton(block, maximizeBtn) {
 function initDropdowns() {
   if (typeof window === "undefined") return;
   document.querySelectorAll(".dropdown").forEach((drop) => {
+    if (drop.dataset.initialized) return;
+    drop.dataset.initialized = "true";
     const btn = drop.querySelector(".dropdown-btn");
     const content = drop.querySelector(".dropdown-content");
     if (!btn || !content) return;
@@ -1861,59 +1863,58 @@ function initDropdowns() {
       hiddenInput.name = drop.dataset.name || "dropdown";
       drop.appendChild(hiddenInput);
     }
+    const getItems = () => Array.from(content.querySelectorAll('.dropdown-item:not([aria-disabled="true"])'));
     const setValue = (item) => {
       if (item.getAttribute("aria-disabled") === "true") return;
-      btn.textContent = item.textContent;
+      btn.innerHTML = item.innerHTML;
       content.querySelectorAll(".dropdown-item").forEach((i) => i.classList.remove("active"));
       item.classList.add("active");
-      hiddenInput.value = item.dataset.value ?? item.textContent;
+      hiddenInput.value = item.dataset.value ?? item.textContent.trim();
+      drop.dispatchEvent(new CustomEvent("change", { detail: hiddenInput.value }));
     };
     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");
+    const toggle = () => drop.classList.toggle("open");
+    const close = () => drop.classList.remove("open");
     btn.addEventListener("click", (e) => {
-      if (drop.getAttribute("aria-disabled") === "true") return;
       e.stopPropagation();
-      drop.classList.toggle("open");
+      toggle();
     });
     document.addEventListener("click", (e) => {
-      if (!drop.contains(e.target)) closeDropdown();
+      if (!drop.contains(e.target)) close();
     });
-    content.querySelectorAll(".dropdown-item").forEach((item) => {
-      item.addEventListener("click", () => {
-        setValue(item);
-        closeDropdown();
-      });
-    });
-    let items = Array.from(content.querySelectorAll('.dropdown-item:not([aria-disabled="true"])'));
-    let index = items.findIndex((i) => i.classList.contains("active"));
     btn.addEventListener("keydown", (e) => {
-      if (drop.getAttribute("aria-disabled") === "true") return;
       if (!["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.key)) return;
+      const items = getItems();
+      let currentIndex = items.findIndex((i) => i.classList.contains("active"));
       e.preventDefault();
-      openDropdown();
+      drop.classList.add("open");
       if (e.key === "ArrowDown") {
-        index = (index + 1) % items.length;
-        items.forEach((i) => i.classList.remove("active"));
-        items[index].classList.add("active");
-        items[index].scrollIntoView({ block: "nearest" });
-      }
-      if (e.key === "ArrowUp") {
-        index = (index - 1 + items.length) % items.length;
-        items.forEach((i) => i.classList.remove("active"));
-        items[index].classList.add("active");
-        items[index].scrollIntoView({ block: "nearest" });
-      }
-      if (e.key === "Enter") {
-        setValue(items[index]);
-        closeDropdown();
+        currentIndex = (currentIndex + 1) % items.length;
+      } else if (e.key === "ArrowUp") {
+        currentIndex = (currentIndex - 1 + items.length) % items.length;
+      } else if (e.key === "Enter") {
+        if (currentIndex >= 0) setValue(items[currentIndex]);
+        close();
+        return;
+      } else if (e.key === "Escape") {
+        close();
+        return;
       }
-      if (e.key === "Escape") {
-        closeDropdown();
+      items.forEach((i) => i.classList.remove("active"));
+      items[currentIndex].classList.add("active");
+      items[currentIndex].scrollIntoView({ block: "nearest" });
+    });
+    content.addEventListener("click", (e) => {
+      const item = e.target.closest(".dropdown-item");
+      if (item) {
+        setValue(item);
+        close();
       }
     });
     btn.setAttribute("tabindex", "0");
+    btn.setAttribute("role", "combobox");
+    btn.setAttribute("aria-haspopup", "listbox");
   });
 }
 

package/package.json

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