From 9f401f8e8b8353e14e7bdf862a46db437afa9b2e Mon Sep 17 00:00:00 2001
From: Emanuel Saramago <dev@emanuelsaramago.com>
Date: Mon, 2 Dec 2024 18:23:04 +0000
Subject: [PATCH] Documentation for Svelte (#2262)

* Documentation for Svelte #2261

* fix bracket

---------

Co-authored-by: esaramago <emanuelsaramago@gmail.com>
---
 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 11745e65..df0958bb 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 00000000..0e11967b
--- /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>
+```