css-drawer 0.1.3 → 0.2.0

package/README.md

@@ -12,7 +12,7 @@ A near drop-in replacement for [Vaul](https://vaul.emilkowal.ski) using native `
 | Animation engine | JavaScript | Pure CSS |
 | Nesting | Manual setup | Automatic (CSS `:has()`) |
 | Accessibility | Built-in | Automatic (native `<dialog>` + `inert`) |
-| API | Controlled state | Native refs |
+| API | Controlled state | Native refs or controlled state |
 
 ## Installation
 
@@ -58,7 +58,7 @@ function App() {
 
 ```ts
 import { open, close } from 'css-drawer'
-import 'css-drawer/styles'
+// Styles are auto-injected
 
 document.querySelector('#open-btn').onclick = () => open('my-drawer')
 ```
@@ -68,7 +68,7 @@ document.querySelector('#open-btn').onclick = () => open('my-drawer')
 
 <dialog class="drawer" id="my-drawer">
   <div class="drawer-handle"></div>
-  <div className="drawer-content">
+  <div class="drawer-content">
     <h2>Title</h2>
     <p>Description</p>
     <button onclick="this.closest('dialog').close()">Close</button>
@@ -76,6 +76,44 @@ document.querySelector('#open-btn').onclick = () => open('my-drawer')
 </dialog>
 ```
 
+### Angular
+
+Angular's build system doesn't process CSS imports from JS modules. Import styles in your global `styles.css`:
+
+```css
+/* src/styles.css */
+@import 'css-drawer/styles';
+```
+
+Then use the native dialog API in your component:
+
+```typescript
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  template: `
+    <button (click)="openDrawer(drawer)">Open</button>
+
+    <dialog #drawer class="drawer" data-direction="modal">
+      <div class="drawer-content">
+        <h2>Title</h2>
+        <button (click)="closeDrawer(drawer)">Close</button>
+      </div>
+    </dialog>
+  `
+})
+export class ExampleComponent {
+  openDrawer(dialog: HTMLDialogElement) {
+    dialog.showModal();
+  }
+
+  closeDrawer(dialog: HTMLDialogElement) {
+    dialog.close();
+  }
+}
+```
+
 ---
 
 ## React API
@@ -99,12 +137,16 @@ Provides context for direction. Wrap your drawer content.
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `direction` | `'bottom' \| 'top' \| 'left' \| 'right'` | `'bottom'` | Direction the drawer opens from |
+| `direction` | `'bottom' \| 'top' \| 'left' \| 'right' \| 'modal'` | `'bottom'` | Direction the drawer opens from |
 | `children` | `ReactNode` | - | Drawer content |
 
 ### Drawer.Content
 
-The dialog element. Pass a ref to control open/close.
+The dialog element. Supports both uncontrolled (refs) and controlled (state) modes.
+
+> **Note:** `open`/`onOpenChange` props are on `Content`, not `Root`. This is intentional - `Content` wraps the native `<dialog>` element, so open/close control lives where the element lives. `Root` only provides configuration (direction).
+
+#### Uncontrolled Mode (Refs)
 
 ```tsx
 const ref = useRef<HTMLDialogElement>(null)
@@ -118,9 +160,29 @@ ref.current?.close()
 <Drawer.Content ref={ref}>...</Drawer.Content>
 ```
 
+#### Controlled Mode (State)
+
+```tsx
+const [isOpen, setIsOpen] = useState(false)
+
+<Drawer.Content open={isOpen} onOpenChange={setIsOpen}>
+  ...
+</Drawer.Content>
+
+// Open programmatically
+<button onClick={() => setIsOpen(true)}>Open</button>
+```
+
+The `onOpenChange` callback fires when:
+- User presses Escape
+- User clicks the backdrop (if `closeOnOutsideClick` is true)
+- You call `setIsOpen(false)`
+
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `ref` | `Ref<HTMLDialogElement>` | - | Ref to control the dialog |
+| `ref` | `Ref<HTMLDialogElement>` | - | Ref to control the dialog (uncontrolled mode) |
+| `open` | `boolean` | - | Controlled open state |
+| `onOpenChange` | `(open: boolean) => void` | - | Called when open state changes |
 | `closeOnOutsideClick` | `boolean` | `true` | Close when clicking outside the drawer |
 | `className` | `string` | - | Additional CSS classes |
 | `...props` | `DialogHTMLAttributes` | - | All native dialog props |
@@ -169,7 +231,7 @@ Semantic description for accessibility.
 
 ```ts
 import { open, close, closeAll } from 'css-drawer'
-import 'css-drawer/styles'
+// Styles are auto-injected
 ```
 
 ### open(drawer)
@@ -262,6 +324,7 @@ open(drawer)
 |--------|------|---------|-------------|
 | `id` | `string` | - | Drawer ID |
 | `content` | `string` | `''` | HTML content |
+| `direction` | `DrawerDirection` | `'bottom'` | Direction the drawer opens from |
 | `handle` | `boolean` | `true` | Include drag handle |
 | `className` | `string` | `''` | Additional CSS classes |
 | `closeOnOutsideClick` | `boolean` | `true` | Close when clicking outside |
@@ -353,6 +416,7 @@ const isMobile = useMediaQuery('(max-width: 768px)')
 | `top` | Opens from top |
 | `left` | Opens from left |
 | `right` | Opens from right |
+| `modal` | Centered modal with scale animation |
 
 ---
 
@@ -360,6 +424,8 @@ const isMobile = useMediaQuery('(max-width: 768px)')
 
 Drawers automatically stack when opened. No configuration needed.
 
+### With Refs
+
 ```tsx
 const drawer1 = useRef<HTMLDialogElement>(null)
 const drawer2 = useRef<HTMLDialogElement>(null)
@@ -372,6 +438,34 @@ drawer2.current?.showModal()
 // drawer1 automatically scales down and dims
 ```
 
+### With Controlled State
+
+```tsx
+const [settingsOpen, setSettingsOpen] = useState(false)
+const [confirmOpen, setConfirmOpen] = useState(false)
+
+<>
+  <button onClick={() => setSettingsOpen(true)}>Settings</button>
+
+  <Drawer.Root>
+    <Drawer.Content open={settingsOpen} onOpenChange={setSettingsOpen}>
+      <button onClick={() => setConfirmOpen(true)}>Delete Account</button>
+    </Drawer.Content>
+  </Drawer.Root>
+
+  <Drawer.Root>
+    <Drawer.Content open={confirmOpen} onOpenChange={setConfirmOpen}>
+      <button onClick={() => {
+        setConfirmOpen(false)
+        setSettingsOpen(false)
+      }}>
+        Confirm
+      </button>
+    </Drawer.Content>
+  </Drawer.Root>
+</>
+```
+
 Works up to 5 levels. CSS `:has()` selectors handle the visual stacking.
 
 ---
@@ -454,6 +548,7 @@ Override any of these CSS custom properties to customize the drawer:
   --drawer-shadow-top: 0 10px 60px hsl(0 0% 0% / 0.12), 0 4px 20px hsl(0 0% 0% / 0.08);
   --drawer-shadow-right: -10px 0 60px hsl(0 0% 0% / 0.12), -4px 0 20px hsl(0 0% 0% / 0.08);
   --drawer-shadow-left: 10px 0 60px hsl(0 0% 0% / 0.12), 4px 0 20px hsl(0 0% 0% / 0.08);
+  --drawer-shadow-modal: 0 25px 50px -12px hsl(0 0% 0% / 0.25);
 
   /* Animation */
   --drawer-duration: 0.5s;
@@ -507,6 +602,7 @@ Override any of these CSS custom properties to customize the drawer:
 | `--drawer-shadow-top` | `0 10px 60px hsl(0 0% 0% / 0.12), ...` | Darker |
 | `--drawer-shadow-left` | `10px 0 60px hsl(0 0% 0% / 0.12), ...` | Darker |
 | `--drawer-shadow-right` | `-10px 0 60px hsl(0 0% 0% / 0.12), ...` | Darker |
+| `--drawer-shadow-modal` | `0 25px 50px -12px hsl(0 0% 0% / 0.25)` | Darker |
 
 #### Animation
 
@@ -677,6 +773,7 @@ Uses `@starting-style`, `:has()`, `allow-discrete`, and `dvh` units.
 Full TypeScript support included.
 
 ```tsx
