@kerkhoff-ict/solora 2.7.2 → 2.7.4

package/dist/index.css

@@ -511,24 +511,29 @@
   pointer-events: auto;
 }
 .dropdown.top-left .dropdown-content {
+  top: auto;
   bottom: 100%;
-  left: 0;
+  left: auto;
+  right: 0;
   margin: 0.5rem 0;
 }
 .dropdown.top-center .dropdown-content {
+  top: auto;
   bottom: 100%;
   left: 50%;
   transform: translateX(-50%) !important;
   margin: 0.5rem 0;
 }
 .dropdown.top-right .dropdown-content {
+  top: auto;
   bottom: 100%;
-  right: 0;
+  left: 0;
   margin: 0.5rem 0;
 }
 .dropdown.bottom-left .dropdown-content {
   top: 100%;
-  left: 0;
+  left: auto;
+  right: 0;
   margin: 0.5rem 0;
 }
 .dropdown.bottom-center .dropdown-content {
@@ -539,18 +544,19 @@
 }
 .dropdown.bottom-right .dropdown-content {
   top: 100%;
-  right: 0;
+  left: 0;
   margin: 0.5rem 0;
 }
 .dropdown.left .dropdown-content {
-  right: 100%;
   top: 50%;
+  left: auto;
+  right: 100%;
   transform: translateY(-50%) !important;
   margin: 0 0.5rem;
 }
 .dropdown.right .dropdown-content {
-  left: 100%;
   top: 50%;
+  left: 100%;
   transform: translateY(-50%) !important;
   margin: 0 0.5rem;
 }
@@ -1144,7 +1150,7 @@
 }
 
 /* src/components/check.css */
-.apple-input-group {
+.sol-input-group {
   margin-bottom: 1.5rem;
   font-family:
     -apple-system,
@@ -1155,13 +1161,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;
@@ -1170,14 +1176,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;
@@ -1186,20 +1192,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;
@@ -1211,10 +1217,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;
@@ -1226,38 +1232,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.2",
+  "version": "2.7.4",
   "description": "Simple CSS component library",
   "main": "dist/index.js",
   "style": "dist/index.css",