@pathscale/ui 1.1.53 → 1.1.54

package/dist/components/drawer/Drawer.js

@@ -2,198 +2,43 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./Drawer.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-import * as __WEBPACK_EXTERNAL_MODULE__Drawer_a11y_js_eed6fb4e__ from "./Drawer.a11y.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__ from "./Drawer.classes.js";
-import * as __WEBPACK_EXTERNAL_MODULE__Drawer_context_js_e84e90b3__ from "./Drawer.context.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<h2>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div data-slot=drawer-handle-bar>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span data-slot=drawer-close>");
-let bodyLockCount = 0;
-let prevBodyOverflow = "";
-let prevBodyPaddingRight = "";
-const lockBodyScroll = ()=>{
-    if (0 === bodyLockCount) {
-        prevBodyOverflow = document.body.style.overflow;
-        prevBodyPaddingRight = document.body.style.paddingRight;
-        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-        if (scrollbarWidth > 0) document.body.style.paddingRight = `${scrollbarWidth}px`;
-        document.body.style.overflow = "hidden";
-    }
-    bodyLockCount += 1;
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<h2>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div data-slot=drawer-handle-bar>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span data-slot=drawer-close>");
+const DrawerContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+const useDrawerContext = ()=>{
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(DrawerContext);
+    if (!ctx) throw new Error("Drawer compound components must be used within <Drawer>");
+    return ctx;
 };
-const unlockBodyScroll = ()=>{
-    if (bodyLockCount <= 0) return;
-    bodyLockCount -= 1;
-    if (0 === bodyLockCount) {
-        document.body.style.overflow = prevBodyOverflow;
-        document.body.style.paddingRight = prevBodyPaddingRight;
-    }
-};
-const EXIT_MS = 200;
 const DrawerRoot = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+    const [local, _others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style",
         "isOpen",
         "defaultOpen",
         "onOpenChange",
-        "placement",
-        "size",
-        "backdrop",
-        "scrollBehavior",
-        "isDismissable",
-        "shouldCloseOnEsc",
-        "shouldCloseOnBackdropClick",
-        "trapFocus",
-        "restoreFocus"
+        "dataTheme",
+        "class",
+        "className",
+        "style"
     ]);
     const [internalOpen, setInternalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(Boolean(local.defaultOpen));
-    const [animState, setAnimState] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(Boolean(local.isOpen ?? local.defaultOpen) ? "open" : "closed");
-    const [dialogRef, setDialogRef] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
-    const [labelledBy, setLabelledBy] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
-    const [describedBy, setDescribedBy] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
-    const [placementOverride, setPlacementOverride] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(void 0);
-    const [backdropDismissableOverride, setBackdropDismissableOverride] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(void 0);
-    const [backdropCloseOnClickOverride, setBackdropCloseOnClickOverride] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(void 0);
     const isControlled = ()=>void 0 !== local.isOpen;
     const isOpen = ()=>isControlled() ? Boolean(local.isOpen) : internalOpen();
-    const placement = ()=>placementOverride() ?? local.placement ?? "bottom";
-    const size = ()=>local.size ?? "md";
-    const backdrop = ()=>local.backdrop ?? "opaque";
-    const scrollBehavior = ()=>local.scrollBehavior ?? "inside";
-    const isDismissable = ()=>backdropDismissableOverride() ?? local.isDismissable ?? true;
-    const shouldCloseOnEsc = ()=>local.shouldCloseOnEsc ?? true;
-    const shouldCloseOnBackdropClick = ()=>backdropCloseOnClickOverride() ?? local.shouldCloseOnBackdropClick ?? true;
-    const trapFocusEnabled = ()=>local.trapFocus ?? true;
-    const restoreFocusEnabled = ()=>local.restoreFocus ?? true;
-    const setIsOpen = (next)=>{
-        if (next === isOpen()) return;
-        if (!isControlled()) setInternalOpen(next);
-        local.onOpenChange?.(next);
-    };
-    const requestClose = (reason)=>{
-        if (!isDismissable()) return;
-        if ("escape" === reason && !shouldCloseOnEsc()) return;
-        if ("backdrop" === reason && !shouldCloseOnBackdropClick()) return;
-        setIsOpen(false);
+    const setIsOpen = (v)=>{
+        if (!isControlled()) setInternalOpen(v);
+        local.onOpenChange?.(v);
     };
-    let exitTimer;
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
-        const open = isOpen();
-        const state = animState();
-        if (open) {
-            if (exitTimer) {
-                clearTimeout(exitTimer);
-                exitTimer = void 0;
-            }
-            if ("closed" === state || "exiting" === state) {
-                setAnimState("entering");
-                requestAnimationFrame(()=>{
-                    requestAnimationFrame(()=>setAnimState("open"));
-                });
-            }
-            return;
-        }
-        if ("open" === state || "entering" === state) {
-            setAnimState("exiting");
-            exitTimer = setTimeout(()=>setAnimState("closed"), EXIT_MS);
-        }
-    });
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
-        if (exitTimer) clearTimeout(exitTimer);
-    });
-    let hasScrollLock = false;
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
-        const visible = (0, __WEBPACK_EXTERNAL_MODULE__Drawer_a11y_js_eed6fb4e__.isVisibleState)(animState());
-        if (visible && !hasScrollLock) {
-            lockBodyScroll();
-            hasScrollLock = true;
-        } else if (!visible && hasScrollLock) {
-            unlockBodyScroll();
-            hasScrollLock = false;
-        }
-    });
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
-        if (hasScrollLock) unlockBodyScroll();
-    });
-    let restoreFocusTarget = null;
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
-        const state = animState();
-        const dialog = dialogRef();
-        if (!(0, __WEBPACK_EXTERNAL_MODULE__Drawer_a11y_js_eed6fb4e__.isVisibleState)(state) || !dialog) return;
-        if (!restoreFocusTarget) {
-            const active = document.activeElement;
-            if (active instanceof HTMLElement) restoreFocusTarget = active;
-        }
-        queueMicrotask(()=>{
-            if (trapFocusEnabled() && !dialog.contains(document.activeElement)) (0, __WEBPACK_EXTERNAL_MODULE__Drawer_a11y_js_eed6fb4e__.focusFirst)(dialog);
-        });
-        const onKeyDown = (event)=>{
-            if (!(0, __WEBPACK_EXTERNAL_MODULE__Drawer_a11y_js_eed6fb4e__.isVisibleState)(animState())) return;
-            if ("Escape" === event.key) {
-                event.preventDefault();
-                requestClose("escape");
-                return;
-            }
-            if ("Tab" === event.key && trapFocusEnabled()) (0, __WEBPACK_EXTERNAL_MODULE__Drawer_a11y_js_eed6fb4e__.trapFocus)(event, dialog);
-        };
-        document.addEventListener("keydown", onKeyDown);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>document.removeEventListener("keydown", onKeyDown));
-    });
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
-        if ("closed" !== animState() || !restoreFocusEnabled()) return;
-        if (!restoreFocusTarget) return;
-        queueMicrotask(()=>{
-            restoreFocusTarget?.focus?.();
-            restoreFocusTarget = null;
-        });
-    });
-    const contextValue = {
+    const ctx = {
         isOpen,
         setIsOpen,
-        requestClose,
-        animState,
-        placement,
-        size,
-        backdrop,
-        scrollBehavior,
-        isDismissable,
-        shouldCloseOnEsc,
-        shouldCloseOnBackdropClick,
-        trapFocus: trapFocusEnabled,
-        restoreFocus: restoreFocusEnabled,
-        dialogRef,
-        setDialogRef,
-        labelledBy,
-        setLabelledBy,
-        describedBy,
-        setDescribedBy,
-        setPlacementOverride,
-        setBackdropDismissableOverride,
-        setBackdropCloseOnClickOverride
+        placement: ()=>"bottom",
+        isDismissable: ()=>true,
+        animState: ()=>"closed"
     };
-    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__Drawer_context_js_e84e90b3__.DrawerContext.Provider, {
-        value: contextValue,
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(DrawerContext.Provider, {
+        value: ctx,
         get children () {
-            var _el$ = _tmpl$();
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-                get ["class"] () {
-                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.Root.base, isOpen() && __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.Root.state.open, "entering" === animState() && __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.Root.state.entering, "exiting" === animState() && __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.Root.state.exiting, "closed" === animState() && __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.Root.state.closed, local.class, local.className);
-                },
-                "data-slot": "drawer-root",
-                get ["data-open"] () {
-                    return (0, __WEBPACK_EXTERNAL_MODULE__Drawer_a11y_js_eed6fb4e__.isVisibleState)(animState()) ? "true" : "false";
-                },
-                get ["data-theme"] () {
-                    return local.dataTheme;
-                },
-                get style () {
-                    return local.style;
-                }
-            }), false, true);
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
-            return _el$;
+            return local.children;
         }
     });
 };
