@kerkhoff-ict/solora 2.5.3 → 2.5.4

package/dist/index.css

@@ -798,8 +798,6 @@
 }
 .popover-content {
   position: absolute;
-  top: 100%;
-  left: 0;
   min-width: 10rem;
   border-radius: 12px;
   margin-top: 0.5rem;
@@ -818,6 +816,44 @@
   padding: 0.5rem;
   color: var(--color-text-dark, #000);
 }
+.popover.top-left .popover-content {
+  bottom: 100%;
+  left: 0;
+}
+.popover.top-center .popover-content {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.popover.top-right .popover-content {
+  bottom: 100%;
+  right: 0;
+}
+.popover.bottom-left .popover-content {
+  top: 100%;
+  left: 0;
+}
+.popover.bottom-center .popover-content {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.popover.bottom-right .popover-content {
+  top: 100%;
+  right: 0;
+}
+.popover.left .popover-content {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin: 0 0.5rem;
+}
+.popover.right .popover-content {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin: 0 0.5rem;
+}
 .popover.sol-pop-w-16 {
   width: 4rem;
 }

package/dist/index.js

@@ -2323,22 +2323,38 @@ function initThemeToggle(elementSelector = ".sol-theme-toggle") {
 // src/components/popover.js
 function initPopovers() {
   if (typeof window === "undefined") return;
-  document.querySelectorAll(".popover").forEach((pop) => {
+  const allPopovers = document.querySelectorAll(".popover");
+  allPopovers.forEach((pop) => {
     if (pop.dataset.initialized) return;
     pop.dataset.initialized = "true";
     const content = pop.querySelector(".popover-content");
     if (!content) return;
-    const toggle = () => pop.classList.toggle("open");
-    const close = () => pop.classList.remove("open");
-    pop.addEventListener("click", (e) => {
+    const closeAllOthers = () => {
+      allPopovers.forEach((p) => {
+        if (p !== pop) p.classList.remove("open");
+      });
+    };
+    const toggle = (e) => {
       e.stopPropagation();
-      toggle();
-    });
+      const isOpen = pop.classList.contains("open");
+      closeAllOthers();
+      if (!isOpen) {
+        pop.classList.add("open");
+      } else {
+        pop.classList.remove("open");
+      }
+    };
+    const trigger = pop.querySelector(".popover-btn") || pop.querySelector("input") || pop;
+    trigger.addEventListener("click", toggle);
     document.addEventListener("click", (e) => {
-      if (!pop.contains(e.target)) close();
+      if (!pop.contains(e.target)) {
+        pop.classList.remove("open");
+      }
     });
     document.addEventListener("keydown", (e) => {
-      if (e.key === "Escape") close();
+      if (e.key === "Escape") {
+        pop.classList.remove("open");
+      }
     });
   });
 }

package/package.json

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