@kerkhoff-ict/solora 2.4.3 → 2.5.1

package/dist/index.css

@@ -175,42 +175,6 @@
     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 {
@@ -837,13 +801,12 @@ flux\\:input:focus {
   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);
+  border: 1px solid rgba(200, 200, 200, 0.81);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
@@ -854,7 +817,6 @@ flux\\:input:focus {
   z-index: 1000;
   padding: 0.5rem;
   color: var(--color-text-dark, #000);
-  background: var(--color-bg, #fefefe);
 }
 .popover.sol-pop-w-16 {
   width: 4rem;

package/dist/index.js

@@ -1918,6 +1918,44 @@ function initDropdowns() {
   });
 }
 
+// src/components/input.js
+function initInput(inputElement) {
+  if (!inputElement) return;
+  let errorDisplay = inputElement.parentNode.querySelector(".sol-error-message");
+  if (!errorDisplay) {
+    errorDisplay = document.createElement("span");
+    errorDisplay.className = "sol-error-message";
+    inputElement.parentNode.appendChild(errorDisplay);
+  }
+  inputElement.addEventListener("invalid", (e) => {
+    e.preventDefault();
+    showError();
+  });
+  inputElement.addEventListener("input", () => {
+    if (inputElement.validity.valid) {
+      hideError();
+    }
+  });
+  function showError() {
+    let message = "Ongeldige invoer";
+    if (inputElement.validity.valueMissing) {
+      message = "Dit veld is verplicht";
+    } else if (inputElement.validity.typeMismatch) {
+      if (inputElement.type === "email") message = "Voer een geldig e-mailadres in";
+      if (inputElement.type === "url") message = "Voer een geldige link in";
+    } else if (inputElement.validity.rangeUnderflow) {
+      message = `Minimum is ${inputElement.min}`;
+    }
+    errorDisplay.textContent = message;
+    errorDisplay.style.display = "block";
+    inputElement.classList.add("is-invalid");
+  }
+  function hideError() {
+    errorDisplay.style.display = "none";
+    inputElement.classList.remove("is-invalid");
+  }
+}
+
 // src/components/contextMenu.js
 function initContextMenu() {
   let menu = document.querySelector(".sol-context-menu");
@@ -2296,6 +2334,7 @@ function safeInitAll() {
   try {
     initCodeblocks();
     initDropdowns();
+    initInput();
     initContextMenu();
     initThemeToggle();
     initPopovers();

package/package.json

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