@@ -206,18 +51,18 @@ const DrawerTrigger = (props)=>{
         "style",
         "onClick"
     ]);
-    const ctx = (0, __WEBPACK_EXTERNAL_MODULE__Drawer_context_js_e84e90b3__.useDrawerContext)();
-    const handleClick = (event)=>{
+    const ctx = useDrawerContext();
+    const handleClick = (e)=>{
         ctx.setIsOpen(true);
-        if ("function" == typeof local.onClick) local.onClick(event);
+        if ("function" == typeof local.onClick) local.onClick(e);
     };
     return (()=>{
-        var _el$2 = _tmpl$2();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            type: "button",
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.Trigger.base, local.class, local.className);
-            },
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            type: "button"
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.slot.trigger, local.class, local.className)
+            }), {
             "data-slot": "drawer-trigger",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -227,57 +72,14 @@ const DrawerTrigger = (props)=>{
             },
             onClick: handleClick
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
-        return _el$2;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
     })();
 };
-const DrawerContent = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style",
-        "placement",
-        "scrollBehavior"
-    ]);
-    const ctx = (0, __WEBPACK_EXTERNAL_MODULE__Drawer_context_js_e84e90b3__.useDrawerContext)();
-    const placement = ()=>local.placement ?? ctx.placement();
-    const scrollBehavior = ()=>local.scrollBehavior ?? ctx.scrollBehavior();
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
-        if (void 0 === local.placement) return;
-        ctx.setPlacementOverride(local.placement);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>ctx.setPlacementOverride(void 0));
-    });
-    return (()=>{
-        var _el$3 = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.Content.base, __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.Content.placement[placement()], __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.Content.scroll[scrollBehavior()], "entering" === ctx.animState() && __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.Content.state.entering, "exiting" === ctx.animState() && __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.Content.state.exiting, local.class, local.className);
-            },
-            "data-slot": "drawer-content",
-            get ["data-placement"] () {
-                return placement();
-            },
-            get ["data-scroll"] () {
-                return scrollBehavior();
-            },
-            get ["data-entering"] () {
-                return "entering" === ctx.animState() ? "true" : void 0;
-            },
-            get ["data-exiting"] () {
-                return "exiting" === ctx.animState() ? "true" : void 0;
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
-        return _el$3;
-    })();
+const BACKDROP_VARIANT_MAP = {
+    opaque: __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.backdrop.opaque,
+    blur: __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.backdrop.blur,
+    transparent: __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.backdrop.transparent
 };
 const DrawerBackdrop = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -288,61 +90,144 @@ const DrawerBackdrop = (props)=>{
         "style",
         "variant",
         "isDismissable",
-        "shouldCloseOnBackdropClick",
         "onClick"
     ]);
