# Drawer

Display a content that slides in from the side of the screen.

## Usage

Use standalone.
```svelte
<Drawer {...props}>Content</Drawer>
```

## Anatomy

The `class` attribute values represent part names. Other attributes represent their corresponding props.

```svelte
<dialog class="whole" {...rest} {style}>
  {children}
</dialog>
```

## Props

| Name | Type | Default | Description |
|---|---|---|---|
| `children*` | `Snippet` | - | Drawer content; receives the variant as its argument |
| `open` | `boolean` | `false` | Bindable open state |
| `position` | `Position` | `"left"` | Specifies where to display the Drawer |
| `size` | `string` | `"auto"` | Specifies a valid CSS value for the Drawer width or height |
| `duration` | `number` | `200` | Animation duration in milliseconds |
| `cssvar` | `Record` | - | Renames the published animation-timing custom property; `cssvar.duration` makes the Drawer read `--svs-duration` from a caller-named token |
| `closable` | `boolean` | `true` | Whether light dismiss is enabled; `false` creates a forced-action modal with no light-dismiss or Escape |
| `ariaLabel` | `string` | - | Accessible label for the dialog |
| `element` | `HTMLDialogElement` | - | Bindable root element |
| `styling` | `SVSClass` | - | Styling override |
| `variant` | `SVSVariant` | `NEUTRAL` | Drawer variant |
`*` required. Other `HTMLDialogAttributes` are passed to `<dialog>` via rest props; `class` is merged onto the root.

If `size` is omitted, `auto` is used. It's recommended to specify the size explicitly, since the CSS property `interpolate-size: allow-keywords;`, which is not yet supported by some browsers, is applied when using `auto`.

Drawer is a native modal `<dialog>` opened with `showModal()`: focus is trapped and background content is inert while open, and page scroll is locked with `:root:has(dialog[open])`.

## Styling

In this component, `margin` and `padding` cannot be used for the `whole` part. To learn more, see [Styling](/docs/styling).

### Variant Management

No automatic switching.

### Default Class Name

`svs-drawer`

## Behavior

Drawer is modal: focus is trapped and background siblings are inert while open by native dialog behavior.
`closable=false` creates a forced-action modal (no light-dismiss/Escape).
Open/close animation timing is published as `--svs-duration` for caller CSS; `cssvar.duration` renames it (caller then owns reduced-motion for that token).

## Accessibility

### ARIA Roles and Attributes

The component applies these automatically:

- Dialog (`whole` `<dialog>`): `aria-label` from the `ariaLabel` prop.

Provide an accessible name yourself because there is no built-in visible label. Pass `ariaLabel`, or pass `aria-labelledby` through the rest props. The managed `aria-label` attribute is omitted from `DrawerProps` and cannot be passed as `aria-label`.

### Standards Basis

Drawer is built on a native `<dialog>` opened with `showModal()`, so keyboard and assistive-technology support follows the browser standard for modal dialogs. See the [Concepts standards-first guidance](/docs/concepts) for the library's approach. When `closable` is `false`, the component prevents the native Escape light-dismiss.

## Exports

### Types

```ts
type Position = "top" | "right" | "bottom" | "left";
type DrawerCssVar = "duration";
interface DrawerProps extends Omit<HTMLDialogAttributes, "children" | "style" | "aria-label"> {
  children: Snippet<[string]>; // Snippet<[variant]>
  open?: boolean; // bindable (false)
  position?: Position; // ("left")
  size?: string; // ("auto")
  duration?: number; // (200)
  cssvar?: Partial<Record<DrawerCssVar, string>>;
  closable?: boolean; // (true)
  ariaLabel?: string;
  element?: HTMLDialogElement; // bindable
  styling?: SVSClass;
  variant?: SVSVariant; // (VARIANT.NEUTRAL)
  // other HTMLDialogAttributes are passed to <dialog> via ...rest; `class` is merged onto root
  // style is component-owned (omitted)
}
type DrawerReqdProps = "children";
type DrawerBindProps = "open" | "element";
```

### Others

No additional exports are available.

## Examples

The example code uses Tailwind CSS along with `SVSClass`.

### Basic

**Code**

```svelte src=DrawerBasic.svelte
<script lang="ts">
  import { Drawer } from "svseeds";

  let open = $state(false);
  const styling = {
    whole: "flex flex-col justify-center bg-white text-black dark:bg-black dark:text-white",
  };
  const myProps = {
    position: "right" as const,
    size: "10rem",
    styling,
  };
</script>

<button class="px-2 rounded-md border text-center cursor-pointer" onclick={() => (open = true)}>Open Drawer</button>
<Drawer bind:open {...myProps}>
  <div class="text-center">Hello!!</div>
</Drawer>
```
### With Interactive Variant

**Code**

```svelte src=DrawerPract.svelte
<script lang="ts">
  import { Drawer } from "svseeds";
  import X from "@lucide/svelte/icons/x";

  let { variant = $bindable() } = $props();
  let open = $state(false);
  const variantStyle = {
    neutral: "bg-gray-400",
    active: "bg-teal-500",
    inactive: "bg-red-500",
    blue: "bg-blue-500",
    yellow: "bg-yellow-500",
    sky: "bg-sky-500",
  };
  const styling = {
    whole: {
      base: "text-black dark:text-white",
      ...variantStyle,
    },
  };
  const myProps = {
    position: "bottom" as const,
    size: "calc(var(--spacing) * 30)",
    duration: 500,
    styling,
  };
</script>

<button class="px-2 rounded-md border text-center cursor-pointer" onclick={() => (open = true)}>Open Drawer</button>
<Drawer bind:open {variant} {...myProps}>
  <div class="py-2 px-4">
    <div class="flex justify-between items-center">
      <div class="text-xl">Drawer Title</div>
      <button class="cursor-pointer" onclick={() => (open = false)}>
        <X class="size-5" />
      </button>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</Drawer>
```