replace minmax with radio

index.html

@@ -81,11 +81,16 @@
     <template id="function-template">
       <form bind-to="form" autocomplete="off">
         <div class="fn-control | flex col no-gap">
-          <label class="fn-minmax | center">
-            <!-- TODO ... this should be a radio. this whole time -->
-            <input type="checkbox" name="sortOrder" role="button" />
-            <span>Minimizing | Maximizing</span>
-          </label>
+          <div class="fn-minmax | center flex small-gap">
+            <label>
+              <input type="radio" name="sortOrder" value="min" checked />
+              <span class="toggle-label | pill-shape highlight-border">Minimizing</span>
+            </label>
+            <label>
+              <input type="radio" name="sortOrder" value="max" />
+              <span class="toggle-label | pill-shape highlight-border">Maximizing</span>
+            </label>
+          </div>
           <div class="fn-body | flex">
             <label bind-to="useWholeImageLabel">
               <input type="checkbox" name="useWholeImage" />
@@ -201,11 +206,11 @@
         <div class="center flex big-gap">
           <label>
             <input type="radio" name="colorSpace" value="jab" checked />
-            CIECAM
+            <span class="toggle-label | pill-shape highlight-border">CIECAM</span>
           </label>
           <label>
             <input type="radio" name="colorSpace" value="rgb" />
-            sRGB
+            <span class="toggle-label | pill-shape highlight-border">sRGB</span>
           </label>
         </div>
       </form>

script.js

@@ -148,14 +148,6 @@ U.template(
   ({ form, metricSymbol, metricSymbolCls, clusterName, clusterNameInv }) => {
     form.name = "sortFunction";
 
-    const toggle = U.field(form.elements.sortOrder);
-    U.reactive(() => {
-      toggle.value = sortOrder.value === "max";
-    });
-    U.reactive(() => {
-      sortOrder.value = toggle.value ? "max" : "min";
-    });
-
     U.field(form.elements.useWholeImage, { obs: sortUseWholeImage });
     U.field(form.elements.useBestCluster, { obs: sortUseBestCluster });
     U.field(form.elements.clusterSize, { obs: sortUseClusterSize });
@@ -171,7 +163,14 @@ U.template(
 
     clusterName.innerText = clusterNameInv.innerText = "B";
 
-    U.form(form);
+    form.elements.sortOrder.value = sortOrder.value;
+    U.form(form, {
+      onChange: {
+        sortOrder(value) {
+          sortOrder.value = value;
+        },
+      },
+    });
     return "sort-fn-mount";
   }
 );
@@ -183,14 +182,6 @@ U.template(
 
     form.elements.sortOrder.checked = true;
 
-    const toggle = U.field(form.elements.sortOrder);
-    U.reactive(() => {
-      toggle.value = clusterOrder.value === "max";
-    });
-    U.reactive(() => {
-      clusterOrder.value = toggle.value ? "max" : "min";
-    });
-
     U.field(form.elements.clusterSize, { obs: clusterUseClusterSize });
     U.field(form.elements.invClusterSize, { obs: clusterUseInverseClusterSize });
     U.field(form.elements.totalSize, { obs: clusterUseTotalSize });
@@ -208,7 +199,14 @@ U.template(
 
     clusterName.innerText = clusterNameInv.innerText = "K";
 
-    U.form(form);
+    form.elements.sortOrder.value = clusterOrder.value;
+    U.form(form, {
+      onChange: {
+        sortOrder(value) {
+          clusterOrder.value = value;
+        },
+      },
+    });
     return "cls-fn-mount";
   }
 );

styles.css

@@ -210,6 +210,10 @@ button.color-select:hover {
   flex: 0 0 2rem;
 }
 
+#targetSelect input[type="radio"] {
+  display: none;
+}
+
 #cls-title,
 :is(#cls-fn-mount, #cls-metric-mount) form {
   transition: opacity 200ms;
@@ -309,29 +313,8 @@ button.color-select:hover {
 
 /* Sort Function Controls */
 
-.fn-control .fn-minmax span {
-  position: relative;
-  padding: 0.25rem 0.5ch;
-  display: inline-flex;
-  justify-content: center;
-}
-
-.fn-control .fn-minmax input[type="checkbox"] + span::before {
-  position: absolute;
-  content: "";
-  inset: 0;
-  background-color: var(--shadow);
-  border-radius: 100vmax;
-  border: 1px solid var(--highlight);
-  transition: transform 200ms ease-in;
-
-  /* this is wildly fragile lol */
-  right: 52%;
-}
-
-.fn-control .fn-minmax input[type="checkbox"]:checked + span::before {
-  /* this is wildly fragile lol */
-  transform: translateX(107%) scaleX(105%);
+.fn-control .fn-minmax label span {
+  padding: 0.125rem 0.75ch;
 }
 
 .fn-control .fn-body {
@@ -341,7 +324,7 @@ button.color-select:hover {
   align-items: center;
 }
 
-.fn-control input[type="checkbox"] {
+.fn-control :is(input[type="checkbox"], input[type="radio"]) {
   display: none;
 }