initial commit

src/lib/CheckboxLabel.svelte

@@ -0,0 +1,55 @@
+
+<script lang="ts">
+
+let { children, name, value = '1' } = $props();
+
+let checked = $state(false);
+</script>
+
+<label>
+    <span class="toggleout" class:checked role="checkbox" aria-checked={checked}></span>
+    <input type="checkbox" bind:checked {name} {value} />
+    {@render children()}
+</label>
+
+<style>
+    [type="checkbox"] {
+        display: none;
+    }
+
+    .toggleout {
+        display: inline-block;
+        height: 1em;
+        width: 2em;
+        vertical-align: middle;
+        background-color: var(--bg-sharp);
+        border-radius: 1em;
+        position: relative;
+        transition: ease .5s;
+    }
+
+    .toggleout::before {
+        display: inline-block;
+        background-color: var(--text-primary);
+        width: .8em;
+        height: .8em;
+        border-radius: 1em;
+        content: '\00d7';
+        color: var(--bg-sharp);
+        position: absolute;
+        left: .1em;
+        top: .1em;
+        line-height: .6;
+        transition: ease .5s left;
+    }
+
+    .toggleout.checked {
+        background-color: var(--accent);
+    }
+
+    .toggleout.checked::before {
+        content: '\2713';
+        left: 1.1em;
+        top: .1em;
+    }
+</style>