-    const ctx = (0, __WEBPACK_EXTERNAL_MODULE__Drawer_context_js_e84e90b3__.useDrawerContext)();
-    const variant = ()=>local.variant ?? ctx.backdrop();
+    const ctx = useDrawerContext();
+    const variant = ()=>local.variant ?? "opaque";
+    const isDismissable = ()=>false !== local.isDismissable;
+    const [animState, setAnimState] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)("closed");
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
-        if (void 0 !== local.isDismissable) {
-            ctx.setBackdropDismissableOverride(local.isDismissable);
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>ctx.setBackdropDismissableOverride(void 0));
-        }
+        if (ctx.isOpen()) {
+            setAnimState("entering");
+            requestAnimationFrame(()=>{
+                requestAnimationFrame(()=>setAnimState("open"));
+            });
+        } else if ("open" === animState() || "entering" === animState()) setAnimState("exiting");
     });
+    const handleTransitionEnd = ()=>{
+        if ("exiting" === animState()) setAnimState("closed");
+    };
+    const handleBackdropClick = (e)=>{
+        if (e.target === e.currentTarget && isDismissable()) ctx.setIsOpen(false);
+        if ("function" == typeof local.onClick) local.onClick(e);
+    };
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
-        if (void 0 !== local.shouldCloseOnBackdropClick) {
-            ctx.setBackdropCloseOnClickOverride(local.shouldCloseOnBackdropClick);
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>ctx.setBackdropCloseOnClickOverride(void 0));
+        const state = animState();
+        if ("entering" === state || "open" === state) {
+            const prev = document.body.style.overflow;
+            document.body.style.overflow = "hidden";
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+                document.body.style.overflow = prev;
+            });
         }
     });
