### Install Vaul-Svelte

Source: https://github.com/huntabyte/vaul-svelte/blob/main/README.md

Install the Vaul-Svelte library into your project using npm. This is the first step to using the drawer component in your Svelte application.

```bash
npm install vaul-svelte
```

--------------------------------

### Basic Svelte Drawer Implementation

Source: https://context7.com/huntabyte/vaul-svelte/llms.txt

This snippet demonstrates the fundamental setup for a Vaul-Svelte drawer, including a trigger button and content area. It requires importing the Drawer component from 'vaul-svelte'.

```svelte
<script>
  import { Drawer } from "vaul-svelte";
</script>

<Drawer.Root>
  <Drawer.Trigger>Open</Drawer.Trigger>
  <Drawer.Portal>
    <Drawer.Overlay class="fixed inset-0 bg-black/40" />
    <Drawer.Content>
      <p>Content</p>
    </Drawer.Content>
  </Drawer.Portal>
</Drawer.Root>
```

--------------------------------

### Install vaul-svelte Package

Source: https://context7.com/huntabyte/vaul-svelte/llms.txt

Install the vaul-svelte package using your preferred package manager (npm, pnpm, or yarn). This is the first step to integrating drawer functionality into your Svelte application.

```bash
# Install via npm
npm install vaul-svelte

# Or via pnpm
pnpm add vaul-svelte

# Or via yarn
yarn add vaul-svelte
```

--------------------------------

### Svelte Drawer with Snap Points

Source: https://context7.com/huntabyte/vaul-svelte/llms.txt

Implement a drawer in Svelte that can snap to predefined heights or positions using the 'snapPoints' prop and 'activeSnapPoint' binding. This example uses TypeScript and defines custom snap points for the drawer.

```svelte
<script lang="ts">
  import { Drawer } from "vaul-svelte";

  const snapPoints = ["148px", "355px", 1];
  let activeSnapPoint: string | number | undefined | null = "148px";
</script>

<Drawer.Root {snapPoints} bind:activeSnapPoint>
  <Drawer.Trigger
    class="rounded-full bg-white px-4 py-2.5 text-sm font-semibold text-gray-900"
  >
    Open SnapPoints Drawer
  </Drawer.Trigger>
  <Drawer.Overlay class="fixed inset-0 bg-black/40" />
  <Drawer.Portal>
    <Drawer.Content
      class="fixed bottom-0 left-0 right-0 flex h-full max-h-[97%] flex-col rounded-t-[10px] bg-white"
    >
      <div class="mx-auto flex w-full max-w-md flex-col p-4">
        <h1 class="text-2xl font-medium">The Hidden Details</h1>
        <p class="text-gray-600">
          The world of user interface design is an intricate landscape.
        </p>
        <button class="mt-8 rounded-md bg-black text-gray-50">
          Buy for $199
        </button>
      </div>
    </Drawer.Content>
  </Drawer.Portal>
</Drawer.Root>
```

--------------------------------

### Configure Directional Drawer (Top) with Vaul Svelte

Source: https://context7.com/huntabyte/vaul-svelte/llms.txt

This example illustrates how to configure a drawer to open from the top of the screen instead of the default bottom. It uses the `direction="top"` prop on the `Drawer.Root` component.

```svelte
<script lang="ts">
  import { Drawer } from "vaul-svelte";
</script>

<Drawer.Root direction="top">
  <Drawer.Trigger>Open from Top</Drawer.Trigger>
  <Drawer.Portal>
    <Drawer.Overlay class="fixed inset-0 bg-black/40" />
    <Drawer.Content class="fixed top-0 left-0 right-0 rounded-b-[10px] bg-white">
      <div class="p-4">
        <Drawer.Title>Drawer from Top</Drawer.Title>
        <p>Content slides down from the top of the screen.</p>
      </div>
    </Drawer.Content>
  </Drawer.Portal>
</Drawer.Root>
```

--------------------------------

### Create Non-Dismissible Drawer with Vaul Svelte

Source: https://context7.com/huntabyte/vaul-svelte/llms.txt

This example demonstrates how to create a drawer that cannot be dismissed by swiping or clicking outside the drawer area. It utilizes the `dismissible={false}` prop on the `Drawer.Root` component.