+// React
 import {
   Drawer,
   type DrawerRootProps,
@@ -684,11 +781,14 @@ import {
   type DrawerDirection
 } from 'css-drawer/react'
 
+// Vanilla JS
 import {
   open,
   close,
+  create,
   type DrawerElement,
-  type DrawerRef
+  type DrawerRef,
+  type DrawerDirection
 } from 'css-drawer'
 ```
 

package/dist/drawer-C21nwiwE.css

@@ -0,0 +1,331 @@
+/* CSS Drawer - Vaul-quality drawer with auto-nesting and directions */
+
+:root {
+  /* Visual */
+  --drawer-bg: #fff;
+  --drawer-radius: 24px;
+  --drawer-backdrop: hsl(0 0% 0% / 0.4);
+  --drawer-backdrop-blur: 4px;
+
+  /* Sizing */
+  --drawer-max-width: 500px;
+  --drawer-max-height: 96dvh;
+
+  /* Handle */
+  --drawer-handle-bg: hsl(0 0% 80%);
+  --drawer-handle-bg-hover: hsl(0 0% 60%);
+  --drawer-handle-width: 48px;
+  --drawer-handle-width-hover: 56px;
+  --drawer-handle-height: 5px;
+  --drawer-handle-padding-block: 1rem 0.5rem;
+  --drawer-handle-padding-inline: 0;
+
+  /* Shadows */
+  --drawer-shadow-bottom: 0 -10px 60px hsl(0 0% 0% / 0.12), 0 -4px 20px hsl(0 0% 0% / 0.08);
+  --drawer-shadow-top: 0 10px 60px hsl(0 0% 0% / 0.12), 0 4px 20px hsl(0 0% 0% / 0.08);
+  --drawer-shadow-right: -10px 0 60px hsl(0 0% 0% / 0.12), -4px 0 20px hsl(0 0% 0% / 0.08);
+  --drawer-shadow-left: 10px 0 60px hsl(0 0% 0% / 0.12), 4px 0 20px hsl(0 0% 0% / 0.08);
+  --drawer-shadow-modal: 0 25px 50px -12px hsl(0 0% 0% / 0.25);
+
+  /* Animation */
+  --drawer-duration: 0.5s;
+  --drawer-duration-close: 0.35s;
+  --drawer-ease: cubic-bezier(0.32, 0.72, 0, 1);
+
+  /* Nesting effects */
+  --drawer-nested-scale: 0.94;
+  --drawer-nested-offset: 20px;
+  --drawer-nested-brightness: 0.92;
+  --drawer-nested-backdrop: hsl(0 0% 0% / 0.15);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --drawer-bg: hsl(0 0% 12%);
+    --drawer-handle-bg: hsl(0 0% 35%);
+    --drawer-handle-bg-hover: hsl(0 0% 50%);
+    --drawer-shadow-bottom: 0 -10px 60px hsl(0 0% 0% / 0.4), 0 -4px 20px hsl(0 0% 0% / 0.3);
+    --drawer-shadow-top: 0 10px 60px hsl(0 0% 0% / 0.4), 0 4px 20px hsl(0 0% 0% / 0.3);
+    --drawer-shadow-right: -10px 0 60px hsl(0 0% 0% / 0.4), -4px 0 20px hsl(0 0% 0% / 0.3);
+    --drawer-shadow-left: 10px 0 60px hsl(0 0% 0% / 0.4), 4px 0 20px hsl(0 0% 0% / 0.3);
+    --drawer-shadow-modal: 0 25px 50px -12px hsl(0 0% 0% / 0.5);
+  }
+}
+
+/* Background scale effect */
+body {
+  transition: scale var(--drawer-duration) var(--drawer-ease), border-radius var(--drawer-duration) var(--drawer-ease);
+  transform-origin: center top;
+}
+
+body:has(.drawer[open]) {
+  overflow: hidden;
+  scale: var(--drawer-nested-scale);
+  border-radius: var(--drawer-radius);
+}
+
+/* Base drawer */
+.drawer {
+  border: none;
+  padding: 0;
+  margin: 0;
+  max-width: 100%;
+  max-height: 100%;
+  position: fixed;
+  background: var(--drawer-bg);
+  overflow: hidden;
+  opacity: 0;
+  transition:
+    display var(--drawer-duration-close) allow-discrete,
+    overlay var(--drawer-duration-close) allow-discrete,
+    translate var(--drawer-duration-close) var(--drawer-ease),
+    scale var(--drawer-duration-close) var(--drawer-ease),
+    filter var(--drawer-duration-close) ease,
+    opacity var(--drawer-duration-close) ease;
+
+  /* Default: bottom */
+  --_translate-closed: 0 100%;
+  --_border-radius: var(--drawer-radius) var(--drawer-radius) 0 0;
+  inset: auto 0 0 0;
+  margin-inline: auto;
+  width: 100%;
+  max-width: var(--drawer-max-width);
+  height: auto;
+  max-height: var(--drawer-max-height);
+  border-radius: var(--drawer-border-radius, var(--_border-radius));
+  box-shadow: var(--drawer-shadow-bottom);
+  translate: var(--_translate-closed);
+}
+
+.drawer::backdrop {
+  background: var(--drawer-backdrop);
+  opacity: 0;
+  backdrop-filter: blur(var(--drawer-backdrop-blur));
+  -webkit-backdrop-filter: blur(var(--drawer-backdrop-blur));
+  transition:
+    display var(--drawer-duration-close) allow-discrete,
+    overlay var(--drawer-duration-close) allow-discrete,
+    opacity var(--drawer-duration-close) ease;
+}
+
+.drawer[open] {
+  opacity: 1;
+  translate: 0 0;
+  transition:
+    display var(--drawer-duration) allow-discrete,
+    overlay var(--drawer-duration) allow-discrete,
+    translate var(--drawer-duration) var(--drawer-ease),
+    scale var(--drawer-duration) var(--drawer-ease),
+    filter var(--drawer-duration) ease,
+    opacity 0.15s ease;
+}
+
+.drawer[open]::backdrop {
+  opacity: 1;
+  transition: display var(--drawer-duration) allow-discrete, overlay var(--drawer-duration) allow-discrete, opacity 0.2s ease;
+}
+
+@starting-style {
+  .drawer[open] { opacity: 0; translate: var(--_translate-closed); }
+  .drawer[open]::backdrop { opacity: 0; }
+}
+
+/* ===== DIRECTIONS ===== */
+
+/* Right */
+.drawer[data-direction="right"] {
+  --_translate-closed: 100% 0;
+  --_border-radius: var(--drawer-radius) 0 0 var(--drawer-radius);
+  inset: 0 0 0 auto;
+  margin: 0;
+  width: 100%;
+  max-width: var(--drawer-max-width);
+  height: 100dvh;
+  max-height: 100dvh;
+  box-shadow: var(--drawer-shadow-right);
+}
+
+/* Left */
+.drawer[data-direction="left"] {
+  --_translate-closed: -100% 0;
+  --_border-radius: 0 var(--drawer-radius) var(--drawer-radius) 0;
+  inset: 0 auto 0 0;
+  margin: 0;
+  width: 100%;
+  max-width: var(--drawer-max-width);
+  height: 100dvh;
+  max-height: 100dvh;
+  box-shadow: var(--drawer-shadow-left);
+}
+
+/* Top */
+.drawer[data-direction="top"] {
+  --_translate-closed: 0 -100%;
+  --_border-radius: 0 0 var(--drawer-radius) var(--drawer-radius);
+  inset: 0 0 auto 0;
+  margin-inline: auto;
+  width: 100%;
+  max-width: var(--drawer-max-width);
+  height: auto;
+  max-height: var(--drawer-max-height);
+  box-shadow: var(--drawer-shadow-top);
+}
+
+/* Modal (centered) */
+.drawer[data-direction="modal"] {
+  --_translate-closed: 0 0;
+  --_border-radius: var(--drawer-radius);
+  inset: 0;
+  margin: auto;
+  width: fit-content;
+  max-width: var(--drawer-max-width);
+  height: fit-content;
+  max-height: var(--drawer-max-height);
+  box-shadow: var(--drawer-shadow-modal);
+  scale: var(--drawer-nested-scale);
+}
+
+.drawer[data-direction="modal"][open] {
+  scale: 1;
+}
+
+@starting-style {
+  .drawer[data-direction="modal"][open] {
+    scale: var(--drawer-nested-scale);
+  }
+}
+
+/* ===== AUTO-NESTING (up to 5 levels) ===== */
+/* Uses sibling combinators to count open drawers */
+
+/* 1+ open drawers after */
+.drawer[open]:has(~ .drawer[open]) {
+  scale: var(--drawer-nested-scale);
+  translate: 0 calc(-1 * var(--drawer-nested-offset));
+  border-radius: var(--drawer-radius);
+  filter: brightness(var(--drawer-nested-brightness));
+  pointer-events: none;
+}
+
+/* 2+ open drawers after */
+.drawer[open]:has(~ .drawer[open] ~ .drawer[open]) {
+  scale: calc(var(--drawer-nested-scale) * var(--drawer-nested-scale));
+  translate: 0 calc(-2 * var(--drawer-nested-offset));
+  filter: brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness)));
+}
+
+/* 3+ open drawers after */
+.drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {
+  scale: calc(var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale));
+  translate: 0 calc(-3 * var(--drawer-nested-offset));
+  filter: brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness)));
+}
+
+/* 4+ open drawers after */
+.drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {
+  scale: calc(var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale));
+  translate: 0 calc(-4 * var(--drawer-nested-offset));
+  filter: brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness)));
+}
+
+/* 5+ open drawers after */
+.drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {
+  scale: calc(var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale));
+  translate: 0 calc(-5 * var(--drawer-nested-offset));
+  filter: brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness)));
+}
+
+/* Lighter backdrop for stacked drawers */
+.drawer[open] ~ .drawer[open]::backdrop {
+  background: var(--drawer-nested-backdrop);
+  backdrop-filter: none;
+}
+
+/* Handle */
+.drawer-handle {
+  display: flex;
+  justify-content: center;
+  padding-block: var(--drawer-handle-padding-block);
+  padding-inline: var(--drawer-handle-padding-inline);
+  cursor: grab;
+}
+
+.drawer-handle::before {
+  content: '';
+  width: var(--drawer-handle-width);
+  height: var(--drawer-handle-height);
+  background: var(--drawer-handle-bg);
+  border-radius: 100px;
+  transition: width 0.2s var(--drawer-ease), height 0.2s var(--drawer-ease), background 0.2s ease;
+}
+
+.drawer-handle:hover::before {
+  width: var(--drawer-handle-width-hover);
+  background: var(--drawer-handle-bg-hover);
+}
+
+/* Vertical handle for left/right drawers */
+.drawer[data-direction="left"] .drawer-handle,
+.drawer[data-direction="right"] .drawer-handle {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-block: var(--drawer-handle-padding-inline);
+  padding-inline: var(--drawer-handle-padding-block);
+  height: 100%;
+  position: absolute;
+  top: 0;
+  writing-mode: vertical-lr;
+}
+
+.drawer[data-direction="left"] .drawer-handle { right: 0; }
+.drawer[data-direction="right"] .drawer-handle { left: 0; }
+
+.drawer[data-direction="left"] .drawer-handle::before,
+.drawer[data-direction="right"] .drawer-handle::before {
+  width: var(--drawer-handle-height);
+  height: var(--drawer-handle-width);
+}
+
+.drawer[data-direction="left"] .drawer-handle:hover::before,
+.drawer[data-direction="right"] .drawer-handle:hover::before {
+  width: var(--drawer-handle-height);
+  height: var(--drawer-handle-width-hover);
+}
+
+/* Content - structural only, no opinionated padding */
+.drawer-content {
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  flex: 1;
+  min-height: 0;
+}
+
+/* Content sizing for directions */
+.drawer[data-direction="left"] .drawer-content,
+.drawer[data-direction="right"] .drawer-content {
+  height: 100%;
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    transition-duration: 0.01ms !important;
+  }
+
+  body:has(.drawer[open]) {
+    scale: 1;
+  }
+
+  .drawer[open]:has(~ .drawer[open]),
+  .drawer[open]:has(~ .drawer[open] ~ .drawer[open]),
+  .drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open]),
+  .drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]),
+  .drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {
+    scale: 1;
+    translate: 0 0;
+    filter: none;
+  }
+}
+

package/dist/drawer-CXCJQa45.css

@@ -0,0 +1,333 @@
+/* CSS Drawer - Vaul-quality drawer with auto-nesting and directions */
+
+:root {
+  /* Visual */
+  --drawer-bg: #fff;
+  --drawer-radius: 24px;
+  --drawer-backdrop: hsl(0 0% 0% / 0.4);
+  --drawer-backdrop-blur: 4px;
+
+  /* Sizing */
+  --drawer-max-width: 500px;
+  --drawer-max-height: 96dvh;
+
+  /* Handle */
+  --drawer-handle-bg: hsl(0 0% 80%);
+  --drawer-handle-bg-hover: hsl(0 0% 60%);
+  --drawer-handle-width: 48px;
+  --drawer-handle-width-hover: 56px;
+  --drawer-handle-height: 5px;
+  --drawer-handle-padding-block: 1rem 0.5rem;
+  --drawer-handle-padding-inline: 0;
+
+  /* Shadows */
+  --drawer-shadow-bottom: 0 -10px 60px hsl(0 0% 0% / 0.12), 0 -4px 20px hsl(0 0% 0% / 0.08);
+  --drawer-shadow-top: 0 10px 60px hsl(0 0% 0% / 0.12), 0 4px 20px hsl(0 0% 0% / 0.08);
+  --drawer-shadow-right: -10px 0 60px hsl(0 0% 0% / 0.12), -4px 0 20px hsl(0 0% 0% / 0.08);
+  --drawer-shadow-left: 10px 0 60px hsl(0 0% 0% / 0.12), 4px 0 20px hsl(0 0% 0% / 0.08);
+  --drawer-shadow-modal: 0 25px 50px -12px hsl(0 0% 0% / 0.25);
+
+  /* Animation */
+  --drawer-duration: 0.5s;
+  --drawer-duration-close: 0.35s;
+  --drawer-ease: cubic-bezier(0.32, 0.72, 0, 1);
+
+  /* Nesting effects */
+  --drawer-nested-scale: 0.94;
+  --drawer-nested-offset: 20px;
+  --drawer-nested-brightness: 0.92;
+  --drawer-nested-backdrop: hsl(0 0% 0% / 0.15);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --drawer-bg: hsl(0 0% 12%);
+    --drawer-handle-bg: hsl(0 0% 35%);
+    --drawer-handle-bg-hover: hsl(0 0% 50%);
+    --drawer-shadow-bottom: 0 -10px 60px hsl(0 0% 0% / 0.4), 0 -4px 20px hsl(0 0% 0% / 0.3);
+    --drawer-shadow-top: 0 10px 60px hsl(0 0% 0% / 0.4), 0 4px 20px hsl(0 0% 0% / 0.3);
+    --drawer-shadow-right: -10px 0 60px hsl(0 0% 0% / 0.4), -4px 0 20px hsl(0 0% 0% / 0.3);
+    --drawer-shadow-left: 10px 0 60px hsl(0 0% 0% / 0.4), 4px 0 20px hsl(0 0% 0% / 0.3);
+    --drawer-shadow-modal: 0 25px 50px -12px hsl(0 0% 0% / 0.5);
+  }
+}
+
+/* Background scale effect */
+body {
+  transition: scale var(--drawer-duration) var(--drawer-ease), border-radius var(--drawer-duration) var(--drawer-ease);
+  transform-origin: center top;
+}
+
+body:has(.drawer[open]) {
+  overflow: hidden;
+  scale: var(--drawer-nested-scale);
+  border-radius: var(--drawer-radius);
+}
+
+/* Base drawer */
+.drawer {
+  border: none;
+  padding: 0;
+  margin: 0;
+  max-width: 100%;
+  max-height: 100%;
+  position: fixed;
+  background: var(--drawer-bg);
+  overflow: hidden;
+  opacity: 0;
+  transition:
+    display var(--drawer-duration-close) allow-discrete,
+    overlay var(--drawer-duration-close) allow-discrete,
+    translate var(--drawer-duration-close) var(--drawer-ease),
+    scale var(--drawer-duration-close) var(--drawer-ease),
+    filter var(--drawer-duration-close) ease,
+    opacity var(--drawer-duration-close) ease;
+
+  /* Default: bottom */
+  --_translate-closed: 0 100%;
+  --_border-radius: var(--drawer-radius) var(--drawer-radius) 0 0;
+  inset: auto 0 0 0;
+  margin-inline: auto;
+  width: 100%;
+  max-width: var(--drawer-max-width);
+  height: auto;
+  max-height: var(--drawer-max-height);
+  border-radius: var(--drawer-border-radius, var(--_border-radius));
+  box-shadow: var(--drawer-shadow-bottom);
+  translate: var(--_translate-closed);
+}
+
+.drawer::backdrop {
+  background: var(--drawer-backdrop);
+  opacity: 0;
+  backdrop-filter: blur(var(--drawer-backdrop-blur));
+  -webkit-backdrop-filter: blur(var(--drawer-backdrop-blur));
+  transition:
+    display var(--drawer-duration-close) allow-discrete,
+    overlay var(--drawer-duration-close) allow-discrete,
+    opacity var(--drawer-duration-close) ease;
+}
+
+.drawer[open] {
+  opacity: 1;
+  translate: 0 0;
+  transition:
+    display var(--drawer-duration) allow-discrete,
+    overlay var(--drawer-duration) allow-discrete,
+    translate var(--drawer-duration) var(--drawer-ease),
+    scale var(--drawer-duration) var(--drawer-ease),
+    filter var(--drawer-duration) ease,
+    opacity 0.15s ease;
+}
+
+.drawer[open]::backdrop {
+  opacity: 1;
+  transition: display var(--drawer-duration) allow-discrete, overlay var(--drawer-duration) allow-discrete, opacity 0.2s ease;
+}
+
+@starting-style {
+  .drawer[open] { opacity: 0; translate: var(--_translate-closed); }
+  .drawer[open]::backdrop { opacity: 0; }
+}
+
+/* ===== DIRECTIONS ===== */
+
+/* Right */
+.drawer[data-direction="right"] {
+  --_translate-closed: 100% 0;
+  --_border-radius: var(--drawer-radius) 0 0 var(--drawer-radius);
+  inset: 0 0 0 auto;
+  margin: 0;
+  width: 100%;
+  max-width: var(--drawer-max-width);
+  height: 100dvh;
+  max-height: 100dvh;
+  box-shadow: var(--drawer-shadow-right);
+}
+
+/* Left */
+.drawer[data-direction="left"] {
+  --_translate-closed: -100% 0;
+  --_border-radius: 0 var(--drawer-radius) var(--drawer-radius) 0;
+  inset: 0 auto 0 0;
+  margin: 0;
+  width: 100%;
+  max-width: var(--drawer-max-width);
+  height: 100dvh;
+  max-height: 100dvh;
+  box-shadow: var(--drawer-shadow-left);
+}
+
+/* Top */
+.drawer[data-direction="top"] {
+  --_translate-closed: 0 -100%;
+  --_border-radius: 0 0 var(--drawer-radius) var(--drawer-radius);
+  inset: 0 0 auto 0;
+  margin-inline: auto;
+  width: 100%;
+  max-width: var(--drawer-max-width);
+  height: auto;
+  max-height: var(--drawer-max-height);
+  box-shadow: var(--drawer-shadow-top);
+}
+
+/* Modal (centered) */
+.drawer[data-direction="modal"] {
+  --_translate-closed: 0 0;
+  --_border-radius: var(--drawer-radius);
+  inset: 0;
+  margin: auto;
+  width: fit-content;
+  max-width: var(--drawer-max-width);
+  height: fit-content;
+  max-height: var(--drawer-max-height);
+  box-shadow: var(--drawer-shadow-modal);
+  scale: var(--drawer-nested-scale);
+}
+
+.drawer[data-direction="modal"][open] {
+  scale: 1;
+}
+
+@starting-style {
+  .drawer[data-direction="modal"][open] {
+    scale: var(--drawer-nested-scale);
+  }
+}
+
+/* ===== AUTO-NESTING (up to 5 levels) ===== */
+/* Uses sibling combinators to count open drawers */
+
+/* 1+ open drawers after */
+.drawer[open]:has(~ .drawer[open]) {
+  scale: var(--drawer-nested-scale);
+  translate: 0 calc(-1 * var(--drawer-nested-offset));
+  border-radius: var(--drawer-radius);
+  filter: brightness(var(--drawer-nested-brightness));
+  pointer-events: none;
+}
+
+/* 2+ open drawers after */
+.drawer[open]:has(~ .drawer[open] ~ .drawer[open]) {
+  scale: calc(var(--drawer-nested-scale) * var(--drawer-nested-scale));
+  translate: 0 calc(-2 * var(--drawer-nested-offset));
+  filter: brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness)));
+}
+
+/* 3+ open drawers after */
+.drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {
+  scale: calc(var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale));
+  translate: 0 calc(-3 * var(--drawer-nested-offset));
+  filter: brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness)));
+}
+
+/* 4+ open drawers after */
+.drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {
+  scale: calc(var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale));
+  translate: 0 calc(-4 * var(--drawer-nested-offset));
+  filter: brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness)));
+}
+
+/* 5+ open drawers after */
+.drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {
+  scale: calc(var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale));
+  translate: 0 calc(-5 * var(--drawer-nested-offset));
+  filter: brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness)));
+}
+
+/* Lighter backdrop for stacked drawers */
+.drawer[open] ~ .drawer[open]::backdrop {
+  background: var(--drawer-nested-backdrop);
+  backdrop-filter: none;
+}
+
+/* Handle */
+.drawer-handle {
+  display: flex;
+  justify-content: center;
+  padding-block: var(--drawer-handle-padding-block);
+  padding-inline: var(--drawer-handle-padding-inline);
+  cursor: grab;
+}
+
+.drawer-handle::before {
+  content: '';
+  width: var(--drawer-handle-width);
+  height: var(--drawer-handle-height);
+  background: var(--drawer-handle-bg);
+  border-radius: 100px;
+  transition: width 0.2s var(--drawer-ease), height 0.2s var(--drawer-ease), background 0.2s ease;
+}
+
+.drawer-handle:hover::before {
+  width: var(--drawer-handle-width-hover);
+  background: var(--drawer-handle-bg-hover);
+}
+
+/* Vertical handle for left/right drawers */
+.drawer[data-direction="left"] .drawer-handle,
+.drawer[data-direction="right"] .drawer-handle {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-block: var(--drawer-handle-padding-inline);
+  padding-inline: var(--drawer-handle-padding-block);
+  height: 100%;
+  position: absolute;
+  top: 0;
+  writing-mode: vertical-lr;
+}
+
+.drawer[data-direction="left"] .drawer-handle { right: 0; }
+.drawer[data-direction="right"] .drawer-handle { left: 0; }
+
+.drawer[data-direction="left"] .drawer-handle::before,
+.drawer[data-direction="right"] .drawer-handle::before {
+  width: var(--drawer-handle-height);
+  height: var(--drawer-handle-width);
+}
+
+.drawer[data-direction="left"] .drawer-handle:hover::before,
+.drawer[data-direction="right"] .drawer-handle:hover::before {
+  width: var(--drawer-handle-height);
+  height: var(--drawer-handle-width-hover);
+}
+
+/* Content - structural only, no opinionated padding */
+.drawer-content {
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  flex: 1;
+  min-height: 0;
+}
+
+/* Content sizing for directions */
+.drawer[data-direction="left"] .drawer-content,
+.drawer[data-direction="right"] .drawer-content {
+  height: 100%;
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    transition-duration: 0.01ms !important;
+  }
+
+  body:has(.drawer[open]) {
+    scale: 1;
+  }
+
+  .drawer[open]:has(~ .drawer[open]),
+  .drawer[open]:has(~ .drawer[open] ~ .drawer[open]),
+  .drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open]),
+  .drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]),
+  .drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {
+    scale: 1;
+    translate: 0 0;
+    filter: none;
+  }
+}
+
+
+/*# sourceMappingURL=drawer-CXCJQa45.css.map*/

package/dist/drawer-CXCJQa45.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-CXCJQa45.css","names":[],"sources":["../src/drawer.css"],"sourcesContent":["/* CSS Drawer - Vaul-quality drawer with auto-nesting and directions */\n\n:root {\n  /* Visual */\n  --drawer-bg: #fff;\n  --drawer-radius: 24px;\n  --drawer-backdrop: hsl(0 0% 0% / 0.4);\n  --drawer-backdrop-blur: 4px;\n\n  /* Sizing */\n  --drawer-max-width: 500px;\n  --drawer-max-height: 96dvh;\n\n  /* Handle */\n  --drawer-handle-bg: hsl(0 0% 80%);\n  --drawer-handle-bg-hover: hsl(0 0% 60%);\n  --drawer-handle-width: 48px;\n  --drawer-handle-width-hover: 56px;\n  --drawer-handle-height: 5px;\n  --drawer-handle-padding-block: 1rem 0.5rem;\n  --drawer-handle-padding-inline: 0;\n\n  /* Shadows */\n  --drawer-shadow-bottom: 0 -10px 60px hsl(0 0% 0% / 0.12), 0 -4px 20px hsl(0 0% 0% / 0.08);\n  --drawer-shadow-top: 0 10px 60px hsl(0 0% 0% / 0.12), 0 4px 20px hsl(0 0% 0% / 0.08);\n  --drawer-shadow-right: -10px 0 60px hsl(0 0% 0% / 0.12), -4px 0 20px hsl(0 0% 0% / 0.08);\n  --drawer-shadow-left: 10px 0 60px hsl(0 0% 0% / 0.12), 4px 0 20px hsl(0 0% 0% / 0.08);\n  --drawer-shadow-modal: 0 25px 50px -12px hsl(0 0% 0% / 0.25);\n\n  /* Animation */\n  --drawer-duration: 0.5s;\n  --drawer-duration-close: 0.35s;\n  --drawer-ease: cubic-bezier(0.32, 0.72, 0, 1);\n\n  /* Nesting effects */\n  --drawer-nested-scale: 0.94;\n  --drawer-nested-offset: 20px;\n  --drawer-nested-brightness: 0.92;\n  --drawer-nested-backdrop: hsl(0 0% 0% / 0.15);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --drawer-bg: hsl(0 0% 12%);\n    --drawer-handle-bg: hsl(0 0% 35%);\n    --drawer-handle-bg-hover: hsl(0 0% 50%);\n    --drawer-shadow-bottom: 0 -10px 60px hsl(0 0% 0% / 0.4), 0 -4px 20px hsl(0 0% 0% / 0.3);\n    --drawer-shadow-top: 0 10px 60px hsl(0 0% 0% / 0.4), 0 4px 20px hsl(0 0% 0% / 0.3);\n    --drawer-shadow-right: -10px 0 60px hsl(0 0% 0% / 0.4), -4px 0 20px hsl(0 0% 0% / 0.3);\n    --drawer-shadow-left: 10px 0 60px hsl(0 0% 0% / 0.4), 4px 0 20px hsl(0 0% 0% / 0.3);\n    --drawer-shadow-modal: 0 25px 50px -12px hsl(0 0% 0% / 0.5);\n  }\n}\n\n/* Background scale effect */\nbody {\n  transition: scale var(--drawer-duration) var(--drawer-ease), border-radius var(--drawer-duration) var(--drawer-ease);\n  transform-origin: center top;\n}\n\nbody:has(.drawer[open]) {\n  overflow: hidden;\n  scale: var(--drawer-nested-scale);\n  border-radius: var(--drawer-radius);\n}\n\n/* Base drawer */\n.drawer {\n  border: none;\n  padding: 0;\n  margin: 0;\n  max-width: 100%;\n  max-height: 100%;\n  position: fixed;\n  background: var(--drawer-bg);\n  overflow: hidden;\n  opacity: 0;\n  transition:\n    display var(--drawer-duration-close) allow-discrete,\n    overlay var(--drawer-duration-close) allow-discrete,\n    translate var(--drawer-duration-close) var(--drawer-ease),\n    scale var(--drawer-duration-close) var(--drawer-ease),\n    filter var(--drawer-duration-close) ease,\n    opacity var(--drawer-duration-close) ease;\n\n  /* Default: bottom */\n  --_translate-closed: 0 100%;\n  --_border-radius: var(--drawer-radius) var(--drawer-radius) 0 0;\n  inset: auto 0 0 0;\n  margin-inline: auto;\n  width: 100%;\n  max-width: var(--drawer-max-width);\n  height: auto;\n  max-height: var(--drawer-max-height);\n  border-radius: var(--drawer-border-radius, var(--_border-radius));\n  box-shadow: var(--drawer-shadow-bottom);\n  translate: var(--_translate-closed);\n}\n\n.drawer::backdrop {\n  background: var(--drawer-backdrop);\n  opacity: 0;\n  backdrop-filter: blur(var(--drawer-backdrop-blur));\n  -webkit-backdrop-filter: blur(var(--drawer-backdrop-blur));\n  transition:\n    display var(--drawer-duration-close) allow-discrete,\n    overlay var(--drawer-duration-close) allow-discrete,\n    opacity var(--drawer-duration-close) ease;\n}\n\n.drawer[open] {\n  opacity: 1;\n  translate: 0 0;\n  transition:\n    display var(--drawer-duration) allow-discrete,\n    overlay var(--drawer-duration) allow-discrete,\n    translate var(--drawer-duration) var(--drawer-ease),\n    scale var(--drawer-duration) var(--drawer-ease),\n    filter var(--drawer-duration) ease,\n    opacity 0.15s ease;\n}\n\n.drawer[open]::backdrop {\n  opacity: 1;\n  transition: display var(--drawer-duration) allow-discrete, overlay var(--drawer-duration) allow-discrete, opacity 0.2s ease;\n}\n\n@starting-style {\n  .drawer[open] { opacity: 0; translate: var(--_translate-closed); }\n  .drawer[open]::backdrop { opacity: 0; }\n}\n\n/* ===== DIRECTIONS ===== */\n\n/* Right */\n.drawer[data-direction=\"right\"] {\n  --_translate-closed: 100% 0;\n  --_border-radius: var(--drawer-radius) 0 0 var(--drawer-radius);\n  inset: 0 0 0 auto;\n  margin: 0;\n  width: 100%;\n  max-width: var(--drawer-max-width);\n  height: 100dvh;\n  max-height: 100dvh;\n  box-shadow: var(--drawer-shadow-right);\n}\n\n/* Left */\n.drawer[data-direction=\"left\"] {\n  --_translate-closed: -100% 0;\n  --_border-radius: 0 var(--drawer-radius) var(--drawer-radius) 0;\n  inset: 0 auto 0 0;\n  margin: 0;\n  width: 100%;\n  max-width: var(--drawer-max-width);\n  height: 100dvh;\n  max-height: 100dvh;\n  box-shadow: var(--drawer-shadow-left);\n}\n\n/* Top */\n.drawer[data-direction=\"top\"] {\n  --_translate-closed: 0 -100%;\n  --_border-radius: 0 0 var(--drawer-radius) var(--drawer-radius);\n  inset: 0 0 auto 0;\n  margin-inline: auto;\n  width: 100%;\n  max-width: var(--drawer-max-width);\n  height: auto;\n  max-height: var(--drawer-max-height);\n  box-shadow: var(--drawer-shadow-top);\n}\n\n/* Modal (centered) */\n.drawer[data-direction=\"modal\"] {\n  --_translate-closed: 0 0;\n  --_border-radius: var(--drawer-radius);\n  inset: 0;\n  margin: auto;\n  width: fit-content;\n  max-width: var(--drawer-max-width);\n  height: fit-content;\n  max-height: var(--drawer-max-height);\n  box-shadow: var(--drawer-shadow-modal);\n  scale: var(--drawer-nested-scale);\n}\n\n.drawer[data-direction=\"modal\"][open] {\n  scale: 1;\n}\n\n@starting-style {\n  .drawer[data-direction=\"modal\"][open] {\n    scale: var(--drawer-nested-scale);\n  }\n}\n\n/* ===== AUTO-NESTING (up to 5 levels) ===== */\n/* Uses sibling combinators to count open drawers */\n\n/* 1+ open drawers after */\n.drawer[open]:has(~ .drawer[open]) {\n  scale: var(--drawer-nested-scale);\n  translate: 0 calc(-1 * var(--drawer-nested-offset));\n  border-radius: var(--drawer-radius);\n  filter: brightness(var(--drawer-nested-brightness));\n  pointer-events: none;\n}\n\n/* 2+ open drawers after */\n.drawer[open]:has(~ .drawer[open] ~ .drawer[open]) {\n  scale: calc(var(--drawer-nested-scale) * var(--drawer-nested-scale));\n  translate: 0 calc(-2 * var(--drawer-nested-offset));\n  filter: brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness)));\n}\n\n/* 3+ open drawers after */\n.drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {\n  scale: calc(var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale));\n  translate: 0 calc(-3 * var(--drawer-nested-offset));\n  filter: brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness)));\n}\n\n/* 4+ open drawers after */\n.drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {\n  scale: calc(var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale));\n  translate: 0 calc(-4 * var(--drawer-nested-offset));\n  filter: brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness)));\n}\n\n/* 5+ open drawers after */\n.drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {\n  scale: calc(var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale));\n  translate: 0 calc(-5 * var(--drawer-nested-offset));\n  filter: brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness)));\n}\n\n/* Lighter backdrop for stacked drawers */\n.drawer[open] ~ .drawer[open]::backdrop {\n  background: var(--drawer-nested-backdrop);\n  backdrop-filter: none;\n}\n\n/* Handle */\n.drawer-handle {\n  display: flex;\n  justify-content: center;\n  padding-block: var(--drawer-handle-padding-block);\n  padding-inline: var(--drawer-handle-padding-inline);\n  cursor: grab;\n}\n\n.drawer-handle::before {\n  content: '';\n  width: var(--drawer-handle-width);\n  height: var(--drawer-handle-height);\n  background: var(--drawer-handle-bg);\n  border-radius: 100px;\n  transition: width 0.2s var(--drawer-ease), height 0.2s var(--drawer-ease), background 0.2s ease;\n}\n\n.drawer-handle:hover::before {\n  width: var(--drawer-handle-width-hover);\n  background: var(--drawer-handle-bg-hover);\n}\n\n/* Vertical handle for left/right drawers */\n.drawer[data-direction=\"left\"] .drawer-handle,\n.drawer[data-direction=\"right\"] .drawer-handle {\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding-block: var(--drawer-handle-padding-inline);\n  padding-inline: var(--drawer-handle-padding-block);\n  height: 100%;\n  position: absolute;\n  top: 0;\n  writing-mode: vertical-lr;\n}\n\n.drawer[data-direction=\"left\"] .drawer-handle { right: 0; }\n.drawer[data-direction=\"right\"] .drawer-handle { left: 0; }\n\n.drawer[data-direction=\"left\"] .drawer-handle::before,\n.drawer[data-direction=\"right\"] .drawer-handle::before {\n  width: var(--drawer-handle-height);\n  height: var(--drawer-handle-width);\n}\n\n.drawer[data-direction=\"left\"] .drawer-handle:hover::before,\n.drawer[data-direction=\"right\"] .drawer-handle:hover::before {\n  width: var(--drawer-handle-height);\n  height: var(--drawer-handle-width-hover);\n}\n\n/* Content - structural only, no opinionated padding */\n.drawer-content {\n  overflow-x: hidden;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  flex: 1;\n  min-height: 0;\n}\n\n/* Content sizing for directions */\n.drawer[data-direction=\"left\"] .drawer-content,\n.drawer[data-direction=\"right\"] .drawer-content {\n  height: 100%;\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    transition-duration: 0.01ms !important;\n  }\n\n  body:has(.drawer[open]) {\n    scale: 1;\n  }\n\n  .drawer[open]:has(~ .drawer[open]),\n  .drawer[open]:has(~ .drawer[open] ~ .drawer[open]),\n  .drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open]),\n  .drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]),\n  .drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {\n    scale: 1;\n    translate: 0 0;\n    filter: none;\n  }\n}\n"],"mappings":"AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/dist/drawer-CiHZcyXE.mjs

@@ -0,0 +1 @@
+export{};

package/dist/index.cjs

@@ -1,4 +1,5 @@
-if(typeof window<`u`){let e=()=>{let e=Array.from(document.querySelectorAll(`dialog.drawer[open]`));e.forEach((t,n)=>{n===e.length-1?t.removeAttribute(`inert`):t.setAttribute(`inert`,``)})};new MutationObserver(t=>{for(let n of t)if(n.type===`attributes`&&n.attributeName===`open`&&n.target.classList.contains(`drawer`)){e();break}}).observe(document.body,{subtree:!0,attributes:!0,attributeFilter:[`open`]})}function e(e){return e?typeof e==`string`?document.getElementById(e):e:null}function t(t){e(t)?.showModal()}function n(t){e(t)?.close()}function r(){Array.from(document.querySelectorAll(`dialog.drawer[open]`)).reverse().forEach(e=>e.close())}function i(t){return e(t)?.open??!1}function a(){return Array.from(document.querySelectorAll(`dialog.drawer[open]`))}function o(){let e=a();return e[e.length-1]??null}function s(e={}){let{id:t,content:n=``,handle:r=!0,className:i=``,closeOnOutsideClick:a=!0}=e,o=document.createElement(`dialog`);return o.className=`drawer ${i}`.trim(),t&&(o.id=t),a||(o.dataset.closeOnOutsideClick=`false`),o.innerHTML=`
-    ${r?`<div class="drawer-handle"></div>`:``}
+require('./drawer-C21nwiwE.css');
+if(require(`./drawer-BWZh2Fyp.cjs`),typeof window<`u`){let e=()=>{let e=Array.from(document.querySelectorAll(`dialog.drawer[open]`));e.forEach((t,n)=>{n===e.length-1?t.removeAttribute(`inert`):t.setAttribute(`inert`,``)})};new MutationObserver(t=>{for(let n of t)if(n.type===`attributes`&&n.attributeName===`open`&&n.target.classList.contains(`drawer`)){e();break}}).observe(document.body,{subtree:!0,attributes:!0,attributeFilter:[`open`]})}function e(e){return e?typeof e==`string`?document.getElementById(e):e:null}function t(t){e(t)?.showModal()}function n(t){e(t)?.close()}function r(){Array.from(document.querySelectorAll(`dialog.drawer[open]`)).reverse().forEach(e=>e.close())}function i(t){return e(t)?.open??!1}function a(){return Array.from(document.querySelectorAll(`dialog.drawer[open]`))}function o(){let e=a();return e[e.length-1]??null}function s(e={}){let{id:t,content:n=``,direction:r,handle:i=!0,className:a=``,closeOnOutsideClick:o=!0}=e,s=document.createElement(`dialog`);return s.className=`drawer ${a}`.trim(),t&&(s.id=t),r&&(s.dataset.direction=r),o||(s.dataset.closeOnOutsideClick=`false`),s.innerHTML=`
+    ${i?`<div class="drawer-handle"></div>`:``}
     <div class="drawer-content">${n}</div>
-  `,o.addEventListener(`click`,e=>{e.target===o&&o.dataset.closeOnOutsideClick!==`false`&&o.close()}),o}function c(e){return document.body.appendChild(e),e}function l(t){e(t)?.remove()}function u(){let e=e=>{let t=e.target;t.matches(`dialog.drawer`)&&t.dataset.closeOnOutsideClick!==`false`&&t.close()};return document.addEventListener(`click`,e),()=>document.removeEventListener(`click`,e)}function d(t,n){let r=e(t);if(!r)return()=>{};let{onOpen:i,onClose:a,onCancel:o}=n,s=()=>a?.(),c=()=>o?.(),l=new MutationObserver(e=>{for(let t of e)t.attributeName===`open`&&r.open&&i?.()});return r.addEventListener(`close`,s),r.addEventListener(`cancel`,c),l.observe(r,{attributes:!0}),()=>{r.removeEventListener(`close`,s),r.removeEventListener(`cancel`,c),l.disconnect()}}function f(e,t){let n=t?.closeOnOutsideClick??!0;return{id:e,className:`drawer`,"data-close-on-outside-click":n?void 0:`false`,onClick:e=>{n&&e.target===e.currentTarget&&e.currentTarget.close()}}}exports.close=n,exports.closeAll=r,exports.create=s,exports.getOpen=a,exports.getTop=o,exports.init=u,exports.isOpen=i,exports.mount=c,exports.open=t,exports.props=f,exports.subscribe=d,exports.unmount=l;
+  `,s.addEventListener(`click`,e=>{e.target===s&&s.dataset.closeOnOutsideClick!==`false`&&s.close()}),s}function c(e){return document.body.appendChild(e),e}function l(t){e(t)?.remove()}function u(){let e=e=>{let t=e.target;t.matches(`dialog.drawer`)&&t.dataset.closeOnOutsideClick!==`false`&&t.close()};return document.addEventListener(`click`,e),()=>document.removeEventListener(`click`,e)}function d(t,n){let r=e(t);if(!r)return()=>{};let{onOpen:i,onClose:a,onCancel:o}=n,s=()=>a?.(),c=()=>o?.(),l=new MutationObserver(e=>{for(let t of e)t.attributeName===`open`&&r.open&&i?.()});return r.addEventListener(`close`,s),r.addEventListener(`cancel`,c),l.observe(r,{attributes:!0}),()=>{r.removeEventListener(`close`,s),r.removeEventListener(`cancel`,c),l.disconnect()}}function f(e,t){let n=t?.closeOnOutsideClick??!0;return{id:e,className:`drawer`,"data-close-on-outside-click":n?void 0:`false`,onClick:e=>{n&&e.target===e.currentTarget&&e.currentTarget.close()}}}exports.close=n,exports.closeAll=r,exports.create=s,exports.getOpen=a,exports.getTop=o,exports.init=u,exports.isOpen=i,exports.mount=c,exports.open=t,exports.props=f,exports.subscribe=d,exports.unmount=l;

package/dist/index.d.cts

@@ -1,15 +1,15 @@
 //#region src/index.d.ts
-/**
- * CSS Drawer - Headless drawer component
- * Works with any framework: React, Vue, Svelte, vanilla JS
- */
+
 type DrawerElement = HTMLDialogElement;
 type DrawerRef = string | DrawerElement | null | undefined;
+type DrawerDirection = 'bottom' | 'top' | 'left' | 'right' | 'modal';
 interface CreateDrawerOptions {
   /** Drawer ID */
   id?: string;
   /** HTML content for the drawer */
   content?: string;
+  /** Direction the drawer opens from (default: 'bottom') */
+  direction?: DrawerDirection;
   /** Include drag handle (default: true) */
   handle?: boolean;
   /** Additional CSS classes */
@@ -85,5 +85,5 @@ declare function props(id: string, options?: {
   readonly onClick: (e: MouseEvent) => void;
 };
 //#endregion
-export { CreateDrawerOptions, DrawerElement, DrawerEventHandlers, DrawerRef, close, closeAll, create, getOpen, getTop, init, isOpen, mount, open, props, subscribe, unmount };
+export { CreateDrawerOptions, DrawerDirection, DrawerElement, DrawerEventHandlers, DrawerRef, close, closeAll, create, getOpen, getTop, init, isOpen, mount, open, props, subscribe, unmount };
 //# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","names":[],"sources":["../src/index.ts"],"sourcesContent":[],"mappings":";;AAwCA;AAEA;AAEA;AAaiB,KAjBL,aAAA,GAAgB,iBAiBQ;AAuBpB,KAtCJ,SAAA,GAsCiB,MAAA,GAtCI,aAsCK,GAAA,IAAA,GAAA,SAAA;AAQtB,UA5CC,mBAAA,CA4CsB;EAQvB;EAQA,EAAA,CAAA,EAAA,MAAM;EAQN;EAOA,OAAA,CAAA,EAAM,MAAA;EAQN;EA4BA,MAAA,CAAA,EAAK,OAAA;EAQL;EAUA,SAAI,CAAA,EAAA,MAAA;EAgBJ;EAoCA,mBAAK,CAMJ,EAAA,OAAA;;UA9KA,mBAAA;;;;;;;;;;;iBAuBD,IAAA,SAAa;;;;iBAQb,KAAA,SAAc;;;;iBAQd,QAAA,CAAA;;;;iBAQA,MAAA,SAAe;;;;iBAQf,OAAA,CAAA,GAAW;;;;iBAOX,MAAA,CAAA,GAAU;;;;iBAQV,MAAA,WAAgB,sBAA2B;;;;iBA4B3C,KAAA,SAAc,gBAAgB;;;;iBAQ9B,OAAA,SAAgB;;;;;;iBAUhB,IAAA,CAAA;;;;;iBAgBA,SAAA,SACN,qBACE;;;;;iBAkCI,KAAA;;;;;;wBAMC"}
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/index.ts"],"sourcesContent":[],"mappings":";;AA8DiB,KArBL,aAAA,GAAgB,iBAqBQ;AAuBpB,KA1CJ,SAAA,GA0CiB,MAAA,GA1CI,aA0CK,GAAA,IAAA,GAAA,SAAA;AAQtB,KAhDJ,eAAA,GAgDkB,QAAS,GAAA,KAAA,GAAA,MAAA,GAAA,OAAA,GAAA,OAAA;AAQvB,UAtDC,mBAAA,CAsDO;EAQR;EAQA,EAAA,CAAA,EAAA,MAAO;EAOP;EAQA,OAAA,CAAA,EAAM,MAAA;EA6BN;EAQA,SAAA,CAAO,EApHT,eAoHkB;EAUhB;EAgBA,MAAA,CAAA,EAAA,OAAS;EAoCT;;;;;UAzKC,mBAAA;;;;;;;;;;;iBAuBD,IAAA,SAAa;;;;iBAQb,KAAA,SAAc;;;;iBAQd,QAAA,CAAA;;;;iBAQA,MAAA,SAAe;;;;iBAQf,OAAA,CAAA,GAAW;;;;iBAOX,MAAA,CAAA,GAAU;;;;iBAQV,MAAA,WAAgB,sBAA2B;;;;iBA6B3C,KAAA,SAAc,gBAAgB;;;;iBAQ9B,OAAA,SAAgB;;;;;;iBAUhB,IAAA,CAAA;;;;;iBAgBA,SAAA,SACN,qBACE;;;;;iBAkCI,KAAA;;;;;;wBAMC"}

package/dist/index.d.mts

@@ -1,15 +1,15 @@
 //#region src/index.d.ts
-/**
- * CSS Drawer - Headless drawer component
- * Works with any framework: React, Vue, Svelte, vanilla JS
- */
+
 type DrawerElement = HTMLDialogElement;
 type DrawerRef = string | DrawerElement | null | undefined;
+type DrawerDirection = 'bottom' | 'top' | 'left' | 'right' | 'modal';
 interface CreateDrawerOptions {
   /** Drawer ID */
   id?: string;
   /** HTML content for the drawer */
   content?: string;
+  /** Direction the drawer opens from (default: 'bottom') */
+  direction?: DrawerDirection;
   /** Include drag handle (default: true) */
   handle?: boolean;
   /** Additional CSS classes */
@@ -85,5 +85,5 @@ declare function props(id: string, options?: {
   readonly onClick: (e: MouseEvent) => void;
 };
 //#endregion
-export { CreateDrawerOptions, DrawerElement, DrawerEventHandlers, DrawerRef, close, closeAll, create, getOpen, getTop, init, isOpen, mount, open, props, subscribe, unmount };
+export { CreateDrawerOptions, DrawerDirection, DrawerElement, DrawerEventHandlers, DrawerRef, close, closeAll, create, getOpen, getTop, init, isOpen, mount, open, props, subscribe, unmount };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../src/index.ts"],"sourcesContent":[],"mappings":";;AAwCA;AAEA;AAEA;AAaiB,KAjBL,aAAA,GAAgB,iBAiBQ;AAuBpB,KAtCJ,SAAA,GAsCiB,MAAA,GAtCI,aAsCK,GAAA,IAAA,GAAA,SAAA;AAQtB,UA5CC,mBAAA,CA4CsB;EAQvB;EAQA,EAAA,CAAA,EAAA,MAAM;EAQN;EAOA,OAAA,CAAA,EAAM,MAAA;EAQN;EA4BA,MAAA,CAAA,EAAK,OAAA;EAQL;EAUA,SAAI,CAAA,EAAA,MAAA;EAgBJ;EAoCA,mBAAK,CAMJ,EAAA,OAAA;;UA9KA,mBAAA;;;;;;;;;;;iBAuBD,IAAA,SAAa;;;;iBAQb,KAAA,SAAc;;;;iBAQd,QAAA,CAAA;;;;iBAQA,MAAA,SAAe;;;;iBAQf,OAAA,CAAA,GAAW;;;;iBAOX,MAAA,CAAA,GAAU;;;;iBAQV,MAAA,WAAgB,sBAA2B;;;;iBA4B3C,KAAA,SAAc,gBAAgB;;;;iBAQ9B,OAAA,SAAgB;;;;;;iBAUhB,IAAA,CAAA;;;;;iBAgBA,SAAA,SACN,qBACE;;;;;iBAkCI,KAAA;;;;;;wBAMC"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/index.ts"],"sourcesContent":[],"mappings":";;AA8DiB,KArBL,aAAA,GAAgB,iBAqBQ;AAuBpB,KA1CJ,SAAA,GA0CiB,MAAA,GA1CI,aA0CK,GAAA,IAAA,GAAA,SAAA;AAQtB,KAhDJ,eAAA,GAgDkB,QAAS,GAAA,KAAA,GAAA,MAAA,GAAA,OAAA,GAAA,OAAA;AAQvB,UAtDC,mBAAA,CAsDO;EAQR;EAQA,EAAA,CAAA,EAAA,MAAO;EAOP;EAQA,OAAA,CAAA,EAAM,MAAA;EA6BN;EAQA,SAAA,CAAO,EApHT,eAoHkB;EAUhB;EAgBA,MAAA,CAAA,EAAA,OAAS;EAoCT;;;;;UAzKC,mBAAA;;;;;;;;;;;iBAuBD,IAAA,SAAa;;;;iBAQb,KAAA,SAAc;;;;iBAQd,QAAA,CAAA;;;;iBAQA,MAAA,SAAe;;;;iBAQf,OAAA,CAAA,GAAW;;;;iBAOX,MAAA,CAAA,GAAU;;;;iBAQV,MAAA,WAAgB,sBAA2B;;;;iBA6B3C,KAAA,SAAc,gBAAgB;;;;iBAQ9B,OAAA,SAAgB;;;;;;iBAUhB,IAAA,CAAA;;;;;iBAgBA,SAAA,SACN,qBACE;;;;;iBAkCI,KAAA;;;;;;wBAMC"}

package/dist/index.mjs

@@ -1,5 +1,6 @@
-if(typeof window<`u`){let e=()=>{let e=Array.from(document.querySelectorAll(`dialog.drawer[open]`));e.forEach((t,n)=>{n===e.length-1?t.removeAttribute(`inert`):t.setAttribute(`inert`,``)})};new MutationObserver(t=>{for(let n of t)if(n.type===`attributes`&&n.attributeName===`open`&&n.target.classList.contains(`drawer`)){e();break}}).observe(document.body,{subtree:!0,attributes:!0,attributeFilter:[`open`]})}function e(e){return e?typeof e==`string`?document.getElementById(e):e:null}function t(t){e(t)?.showModal()}function n(t){e(t)?.close()}function r(){Array.from(document.querySelectorAll(`dialog.drawer[open]`)).reverse().forEach(e=>e.close())}function i(t){return e(t)?.open??!1}function a(){return Array.from(document.querySelectorAll(`dialog.drawer[open]`))}function o(){let e=a();return e[e.length-1]??null}function s(e={}){let{id:t,content:n=``,handle:r=!0,className:i=``,closeOnOutsideClick:a=!0}=e,o=document.createElement(`dialog`);return o.className=`drawer ${i}`.trim(),t&&(o.id=t),a||(o.dataset.closeOnOutsideClick=`false`),o.innerHTML=`
-    ${r?`<div class="drawer-handle"></div>`:``}
+import"./drawer-CiHZcyXE.mjs";import './drawer-CXCJQa45.css';
+if(typeof window<`u`){let e=()=>{let e=Array.from(document.querySelectorAll(`dialog.drawer[open]`));e.forEach((t,n)=>{n===e.length-1?t.removeAttribute(`inert`):t.setAttribute(`inert`,``)})};new MutationObserver(t=>{for(let n of t)if(n.type===`attributes`&&n.attributeName===`open`&&n.target.classList.contains(`drawer`)){e();break}}).observe(document.body,{subtree:!0,attributes:!0,attributeFilter:[`open`]})}function e(e){return e?typeof e==`string`?document.getElementById(e):e:null}function t(t){e(t)?.showModal()}function n(t){e(t)?.close()}function r(){Array.from(document.querySelectorAll(`dialog.drawer[open]`)).reverse().forEach(e=>e.close())}function i(t){return e(t)?.open??!1}function a(){return Array.from(document.querySelectorAll(`dialog.drawer[open]`))}function o(){let e=a();return e[e.length-1]??null}function s(e={}){let{id:t,content:n=``,direction:r,handle:i=!0,className:a=``,closeOnOutsideClick:o=!0}=e,s=document.createElement(`dialog`);return s.className=`drawer ${a}`.trim(),t&&(s.id=t),r&&(s.dataset.direction=r),o||(s.dataset.closeOnOutsideClick=`false`),s.innerHTML=`
+    ${i?`<div class="drawer-handle"></div>`:``}
     <div class="drawer-content">${n}</div>
-  `,o.addEventListener(`click`,e=>{e.target===o&&o.dataset.closeOnOutsideClick!==`false`&&o.close()}),o}function c(e){return document.body.appendChild(e),e}function l(t){e(t)?.remove()}function u(){let e=e=>{let t=e.target;t.matches(`dialog.drawer`)&&t.dataset.closeOnOutsideClick!==`false`&&t.close()};return document.addEventListener(`click`,e),()=>document.removeEventListener(`click`,e)}function d(t,n){let r=e(t);if(!r)return()=>{};let{onOpen:i,onClose:a,onCancel:o}=n,s=()=>a?.(),c=()=>o?.(),l=new MutationObserver(e=>{for(let t of e)t.attributeName===`open`&&r.open&&i?.()});return r.addEventListener(`close`,s),r.addEventListener(`cancel`,c),l.observe(r,{attributes:!0}),()=>{r.removeEventListener(`close`,s),r.removeEventListener(`cancel`,c),l.disconnect()}}function f(e,t){let n=t?.closeOnOutsideClick??!0;return{id:e,className:`drawer`,"data-close-on-outside-click":n?void 0:`false`,onClick:e=>{n&&e.target===e.currentTarget&&e.currentTarget.close()}}}export{n as close,r as closeAll,s as create,a as getOpen,o as getTop,u as init,i as isOpen,c as mount,t as open,f as props,d as subscribe,l as unmount};
+  `,s.addEventListener(`click`,e=>{e.target===s&&s.dataset.closeOnOutsideClick!==`false`&&s.close()}),s}function c(e){return document.body.appendChild(e),e}function l(t){e(t)?.remove()}function u(){let e=e=>{let t=e.target;t.matches(`dialog.drawer`)&&t.dataset.closeOnOutsideClick!==`false`&&t.close()};return document.addEventListener(`click`,e),()=>document.removeEventListener(`click`,e)}function d(t,n){let r=e(t);if(!r)return()=>{};let{onOpen:i,onClose:a,onCancel:o}=n,s=()=>a?.(),c=()=>o?.(),l=new MutationObserver(e=>{for(let t of e)t.attributeName===`open`&&r.open&&i?.()});return r.addEventListener(`close`,s),r.addEventListener(`cancel`,c),l.observe(r,{attributes:!0}),()=>{r.removeEventListener(`close`,s),r.removeEventListener(`cancel`,c),l.disconnect()}}function f(e,t){let n=t?.closeOnOutsideClick??!0;return{id:e,className:`drawer`,"data-close-on-outside-click":n?void 0:`false`,onClick:e=>{n&&e.target===e.currentTarget&&e.currentTarget.close()}}}export{n as close,r as closeAll,s as create,a as getOpen,o as getTop,u as init,i as isOpen,c as mount,t as open,f as props,d as subscribe,l as unmount};
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["open"],"sources":["../src/index.ts"],"sourcesContent":["/**\n * CSS Drawer - Headless drawer component\n * Works with any framework: React, Vue, Svelte, vanilla JS\n */\n\n/* ===== Auto-enable accessibility for stacked drawers ===== */\nif (typeof window !== 'undefined') {\n  const updateInertState = () => {\n    const openDrawers = Array.from(\n      document.querySelectorAll<HTMLDialogElement>('dialog.drawer[open]')\n    )\n    openDrawers.forEach((drawer, index) => {\n      if (index === openDrawers.length - 1) {\n        drawer.removeAttribute('inert')\n      } else {\n        drawer.setAttribute('inert', '')\n      }\n    })\n  }\n\n  const observer = new MutationObserver((mutations) => {\n    for (const mutation of mutations) {\n      if (\n        mutation.type === 'attributes' &&\n        mutation.attributeName === 'open' &&\n        (mutation.target as HTMLElement).classList.contains('drawer')\n      ) {\n        updateInertState()\n        break\n      }\n    }\n  })\n\n  observer.observe(document.body, {\n    subtree: true,\n    attributes: true,\n    attributeFilter: ['open'],\n  })\n}\n\nexport type DrawerElement = HTMLDialogElement\n\nexport type DrawerRef = string | DrawerElement | null | undefined\n\nexport interface CreateDrawerOptions {\n  /** Drawer ID */\n  id?: string\n  /** HTML content for the drawer */\n  content?: string\n  /** Include drag handle (default: true) */\n  handle?: boolean\n  /** Additional CSS classes */\n  className?: string\n  /** Close when clicking outside (default: true) */\n  closeOnOutsideClick?: boolean\n}\n\nexport interface DrawerEventHandlers {\n  /** Called when drawer opens */\n  onOpen?: () => void\n  /** Called when drawer closes */\n  onClose?: () => void\n  /** Called when drawer is cancelled (backdrop click or Escape) */\n  onCancel?: () => void\n}\n\n/**\n * Resolve a drawer reference to an element\n */\nfunction resolve(drawer: DrawerRef): DrawerElement | null {\n  if (!drawer) return null\n  if (typeof drawer === 'string') {\n    return document.getElementById(drawer) as DrawerElement | null\n  }\n  return drawer\n}\n\n/**\n * Open a drawer by ID or element reference\n */\nexport function open(drawer: DrawerRef): void {\n  const el = resolve(drawer)\n  el?.showModal()\n}\n\n/**\n * Close a drawer by ID or element reference\n */\nexport function close(drawer: DrawerRef): void {\n  const el = resolve(drawer)\n  el?.close()\n}\n\n/**\n * Close all open drawers (in reverse DOM order for proper animation)\n */\nexport function closeAll(): void {\n  const drawers = Array.from(document.querySelectorAll<DrawerElement>('dialog.drawer[open]'))\n  drawers.reverse().forEach((d) => d.close())\n}\n\n/**\n * Check if a drawer is open\n */\nexport function isOpen(drawer: DrawerRef): boolean {\n  const el = resolve(drawer)\n  return el?.open ?? false\n}\n\n/**\n * Get all open drawers\n */\nexport function getOpen(): DrawerElement[] {\n  return Array.from(document.querySelectorAll<DrawerElement>('dialog.drawer[open]'))\n}\n\n/**\n * Get the topmost open drawer\n */\nexport function getTop(): DrawerElement | null {\n  const open = getOpen()\n  return open[open.length - 1] ?? null\n}\n\n/**\n * Create a drawer element programmatically\n */\nexport function create(options: CreateDrawerOptions = {}): DrawerElement {\n  const { id, content = '', handle = true, className = '', closeOnOutsideClick = true } = options\n\n  const dialog = document.createElement('dialog') as DrawerElement\n  dialog.className = `drawer ${className}`.trim()\n  if (id) dialog.id = id\n  if (!closeOnOutsideClick) {\n    dialog.dataset.closeOnOutsideClick = 'false'\n  }\n\n  dialog.innerHTML = `\n    ${handle ? '<div class=\"drawer-handle\"></div>' : ''}\n    <div class=\"drawer-content\">${content}</div>\n  `\n\n  // Backdrop click to close (respects data attribute)\n  dialog.addEventListener('click', (e) => {\n    if (e.target === dialog && dialog.dataset.closeOnOutsideClick !== 'false') {\n      dialog.close()\n    }\n  })\n\n  return dialog\n}\n\n/**\n * Mount a drawer to the DOM (appends to body)\n */\nexport function mount(drawer: DrawerElement): DrawerElement {\n  document.body.appendChild(drawer)\n  return drawer\n}\n\n/**\n * Unmount a drawer from the DOM\n */\nexport function unmount(drawer: DrawerRef): void {\n  const el = resolve(drawer)\n  el?.remove()\n}\n\n/**\n * Initialize global backdrop-click-to-close behavior\n * Alternative to adding onclick to each drawer\n * Respects data-close-on-outside-click=\"false\" attribute\n */\nexport function init(): () => void {\n  const handler = (e: MouseEvent) => {\n    const target = e.target as HTMLElement\n    if (target.matches('dialog.drawer') && (target as DrawerElement).dataset.closeOnOutsideClick !== 'false') {\n      ;(target as DrawerElement).close()\n    }\n  }\n\n  document.addEventListener('click', handler)\n  return () => document.removeEventListener('click', handler)\n}\n\n/**\n * Subscribe to drawer events\n * @returns Cleanup function\n */\nexport function subscribe(\n  drawer: DrawerRef,\n  handlers: DrawerEventHandlers\n): () => void {\n  const el = resolve(drawer)\n  if (!el) return () => {}\n\n  const { onOpen, onClose, onCancel } = handlers\n\n  const handleClose = () => onClose?.()\n  const handleCancel = () => onCancel?.()\n\n  // Use MutationObserver to detect open attribute\n  const observer = new MutationObserver((mutations) => {\n    for (const mutation of mutations) {\n      if (mutation.attributeName === 'open' && el.open) {\n        onOpen?.()\n      }\n    }\n  })\n\n  el.addEventListener('close', handleClose)\n  el.addEventListener('cancel', handleCancel)\n  observer.observe(el, { attributes: true })\n\n  return () => {\n    el.removeEventListener('close', handleClose)\n    el.removeEventListener('cancel', handleCancel)\n    observer.disconnect()\n  }\n}\n\n/**\n * React-friendly hook helper - returns props to spread on dialog\n * Usage: <dialog {...drawer.props('my-drawer')} />\n */\nexport function props(id: string, options?: { closeOnOutsideClick?: boolean }) {\n  const closeOnOutsideClick = options?.closeOnOutsideClick ?? true\n  return {\n    id,\n    className: 'drawer',\n    'data-close-on-outside-click': closeOnOutsideClick ? undefined : 'false',\n    onClick: (e: MouseEvent) => {\n      if (closeOnOutsideClick && e.target === e.currentTarget) {\n        ;(e.currentTarget as DrawerElement).close()\n      }\n    },\n  } as const\n}\n\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":["open"],"sources":["../src/index.ts"],"sourcesContent":["/**\n * CSS Drawer - Headless drawer component\n * Works with any framework: React, Vue, Svelte, vanilla JS\n */\nimport './drawer.css'\n\n/* ===== Auto-enable accessibility for stacked drawers ===== */\nif (typeof window !== 'undefined') {\n  const updateInertState = () => {\n    const openDrawers = Array.from(\n      document.querySelectorAll<HTMLDialogElement>('dialog.drawer[open]')\n    )\n    openDrawers.forEach((drawer, index) => {\n      if (index === openDrawers.length - 1) {\n        drawer.removeAttribute('inert')\n      } else {\n        drawer.setAttribute('inert', '')\n      }\n    })\n  }\n\n  const observer = new MutationObserver((mutations) => {\n    for (const mutation of mutations) {\n      if (\n        mutation.type === 'attributes' &&\n        mutation.attributeName === 'open' &&\n        (mutation.target as HTMLElement).classList.contains('drawer')\n      ) {\n        updateInertState()\n        break\n      }\n    }\n  })\n\n  observer.observe(document.body, {\n    subtree: true,\n    attributes: true,\n    attributeFilter: ['open'],\n  })\n}\n\nexport type DrawerElement = HTMLDialogElement\n\nexport type DrawerRef = string | DrawerElement | null | undefined\n\nexport type DrawerDirection = 'bottom' | 'top' | 'left' | 'right' | 'modal'\n\nexport interface CreateDrawerOptions {\n  /** Drawer ID */\n  id?: string\n  /** HTML content for the drawer */\n  content?: string\n  /** Direction the drawer opens from (default: 'bottom') */\n  direction?: DrawerDirection\n  /** Include drag handle (default: true) */\n  handle?: boolean\n  /** Additional CSS classes */\n  className?: string\n  /** Close when clicking outside (default: true) */\n  closeOnOutsideClick?: boolean\n}\n\nexport interface DrawerEventHandlers {\n  /** Called when drawer opens */\n  onOpen?: () => void\n  /** Called when drawer closes */\n  onClose?: () => void\n  /** Called when drawer is cancelled (backdrop click or Escape) */\n  onCancel?: () => void\n}\n\n/**\n * Resolve a drawer reference to an element\n */\nfunction resolve(drawer: DrawerRef): DrawerElement | null {\n  if (!drawer) return null\n  if (typeof drawer === 'string') {\n    return document.getElementById(drawer) as DrawerElement | null\n  }\n  return drawer\n}\n\n/**\n * Open a drawer by ID or element reference\n */\nexport function open(drawer: DrawerRef): void {\n  const el = resolve(drawer)\n  el?.showModal()\n}\n\n/**\n * Close a drawer by ID or element reference\n */\nexport function close(drawer: DrawerRef): void {\n  const el = resolve(drawer)\n  el?.close()\n}\n\n/**\n * Close all open drawers (in reverse DOM order for proper animation)\n */\nexport function closeAll(): void {\n  const drawers = Array.from(document.querySelectorAll<DrawerElement>('dialog.drawer[open]'))\n  drawers.reverse().forEach((d) => d.close())\n}\n\n/**\n * Check if a drawer is open\n */\nexport function isOpen(drawer: DrawerRef): boolean {\n  const el = resolve(drawer)\n  return el?.open ?? false\n}\n\n/**\n * Get all open drawers\n */\nexport function getOpen(): DrawerElement[] {\n  return Array.from(document.querySelectorAll<DrawerElement>('dialog.drawer[open]'))\n}\n\n/**\n * Get the topmost open drawer\n */\nexport function getTop(): DrawerElement | null {\n  const open = getOpen()\n  return open[open.length - 1] ?? null\n}\n\n/**\n * Create a drawer element programmatically\n */\nexport function create(options: CreateDrawerOptions = {}): DrawerElement {\n  const { id, content = '', direction, handle = true, className = '', closeOnOutsideClick = true } = options\n\n  const dialog = document.createElement('dialog') as DrawerElement\n  dialog.className = `drawer ${className}`.trim()\n  if (id) dialog.id = id\n  if (direction) dialog.dataset.direction = direction\n  if (!closeOnOutsideClick) {\n    dialog.dataset.closeOnOutsideClick = 'false'\n  }\n\n  dialog.innerHTML = `\n    ${handle ? '<div class=\"drawer-handle\"></div>' : ''}\n    <div class=\"drawer-content\">${content}</div>\n  `\n\n  // Backdrop click to close (respects data attribute)\n  dialog.addEventListener('click', (e) => {\n    if (e.target === dialog && dialog.dataset.closeOnOutsideClick !== 'false') {\n      dialog.close()\n    }\n  })\n\n  return dialog\n}\n\n/**\n * Mount a drawer to the DOM (appends to body)\n */\nexport function mount(drawer: DrawerElement): DrawerElement {\n  document.body.appendChild(drawer)\n  return drawer\n}\n\n/**\n * Unmount a drawer from the DOM\n */\nexport function unmount(drawer: DrawerRef): void {\n  const el = resolve(drawer)\n  el?.remove()\n}\n\n/**\n * Initialize global backdrop-click-to-close behavior\n * Alternative to adding onclick to each drawer\n * Respects data-close-on-outside-click=\"false\" attribute\n */\nexport function init(): () => void {\n  const handler = (e: MouseEvent) => {\n    const target = e.target as HTMLElement\n    if (target.matches('dialog.drawer') && (target as DrawerElement).dataset.closeOnOutsideClick !== 'false') {\n      ;(target as DrawerElement).close()\n    }\n  }\n\n  document.addEventListener('click', handler)\n  return () => document.removeEventListener('click', handler)\n}\n\n/**\n * Subscribe to drawer events\n * @returns Cleanup function\n */\nexport function subscribe(\n  drawer: DrawerRef,\n  handlers: DrawerEventHandlers\n): () => void {\n  const el = resolve(drawer)\n  if (!el) return () => {}\n\n  const { onOpen, onClose, onCancel } = handlers\n\n  const handleClose = () => onClose?.()\n  const handleCancel = () => onCancel?.()\n\n  // Use MutationObserver to detect open attribute\n  const observer = new MutationObserver((mutations) => {\n    for (const mutation of mutations) {\n      if (mutation.attributeName === 'open' && el.open) {\n        onOpen?.()\n      }\n    }\n  })\n\n  el.addEventListener('close', handleClose)\n  el.addEventListener('cancel', handleCancel)\n  observer.observe(el, { attributes: true })\n\n  return () => {\n    el.removeEventListener('close', handleClose)\n    el.removeEventListener('cancel', handleCancel)\n    observer.disconnect()\n  }\n}\n\n/**\n * React-friendly hook helper - returns props to spread on dialog\n * Usage: <dialog {...drawer.props('my-drawer')} />\n */\nexport function props(id: string, options?: { closeOnOutsideClick?: boolean }) {\n  const closeOnOutsideClick = options?.closeOnOutsideClick ?? true\n  return {\n    id,\n    className: 'drawer',\n    'data-close-on-outside-click': closeOnOutsideClick ? undefined : 'false',\n    onClick: (e: MouseEvent) => {\n      if (closeOnOutsideClick && e.target === e.currentTarget) {\n        ;(e.currentTarget as DrawerElement).close()\n      }\n    },\n  } as const\n}\n\n"],"mappings":"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"}

