docs: improve function bindings documentation with examples

- Added a hopefully clearer explanation of what function bindings are that is more approachable for newcomers
- Included practical examples for common use cases

Author: braden-w

documentation/docs/03-template-syntax/12-bind.md

@@ -19,7 +19,33 @@ Most bindings are _two-way_, meaning that changes to the value will affect the e
 
 ## Function bindings
 
-You can also use `bind:property={get, set}`, where `get` and `set` are functions, allowing you to perform validation and transformation:
+Function bindings allow you to define custom getter and setter logic while keeping the clean `bind:` syntax. Instead of just binding directly to a variable, you provide two functions: one to get the value, and one to set it.
+
+```svelte
+<input bind:value={
+	() => value,                    // getter
+	(v) => { value = v; }          // setter
+} />
+```
+
+Function bindings can act as "interceptors" for your data flow, allowing you to add custom logic when values are get or set:
+
+```svelte
+<Input bind:value={
+	() => name,
+	(v) => { 
+		// Custom logic here!
+		name = v;
+	}
+} />
+```
+
+This allows you to perform validation and transformations on inputs:
+
+
+### Practical examples
+
+#### Lowercase input
 
 ```svelte
 <input bind:value={
@@ -28,6 +54,60 @@ You can also use `bind:property={get, set}`, where `get` and `set` are functions
 />
 ```
 
+#### Format-as-you-type phone number
+
+```svelte
+<script>
+	let phoneNumber = $state('');
+	
+	function formatPhone(value) {
+		// Remove all non-digits
+		const digits = value.replace(/\D/g, '');
+		
+		// Format as (XXX) XXX-XXXX
+		if (digits.length <= 3) return digits;
+		if (digits.length <= 6) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
+		return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6, 10)}`;
+	}
+</script>
+
+<input
+	type="tel"
+	placeholder="(555) 123-4567"
+	bind:value={
+		() => phoneNumber,
+		(v) => { phoneNumber = formatPhone(v); }
+	}
+/>
+```
+
+#### Input validation with error handling
+
+```svelte
+<script>
+	let email = $state('');
+	let emailError = $state('');
+</script>
+
+<Input
+	bind:value={
+		() => email,
+		(newEmail) => {
+			// Validate on every change
+			if (newEmail && !newEmail.includes('@')) {
+				emailError = 'Please enter a valid email';
+			} else {
+				emailError = '';
+			}
+			email = newEmail;
+		}
+	}
+	error={emailError}
+/>
+```
+
+### Readonly bindings
+
 In the case of readonly bindings like [dimension bindings](#Dimensions), the `get` value should be `null`:
 
 ```svelte