Lib: Allow binding the <Input> value

src/lib/components/form/Input.svelte

@@ -8,11 +8,20 @@
     /** Manually set the label width, to align multiple inputs vertically. Supply value in CSS units. */
     labelwidth?: string;
 
+    /** The variable to bind to the input element. Has to be a [$state] so its value can be updated with the input element's contents. */
+    value?: string;
+
     /** The type of the input element, e.g. "text". */
     type?: string;
   }
 
-  let { children, labelwidth = "auto", type = "text", ...restProps }: InputProps = $props();
+  let {
+    children,
+    labelwidth = "auto",
+    value = $bindable(),
+    type = "text",
+    ...restProps
+  }: InputProps = $props();
 </script>
 
 <div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
@@ -22,5 +31,5 @@
   >
     {@render children()}
   </div>
-  <input {type} {...restProps} />
+  <input bind:value class="!outline-none" {type} {...restProps} />
 </div>