@kerkhoff-ict/solora 2.2.0 → 2.3.0

package/dist/index.css

@@ -175,6 +175,42 @@
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
   }
 }
+flux\\:button {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  border-radius: 9999px;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background: var(--color-primary, #0071e3);
+  color: var(--color-text-light, #fff);
+}
+flux\\:button:hover {
+  filter: brightness(0.85);
+}
+flux\\:button.btn-secondary {
+  background: var(--color-secondary, #f5f5f5);
+  color: var(--color-text-dark, #000);
+  border: 2px solid rgba(0, 0, 0, 0.1);
+}
+flux\\:input {
+  all: unset;
+  width: 100%;
+  padding: 0.3rem 0.4rem;
+  border-radius: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  background: var(--color-bg, #fefefe);
+  color: var(--color-text-dark, #000);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.05);
+  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+flux\\:input:focus {
+  border-color: var(--color-primary, #0071e3);
+  box-shadow: 0 0 0 4px var(--color-focus-glow, rgba(0, 113, 227, 0.15));
+}
 
 /* src/components/codeblock.css */
 .codeblock {
@@ -429,8 +465,8 @@
   }
 }
 
-/* src/components/dropdown-style.css */
-.sol-container {
+/* src/components/dropdown.css */
+.dropdown {
   position: relative;
   display: inline-block;
   font-family:
@@ -438,81 +474,147 @@
     BlinkMacSystemFont,
     "Segoe UI",
     Roboto,
+    Helvetica,
+    Arial,
     sans-serif;
   cursor: pointer;
   user-select: none;
 }
-.sol-btn {
-  padding: 0.5rem 0.8rem;
+.dropdown-btn {
+  padding: 0.3rem 0.4rem;
   border-radius: 12px;
   border: 1px solid rgba(0, 0, 0, 0.1);
   background: var(--color-bg, #fefefe);
   color: var(--color-text-dark, #000);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   transition: all 0.2s ease;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.sol-btn:hover {
-  background: rgba(0, 0, 0, 0.03);
+.dropdown-btn:hover {
+  background: var(--color-bg-hover, rgba(0, 0, 0, 0.05));
 }
-.sol-btn::after {
+.dropdown-btn:after {
   content: "\25be";
-  font-size: 0.8rem;
+  margin-left: 0.5rem;
+  font-size: 0.75rem;
   transition: transform 0.2s ease;
 }
-.sol-container.open .sol-btn::after {
+.dropdown.open .dropdown-btn:after {
   transform: rotate(180deg);
 }
-.sol-menu {
+.dropdown-content {
   position: absolute;
   top: 100%;
   left: 0;
-  min-width: 100%;
-  margin-top: 0.5rem;
+  width: 100%;
+  min-width: 10rem;
   border-radius: 12px;
-  background: rgba(255, 255, 255, 0.7);
+  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);
-  z-index: 1000;
+  max-height: 15rem;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
   opacity: 0;
   transform: translateY(-10px) scale(0.95);
   pointer-events: none;
   transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
-  overflow: hidden;
+  z-index: 1000;
+}
+.dropdown-content::-webkit-scrollbar {
+  width: 6px;
 }
-.sol-container.open .sol-menu {
+.dropdown-content::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+}
+.dropdown-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+.dropdown.open .dropdown-content {
   opacity: 1;
   transform: translateY(0) scale(1);
   pointer-events: auto;
 }
-.sol-item {
-  padding: 0.6rem 0.8rem;
-  transition: background 0.2s;
-  color: #000;
+.dropdown-item {
+  padding: 0.3rem 0.4rem;
+  color: var(--color-text-dark, #000);
+  transition: background 0.2s, color 0.2s;
+  cursor: pointer;
 }
-.sol-item:hover {
+.dropdown-item:hover {
   background: rgba(0, 0, 0, 0.05);
 }
-.sol-item.active {
-  background: rgba(0, 0, 0, 0.08);
+.dropdown-item.active {
   font-weight: 600;
+  background: rgba(0, 0, 0, 0.1);
+}
+.dropdown-item[aria-disabled=true],
+.dropdown-item.placeholder {
+  color: rgba(0, 0, 0, 0.4);
+  cursor: default;
+  pointer-events: none;
+}
+.dropdown input[type=hidden] {
+  display: none;
+}
+.dropdown-divider {
+  height: 1px;
+  margin: 0.25rem 0;
+  background: rgba(0, 0, 0, 0.1);
 }
-:root.dark .sol-btn {
+.dropdown-label {
+  padding: 0.3rem 0.4rem;
+  font-weight: 600;
+  color: rgba(0, 0, 0, 0.6);
+  cursor: default;
+}
+:root.dark .dropdown-btn {
   background: #1c1c1e;
-  color: #fff;
-  border-color: rgba(255, 255, 255, 0.1);
+  color: #f0f0f0;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
 }
-:root.dark .sol-menu {
-  background: rgba(28, 28, 30, 0.7);
-  color: #fff;
+:root.dark .dropdown-btn:hover {
+  background: rgba(255, 255, 255, 0.05);
 }
-:root.dark .sol-item {
-  color: #fff;
+:root.dark .dropdown-content {
+  background: transparent;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
+}
+:root.dark .dropdown-item {
+  color: #f0f0f0;
+}
+:root.dark .dropdown-item:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+:root.dark .dropdown-item.active {
+  background: rgba(255, 255, 255, 0.12);
+}
+:root.dark .dropdown-divider {
+  background: rgba(255, 255, 255, 0.2);
+}
+:root.dark .dropdown-item[aria-disabled=true],
+:root.dark .dropdown-item.placeholder {
+  color: rgba(255, 255, 255, 0.4);
+}
+:root.dark .dropdown-label {
+  color: rgba(255, 255, 255, 0.6);
+}
+:root.dark .dropdown-content::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
 }
 
 /* src/components/input.css */

package/dist/index.js

@@ -1847,6 +1847,77 @@ function initMaximizeButton(block, maximizeBtn) {
   });
 }
 
+// src/components/dropdown.js
+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;
+    let hiddenInput = drop.querySelector('input[type="hidden"]');
+    if (!hiddenInput) {
+      hiddenInput = document.createElement("input");
+      hiddenInput.type = "hidden";
+      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.innerHTML = item.innerHTML;
+      content.querySelectorAll(".dropdown-item").forEach((i) => i.classList.remove("active"));
+      item.classList.add("active");
+      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 toggle = () => drop.classList.toggle("open");
+    const close = () => drop.classList.remove("open");
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      toggle();
+    });
+    document.addEventListener("click", (e) => {
+      if (!drop.contains(e.target)) close();
+    });
+    btn.addEventListener("keydown", (e) => {
+      if (!["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.key)) return;
+      const items = getItems();
+      let currentIndex = items.findIndex((i) => i.classList.contains("active"));
+      e.preventDefault();
+      drop.classList.add("open");
+      if (e.key === "ArrowDown") {
+        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;
+      }
+      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");
+  });
+}
+
 // src/components/contextMenu.js
 function initContextMenu() {
   let menu = document.querySelector(".sol-context-menu");
@@ -2197,81 +2268,18 @@ function initThemeToggle(elementSelector = ".sol-theme-toggle") {
   });
 }
 
-// src/components/sol-core.js
-function initSolCore() {
-  const elements = document.querySelectorAll('[class*="sol-dropdown-w-["]');
-  elements.forEach((el) => {
-    const classList = Array.from(el.classList);
-    const widthClass = classList.find((c) => c.startsWith("sol-dropdown-w-["));
-    if (widthClass) {
-      const widthValue = widthClass.match(/\[(.*?)\]/)[1];
-      el.style.width = widthValue;
-      const btn = el.querySelector(".sol-btn");
-      if (btn) btn.style.width = "100%";
-    }
-  });
-}
-
-// src/components/sol-select.js
-function initSolSelect() {
-  document.querySelectorAll(".sol-select").forEach((select) => {
-    const btn = select.querySelector(".sol-btn");
-    const items = select.querySelectorAll(".sol-item");
-    const input = select.querySelector('input[type="hidden"]');
-    btn.addEventListener("click", (e) => {
-      e.stopPropagation();
-      select.classList.toggle("open");
-    });
-    items.forEach((item) => {
-      item.addEventListener("click", () => {
-        const val = item.dataset.value || item.innerText;
-        btn.innerText = item.innerText;
-        if (input) input.value = val;
-        items.forEach((i) => i.classList.remove("active"));
-        item.classList.add("active");
-        select.classList.remove("open");
-      });
-    });
-  });
-}
-
-// src/components/sol-dropdown.js
-function initSolDropdown() {
-  document.querySelectorAll(".sol-dropdown").forEach((dropdown) => {
-    const btn = dropdown.querySelector(".sol-btn");
-    btn.addEventListener("click", (e) => {
-      e.stopPropagation();
-      dropdown.classList.toggle("open");
-    });
-    dropdown.querySelectorAll(".sol-item").forEach((item) => {
-      item.addEventListener("click", () => {
-        dropdown.classList.remove("open");
-      });
-    });
-  });
-  document.addEventListener("click", () => {
-    document.querySelectorAll(".sol-container").forEach((el) => el.classList.remove("open"));
-  });
-}
-
 // src/index.js
+function initAll() {
+  initCodeblocks();
+  initDropdowns();
+  initContextMenu();
+  initThemeToggle();
+}
 if (typeof window !== "undefined") {
-  document.addEventListener("DOMContentLoaded", () => {
-    initSolCore();
-    initCodeblocks();
-    initContextMenu();
-    initThemeToggle();
-    initSolSelect();
-    initSolDropdown();
-  });
+  document.addEventListener("DOMContentLoaded", initAll);
 }
 export {
-  initCodeblocks,
-  initContextMenu,
-  initSolCore,
-  initSolDropdown,
-  initSolSelect,
-  initThemeToggle
+  initAll
 };
 /*! Bundled license information:
 

package/package.json

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