-    const handleClick = (event)=>{
-        if (event.target === event.currentTarget) ctx.requestClose("backdrop");
-        if ("function" == typeof local.onClick) local.onClick(event);
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        if (!ctx.isOpen() || !isDismissable()) return;
+        const handler = (e)=>{
+            if ("Escape" === e.key) ctx.setIsOpen(false);
+        };
+        document.addEventListener("keydown", handler);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>document.removeEventListener("keydown", handler));
+    });
+    const updatedCtx = {
+        isOpen: ctx.isOpen,
+        setIsOpen: ctx.setIsOpen,
+        placement: ctx.placement,
+        isDismissable,
+        animState
     };
     return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
         get when () {
-            return "closed" !== ctx.animState();
+            return "closed" !== animState();
         },
         get children () {
             return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Portal, {
                 get children () {
-                    var _el$4 = _tmpl$();
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-                        get ["class"] () {
-                            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.Backdrop.base, __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.Backdrop.variant[variant()], "entering" === ctx.animState() && __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.Backdrop.state.entering, "exiting" === ctx.animState() && __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.Backdrop.state.exiting, local.class, local.className);
-                        },
-                        "data-slot": "drawer-backdrop",
-                        get ["data-entering"] () {
-                            return "entering" === ctx.animState() ? "true" : void 0;
-                        },
-                        get ["data-exiting"] () {
-                            return "exiting" === ctx.animState() ? "true" : void 0;
-                        },
-                        get ["data-theme"] () {
-                            return local.dataTheme;
-                        },
-                        get style () {
-                            return local.style;
-                        },
-                        onClick: handleClick
-                    }), false, true);
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.children);
-                    return _el$4;
+                    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(DrawerContext.Provider, {
+                        value: updatedCtx,
+                        get children () {
+                            var _el$2 = _tmpl$2();
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.slot.backdrop, BACKDROP_VARIANT_MAP[variant()], local.class, local.className)
+                                }), {
+                                "data-slot": "drawer-backdrop",
+                                get ["data-entering"] () {
+                                    return "entering" === animState() ? "true" : void 0;
+                                },
+                                get ["data-exiting"] () {
+                                    return "exiting" === animState() ? "true" : void 0;
+                                },
+                                get ["data-theme"] () {
+                                    return local.dataTheme;
+                                },
+                                get style () {
+                                    return local.style;
+                                },
+                                onClick: handleBackdropClick,
+                                onTransitionEnd: handleTransitionEnd
+                            }), false, true);
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
+                            return _el$2;
+                        }
+                    });
                 }
             });
         }
     });
 };