package/dist/react.cjs

@@ -1,2 +1,2 @@
-require('./react.css');
+require(`./drawer-BWZh2Fyp.cjs`);require('./drawer-C21nwiwE.css');
 let e=require(`react`),t=require(`react/jsx-runtime`);if(typeof window<`u`){let e=()=>{let e=Array.from(document.querySelectorAll(`dialog.drawer[open]`));e.forEach((t,n)=>{n===e.length-1?t.removeAttribute(`inert`):t.setAttribute(`inert`,``)})};new MutationObserver(t=>{for(let n of t)if(n.type===`attributes`&&n.attributeName===`open`&&n.target.classList.contains(`drawer`)){e();break}}).observe(document.body,{subtree:!0,attributes:!0,attributeFilter:[`open`]})}const n=(0,e.createContext)({direction:void 0});function r(){return(0,e.useContext)(n)}function i({children:e,direction:r}){return(0,t.jsx)(n.Provider,{value:{direction:r},children:e})}const a=(0,e.forwardRef)(({children:n,className:i,open:a,onOpenChange:o,closeOnOutsideClick:s=!0,...c},l)=>{let{direction:u}=r(),d=(0,e.useRef)(null),f=l||d;return(0,e.useEffect)(()=>{let e=f.current;e&&(a&&!e.open?(e.showModal(),o?.(!0)):a===!1&&e.open&&e.close())},[a]),(0,t.jsx)(`dialog`,{ref:f,className:`drawer ${i??``}`.trim(),"data-direction":u,onClose:e=>{c.onClose?.(e),o?.(!1)},onClick:e=>{c.onClick?.(e),s&&e.target===e.currentTarget&&e.currentTarget.close()},...c,children:n})});a.displayName=`Drawer.Content`;const o=(0,e.forwardRef)(({className:e,...n},r)=>(0,t.jsx)(`div`,{ref:r,className:`drawer-handle ${e??``}`.trim(),"aria-hidden":`true`,...n}));o.displayName=`Drawer.Handle`;const s=(0,e.forwardRef)((e,n)=>(0,t.jsx)(`h2`,{ref:n,...e}));s.displayName=`Drawer.Title`;const c=(0,e.forwardRef)((e,n)=>(0,t.jsx)(`p`,{ref:n,...e}));c.displayName=`Drawer.Description`;const l={Root:i,Content:a,Handle:o,Title:s,Description:c};exports.Drawer=l;

