sync

lib/ui/css/checkbox.scss

@@ -90,6 +90,10 @@
         }
     }
 
+    &.ui-switch-red>span:first-of-type::before {
+        background-color: var(--red-color);
+    }
+
     >input[type="checkbox"] {
         display: none;
 
@@ -112,4 +116,33 @@
             }
         }
     }
+}
+
+.ui-switch-group {
+    line-height: 1rem;
+    user-select: none;
+    display: inline-flex;
+    background-color: var(--switch-bg-color);
+    border-radius: 10px;
+
+    >label {
+
+        >span {
+            display: block;
+            padding: 4px 10px;
+            margin: 2px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+    }
+
+    >label>input[type="radio"] {
+        display: none;
+
+        &:checked+span {
+            background-color: white;
+            box-shadow: 1px 1px 8px rgb(0 0 0 / 20%);
+            transition: background-color .08s ease;
+        }
+    }
 }

lib/ui/grid/grid.js

@@ -1433,6 +1433,10 @@ export class Grid {
         });
         grid.addEventListener('mousedown', e => {
             if (e.target === this._var.el) {
+                if (e.offsetX < 0 || e.offsetX > e.target.clientWidth || e.offsetY < 0 || e.offsetY > e.target.clientHeight) {
+                    // except scroll bars
+                    return;
+                }
                 // cancel selections
                 const selectedIndexes = this._var.selectedIndexes;
                 if (selectedIndexes?.length > 0) {