+const PLACEMENT_CLASS_MAP = {
+    top: __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.placement.top,
+    bottom: __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.placement.bottom,
+    left: __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.placement.left,
+    right: __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.placement.right
+};
+const DrawerContent = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "placement"
+    ]);
+    const parentCtx = useDrawerContext();
+    const placement = ()=>local.placement ?? "bottom";
+    const updatedCtx = {
+        isOpen: parentCtx.isOpen,
+        setIsOpen: parentCtx.setIsOpen,
+        isDismissable: parentCtx.isDismissable,
+        animState: parentCtx.animState,
+        placement
+    };
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(DrawerContext.Provider, {
+        value: updatedCtx,
+        get children () {
+            var _el$3 = _tmpl$2();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.slot.content, PLACEMENT_CLASS_MAP[placement()], local.class, local.className)
+                }), {
+                "data-slot": "drawer-content",
+                get ["data-placement"] () {
+                    return placement();
+                },
+                get ["data-entering"] () {
+                    return "entering" === parentCtx.animState() ? "true" : void 0;
+                },
+                get ["data-exiting"] () {
+                    return "exiting" === parentCtx.animState() ? "true" : void 0;
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                }
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
+            return _el$3;
+        }
+    });
+};
 const SIDE_MAP = {
     left: "drawer__dialog--side-left",
     right: "drawer__dialog--side-right"
@@ -360,18 +245,9 @@ const DrawerDialog = (props)=>{
         "bg",
         "padding",
         "borderWidth",
-        "borderColor",
-        "ref",
-        "size",
-        "role",
-        "tabIndex",
-        "aria-labelledby",
-        "aria-describedby"
+        "borderColor"
     ]);
-    const ctx = (0, __WEBPACK_EXTERNAL_MODULE__Drawer_context_js_e84e90b3__.useDrawerContext)();
-    const placement = ()=>ctx.placement();
-    const axis = ()=>(0, __WEBPACK_EXTERNAL_MODULE__Drawer_a11y_js_eed6fb4e__.isSidePlacement)(placement()) ? "side" : "edge";
-    const size = ()=>local.size ?? ctx.size();
+    const ctx = useDrawerContext();
     const mergedStyle = ()=>{
         const s = {};
         if ("object" == typeof local.style && local.style) Object.assign(s, local.style);
@@ -387,34 +263,16 @@ const DrawerDialog = (props)=>{
     const hasCustomPadding = ()=>Boolean(local.padding);
     const hasCustomBg = ()=>Boolean(local.bg);
     return (()=>{
-        var _el$5 = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((node)=>{
-            ctx.setDialogRef(node);
-            if ("function" == typeof local.ref) local.ref(node);
-        }, _el$5);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get role () {
-                return local.role ?? "dialog";
-            },
-            "aria-modal": "true",
-            get ["aria-labelledby"] () {
-                return local["aria-labelledby"] ?? ctx.labelledBy();
-            },
-            get ["aria-describedby"] () {
-                return local["aria-describedby"] ?? ctx.describedBy();
-            },
-            get tabIndex () {
-                return local.tabIndex ?? -1;
-            },
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.Dialog.base, __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.Dialog.axis[axis()], __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.Dialog.size[axis()][size()], "entering" === ctx.animState() && __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.Dialog.state.entering, "exiting" === ctx.animState() && __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.Dialog.state.exiting, local.side ? SIDE_MAP[local.side] : void 0, hasCustomBg() ? "drawer__dialog--custom-bg" : void 0, hasCustomSize() ? "drawer__dialog--custom-size" : void 0, hasCustomPadding() ? "drawer__dialog--custom-padding" : void 0, local.class, local.className);
-            },
+        var _el$4 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            role: "dialog",
+            "aria-modal": "true"
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.slot.dialog, local.side ? SIDE_MAP[local.side] : void 0, hasCustomBg() ? "drawer__dialog--custom-bg" : void 0, hasCustomSize() ? "drawer__dialog--custom-size" : void 0, hasCustomPadding() ? "drawer__dialog--custom-padding" : void 0, local.class, local.className)
+            }), {
             "data-slot": "drawer-dialog",
             get ["data-placement"] () {
-                return placement();
-            },
-            get ["data-size"] () {
-                return size();
+                return ctx.placement();
             },
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -423,8 +281,8 @@ const DrawerDialog = (props)=>{
                 return mergedStyle();
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.children);
-        return _el$5;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.children);
+        return _el$4;
     })();
 };
 const DrawerHeader = (props)=>{
@@ -436,11 +294,10 @@ const DrawerHeader = (props)=>{
         "style"
     ]);
     return (()=>{
-        var _el$6 = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.Header.base, local.class, local.className);
-            },
+        var _el$5 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.slot.header, local.class, local.className)
+            }), {
             "data-slot": "drawer-header",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -449,8 +306,8 @@ const DrawerHeader = (props)=>{
                 return local.style;
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.children);
-        return _el$6;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.children);
+        return _el$5;
     })();
 };
 const DrawerHeading = (props)=>{
@@ -459,28 +316,13 @@ const DrawerHeading = (props)=>{
         "class",
         "className",
         "dataTheme",
-        "style",
-        "id"
+        "style"
     ]);