```svelte
<script lang="ts">
  import { Drawer } from "vaul-svelte";

  let open = false;
</script>

<Drawer.Root bind:open dismissible={false}>
  <Drawer.Trigger>Open Non-Dismissible</Drawer.Trigger>
  <Drawer.Portal>
    <Drawer.Overlay class="fixed inset-0 bg-black/40" />
    <Drawer.Content class="fixed bottom-0 left-0 right-0 rounded-t-[10px] bg-white">
      <div class="p-4">
        <p>This drawer requires explicit closure.</p>
        <Drawer.Close class="mt-4 rounded-md bg-gray-900 px-4 py-2 text-white">
          Close Drawer
        </Drawer.Close>
      </div>
    </Drawer.Content>
  </Drawer.Portal>
</Drawer.Root>
```

--------------------------------

### Control Vaul Svelte Drawer Programmatically with Callbacks

Source: https://context7.com/huntabyte/vaul-svelte/llms.txt

This example demonstrates how to control the drawer's open state programmatically and listen to various events like open changes, dragging, and release. It uses `bind:open`, `onOpenChange`, `onDrag`, `onRelease`, and `onActiveSnapPointChange` props.

```svelte
<script lang="ts">
  import { Drawer } from "vaul-svelte";

  let open = false;
  let activeSnapPoint: number | string | null = null;

  function handleOpenChange(isOpen: boolean) {
    console.log("Drawer open state:", isOpen);
    open = isOpen;
  }

  function handleDrag(event: PointerEvent, percentageDragged: number) {
    console.log("Dragging:", percentageDragged);
  }

  function handleRelease(event: PointerEvent, isOpen: boolean) {
    console.log("Released, drawer open:", isOpen);
  }

  function handleSnapPointChange(snapPoint: number | string | null) {
    console.log("Active snap point:", snapPoint);
  }
</script>

<Drawer.Root
  bind:open
  bind:activeSnapPoint
  onOpenChange={handleOpenChange}
  onDrag={handleDrag}
  onRelease={handleRelease}
  onActiveSnapPointChange={handleSnapPointChange}
  snapPoints={[0.3, 0.6, 1]}
  closeThreshold={0.5}
  scrollLockTimeout={500}
>
  <Drawer.Trigger>Open Controlled Drawer</Drawer.Trigger>
  <Drawer.Portal>
    <Drawer.Overlay class="fixed inset-0 bg-black/40" />
    <Drawer.Content class="fixed bottom-0 left-0 right-0 rounded-t-[10px] bg-white">
      <div class="p-4">
        <p>Current snap point: {activeSnapPoint}</p>
        <p>Open state: {open}</p>
      </div>
    </Drawer.Content>
  </Drawer.Portal>
</Drawer.Root>
```

--------------------------------

### Implement Drawer with Background Scaling in Vaul Svelte

Source: https://context7.com/huntabyte/vaul-svelte/llms.txt

This example shows how to make the background content scale down and dim when the drawer is open. It requires wrapping the drawer trigger and content in an element with the `data-vaul-drawer-wrapper` attribute and using `shouldScaleBackground` and `backgroundColor` props on `Drawer.Root`.

```svelte
<script lang="ts">
  import { Drawer } from "vaul-svelte";
</script>

<div data-vaul-drawer-wrapper>
  <Drawer.Root shouldScaleBackground backgroundColor="black">
    <Drawer.Trigger>Open with Scaling</Drawer.Trigger>
    <Drawer.Portal>
      <Drawer.Overlay class="fixed inset-0 bg-black/40" />
      <Drawer.Content class="fixed bottom-0 left-0 right-0 rounded-t-[10px] bg-white">
        <div class="p-4">
          <Drawer.Title>Scaled Background</Drawer.Title>
          <Drawer.Description>
            The background behind this drawer is scaled down and darkened.
          </Drawer.Description>
        </div>
      </Drawer.Content>
    </Drawer.Portal>
  </Drawer.Root>
</div>
```

--------------------------------

### Svelte Scrollable Drawer with Inputs

Source: https://context7.com/huntabyte/vaul-svelte/llms.txt

This Svelte example shows a scrollable drawer component that accommodates input elements. It uses 'max-h-[96%]' to define the maximum height and 'overflow-auto' for scrollability within the drawer's content area.

```svelte
<script lang="ts">
  import { Drawer } from "vaul-svelte";
</script>

<Drawer.Root>
  <Drawer.Trigger class="rounded-full bg-white px-4 py-2.5">
    Open Scrollable Drawer
  </Drawer.Trigger>
  <Drawer.Portal>
    <Drawer.Overlay class="fixed inset-0 bg-black/40" />
    <Drawer.Content
      class="fixed bottom-0 left-0 right-0 flex max-h-[96%] flex-col rounded-t-[10px] bg-white"
    >
      <div class="mx-auto flex w-full max-w-md flex-col overflow-auto rounded-t-[10px] p-4">
        <input class="my-8 border border-gray-400" placeholder="Input" />
        <p>
          But I must explain to you how all this mistaken idea of denouncing pleasure
          and praising pain was born and I will give you a complete account of the system.
        </p>
        <input class="my-8 border border-gray-400" placeholder="Input" />
      </div>
    </Drawer.Content>
  </Drawer.Portal>
</Drawer.Root>
```

