From 7f88bb3de838422bece978b4bf42ecb0f2f63893 Mon Sep 17 00:00:00 2001
From: Emanuel Saramago <dev@emanuelsaramago.com>
Date: Thu, 2 Jan 2025 14:56:27 +0000
Subject: [PATCH] Svelte documentation: adding Two-way Binding example in
 <sl-select> (#2327)

* Documentation for Svelte #2261

* fix bracket

* Improve documentation for Svelte with clearer examples for two-way binding #2326

* revert

* Enhance Svelte documentation with clearer examples for two-way binding

---------

Co-authored-by: esaramago <emanuelsaramago@gmail.com>
---
 docs/pages/frameworks/svelte.md | 15 ++++++++++++---
 docs/pages/frameworks/vue-2.md  |  4 ++--
 docs/pages/frameworks/vue.md    |  4 ++--
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/docs/pages/frameworks/svelte.md b/docs/pages/frameworks/svelte.md
index 0e11967b..1f0526bd 100644
--- a/docs/pages/frameworks/svelte.md
+++ b/docs/pages/frameworks/svelte.md
@@ -57,10 +57,19 @@ If you'd rather not use the CDN for assets, you can create a build task that cop
 One caveat is there's currently Svelte only supports `bind:value` directive in `<input>`, `<textarea>` and `<select>`, but you can still achieve two-way binding manually.
 
 ```jsx
-// This doesn't work
+// ❌ This doesn't work
 <sl-input bind:value="name"></sl-input>
-// This works, but it's a bit longer
-<sl-input value={name} oninput={event => message = event.target.value}></sl-input>
+<sl-select bind:value="job">
+  <sl-option value="designer">Designer</sl-option>
+  <sl-option value="developer">Developer</sl-option>
+</sl-select>
+
+// ✅ This is a bit longer, but it works
+<sl-input value={name} oninput={event => name = event.target.value}></sl-input>
+<sl-select value={job} onsl-change={event => job = event.target.value}>
+  <sl-option value="designer">Designer</sl-option>
+  <sl-option value="developer">Developer</sl-option>
+</sl-select>
 ```
 
 :::tip
diff --git a/docs/pages/frameworks/vue-2.md b/docs/pages/frameworks/vue-2.md
index cb4f61ba..4c8872a1 100644
--- a/docs/pages/frameworks/vue-2.md
+++ b/docs/pages/frameworks/vue-2.md
@@ -67,9 +67,9 @@ When binding complex data such as objects and arrays, use the `.prop` modifier t
 One caveat is there's currently [no support for v-model on custom elements](https://github.com/vuejs/vue/issues/7830), but you can still achieve two-way binding manually.
 
 ```html
-<!-- This doesn't work -->
+<!-- ❌ This doesn't work -->
 <sl-input v-model="name"></sl-input>
-<!-- This works, but it's a bit longer -->
+<!-- ✅ This works, but it's a bit longer -->
 <sl-input :value="name" @input="name = $event.target.value"></sl-input>
 ```
 
diff --git a/docs/pages/frameworks/vue.md b/docs/pages/frameworks/vue.md
index bdb09c20..9b68117c 100644
--- a/docs/pages/frameworks/vue.md
+++ b/docs/pages/frameworks/vue.md
@@ -100,9 +100,9 @@ When binding complex data such as objects and arrays, use the `.prop` modifier t
 One caveat is there's currently [no support for v-model on custom elements](https://github.com/vuejs/vue/issues/7830), but you can still achieve two-way binding manually.
 
 ```html
-<!-- This doesn't work -->
+<!-- ❌ This doesn't work -->
 <sl-input v-model="name"></sl-input>
-<!-- This works, but it's a bit longer -->
+<!-- ✅ This works, but it's a bit longer -->
 <sl-input :value="name" @input="name = $event.target.value"></sl-input>
 ```