feat: autospace toggle

src/lib/assets/keymaps/keymap.d.ts

@@ -16,4 +16,7 @@ export interface ActionInfo {
   variant: "left" | "right";
   variantOf: number;
   keyCode: string;
+  printable?: boolean;
+  separator?: boolean;
+  breaking?: boolean;
 }

src/lib/style/form/_toggle.scss

@@ -27,11 +27,11 @@ label:has(input[type="checkbox"]) {
 
     width: $width;
     height: $height;
+    border-radius: calc($height / 2);
 
     font-size: inherit;
     color: inherit;
 
-    border-radius: calc($height / 2);
     outline: $border solid currentcolor;
     outline-offset: calc(-1 * $border);
 
@@ -46,8 +46,8 @@ label:has(input[type="checkbox"]) {
 
       width: $diameter;
       height: $diameter;
-
       border-radius: calc($radius);
+
       outline-color: inherit;
       outline-style: solid;
       outline-width: $radius;
@@ -62,4 +62,85 @@ label:has(input[type="checkbox"]) {
       outline-offset: calc($padding / 2);
     }
   }
+
+  &:has(span.icon) {
+    $line-width: 10%;
+    $side: calc(($line-width * 2) / sqrt(2));
+    $mid: calc($side / 2);
+
+    > input[type="checkbox"] {
+      display: none;
+    }
+
+    > span.icon {
+      position: relative;
+
+      display: block;
+
+      width: 1em;
+      height: 1em;
+
+      font-size: inherit;
+
+      clip-path: polygon(
+        0% $side,
+        $mid $mid,
+        calc(100% - $mid) calc(100% - $mid),
+        calc(100% - $side) 100%,
+        0% 100%,
+        0% $side,
+        $side 0%,
+        100% calc(100% - $side),
+        calc(100% - $side) 100%,
+        calc(100% - $side) 100%,
+        100% calc(100% - $side),
+        100% calc(100% - $side),
+        100% 0%,
+        $side 0%
+      );
+
+      transition: all 250ms ease;
+
+      &::before {
+        content: "";
+
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, 0) rotate(45deg);
+
+        display: block;
+
+        width: calc(100% * sqrt(2));
+        height: $line-width;
+
+        background-color: currentcolor;
+
+        transition: all 250ms ease;
+      }
+    }
+
+    &:has(:checked) > span.icon {
+      clip-path: polygon(
+        0% $side,
+        $mid $mid,
+        calc(100% - $mid) calc(100% - $mid),
+        calc(100% - $side) 100%,
+        0% 100%,
+        0% $side,
+        $side 0%,
+        100% calc(100% - $side),
+        calc(100% - $side) 100%,
+        0% $side,
+        $side 0%,
+        100% calc(100% - $side),
+        100% 0%,
+        $side 0%
+      );
+
+      &::before {
+        transform: translate(-50%, 0) rotate(45deg) translateX(-100%);
+      }
+    }
+  }
 }

src/lib/style/theme.scss

@@ -2,7 +2,6 @@
 
 @use "form/button";
 @use "form/toggle";
-@use "form/checkbox";
 
 @use "kbd";
 @use "print";