-    const ctx = (0, __WEBPACK_EXTERNAL_MODULE__Drawer_context_js_e84e90b3__.useDrawerContext)();
-    const uid = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
-    const headingId = ()=>local.id ?? `drawer-heading-${uid}`;
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
-        const id = headingId();
-        ctx.setLabelledBy(id);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
-            if (ctx.labelledBy() === id) ctx.setLabelledBy(void 0);
-        });
-    });
     return (()=>{
-        var _el$7 = _tmpl$3();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get id () {
-                return headingId();
-            },
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.Heading.base, local.class, local.className);
-            },
+        var _el$6 = _tmpl$3();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.slot.heading, local.class, local.className)
+            }), {
             "data-slot": "drawer-heading",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -489,8 +331,8 @@ const DrawerHeading = (props)=>{
                 return local.style;
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.children);
-        return _el$7;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.children);
+        return _el$6;
     })();
 };
 const DrawerBody = (props)=>{
@@ -499,38 +341,25 @@ const DrawerBody = (props)=>{
         "class",
         "className",
         "dataTheme",
-        "style",
-        "id"
+        "style"
     ]);
-    const ctx = (0, __WEBPACK_EXTERNAL_MODULE__Drawer_context_js_e84e90b3__.useDrawerContext)();
-    const uid = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
-    const bodyId = ()=>local.id ?? `drawer-body-${uid}`;
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
-        const id = bodyId();
-        ctx.setDescribedBy(id);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
-            if (ctx.describedBy() === id) ctx.setDescribedBy(void 0);
-        });
-    });
     return (()=>{
-        var _el$8 = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get id () {
-                return bodyId();
-            },
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.Body.base, local.class, local.className);
-            },
+        var _el$7 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.slot.body, local.class, local.className)
+            }), {
             "data-slot": "drawer-body",
             get ["data-theme"] () {
                 return local.dataTheme;
             },
             get style () {
-                return local.style;
+                return Object.assign({}, local.style, {
+                    "touch-action": "pan-y"
+                });
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, ()=>local.children);
-        return _el$8;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.children);
+        return _el$7;
     })();
 };
 const DrawerFooter = (props)=>{
@@ -542,11 +371,10 @@ const DrawerFooter = (props)=>{
         "style"
     ]);
     return (()=>{
-        var _el$9 = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.Footer.base, local.class, local.className);
-            },
+        var _el$8 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.slot.footer, local.class, local.className)
+            }), {
             "data-slot": "drawer-footer",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -555,8 +383,8 @@ const DrawerFooter = (props)=>{
                 return local.style;
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, ()=>local.children);
-        return _el$9;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, ()=>local.children);
+        return _el$8;
     })();
 };
 const DrawerHandle = (props)=>{
@@ -567,12 +395,12 @@ const DrawerHandle = (props)=>{
         "style"
     ]);
     return (()=>{
-        var _el$0 = _tmpl$4(), _el$1 = _el$0.firstChild;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            "aria-hidden": "true",
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.Handle.base, local.class, local.className);
-            },
+        var _el$9 = _tmpl$4();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            "aria-hidden": "true"
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.slot.handle, local.class, local.className)
+            }), {
             "data-slot": "drawer-handle",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -581,8 +409,7 @@ const DrawerHandle = (props)=>{
                 return local.style;
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$1, __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.Handle.bar));
-        return _el$0;
+        return _el$9;
     })();
 };
 const DrawerCloseTrigger = (props)=>{
@@ -594,24 +421,20 @@ const DrawerCloseTrigger = (props)=>{
         "style",
         "startIcon",
         "endIcon",
-        "onClick",
-        "aria-label"
+        "onClick"
     ]);