--------------------------------

### Prevent Dragging on Specific Sections in Vaul Svelte Drawer

Source: https://context7.com/huntabyte/vaul-svelte/llms.txt

This example shows how to prevent the drawer from being dragged when interacting with specific elements within the drawer's content. This is achieved by adding the `data-vaul-no-drag` attribute to the target HTML element.

```svelte
<script lang="ts">
  import { Drawer } from "vaul-svelte";
</script>

<Drawer.Root>
  <Drawer.Trigger>Open</Drawer.Trigger>
  <Drawer.Portal>
    <Drawer.Overlay class="fixed inset-0 bg-black/40" />
    <Drawer.Content class="fixed bottom-0 left-0 right-0 rounded-t-[10px] bg-white">
      <div class="p-4">
        <p>You can drag here to close the drawer</p>

        <section
          data-vaul-no-drag
          class="grid min-h-16 place-items-center rounded-lg bg-gray-400 p-4"
        >
          <p>Try dragging me - this section won't drag the drawer</p>
        </section>
      </div>
    </Drawer.Content>
  </Drawer.Portal>
</Drawer.Root>
```

--------------------------------

### Set Custom Close Threshold for Vaul Svelte Drawer

Source: https://context7.com/huntabyte/vaul-svelte/llms.txt

This example shows how to customize the threshold required for the drawer to close when swiping down. The `closeThreshold` prop accepts a number between 0 and 1, representing the percentage of the drawer's height that needs to be swiped before it closes. Here, it's set to 0.3 (30%).

```svelte
<script lang="ts">
  import { Drawer } from "vaul-svelte";
</script>

<Drawer.Root closeThreshold={0.3}>
  <Drawer.Trigger>Open (30% threshold)</Drawer.Trigger>
  <Drawer.Portal>
    <Drawer.Overlay class="fixed inset-0 bg-black/40" />
    <Drawer.Content class="fixed bottom-0 left-0 right-0 rounded-t-[10px] bg-white">
      <div class="p-4">
        <p>This drawer closes when swiped down by 30% of its height.</p>
      </div>
    </Drawer.Content>
  </Drawer.Portal>
</Drawer.Root>
```

--------------------------------

### Basic Vaul-Svelte Drawer Usage

Source: https://github.com/huntabyte/vaul-svelte/blob/main/README.md

Demonstrates the fundamental implementation of a drawer component in Svelte using Vaul-Svelte. It includes importing the Drawer, creating a root element, a trigger to open it, and the content that appears within the drawer.

```svelte
<script>
	import { Drawer } from "vaul-svelte";
</script>

<Drawer.Root>
	<Drawer.Trigger>Open</Drawer.Trigger>
	<Drawer.Portal>
		<Drawer.Content>
			<p>Content</p>
		</Drawer.Content>
		<Drawer.Overlay />
	</Drawer.Portal>
</Drawer.Root>
```

--------------------------------

### Vaul-Svelte Drawer API

Source: https://github.com/huntabyte/vaul-svelte/blob/main/README.md

This section details the API reference for the Vaul-Svelte drawer component, including its root, trigger, content, overlay, and other sub-components.

```APIDOC
## Root Component

### Description
Contains all parts of a dialog. Use `shouldScaleBackground` to enable background scaling, it requires an element with `[data-vaul-drawer-wrapper]` data attribute to scale its background. Can be controlled by binding to the `open` prop, or using the `onOpenChange` prop.

### Props

- **closeThreshold** (Number) - A number between 0 and 1 that determines when the drawer should be closed. Example: threshold of 0.5 would close the drawer if the user swiped for 50% of the height of the drawer or more.
- **scrollLockTimeout** (Number) - Duration for which the drawer is not draggable after scrolling content inside of the drawer. Defaults to 500ms.
- **snapPoints** (Array<Number | String>) - Array of numbers from 0 to 100 (percentage of screen height) or pixel values that corresponds to the drawer's snap points. Should go from least visible. Example `[0.2, 0.5, 0.8]`.
- **fadeFromIndex** (Number) - Index of a `snapPoint` from which the overlay fade should be applied. Defaults to the last snap point.
- **direction** (String) - Direction of the drawer. Can be `top`, `bottom`, `left`, or `right`. Defaults to `bottom`.
- **backgroundColor** (String) - Background color of the body when the drawer is open and `shouldScaleBackground` is true. Defaults to black.
- **[data-vaul-no-drag]** (Attribute) - When interacting with an element with this data attribute, the drawer won't be dragged.
- **open** (Boolean) - Controls the open state of the drawer. Can be controlled via two-way binding.
- **onOpenChange** (Function) - Callback function that is called when the open state changes.

### Usage Example
```svelte
<script>
	import { Drawer } from "vaul-svelte";
	let open = false;
