From bf4d6a689804bc9c25a3ce4de07519989f26f1eb Mon Sep 17 00:00:00 2001
From: esaramago <emanuelsaramago@gmail.com>
Date: Thu, 7 Nov 2024 16:48:50 +0000
Subject: [PATCH 1/5] Documentation for Svelte #2261

---
 docs/_includes/sidebar.njk      |  1 +
 docs/pages/frameworks/svelte.md | 85 +++++++++++++++++++++++++++++++++
 2 files changed, 86 insertions(+)
 create mode 100644 docs/pages/frameworks/svelte.md

diff --git a/docs/_includes/sidebar.njk b/docs/_includes/sidebar.njk
index 11745e6579..df0958bb48 100644
--- a/docs/_includes/sidebar.njk
+++ b/docs/_includes/sidebar.njk
@@ -17,6 +17,7 @@
       <li><a href="/frameworks/react">React</a></li>
       <li><a href="/frameworks/vue">Vue</a></li>
       <li><a href="/frameworks/angular">Angular</a></li>
+      <li><a href="/frameworks/svelte">Svelte</a></li>
     </ul>
   </li>
   <li>
diff --git a/docs/pages/frameworks/svelte.md b/docs/pages/frameworks/svelte.md
new file mode 100644
index 0000000000..669d47476d
--- /dev/null
+++ b/docs/pages/frameworks/svelte.md
@@ -0,0 +1,85 @@
+---
+meta:
+  title: Svelte
+  description: Tips for using Shoelace in your Svelte app.
+---
+
+# Svelte
+
+Svelte [plays nice](https://custom-elements-everywhere.com/#svelte) with custom elements, so you can use Shoelace in your Svelte apps with ease.
+
+## Installation
+
+To add Shoelace to your Svelte app, install the package from npm.
+
+```bash
+npm install @shoelace-style/shoelace
+```
+
+Next, [include a theme](/getting-started/themes) and set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets. In this example, we'll import the light theme and use the CDN as a base path.
+
+```jsx
+// main.js or main.ts
+import '@shoelace-style/shoelace/dist/themes/light.css';
+import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';
+
+setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/');
+```
+
+:::tip
+If you'd rather not use the CDN for assets, you can create a build task that copies `node_modules/@shoelace-style/shoelace/dist/assets` into a public folder in your app. Then you can point the base path to that folder instead.
+:::
+
+## Usage
+
+### QR code generator example
+
+```jsx
+<h1>Live editing</h1>
+
+<sl-input label="Message" value={message} oninput={event => message = event.target.value}></sl-input>
+
+<sl-alert open>
+  <sl-icon slot="icon" name="info-circle"></sl-icon>
+  {message}
+</sl-alert>
+
+<script>
+  import '@shoelace-style/shoelace/dist/components/alert/alert.js'
+  import '@shoelace-style/shoelace/dist/components/input/input.js';
+
+  let message = $state('')
+</script>
+```
+
+### Two-way Binding
+
+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
+<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>
+```
+
+:::tip
+Are you using Shoelace with Svelte? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/svelte.md)
+:::
+
+### Slots
+
+Slots in Shoelace/web components are functionally the same as basic slots in Svelte. Slots can be assigned to elements using the `slot` attribute followed by the name of the slot it is being assigned to.
+
+Here is an example:
+
+```jsx
+<sl-drawer label="Drawer" placement="start" class="drawer-placement-start" bind:open=[drawerIsOpen}>
+  This drawer slides in from the start.
+  <div slot="footer">
+    <sl-button variant="primary" onclick={() => (drawerIsOpen = false)}>
+      Close
+    </sl-button>
+  </div>
+</sl-drawer>
+```

From b0d60ce8f4147a8b5dbe42e5eb844c2f4eee91e3 Mon Sep 17 00:00:00 2001
From: esaramago <emanuelsaramago@gmail.com>
Date: Thu, 7 Nov 2024 16:50:35 +0000
Subject: [PATCH 2/5] fix bracket

---
 docs/pages/frameworks/svelte.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/pages/frameworks/svelte.md b/docs/pages/frameworks/svelte.md
index 669d47476d..0e11967b61 100644
--- a/docs/pages/frameworks/svelte.md
+++ b/docs/pages/frameworks/svelte.md
@@ -74,7 +74,7 @@ Slots in Shoelace/web components are functionally the same as basic slots in Sve
 Here is an example:
 
 ```jsx
-<sl-drawer label="Drawer" placement="start" class="drawer-placement-start" bind:open=[drawerIsOpen}>
+<sl-drawer label="Drawer" placement="start" class="drawer-placement-start" bind:open={drawerIsOpen}>
   This drawer slides in from the start.
   <div slot="footer">
     <sl-button variant="primary" onclick={() => (drawerIsOpen = false)}>

From dd6af3d3001909fb351cdb2b4727133c7c2dac73 Mon Sep 17 00:00:00 2001
From: esaramago <dev@emanuelsaramago.com>
Date: Tue, 24 Dec 2024 14:19:29 +0000
Subject: [PATCH 3/5] Improve documentation for Svelte with clearer examples
 for two-way binding #2326

---
 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 0e11967b61..1f0526bd30 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 cb4f61ba4e..4c8872a10d 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 bdb09c2074..9b68117ca6 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>
 ```
 

From 3149d5339371d5c70331a021acad91259d1ccfd0 Mon Sep 17 00:00:00 2001
From: esaramago <dev@emanuelsaramago.com>
Date: Tue, 24 Dec 2024 14:37:57 +0000
Subject: [PATCH 4/5] revert

---
 docs/pages/frameworks/svelte.md | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/docs/pages/frameworks/svelte.md b/docs/pages/frameworks/svelte.md
index 1f0526bd30..0e11967b61 100644
--- a/docs/pages/frameworks/svelte.md
+++ b/docs/pages/frameworks/svelte.md
@@ -57,19 +57,10 @@ 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>
-<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>
+// This works, but it's a bit longer
+<sl-input value={name} oninput={event => message = event.target.value}></sl-input>
 ```
 
 :::tip

From 9da11d542b4b7507b42ee9b14cf285568a998b70 Mon Sep 17 00:00:00 2001
From: esaramago <dev@emanuelsaramago.com>
Date: Tue, 24 Dec 2024 14:38:47 +0000
Subject: [PATCH 5/5] Enhance Svelte documentation with clearer examples for
 two-way binding

---
 docs/pages/frameworks/svelte.md | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/docs/pages/frameworks/svelte.md b/docs/pages/frameworks/svelte.md
index 0e11967b61..1f0526bd30 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