@kerkhoff-ict/solora 2.4.0 → 2.4.1

package/dist/index.css

@@ -817,6 +817,80 @@ flux\\:input:focus {
 
 /* src/components/darkToggle.css */
 
+/* src/components/popover.css */
+.popover {
+  position: relative;
+  display: inline-block;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif;
+  cursor: pointer;
+  user-select: none;
+}
+.popover-content {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 10rem;
+  max-width: 20rem;
+  border-radius: 12px;
+  margin-top: 0.5rem;
+  overflow: hidden;
+  overflow-y: auto;
+  background: transparent;
+  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.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);
+  background: var(--color-bg, #fefefe);
+}
+.popover.sol-pop-w-16 {
+  width: 4rem;
+}
+.popover.sol-pop-w-32 {
+  width: 8rem;
+}
+.popover.sol-pop-w-64 {
+  width: 16rem;
+}
+.popover-content::-webkit-scrollbar {
+  width: 6px;
+}
+.popover-content::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+}
+.popover-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+.popover.open .popover-content {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  pointer-events: auto;
+}
+:root.dark .popover-content {
+  background: transparent;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
+  color: #f0f0f0;
+}
+:root.dark .popover-content::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+}
+
 /* src/index.css */
 :root {
   --font-body:

package/dist/index.js

@@ -2268,6 +2268,29 @@ function initThemeToggle(elementSelector = ".sol-theme-toggle") {
   });
 }
 
+// src/components/popover.js
+function initPopovers() {
+  if (typeof window === "undefined") return;
+  document.querySelectorAll(".popover").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) => {
+      e.stopPropagation();
+      toggle();
+    });
+    document.addEventListener("click", (e) => {
+      if (!pop.contains(e.target)) close();
+    });
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") close();
+    });
+  });
+}
+
 // src/index.js
 function safeInitAll() {
   try {
@@ -2275,6 +2298,7 @@ function safeInitAll() {
     initDropdowns();
     initContextMenu();
     initThemeToggle();
+    initPopovers();
   } catch (err) {
     console.warn("[Solora] initAll error:", err);
   }

package/package.json

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