@pathscale/ui 1.1.54 → 1.1.55

package/dist/components/drawer/Drawer.js

@@ -2,43 +2,198 @@ 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";
-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;
+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;
 };
+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",
-        "dataTheme",
-        "class",
-        "className",
-        "style"
+        "placement",
+        "size",
+        "backdrop",
+        "scrollBehavior",
+        "isDismissable",
+        "shouldCloseOnEsc",
+        "shouldCloseOnBackdropClick",
+        "trapFocus",
+        "restoreFocus"
     ]);
     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 setIsOpen = (v)=>{
-        if (!isControlled()) setInternalOpen(v);
-        local.onOpenChange?.(v);
+    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 ctx = {
+    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 = {
         isOpen,
         setIsOpen,
-        placement: ()=>"bottom",
-        isDismissable: ()=>true,
-        animState: ()=>"closed"
+        requestClose,
+        animState,
+        placement,
+        size,
+        backdrop,
+        scrollBehavior,
+        isDismissable,
+        shouldCloseOnEsc,
+        shouldCloseOnBackdropClick,
+        trapFocus: trapFocusEnabled,
+        restoreFocus: restoreFocusEnabled,
+        dialogRef,
+        setDialogRef,
+        labelledBy,
+        setLabelledBy,
+        describedBy,
+        setDescribedBy,
+        setPlacementOverride,
+        setBackdropDismissableOverride,
+        setBackdropCloseOnClickOverride
     };
-    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(DrawerContext.Provider, {
-        value: ctx,
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__Drawer_context_js_e84e90b3__.DrawerContext.Provider, {
+        value: contextValue,
         get children () {
-            return local.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$;
         }
     });
 };
@@ -51,18 +206,18 @@ const DrawerTrigger = (props)=>{
         "style",
         "onClick"
     ]);
-    const ctx = useDrawerContext();
-    const handleClick = (e)=>{
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE__Drawer_context_js_e84e90b3__.useDrawerContext)();
+    const handleClick = (event)=>{
         ctx.setIsOpen(true);
-        if ("function" == typeof local.onClick) local.onClick(e);
+        if ("function" == typeof local.onClick) local.onClick(event);
     };
     return (()=>{
-        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)
-            }), {
+        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);
+            },
             "data-slot": "drawer-trigger",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -72,14 +227,57 @@ const DrawerTrigger = (props)=>{
             },
             onClick: handleClick
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
-        return _el$;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
+        return _el$2;
     })();
 };
-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 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 DrawerBackdrop = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -90,144 +288,61 @@ const DrawerBackdrop = (props)=>{
         "style",
         "variant",
         "isDismissable",
+        "shouldCloseOnBackdropClick",
         "onClick"
     ]);
-    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");
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE__Drawer_context_js_e84e90b3__.useDrawerContext)();
+    const variant = ()=>local.variant ?? ctx.backdrop();
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
-        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)(()=>{
-        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;
-            });
+        if (void 0 !== local.isDismissable) {
+            ctx.setBackdropDismissableOverride(local.isDismissable);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>ctx.setBackdropDismissableOverride(void 0));
         }
     });
     (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));
+        if (void 0 !== local.shouldCloseOnBackdropClick) {
+            ctx.setBackdropCloseOnClickOverride(local.shouldCloseOnBackdropClick);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>ctx.setBackdropCloseOnClickOverride(void 0));
+        }
     });
-    const updatedCtx = {
-        isOpen: ctx.isOpen,
-        setIsOpen: ctx.setIsOpen,
-        placement: ctx.placement,
-        isDismissable,
-        animState
+    const handleClick = (event)=>{
+        if (event.target === event.currentTarget) ctx.requestClose("backdrop");
+        if ("function" == typeof local.onClick) local.onClick(event);
     };
     return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
         get when () {
-            return "closed" !== animState();
+            return "closed" !== ctx.animState();
         },
         get children () {
             return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Portal, {
                 get children () {
-                    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;
-                        }
-                    });
+                    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;
                 }
             });
         }
     });
 };
-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"
@@ -245,9 +360,18 @@ const DrawerDialog = (props)=>{
         "bg",
         "padding",
         "borderWidth",
-        "borderColor"
+        "borderColor",
+        "ref",
+        "size",
+        "role",
+        "tabIndex",
+        "aria-labelledby",
+        "aria-describedby"
     ]);