-    const ctx = (0, __WEBPACK_EXTERNAL_MODULE__Drawer_context_js_e84e90b3__.useDrawerContext)();
-    const handleClick = (event)=>{
-        ctx.requestClose("trigger");
-        if ("function" == typeof local.onClick) local.onClick(event);
+    const ctx = useDrawerContext();
+    const handleClick = (e)=>{
+        ctx.setIsOpen(false);
+        if ("function" == typeof local.onClick) local.onClick(e);
     };
     return (()=>{
-        var _el$10 = _tmpl$2();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$10, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            type: "button",
-            get ["aria-label"] () {
-                return local["aria-label"] ?? "Close";
-            },
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.CloseTrigger.base, local.class, local.className);
-            },
+        var _el$0 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            type: "button"
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.slot.closeTrigger, local.class, local.className)
+            }), {
             "data-slot": "drawer-close-trigger",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -619,40 +442,49 @@ const DrawerCloseTrigger = (props)=>{
             get style () {
                 return local.style;
             },
+            "aria-label": "Close",
             onClick: handleClick
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$10, (()=>{
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$0, (()=>{
             var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.startIcon);
             return ()=>_c$() ? (()=>{
-                    var _el$11 = _tmpl$5();
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$11, ()=>local.startIcon);
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$11, (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.CloseTrigger.icon, __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.CloseTrigger.iconStart)));
-                    return _el$11;
+                    var _el$1 = _tmpl$5();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$1, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.slot.closeIcon, __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.closeIconStart)
+                        }), {
+                        "data-slot": "drawer-close-trigger-start-icon"
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$1, ()=>local.startIcon);
+                    return _el$1;
                 })() : null;
         })(), null);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$10, ()=>local.children, null);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$10, (()=>{
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$0, ()=>local.children, null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$0, (()=>{
             var _c$2 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.endIcon);
             return ()=>_c$2() ? (()=>{
-                    var _el$12 = _tmpl$5();
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$12, ()=>local.endIcon);
-                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$12, (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.CloseTrigger.icon, __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.CloseTrigger.iconEnd)));
-                    return _el$12;
+                    var _el$10 = _tmpl$5();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$10, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.slot.closeIcon, __WEBPACK_EXTERNAL_MODULE__Drawer_classes_js_756bbd15__.CLASSES.closeIconEnd)
+                        }), {
+                        "data-slot": "drawer-close-trigger-end-icon"
+                    }), false, true);
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$10, ()=>local.endIcon);
+                    return _el$10;
                 })() : null;
         })(), null);
-        return _el$10;
+        return _el$0;
     })();
 };
 const DrawerClose = (props)=>{
-    const ctx = (0, __WEBPACK_EXTERNAL_MODULE__Drawer_context_js_e84e90b3__.useDrawerContext)();
+    const ctx = useDrawerContext();
     const handleClick = ()=>{
-        ctx.requestClose("trigger");
+        ctx.setIsOpen(false);
     };
     return (()=>{
-        var _el$13 = _tmpl$6();
-        _el$13.$$click = handleClick;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$13, ()=>props.children);
-        return _el$13;
+        var _el$11 = _tmpl$6();
+        _el$11.$$click = handleClick;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$11, ()=>props.children);
+        return _el$11;
     })();
 };
 const Drawer = Object.assign(DrawerRoot, {