</script>

<Drawer.Root bind:open={open} snapPoints={[0.5, 0.8]} direction="bottom">
	<Drawer.Trigger>Open Drawer</Drawer.Trigger>
	<Drawer.Portal>
		<Drawer.Overlay />
		<Drawer.Content>
			<h2>Drawer Title</h2>
			<p>Drawer content goes here.</p>
			<Drawer.Close>Close</Drawer.Close>
		</Drawer.Content>
	</Drawer.Portal>
</Drawer.Root>
```

## Trigger Component

### Description
The button that opens the dialog.

### Props
Refer to [Bits UI Dialog Trigger Props](https://www.bits-ui.com/docs/components/dialog#trigger).

## Content Component

### Description
Content that should be rendered in the drawer.

### Props
Refer to [Bits UI Dialog Content Props](https://www.bits-ui.com/docs/components/dialog#content).

## Overlay Component

### Description
A layer that covers the inert portion of the view when the dialog is open.

### Props
Refer to [Bits UI Dialog Overlay Props](https://www.bits-ui.com/docs/components/dialog#overlay).

## Title Component

### Description
An accessible title to be announced when the dialog is opened.

### Props
Refer to [Bits UI Dialog Title Props](https://www.bits-ui.com/docs/components/dialog#title).

## Description Component

### Description
An optional accessible description to be announced when the dialog is opened.

### Props
Refer to [Bits UI Dialog Description Props](https://www.bits-ui.com/docs/components/dialog#description).

## Close Component

### Description
The button that closes the dialog.

### Props
Refer to [Bits UI Dialog Close Props](https://www.bits-ui.com/docs/components/dialog#close).

## Portal Component

### Description
Portals your drawer into the body.
```

--------------------------------

### Svelte Nested Drawers Implementation

Source: https://context7.com/huntabyte/vaul-svelte/llms.txt

This Svelte code demonstrates how to implement nested drawers using Drawer.NestedRoot. It ensures proper z-index management for multiple stacked drawers, with the outer drawer featuring a background scaling effect.

```svelte
<script lang="ts">
  import { Drawer } from "vaul-svelte";
</script>

<Drawer.Root shouldScaleBackground>
  <Drawer.Trigger class="rounded-full bg-white px-4 py-2.5">
    Open Nested Drawer
  </Drawer.Trigger>
  <Drawer.Portal>
    <Drawer.Overlay class="fixed inset-0 bg-black/40" />
    <Drawer.Content class="fixed bottom-0 left-0 right-0 flex flex-col rounded-t-[10px] bg-white">
      <div class="flex-1 p-4">
        <Drawer.Title class="mb-4 font-medium">Drawer for Svelte.</Drawer.Title>

        <Drawer.NestedRoot>
          <Drawer.Trigger class="rounded-md bg-gray-900 px-3.5 py-2.5 text-white">
            Open Second Drawer
          </Drawer.Trigger>
          <Drawer.Portal>
            <Drawer.Overlay class="fixed inset-0 bg-black/40" />
            <Drawer.Content class="fixed bottom-0 left-0 right-0 flex flex-col rounded-t-[10px] bg-white">
              <div class="flex-1 p-4">
                <Drawer.Title class="mb-4 font-medium">This drawer is nested.</Drawer.Title>
                <p class="text-gray-600">
                  Place a <span class="font-mono">Drawer.NestedRoot</span> inside another drawer.
                </p>
              </div>
            </Drawer.Content>
          </Drawer.Portal>
        </Drawer.NestedRoot>
      </div>
    </Drawer.Content>
  </Drawer.Portal>
</Drawer.Root>
```

--------------------------------

### TypeScript Configuration for vaul-svelte

Source: https://context7.com/huntabyte/vaul-svelte/llms.txt

Import the `Drawer` component and `DrawerDirection` type from `vaul-svelte` for TypeScript projects. The `DrawerDirection` type specifies the possible directions for the drawer, such as 'bottom', 'top', 'left', or 'right'.

```typescript
// Import types for TypeScript projects
import { Drawer, type DrawerDirection } from "vaul-svelte";

// Available direction types
const direction: DrawerDirection = "bottom" | "top" | "left" | "right";
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.