-    const ctx = useDrawerContext();
+    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 mergedStyle = ()=>{
         const s = {};
         if ("object" == typeof local.style && local.style) Object.assign(s, local.style);
@@ -263,16 +387,34 @@ const DrawerDialog = (props)=>{
     const hasCustomPadding = ()=>Boolean(local.padding);
     const hasCustomBg = ()=>Boolean(local.bg);
     return (()=>{
-        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)
-            }), {
+        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);
+            },
             "data-slot": "drawer-dialog",
             get ["data-placement"] () {
-                return ctx.placement();
+                return placement();
+            },
+            get ["data-size"] () {
+                return size();
             },
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -281,8 +423,8 @@ const DrawerDialog = (props)=>{
                 return mergedStyle();
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.children);
-        return _el$4;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.children);
+        return _el$5;
     })();
 };
 const DrawerHeader = (props)=>{
@@ -294,10 +436,11 @@ const DrawerHeader = (props)=>{
         "style"
     ]);
     return (()=>{
-        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)
-            }), {
+        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);
+            },
             "data-slot": "drawer-header",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -306,8 +449,8 @@ const DrawerHeader = (props)=>{
                 return local.style;
             }
         }), 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$6, ()=>local.children);
+        return _el$6;
     })();
 };
 const DrawerHeading = (props)=>{
@@ -316,13 +459,28 @@ const DrawerHeading = (props)=>{
         "class",
         "className",
         "dataTheme",
-        "style"
+        "style",
+        "id"
     ]);
+    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$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)
-            }), {
+        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);
+            },
             "data-slot": "drawer-heading",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -331,8 +489,8 @@ const DrawerHeading = (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$7, ()=>local.children);
+        return _el$7;
     })();
 };
 const DrawerBody = (props)=>{
@@ -341,25 +499,38 @@ const DrawerBody = (props)=>{
         "class",
         "className",
         "dataTheme",
-        "style"
+        "style",
+        "id"
     ]);
+    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$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)
-            }), {
+        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);
+            },
             "data-slot": "drawer-body",
             get ["data-theme"] () {
                 return local.dataTheme;
             },
             get style () {
-                return Object.assign({}, local.style, {
-                    "touch-action": "pan-y"
-                });
+                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$8, ()=>local.children);
+        return _el$8;
     })();
 };
 const DrawerFooter = (props)=>{
@@ -371,10 +542,11 @@ const DrawerFooter = (props)=>{
         "style"
     ]);
     return (()=>{
-        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)
-            }), {
+        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);
+            },
             "data-slot": "drawer-footer",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -383,8 +555,8 @@ const DrawerFooter = (props)=>{
                 return local.style;
             }
         }), 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$9, ()=>local.children);
+        return _el$9;
     })();
 };
 const DrawerHandle = (props)=>{
@@ -395,12 +567,12 @@ const DrawerHandle = (props)=>{
         "style"
     ]);
     return (()=>{
-        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)
-            }), {
+        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);
+            },
             "data-slot": "drawer-handle",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -409,7 +581,8 @@ const DrawerHandle = (props)=>{
                 return local.style;
             }
         }), false, true);
-        return _el$9;
+        (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;
     })();
 };
 const DrawerCloseTrigger = (props)=>{
@@ -421,20 +594,24 @@ const DrawerCloseTrigger = (props)=>{
         "style",
         "startIcon",
         "endIcon",
-        "onClick"
+        "onClick",
+        "aria-label"
     ]);
-    const ctx = useDrawerContext();
-    const handleClick = (e)=>{
-        ctx.setIsOpen(false);
-        if ("function" == typeof local.onClick) local.onClick(e);
+    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);
     };
     return (()=>{
-        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)
-            }), {
+        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);
+            },
             "data-slot": "drawer-close-trigger",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -442,49 +619,40 @@ 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$0, (()=>{
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$10, (()=>{
             var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.startIcon);
             return ()=>_c$() ? (()=>{
-                    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;
+                    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;
                 })() : null;
         })(), null);
-        (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, (()=>{
+        (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, (()=>{
             var _c$2 = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.endIcon);
             return ()=>_c$2() ? (()=>{
-                    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;
+                    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;
                 })() : null;
         })(), null);
-        return _el$0;
+        return _el$10;
     })();
 };
 const DrawerClose = (props)=>{
-    const ctx = useDrawerContext();
+    const ctx = (0, __WEBPACK_EXTERNAL_MODULE__Drawer_context_js_e84e90b3__.useDrawerContext)();
     const handleClick = ()=>{
-        ctx.setIsOpen(false);
+        ctx.requestClose("trigger");
     };
     return (()=>{
-        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;
+        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;
     })();
 };
 const Drawer = Object.assign(DrawerRoot, {