css-drawer 0.3.1 → 0.4.0

package/dist/observer-QD6bSdOu.css

@@ -1,334 +0,0 @@
-/* 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-height: 96dvh;
-  --drawer-modal-width: fit-content;
-  --drawer-modal-height: fit-content;
-
-  /* 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: var(--drawer-width, 100%);
-  max-width: var(--drawer-max-width, none);
-  height: var(--drawer-height, auto);
-  max-height: var(--drawer-max-height, 96dvh);
-  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: var(--drawer-width, 500px);
-  max-width: var(--drawer-max-width, 90%);
-  height: var(--drawer-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: var(--drawer-width, 500px);
-  max-width: var(--drawer-max-width, 90%);
-  height: var(--drawer-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: var(--drawer-width, 100%);
-  max-width: var(--drawer-max-width, none);
-  height: var(--drawer-height, auto);
-  max-height: var(--drawer-max-height, 96dvh);
-  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: var(--drawer-modal-width, fit-content);
-  max-width: var(--drawer-max-width, 90%);
-  height: var(--drawer-modal-height, fit-content);
-  max-height: var(--drawer-max-height, 96dvh);
-  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=observer-QD6bSdOu.css.map*/

package/dist/observer-QD6bSdOu.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"observer-QD6bSdOu.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-height: 96dvh;\n  --drawer-modal-width: fit-content;\n  --drawer-modal-height: fit-content;\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: var(--drawer-width, 100%);\n  max-width: var(--drawer-max-width, none);\n  height: var(--drawer-height, auto);\n  max-height: var(--drawer-max-height, 96dvh);\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: var(--drawer-width, 500px);\n  max-width: var(--drawer-max-width, 90%);\n  height: var(--drawer-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: var(--drawer-width, 500px);\n  max-width: var(--drawer-max-width, 90%);\n  height: var(--drawer-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: var(--drawer-width, 100%);\n  max-width: var(--drawer-max-width, none);\n  height: var(--drawer-height, auto);\n  max-height: var(--drawer-max-height, 96dvh);\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: var(--drawer-modal-width, fit-content);\n  max-width: var(--drawer-max-width, 90%);\n  height: var(--drawer-modal-height, fit-content);\n  max-height: var(--drawer-max-height, 96dvh);\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;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"}