@kerkhoff-ict/solora 2.7.3 → 2.7.5

package/dist/index.css

@@ -645,6 +645,7 @@
     Arial,
     sans-serif;
   width: 100%;
+  position: relative;
 }
 .sol-label {
   font-size: 0.85rem;
@@ -656,6 +657,7 @@
 .sol-input {
   appearance: none;
   -webkit-appearance: none;
+  -moz-appearance: textfield;
   width: 100%;
   padding: 0.3rem 0.4rem;
   font-size: 0.95rem;
@@ -671,150 +673,6 @@
   color: var(--color-text-dark, #000);
   opacity: 0.3;
 }
-.sol-input-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    Helvetica,
-    Arial,
-    sans-serif;
-  width: 100%;
-}
-.sol-label {
-  font-size: 0.85rem;
-  font-weight: 500;
-  color: var(--color-text-dark, #000);
-  opacity: 0.6;
-  margin-left: 0.2rem;
-}
-.sol-input {
-  appearance: none;
-  -webkit-appearance: none;
-  width: 100%;
-  padding: 0.3rem 0.4rem;
-  font-size: 0.95rem;
-  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);
-  outline: none;
-}
-.sol-input::placeholder {
-  color: var(--color-text-dark, #000);
-  opacity: 0.3;
-}
-.sol-input:hover {
-  border-color: rgba(0, 0, 0, 0.2);
-  background: var(--color-bg-hover, #ffffff);
-}
-.sol-input:focus {
-  border-color: var(--color-primary, #0071e3);
-  box-shadow: 0 0 0 4px var(--color-focus-glow, rgba(0, 113, 227, 0.15)), 0 2px 8px rgba(0, 0, 0, 0.05);
-  background: var(--color-bg-hover, #ffffff);
-}
-.sol-input:disabled {
-  background: var(--color-secondary, #f5f5f5);
-  color: var(--color-text-dark, #000);
-  opacity: 0.5;
-  cursor: not-allowed;
-  box-shadow: none;
-}
-.sol-input-error {
-  border-color: var(--color-danger, #dc3545) !important;
-}
-.sol-input-error:focus {
-  box-shadow: 0 0 0 4px var(--color-error-glow, rgba(220, 53, 69, 0.15)) !important;
-}
-.sol-input::-webkit-outer-spin-button,
-.sol-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-.sol-input {
-  -moz-appearance: textfield;
-  appearance: none;
-}
-.sol-input-group {
-  position: relative;
-}
-.sol-error-message {
-  color: var(--color-danger, #ff453a);
-  font-size: 0.75rem;
-  font-weight: 500;
-  margin-top: 0.2rem;
-  margin-left: 0.2rem;
-  display: none;
-  animation: solFadeIn 0.2s ease-out;
-}
-@keyframes solFadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(-5px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-.sol-input.is-invalid {
-  border-color: var(--color-danger, #ff453a) !important;
-  box-shadow: 0 0 0 4px var(--color-error-glow, rgba(255, 69, 58, 0.15)) !important;
-}
-:root.dark .sol-label {
-  color: var(--color-text-light, #fff);
-  opacity: 0.6;
-}
-:root.dark .sol-input {
-  background: rgba(28, 28, 30, 0.8);
-  color: var(--color-text-light, #fff);
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 4px 12px rgba(0, 0, 0, 0.4);
-}
-:root.dark .sol-input::placeholder {
-  color: var(--color-text-light, #fff);
-  opacity: 0.3;
-}
-:root.dark .sol-input:hover {
-  background: rgba(44, 44, 46, 0.9);
-  border-color: rgba(255, 255, 255, 0.25);
-}
-:root.dark .sol-input:focus {
-  background: rgba(44, 44, 46, 1);
-  border-color: var(--color-primary-dark, #0a84ff);
-  box-shadow: 0 0 0 4px var(--color-focus-glow-dark, rgba(10, 132, 255, 0.2)), 0 4px 12px rgba(0, 0, 0, 0.5);
-}
-:root.dark .sol-input-error {
-  border-color: var(--color-danger, #ff453a) !important;
-}
-.sol-input:read-only {
-  background: var(--color-bg-readonly, #f9f9f9);
-  border-color: rgba(0, 0, 0, 0.05);
-  cursor: default;
-  box-shadow: none;
-  color: var(--color-text-dark, #000);
-}
-.sol-input:read-only:hover {
-  background: var(--color-bg-readonly, #f9f9f9);
-  border-color: rgba(0, 0, 0, 0.05);
-}
-.sol-input:read-only:focus {
-  border-color: rgba(0, 0, 0, 0.1);
-  box-shadow: none;
-}
-:root.dark .sol-input:read-only {
-  background: rgba(255, 255, 255, 0.03);
-  border-color: rgba(255, 255, 255, 0.05);
-  color: var(--color-text-light, #fff);
-}
 .sol-input:hover {
   border-color: rgba(0, 0, 0, 0.2);
   background: var(--color-bg-hover, #ffffff);
@@ -842,13 +700,6 @@
   -webkit-appearance: none;
   margin: 0;
 }
-.sol-input {
-  -moz-appearance: textfield;
-  appearance: none;
-}
-.sol-input-group {
-  position: relative;
-}
 .sol-error-message {
   color: var(--color-danger, #ff453a);
   font-size: 0.75rem;
@@ -1150,7 +1001,7 @@
 }
 
 /* src/components/check.css */
-.apple-input-group {
+.sol-input-group {
   margin-bottom: 1.5rem;
   font-family:
     -apple-system,
@@ -1161,13 +1012,13 @@
     Arial,
     sans-serif;
 }
-.apple-input-group-title {
+.sol-input-group-title {
   font-weight: 600;
   margin-bottom: 0.5rem;
   display: block;
   color: var(--color-text-dark, #000);
 }
-.apple-input-wrapper {
+.sol-input-wrapper {
   display: flex;
   align-items: center;
   gap: 0.6rem;
@@ -1176,14 +1027,14 @@
   user-select: none;
   color: var(--color-text-dark, #000);
 }
-.apple-input-wrapper input {
+.sol-input-wrapper input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
   height: 0;
   width: 0;
 }
-.apple-control {
+.sol-control {
   position: relative;
   display: inline-block;
   width: 1.25rem;
@@ -1192,20 +1043,20 @@
   border: 1.5px solid rgba(0, 0, 0, 0.2);
   transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
-.apple-checkbox .apple-control {
+.sol-checkbox .sol-control {
   border-radius: 4px;
 }
-.apple-radio .apple-control {
+.sol-radio .sol-control {
   border-radius: 50%;
 }
-.apple-input-wrapper:hover input:not(:disabled) ~ .apple-control {
+.sol-input-wrapper:hover input:not(:disabled) ~ .sol-control {
   border-color: rgba(0, 0, 0, 0.4);
 }
-.apple-input-wrapper input:checked ~ .apple-control {
-  background-color: #007aff;
-  border-color: #007aff;
+.sol-input-wrapper input:checked ~ .sol-control {
+  background-color: var(--color-primary, #0071e3);
+  border-color: var(--color-primary, #0071e3);
 }
-.apple-checkbox .apple-control:after {
+.sol-checkbox .sol-control:after {
   content: "";
   position: absolute;
   display: none;
@@ -1217,10 +1068,10 @@
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
 }
-.apple-checkbox input:checked ~ .apple-control:after {
+.sol-checkbox input:checked ~ .sol-control:after {
   display: block;
 }
-.apple-radio .apple-control:after {
+.sol-radio .sol-control:after {
   content: "";
   position: absolute;
   display: none;
@@ -1232,38 +1083,38 @@
   border-radius: 50%;
   background: white;
 }
-.apple-radio input:checked ~ .apple-control:after {
+.sol-radio input:checked ~ .sol-control:after {
   display: block;
 }
-.apple-input-wrapper input:disabled ~ .apple-control {
+.sol-input-wrapper input:disabled ~ .sol-control {
   background-color: rgba(0, 0, 0, 0.05);
   border-color: rgba(0, 0, 0, 0.1);
   cursor: not-allowed;
 }
-.apple-input-wrapper input:disabled ~ .apple-label {
+.sol-input-wrapper input:disabled ~ .sol-label {
   color: rgba(0, 0, 0, 0.4);
   cursor: not-allowed;
 }
-:root.dark .apple-input-group-title,
-:root.dark .apple-input-wrapper {
+:root.dark .sol-input-group-title,
+:root.dark .sol-input-wrapper {
   color: #f0f0f0;
 }
-:root.dark .apple-control {
+:root.dark .sol-control {
   background: #1c1c1e;
   border-color: rgba(255, 255, 255, 0.3);
 }
-:root.dark .apple-input-wrapper:hover input:not(:disabled) ~ .apple-control {
+:root.dark .sol-input-wrapper:hover input:not(:disabled) ~ .sol-control {
   border-color: rgba(255, 255, 255, 0.5);
 }
-:root.dark .apple-input-wrapper input:checked ~ .apple-control {
-  background-color: #0a84ff;
-  border-color: #0a84ff;
+:root.dark .sol-input-wrapper input:checked ~ .sol-control {
+  background-color: var(--color-primary, #0071e3);
+  border-color: var(--color-primary, #0071e3);
 }
-:root.dark .apple-input-wrapper input:disabled ~ .apple-control {
+:root.dark .sol-input-wrapper input:disabled ~ .sol-control {
   background-color: rgba(255, 255, 255, 0.08);
   border-color: rgba(255, 255, 255, 0.15);
 }
-:root.dark .apple-input-wrapper input:disabled ~ .apple-label {
+:root.dark .sol-input-wrapper input:disabled ~ .sol-label {
   color: rgba(255, 255, 255, 0.3);
 }
 

package/dist/index.js

@@ -2361,7 +2361,7 @@ function initPopovers() {
 
 // src/components/check.js
 function initCheck() {
-  const limitedGroups = document.querySelectorAll(".apple-input-group[data-max]");
+  const limitedGroups = document.querySelectorAll(".sol-input-group[data-max]");
   limitedGroups.forEach((group) => {
     const maxAllowed = parseInt(group.getAttribute("data-max"), 10);
     const checkboxes = group.querySelectorAll('input[type="checkbox"]');

package/package.json

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