@kerkhoff-ict/solora 2.5.3 → 2.6.0

package/dist/index.css

@@ -798,11 +798,8 @@
 }
 .popover-content {
   position: absolute;
-  top: 100%;
-  left: 0;
   min-width: 10rem;
   border-radius: 12px;
-  margin-top: 0.5rem;
   overflow: hidden;
   overflow-y: auto;
   background: transparent;
@@ -811,13 +808,118 @@
   -webkit-backdrop-filter: blur(12px);
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
   opacity: 0;
-  transform: translateY(-10px) scale(0.95);
   pointer-events: none;
   transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
   z-index: 1000;
-  padding: 0.5rem;
   color: var(--color-text-dark, #000);
 }
+.popover.top-left .popover-content {
+  bottom: 100%;
+  right: 0;
+  margin: 0.5rem 0;
+}
+.popover.top-center .popover-content {
+  bottom: 100%;
+  right: 50%;
+  transform: translateX(50%) !important;
+  margin: 0.5rem 0;
+}
+.popover.top-right .popover-content {
+  bottom: 100%;
+  left: 0;
+  margin: 0.5rem 0;
+}
+.popover.bottom-left .popover-content {
+  top: 100%;
+  right: 0;
+  margin: 0.5rem 0;
+}
+.popover.bottom-center .popover-content {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) !important;
+  margin: 0.5rem 0;
+}
+.popover.bottom-right .popover-content {
+  top: 100%;
+  left: 0;
+  margin: 0.5rem 0;
+}
+.popover.left .popover-content {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%) !important;
+  margin: 0 0.5rem;
+}
+.popover.right .popover-content {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%) !important;
+  margin: 0 0.5rem;
+}
+.popover-header {
+  padding: 0.8rem 1rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  margin-bottom: 0.2rem;
+}
+.popover-header h3 {
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  color: var(--color-text-dark, #000);
+  opacity: 0.4;
+}
+.popover-list {
+  display: flex;
+  flex-direction: column;
+  padding: 0.3rem;
+}
+.popover-item {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  width: 100%;
+  padding: 0.5rem 0.7rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--color-text-dark, #000);
+  border-radius: 8px;
+  transition: all 0.15s ease;
+  text-align: left;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.popover-item:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+.popover-item.item-danger {
+  color: var(--color-danger, #ff453a);
+}
+.popover-item.item-danger:hover {
+  background: rgba(255, 69, 58, 0.1);
+}
+.popover-divider {
+  height: 1px;
+  background: rgba(0, 0, 0, 0.05);
+  margin: 0.3rem 0;
+}
+:root.dark .popover-header {
+  border-bottom-color: rgba(255, 255, 255, 0.1);
+}
+:root.dark .popover-header h3 {
+  color: var(--color-text-light, #fff);
+}
+:root.dark .popover-item {
+  color: var(--color-text-light, #fff);
+}
+:root.dark .popover-item:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+:root.dark .popover-divider {
+  background: rgba(255, 255, 255, 0.1);
+}
 .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.6.0",
   "description": "Simple CSS component library",
   "main": "dist/index.js",
   "style": "dist/index.css",