package/dist/react.d.cts

@@ -3,7 +3,7 @@ import * as react0 from "react";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
 
 //#region src/react.d.ts
-type Direction = 'bottom' | 'top' | 'left' | 'right';
+type Direction = 'bottom' | 'top' | 'left' | 'right' | 'modal';
 interface RootProps {
   children: ReactNode;
   /** Direction the drawer opens from */

package/dist/react.d.mts

@@ -3,7 +3,7 @@ import { ComponentPropsWithoutRef, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/react.d.ts
-type Direction = 'bottom' | 'top' | 'left' | 'right';
+type Direction = 'bottom' | 'top' | 'left' | 'right' | 'modal';
 interface RootProps {
   children: ReactNode;
   /** Direction the drawer opens from */

package/dist/react.mjs

@@ -1,3 +1,3 @@
-import{createContext as e,forwardRef as t,useContext as n,useEffect as r,useRef as i}from"react";import{jsx as a}from"react/jsx-runtime";import './react.css';
+import"./drawer-CiHZcyXE.mjs";import{createContext as e,forwardRef as t,useContext as n,useEffect as r,useRef as i}from"react";import{jsx as a}from"react/jsx-runtime";import './drawer-CXCJQa45.css';
 if(typeof window<`u`){let e=()=>{let e=Array.from(document.querySelectorAll(`dialog.drawer[open]`));e.forEach((t,n)=>{n===e.length-1?t.removeAttribute(`inert`):t.setAttribute(`inert`,``)})};new MutationObserver(t=>{for(let n of t)if(n.type===`attributes`&&n.attributeName===`open`&&n.target.classList.contains(`drawer`)){e();break}}).observe(document.body,{subtree:!0,attributes:!0,attributeFilter:[`open`]})}const o=e({direction:void 0});function s(){return n(o)}function c({children:e,direction:t}){return a(o.Provider,{value:{direction:t},children:e})}const l=t(({children:e,className:t,open:n,onOpenChange:o,closeOnOutsideClick:c=!0,...l},u)=>{let{direction:d}=s(),f=i(null),p=u||f;return r(()=>{let e=p.current;e&&(n&&!e.open?(e.showModal(),o?.(!0)):n===!1&&e.open&&e.close())},[n]),a(`dialog`,{ref:p,className:`drawer ${t??``}`.trim(),"data-direction":d,onClose:e=>{l.onClose?.(e),o?.(!1)},onClick:e=>{l.onClick?.(e),c&&e.target===e.currentTarget&&e.currentTarget.close()},...l,children:e})});l.displayName=`Drawer.Content`;const u=t(({className:e,...t},n)=>a(`div`,{ref:n,className:`drawer-handle ${e??``}`.trim(),"aria-hidden":`true`,...t}));u.displayName=`Drawer.Handle`;const d=t((e,t)=>a(`h2`,{ref:t,...e}));d.displayName=`Drawer.Title`;const f=t((e,t)=>a(`p`,{ref:t,...e}));f.displayName=`Drawer.Description`;const p={Root:c,Content:l,Handle:u,Title:d,Description:f};export{p as Drawer};
 //# sourceMappingURL=react.mjs.map

package/dist/react.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"react.mjs","names":[],"sources":["../src/react.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  forwardRef,\n  useEffect,\n  useRef,\n  type ReactNode,\n  type ComponentPropsWithoutRef,\n} from 'react'\nimport './drawer.css'\n\n/* ===== Auto-enable accessibility for stacked drawers ===== */\nif (typeof window !== 'undefined') {\n  const updateInertState = () => {\n    const openDrawers = Array.from(\n      document.querySelectorAll<HTMLDialogElement>('dialog.drawer[open]')\n    )\n    openDrawers.forEach((drawer, index) => {\n      const isTopmost = index === openDrawers.length - 1\n      if (isTopmost) {\n        drawer.removeAttribute('inert')\n      } else {\n        drawer.setAttribute('inert', '')\n      }\n    })\n  }\n\n  const observer = new MutationObserver((mutations) => {\n    for (const mutation of mutations) {\n      if (\n        mutation.type === 'attributes' &&\n        mutation.attributeName === 'open' &&\n        (mutation.target as HTMLElement).classList.contains('drawer')\n      ) {\n        updateInertState()\n        break\n      }\n    }\n  })\n\n  observer.observe(document.body, {\n    subtree: true,\n    attributes: true,\n    attributeFilter: ['open'],\n  })\n}\n\n/* ===== Types ===== */\ntype Direction = 'bottom' | 'top' | 'left' | 'right'\n\ninterface DrawerContextValue {\n  direction?: Direction\n}\n\n/* ===== Context ===== */\nconst DrawerContext = createContext<DrawerContextValue>({ direction: undefined })\n\nfunction useDrawerContext() {\n  return useContext(DrawerContext)\n}\n\n/* ===== Root ===== */\ninterface RootProps {\n  children: ReactNode\n  /** Direction the drawer opens from */\n  direction?: Direction\n}\n\nfunction Root({ children, direction }: RootProps) {\n  return (\n    <DrawerContext.Provider value={{ direction }}>\n      {children}\n    </DrawerContext.Provider>\n  )\n}\n\n/* ===== Content ===== */\ninterface ContentProps extends Omit<ComponentPropsWithoutRef<'dialog'>, 'open'> {\n  /** Controlled open state */\n  open?: boolean\n  /** Called when open state changes */\n  onOpenChange?: (open: boolean) => void\n  /** Close when clicking outside the drawer (default: true) */\n  closeOnOutsideClick?: boolean\n}\n\nconst Content = forwardRef<HTMLDialogElement, ContentProps>(\n  ({ children, className, open, onOpenChange, closeOnOutsideClick = true, ...props }, ref) => {\n    const { direction } = useDrawerContext()\n    const internalRef = useRef<HTMLDialogElement>(null)\n    const dialogRef = (ref as React.RefObject<HTMLDialogElement>) || internalRef\n\n    useEffect(() => {\n      const dialog = dialogRef.current\n      if (!dialog) return\n\n      if (open && !dialog.open) {\n        dialog.showModal()\n        onOpenChange?.(true)\n      } else if (open === false && dialog.open) {\n        dialog.close()\n      }\n    }, [open])\n\n    return (\n      <dialog\n        ref={dialogRef}\n        className={`drawer ${className ?? ''}`.trim()}\n        data-direction={direction}\n        onClose={(e) => {\n          props.onClose?.(e)\n          onOpenChange?.(false)\n        }}\n        onClick={(e) => {\n          props.onClick?.(e)\n          // Backdrop click - only if clicking the dialog element itself\n          if (closeOnOutsideClick && e.target === e.currentTarget) {\n            e.currentTarget.close()\n          }\n        }}\n        {...props}\n      >\n        {children}\n      </dialog>\n    )\n  }\n)\nContent.displayName = 'Drawer.Content'\n\n/* ===== Handle ===== */\ninterface HandleProps extends ComponentPropsWithoutRef<'div'> {}\n\nconst Handle = forwardRef<HTMLDivElement, HandleProps>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={`drawer-handle ${className ?? ''}`.trim()}\n    aria-hidden=\"true\"\n    {...props}\n  />\n))\nHandle.displayName = 'Drawer.Handle'\n\n/* ===== Title ===== */\ninterface TitleProps extends ComponentPropsWithoutRef<'h2'> {}\n\nconst Title = forwardRef<HTMLHeadingElement, TitleProps>((props, ref) => (\n  <h2 ref={ref} {...props} />\n))\nTitle.displayName = 'Drawer.Title'\n\n/* ===== Description ===== */\ninterface DescriptionProps extends ComponentPropsWithoutRef<'p'> {}\n\nconst Description = forwardRef<HTMLParagraphElement, DescriptionProps>((props, ref) => (\n  <p ref={ref} {...props} />\n))\nDescription.displayName = 'Drawer.Description'\n\n/* ===== Namespace Export ===== */\nexport const Drawer = {\n  Root,\n  Content,\n  Handle,\n  Title,\n  Description,\n}\n\nexport type {\n  RootProps as DrawerRootProps,\n  ContentProps as DrawerContentProps,\n  HandleProps as DrawerHandleProps,\n  TitleProps as DrawerTitleProps,\n  DescriptionProps as DrawerDescriptionProps,\n  Direction as DrawerDirection,\n}\n"],"mappings":"yIAYA,GAAI,OAAO,OAAW,IAAa,CACjC,IAAM,MAAyB,CAC7B,IAAM,EAAc,MAAM,KACxB,SAAS,iBAAoC,sBAAsB,CACpE,CACD,EAAY,SAAS,EAAQ,IAAU,CACnB,IAAU,EAAY,OAAS,EAE/C,EAAO,gBAAgB,QAAQ,CAE/B,EAAO,aAAa,QAAS,GAAG,EAElC,EAGa,IAAI,iBAAkB,GAAc,CACnD,IAAK,IAAM,KAAY,EACrB,GACE,EAAS,OAAS,cAClB,EAAS,gBAAkB,QAC1B,EAAS,OAAuB,UAAU,SAAS,SAAS,CAC7D,CACA,GAAkB,CAClB,QAGJ,CAEO,QAAQ,SAAS,KAAM,CAC9B,QAAS,GACT,WAAY,GACZ,gBAAiB,CAAC,OAAO,CAC1B,CAAC,CAWJ,MAAM,EAAgB,EAAkC,CAAE,UAAW,IAAA,GAAW,CAAC,CAEjF,SAAS,GAAmB,CAC1B,OAAO,EAAW,EAAc,CAUlC,SAAS,EAAK,CAAE,WAAU,aAAwB,CAChD,OACE,EAAC,EAAc,SAAA,CAAS,MAAO,CAAE,YAAW,CACzC,YACsB,CAc7B,MAAM,EAAU,GACb,CAAE,WAAU,YAAW,OAAM,eAAc,sBAAsB,GAAM,GAAG,GAAS,IAAQ,CAC1F,GAAM,CAAE,aAAc,GAAkB,CAClC,EAAc,EAA0B,KAAK,CAC7C,EAAa,GAA8C,EAcjE,OAZA,MAAgB,CACd,IAAM,EAAS,EAAU,QACpB,IAED,GAAQ,CAAC,EAAO,MAClB,EAAO,WAAW,CAClB,IAAe,GAAK,EACX,IAAS,IAAS,EAAO,MAClC,EAAO,OAAO,GAEf,CAAC,EAAK,CAAC,CAGR,EAAC,SAAA,CACC,IAAK,EACL,UAAW,UAAU,GAAa,KAAK,MAAM,CAC7C,iBAAgB,EAChB,QAAU,GAAM,CACd,EAAM,UAAU,EAAE,CAClB,IAAe,GAAM,EAEvB,QAAU,GAAM,CACd,EAAM,UAAU,EAAE,CAEd,GAAuB,EAAE,SAAW,EAAE,eACxC,EAAE,cAAc,OAAO,EAG3B,GAAI,EAEH,YACM,EAGd,CACD,EAAQ,YAAc,iBAKtB,MAAM,EAAS,GAAyC,CAAE,YAAW,GAAG,GAAS,IAC/E,EAAC,MAAA,CACM,MACL,UAAW,iBAAiB,GAAa,KAAK,MAAM,CACpD,cAAY,OACZ,GAAI,GACJ,CACF,CACF,EAAO,YAAc,gBAKrB,MAAM,EAAQ,GAA4C,EAAO,IAC/D,EAAC,KAAA,CAAQ,MAAK,GAAI,GAAS,CAC3B,CACF,EAAM,YAAc,eAKpB,MAAM,EAAc,GAAoD,EAAO,IAC7E,EAAC,IAAA,CAAO,MAAK,GAAI,GAAS,CAC1B,CACF,EAAY,YAAc,qBAG1B,MAAa,EAAS,CACpB,OACA,UACA,SACA,QACA,cACD"}
+{"version":3,"file":"react.mjs","names":[],"sources":["../src/react.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  forwardRef,\n  useEffect,\n  useRef,\n  type ReactNode,\n  type ComponentPropsWithoutRef,\n} from 'react'\nimport './drawer.css'\n\n/* ===== Auto-enable accessibility for stacked drawers ===== */\nif (typeof window !== 'undefined') {\n  const updateInertState = () => {\n    const openDrawers = Array.from(\n      document.querySelectorAll<HTMLDialogElement>('dialog.drawer[open]')\n    )\n    openDrawers.forEach((drawer, index) => {\n      const isTopmost = index === openDrawers.length - 1\n      if (isTopmost) {\n        drawer.removeAttribute('inert')\n      } else {\n        drawer.setAttribute('inert', '')\n      }\n    })\n  }\n\n  const observer = new MutationObserver((mutations) => {\n    for (const mutation of mutations) {\n      if (\n        mutation.type === 'attributes' &&\n        mutation.attributeName === 'open' &&\n        (mutation.target as HTMLElement).classList.contains('drawer')\n      ) {\n        updateInertState()\n        break\n      }\n    }\n  })\n\n  observer.observe(document.body, {\n    subtree: true,\n    attributes: true,\n    attributeFilter: ['open'],\n  })\n}\n\n/* ===== Types ===== */\ntype Direction = 'bottom' | 'top' | 'left' | 'right' | 'modal'\n\ninterface DrawerContextValue {\n  direction?: Direction\n}\n\n/* ===== Context ===== */\nconst DrawerContext = createContext<DrawerContextValue>({ direction: undefined })\n\nfunction useDrawerContext() {\n  return useContext(DrawerContext)\n}\n\n/* ===== Root ===== */\ninterface RootProps {\n  children: ReactNode\n  /** Direction the drawer opens from */\n  direction?: Direction\n}\n\nfunction Root({ children, direction }: RootProps) {\n  return (\n    <DrawerContext.Provider value={{ direction }}>\n      {children}\n    </DrawerContext.Provider>\n  )\n}\n\n/* ===== Content ===== */\ninterface ContentProps extends Omit<ComponentPropsWithoutRef<'dialog'>, 'open'> {\n  /** Controlled open state */\n  open?: boolean\n  /** Called when open state changes */\n  onOpenChange?: (open: boolean) => void\n  /** Close when clicking outside the drawer (default: true) */\n  closeOnOutsideClick?: boolean\n}\n\nconst Content = forwardRef<HTMLDialogElement, ContentProps>(\n  ({ children, className, open, onOpenChange, closeOnOutsideClick = true, ...props }, ref) => {\n    const { direction } = useDrawerContext()\n    const internalRef = useRef<HTMLDialogElement>(null)\n    const dialogRef = (ref as React.RefObject<HTMLDialogElement>) || internalRef\n\n    useEffect(() => {\n      const dialog = dialogRef.current\n      if (!dialog) return\n\n      if (open && !dialog.open) {\n        dialog.showModal()\n        onOpenChange?.(true)\n      } else if (open === false && dialog.open) {\n        dialog.close()\n      }\n    }, [open])\n\n    return (\n      <dialog\n        ref={dialogRef}\n        className={`drawer ${className ?? ''}`.trim()}\n        data-direction={direction}\n        onClose={(e) => {\n          props.onClose?.(e)\n          onOpenChange?.(false)\n        }}\n        onClick={(e) => {\n          props.onClick?.(e)\n          // Backdrop click - only if clicking the dialog element itself\n          if (closeOnOutsideClick && e.target === e.currentTarget) {\n            e.currentTarget.close()\n          }\n        }}\n        {...props}\n      >\n        {children}\n      </dialog>\n    )\n  }\n)\nContent.displayName = 'Drawer.Content'\n\n/* ===== Handle ===== */\ninterface HandleProps extends ComponentPropsWithoutRef<'div'> {}\n\nconst Handle = forwardRef<HTMLDivElement, HandleProps>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={`drawer-handle ${className ?? ''}`.trim()}\n    aria-hidden=\"true\"\n    {...props}\n  />\n))\nHandle.displayName = 'Drawer.Handle'\n\n/* ===== Title ===== */\ninterface TitleProps extends ComponentPropsWithoutRef<'h2'> {}\n\nconst Title = forwardRef<HTMLHeadingElement, TitleProps>((props, ref) => (\n  <h2 ref={ref} {...props} />\n))\nTitle.displayName = 'Drawer.Title'\n\n/* ===== Description ===== */\ninterface DescriptionProps extends ComponentPropsWithoutRef<'p'> {}\n\nconst Description = forwardRef<HTMLParagraphElement, DescriptionProps>((props, ref) => (\n  <p ref={ref} {...props} />\n))\nDescription.displayName = 'Drawer.Description'\n\n/* ===== Namespace Export ===== */\nexport const Drawer = {\n  Root,\n  Content,\n  Handle,\n  Title,\n  Description,\n}\n\nexport type {\n  RootProps as DrawerRootProps,\n  ContentProps as DrawerContentProps,\n  HandleProps as DrawerHandleProps,\n  TitleProps as DrawerTitleProps,\n  DescriptionProps as DrawerDescriptionProps,\n  Direction as DrawerDirection,\n}\n"],"mappings":"uKAYA,GAAI,OAAO,OAAW,IAAa,CACjC,IAAM,MAAyB,CAC7B,IAAM,EAAc,MAAM,KACxB,SAAS,iBAAoC,sBAAsB,CACpE,CACD,EAAY,SAAS,EAAQ,IAAU,CACnB,IAAU,EAAY,OAAS,EAE/C,EAAO,gBAAgB,QAAQ,CAE/B,EAAO,aAAa,QAAS,GAAG,EAElC,EAGa,IAAI,iBAAkB,GAAc,CACnD,IAAK,IAAM,KAAY,EACrB,GACE,EAAS,OAAS,cAClB,EAAS,gBAAkB,QAC1B,EAAS,OAAuB,UAAU,SAAS,SAAS,CAC7D,CACA,GAAkB,CAClB,QAGJ,CAEO,QAAQ,SAAS,KAAM,CAC9B,QAAS,GACT,WAAY,GACZ,gBAAiB,CAAC,OAAO,CAC1B,CAAC,CAWJ,MAAM,EAAgB,EAAkC,CAAE,UAAW,IAAA,GAAW,CAAC,CAEjF,SAAS,GAAmB,CAC1B,OAAO,EAAW,EAAc,CAUlC,SAAS,EAAK,CAAE,WAAU,aAAwB,CAChD,OACE,EAAC,EAAc,SAAA,CAAS,MAAO,CAAE,YAAW,CACzC,YACsB,CAc7B,MAAM,EAAU,GACb,CAAE,WAAU,YAAW,OAAM,eAAc,sBAAsB,GAAM,GAAG,GAAS,IAAQ,CAC1F,GAAM,CAAE,aAAc,GAAkB,CAClC,EAAc,EAA0B,KAAK,CAC7C,EAAa,GAA8C,EAcjE,OAZA,MAAgB,CACd,IAAM,EAAS,EAAU,QACpB,IAED,GAAQ,CAAC,EAAO,MAClB,EAAO,WAAW,CAClB,IAAe,GAAK,EACX,IAAS,IAAS,EAAO,MAClC,EAAO,OAAO,GAEf,CAAC,EAAK,CAAC,CAGR,EAAC,SAAA,CACC,IAAK,EACL,UAAW,UAAU,GAAa,KAAK,MAAM,CAC7C,iBAAgB,EAChB,QAAU,GAAM,CACd,EAAM,UAAU,EAAE,CAClB,IAAe,GAAM,EAEvB,QAAU,GAAM,CACd,EAAM,UAAU,EAAE,CAEd,GAAuB,EAAE,SAAW,EAAE,eACxC,EAAE,cAAc,OAAO,EAG3B,GAAI,EAEH,YACM,EAGd,CACD,EAAQ,YAAc,iBAKtB,MAAM,EAAS,GAAyC,CAAE,YAAW,GAAG,GAAS,IAC/E,EAAC,MAAA,CACM,MACL,UAAW,iBAAiB,GAAa,KAAK,MAAM,CACpD,cAAY,OACZ,GAAI,GACJ,CACF,CACF,EAAO,YAAc,gBAKrB,MAAM,EAAQ,GAA4C,EAAO,IAC/D,EAAC,KAAA,CAAQ,MAAK,GAAI,GAAS,CAC3B,CACF,EAAM,YAAc,eAKpB,MAAM,EAAc,GAAoD,EAAO,IAC7E,EAAC,IAAA,CAAO,MAAK,GAAI,GAAS,CAC1B,CACF,EAAY,YAAc,qBAG1B,MAAa,EAAS,CACpB,OACA,UACA,SACA,QACA,cACD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-drawer",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Vaul-quality drawer component using native <dialog> and pure CSS animations",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -27,11 +27,12 @@
         "default": "./dist/react.cjs"
       }
     },
-    "./styles": "./dist/react.css",
-    "./drawer.css": "./dist/react.css"
+    "./styles": "./src/drawer.css",
+    "./drawer.css": "./src/drawer.css"
   },
   "files": [
-    "dist"
+    "dist",
+    "src/drawer.css"
   ],
   "peerDependencies": {
     "react": ">=18.0.0",

package/{dist/react.css → src/drawer.css}

@@ -25,6 +25,7 @@
   --drawer-shadow-top: 0 10px 60px hsl(0 0% 0% / 0.12), 0 4px 20px hsl(0 0% 0% / 0.08);
   --drawer-shadow-right: -10px 0 60px hsl(0 0% 0% / 0.12), -4px 0 20px hsl(0 0% 0% / 0.08);
   --drawer-shadow-left: 10px 0 60px hsl(0 0% 0% / 0.12), 4px 0 20px hsl(0 0% 0% / 0.08);
+  --drawer-shadow-modal: 0 25px 50px -12px hsl(0 0% 0% / 0.25);
 
   /* Animation */
   --drawer-duration: 0.5s;
@@ -47,6 +48,7 @@
     --drawer-shadow-top: 0 10px 60px hsl(0 0% 0% / 0.4), 0 4px 20px hsl(0 0% 0% / 0.3);
     --drawer-shadow-right: -10px 0 60px hsl(0 0% 0% / 0.4), -4px 0 20px hsl(0 0% 0% / 0.3);
     --drawer-shadow-left: 10px 0 60px hsl(0 0% 0% / 0.4), 4px 0 20px hsl(0 0% 0% / 0.3);
+    --drawer-shadow-modal: 0 25px 50px -12px hsl(0 0% 0% / 0.5);
   }
 }
 
