Documentation for Svelte (#2262)

* Documentation for Svelte #2261

* fix bracket

---------

Co-authored-by: esaramago <[email protected]>

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>

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>
+```