@@ -169,6 +171,30 @@ body:has(.drawer[open]) {
   box-shadow: var(--drawer-shadow-top);
 }
 
+/* Modal (centered) */
+.drawer[data-direction="modal"] {
+  --_translate-closed: 0 0;
+  --_border-radius: var(--drawer-radius);
+  inset: 0;
+  margin: auto;
+  width: fit-content;
+  max-width: var(--drawer-max-width);
+  height: fit-content;
+  max-height: var(--drawer-max-height);
+  box-shadow: var(--drawer-shadow-modal);
+  scale: var(--drawer-nested-scale);
+}
+
+.drawer[data-direction="modal"][open] {
+  scale: 1;
+}
+
+@starting-style {
+  .drawer[data-direction="modal"][open] {
+    scale: var(--drawer-nested-scale);
+  }
+}
+
 /* ===== AUTO-NESTING (up to 5 levels) ===== */
 /* Uses sibling combinators to count open drawers */
 
@@ -302,6 +328,3 @@ body:has(.drawer[open]) {
     filter: none;
   }
 }
-
-
-/*# sourceMappingURL=react.css.map*/

package/dist/react.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"react.css","names":[],"sources":["../src/drawer.css"],"sourcesContent":["/* CSS Drawer - Vaul-quality drawer with auto-nesting and directions */\n\n:root {\n  /* Visual */\n  --drawer-bg: #fff;\n  --drawer-radius: 24px;\n  --drawer-backdrop: hsl(0 0% 0% / 0.4);\n  --drawer-backdrop-blur: 4px;\n\n  /* Sizing */\n  --drawer-max-width: 500px;\n  --drawer-max-height: 96dvh;\n\n  /* Handle */\n  --drawer-handle-bg: hsl(0 0% 80%);\n  --drawer-handle-bg-hover: hsl(0 0% 60%);\n  --drawer-handle-width: 48px;\n  --drawer-handle-width-hover: 56px;\n  --drawer-handle-height: 5px;\n  --drawer-handle-padding-block: 1rem 0.5rem;\n  --drawer-handle-padding-inline: 0;\n\n  /* Shadows */\n  --drawer-shadow-bottom: 0 -10px 60px hsl(0 0% 0% / 0.12), 0 -4px 20px hsl(0 0% 0% / 0.08);\n  --drawer-shadow-top: 0 10px 60px hsl(0 0% 0% / 0.12), 0 4px 20px hsl(0 0% 0% / 0.08);\n  --drawer-shadow-right: -10px 0 60px hsl(0 0% 0% / 0.12), -4px 0 20px hsl(0 0% 0% / 0.08);\n  --drawer-shadow-left: 10px 0 60px hsl(0 0% 0% / 0.12), 4px 0 20px hsl(0 0% 0% / 0.08);\n\n  /* Animation */\n  --drawer-duration: 0.5s;\n  --drawer-duration-close: 0.35s;\n  --drawer-ease: cubic-bezier(0.32, 0.72, 0, 1);\n\n  /* Nesting effects */\n  --drawer-nested-scale: 0.94;\n  --drawer-nested-offset: 20px;\n  --drawer-nested-brightness: 0.92;\n  --drawer-nested-backdrop: hsl(0 0% 0% / 0.15);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --drawer-bg: hsl(0 0% 12%);\n    --drawer-handle-bg: hsl(0 0% 35%);\n    --drawer-handle-bg-hover: hsl(0 0% 50%);\n    --drawer-shadow-bottom: 0 -10px 60px hsl(0 0% 0% / 0.4), 0 -4px 20px hsl(0 0% 0% / 0.3);\n    --drawer-shadow-top: 0 10px 60px hsl(0 0% 0% / 0.4), 0 4px 20px hsl(0 0% 0% / 0.3);\n    --drawer-shadow-right: -10px 0 60px hsl(0 0% 0% / 0.4), -4px 0 20px hsl(0 0% 0% / 0.3);\n    --drawer-shadow-left: 10px 0 60px hsl(0 0% 0% / 0.4), 4px 0 20px hsl(0 0% 0% / 0.3);\n  }\n}\n\n/* Background scale effect */\nbody {\n  transition: scale var(--drawer-duration) var(--drawer-ease), border-radius var(--drawer-duration) var(--drawer-ease);\n  transform-origin: center top;\n}\n\nbody:has(.drawer[open]) {\n  overflow: hidden;\n  scale: var(--drawer-nested-scale);\n  border-radius: var(--drawer-radius);\n}\n\n/* Base drawer */\n.drawer {\n  border: none;\n  padding: 0;\n  margin: 0;\n  max-width: 100%;\n  max-height: 100%;\n  position: fixed;\n  background: var(--drawer-bg);\n  overflow: hidden;\n  opacity: 0;\n  transition:\n    display var(--drawer-duration-close) allow-discrete,\n    overlay var(--drawer-duration-close) allow-discrete,\n    translate var(--drawer-duration-close) var(--drawer-ease),\n    scale var(--drawer-duration-close) var(--drawer-ease),\n    filter var(--drawer-duration-close) ease,\n    opacity var(--drawer-duration-close) ease;\n\n  /* Default: bottom */\n  --_translate-closed: 0 100%;\n  --_border-radius: var(--drawer-radius) var(--drawer-radius) 0 0;\n  inset: auto 0 0 0;\n  margin-inline: auto;\n  width: 100%;\n  max-width: var(--drawer-max-width);\n  height: auto;\n  max-height: var(--drawer-max-height);\n  border-radius: var(--drawer-border-radius, var(--_border-radius));\n  box-shadow: var(--drawer-shadow-bottom);\n  translate: var(--_translate-closed);\n}\n\n.drawer::backdrop {\n  background: var(--drawer-backdrop);\n  opacity: 0;\n  backdrop-filter: blur(var(--drawer-backdrop-blur));\n  -webkit-backdrop-filter: blur(var(--drawer-backdrop-blur));\n  transition:\n    display var(--drawer-duration-close) allow-discrete,\n    overlay var(--drawer-duration-close) allow-discrete,\n    opacity var(--drawer-duration-close) ease;\n}\n\n.drawer[open] {\n  opacity: 1;\n  translate: 0 0;\n  transition:\n    display var(--drawer-duration) allow-discrete,\n    overlay var(--drawer-duration) allow-discrete,\n    translate var(--drawer-duration) var(--drawer-ease),\n    scale var(--drawer-duration) var(--drawer-ease),\n    filter var(--drawer-duration) ease,\n    opacity 0.15s ease;\n}\n\n.drawer[open]::backdrop {\n  opacity: 1;\n  transition: display var(--drawer-duration) allow-discrete, overlay var(--drawer-duration) allow-discrete, opacity 0.2s ease;\n}\n\n@starting-style {\n  .drawer[open] { opacity: 0; translate: var(--_translate-closed); }\n  .drawer[open]::backdrop { opacity: 0; }\n}\n\n/* ===== DIRECTIONS ===== */\n\n/* Right */\n.drawer[data-direction=\"right\"] {\n  --_translate-closed: 100% 0;\n  --_border-radius: var(--drawer-radius) 0 0 var(--drawer-radius);\n  inset: 0 0 0 auto;\n  margin: 0;\n  width: 100%;\n  max-width: var(--drawer-max-width);\n  height: 100dvh;\n  max-height: 100dvh;\n  box-shadow: var(--drawer-shadow-right);\n}\n\n/* Left */\n.drawer[data-direction=\"left\"] {\n  --_translate-closed: -100% 0;\n  --_border-radius: 0 var(--drawer-radius) var(--drawer-radius) 0;\n  inset: 0 auto 0 0;\n  margin: 0;\n  width: 100%;\n  max-width: var(--drawer-max-width);\n  height: 100dvh;\n  max-height: 100dvh;\n  box-shadow: var(--drawer-shadow-left);\n}\n\n/* Top */\n.drawer[data-direction=\"top\"] {\n  --_translate-closed: 0 -100%;\n  --_border-radius: 0 0 var(--drawer-radius) var(--drawer-radius);\n  inset: 0 0 auto 0;\n  margin-inline: auto;\n  width: 100%;\n  max-width: var(--drawer-max-width);\n  height: auto;\n  max-height: var(--drawer-max-height);\n  box-shadow: var(--drawer-shadow-top);\n}\n\n/* ===== AUTO-NESTING (up to 5 levels) ===== */\n/* Uses sibling combinators to count open drawers */\n\n/* 1+ open drawers after */\n.drawer[open]:has(~ .drawer[open]) {\n  scale: var(--drawer-nested-scale);\n  translate: 0 calc(-1 * var(--drawer-nested-offset));\n  border-radius: var(--drawer-radius);\n  filter: brightness(var(--drawer-nested-brightness));\n  pointer-events: none;\n}\n\n/* 2+ open drawers after */\n.drawer[open]:has(~ .drawer[open] ~ .drawer[open]) {\n  scale: calc(var(--drawer-nested-scale) * var(--drawer-nested-scale));\n  translate: 0 calc(-2 * var(--drawer-nested-offset));\n  filter: brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness)));\n}\n\n/* 3+ open drawers after */\n.drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {\n  scale: calc(var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale));\n  translate: 0 calc(-3 * var(--drawer-nested-offset));\n  filter: brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness)));\n}\n\n/* 4+ open drawers after */\n.drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {\n  scale: calc(var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale));\n  translate: 0 calc(-4 * var(--drawer-nested-offset));\n  filter: brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness)));\n}\n\n/* 5+ open drawers after */\n.drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {\n  scale: calc(var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale));\n  translate: 0 calc(-5 * var(--drawer-nested-offset));\n  filter: brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness)));\n}\n\n/* Lighter backdrop for stacked drawers */\n.drawer[open] ~ .drawer[open]::backdrop {\n  background: var(--drawer-nested-backdrop);\n  backdrop-filter: none;\n}\n\n/* Handle */\n.drawer-handle {\n  display: flex;\n  justify-content: center;\n  padding-block: var(--drawer-handle-padding-block);\n  padding-inline: var(--drawer-handle-padding-inline);\n  cursor: grab;\n}\n\n.drawer-handle::before {\n  content: '';\n  width: var(--drawer-handle-width);\n  height: var(--drawer-handle-height);\n  background: var(--drawer-handle-bg);\n  border-radius: 100px;\n  transition: width 0.2s var(--drawer-ease), height 0.2s var(--drawer-ease), background 0.2s ease;\n}\n\n.drawer-handle:hover::before {\n  width: var(--drawer-handle-width-hover);\n  background: var(--drawer-handle-bg-hover);\n}\n\n/* Vertical handle for left/right drawers */\n.drawer[data-direction=\"left\"] .drawer-handle,\n.drawer[data-direction=\"right\"] .drawer-handle {\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding-block: var(--drawer-handle-padding-inline);\n  padding-inline: var(--drawer-handle-padding-block);\n  height: 100%;\n  position: absolute;\n  top: 0;\n  writing-mode: vertical-lr;\n}\n\n.drawer[data-direction=\"left\"] .drawer-handle { right: 0; }\n.drawer[data-direction=\"right\"] .drawer-handle { left: 0; }\n\n.drawer[data-direction=\"left\"] .drawer-handle::before,\n.drawer[data-direction=\"right\"] .drawer-handle::before {\n  width: var(--drawer-handle-height);\n  height: var(--drawer-handle-width);\n}\n\n.drawer[data-direction=\"left\"] .drawer-handle:hover::before,\n.drawer[data-direction=\"right\"] .drawer-handle:hover::before {\n  width: var(--drawer-handle-height);\n  height: var(--drawer-handle-width-hover);\n}\n\n/* Content - structural only, no opinionated padding */\n.drawer-content {\n  overflow-x: hidden;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  flex: 1;\n  min-height: 0;\n}\n\n/* Content sizing for directions */\n.drawer[data-direction=\"left\"] .drawer-content,\n.drawer[data-direction=\"right\"] .drawer-content {\n  height: 100%;\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    transition-duration: 0.01ms !important;\n  }\n\n  body:has(.drawer[open]) {\n    scale: 1;\n  }\n\n  .drawer[open]:has(~ .drawer[open]),\n  .drawer[open]:has(~ .drawer[open] ~ .drawer[open]),\n  .drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open]),\n  .drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]),\n  .drawer[open]:has(~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {\n    scale: 1;\n    translate: 0 0;\n    filter: none;\n  }\n}\n"],"mappings":"AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}