@pathscale/ui 1.3.0 → 1.4.0

package/dist/components/drawer/Drawer.generated.js

@@ -0,0 +1,738 @@
+import { Portal, className, createComponent, delegateEvents, effect, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./Drawer.css";
+import { Show, createEffect, createSignal, createUniqueId, onCleanup, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { focusFirst, isSidePlacement, isVisibleState, trapFocus } from "./Drawer.a11y.js";
+import { CLASSES, componentRecipe } from "./Drawer.recipe.js";
+import { DrawerContext, useDrawerContext } from "./Drawer.context.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<button>"), _tmpl$3 = /*#__PURE__*/ template("<h2>"), _tmpl$4 = /*#__PURE__*/ template("<div><div data-slot=drawer-handle-bar>"), _tmpl$5 = /*#__PURE__*/ template("<span>"), _tmpl$6 = /*#__PURE__*/ 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 __solidLayoutDrawerRoot = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "isOpen",
+        "defaultOpen",
+        "onOpenChange",
+        "placement",
+        "size",
+        "backdrop",
+        "scrollBehavior",
+        "isDismissable",
+        "shouldCloseOnEsc",
+        "shouldCloseOnBackdropClick",
+        "trapFocus",
+        "restoreFocus"
+    ]);
+    const [internalOpen, setInternalOpen] = createSignal(Boolean(local.defaultOpen));
+    const [animState, setAnimState] = createSignal(Boolean(local.isOpen ?? local.defaultOpen) ? "open" : "closed");
+    const [dialogRef, setDialogRef] = createSignal();
+    const [labelledBy, setLabelledBy] = createSignal();
+    const [describedBy, setDescribedBy] = createSignal();
+    const [placementOverride, setPlacementOverride] = createSignal(void 0);
+    const [backdropDismissableOverride, setBackdropDismissableOverride] = createSignal(void 0);
+    const [backdropCloseOnClickOverride, setBackdropCloseOnClickOverride] = 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);
+    };
+    let exitTimer;
+    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);
+        }
+    });
+    onCleanup(()=>{
+        if (exitTimer) clearTimeout(exitTimer);
+    });
+    let hasScrollLock = false;
+    createEffect(()=>{
+        const visible = isVisibleState(animState());
+        if (visible && !hasScrollLock) {
+            lockBodyScroll();
+            hasScrollLock = true;
+        } else if (!visible && hasScrollLock) {
+            unlockBodyScroll();
+            hasScrollLock = false;
+        }
+    });
+    onCleanup(()=>{
+        if (hasScrollLock) unlockBodyScroll();
+    });
+    let restoreFocusTarget = null;
+    createEffect(()=>{
+        const state = animState();
+        const dialog = dialogRef();
+        if (!isVisibleState(state) || !dialog) return;
+        if (!restoreFocusTarget) {
+            const active = document.activeElement;
+            if (active instanceof HTMLElement) restoreFocusTarget = active;
+        }
+        queueMicrotask(()=>{
+            if (trapFocusEnabled() && !dialog.contains(document.activeElement)) focusFirst(dialog);
+        });
+        const onKeyDown = (event)=>{
+            if (!isVisibleState(animState())) return;
+            if ("Escape" === event.key) {
+                event.preventDefault();
+                requestClose("escape");
+                return;
+            }
+            if ("Tab" === event.key && trapFocusEnabled()) trapFocus(event, dialog);
+        };
+        document.addEventListener("keydown", onKeyDown);
+        onCleanup(()=>document.removeEventListener("keydown", onKeyDown));
+    });
+    createEffect(()=>{
+        if ("closed" !== animState() || !restoreFocusEnabled()) return;
+        if (!restoreFocusTarget) return;
+        queueMicrotask(()=>{
+            restoreFocusTarget?.focus?.();
+            restoreFocusTarget = null;
+        });
+    });
+    const contextValue = {
+        isOpen,
+        setIsOpen,
+        requestClose,
+        animState,
+        placement,
+        size,
+        backdrop,
+        scrollBehavior,
+        isDismissable,
+        shouldCloseOnEsc,
+        shouldCloseOnBackdropClick,
+        trapFocus: trapFocusEnabled,
+        restoreFocus: restoreFocusEnabled,
+        dialogRef,
+        setDialogRef,
+        labelledBy,
+        setLabelledBy,
+        describedBy,
+        setDescribedBy,
+        setPlacementOverride,
+        setBackdropDismissableOverride,
+        setBackdropCloseOnClickOverride
+    };
+    return createComponent(DrawerContext.Provider, {
+        value: contextValue,
+        get children () {
+            var _el$ = _tmpl$();
+            spread(_el$, mergeProps(others, {
+                get ["class"] () {
+                    return twMerge(CLASSES.Root.base, isOpen() && CLASSES.Root.state.open, "entering" === animState() && CLASSES.Root.state.entering, "exiting" === animState() && CLASSES.Root.state.exiting, "closed" === animState() && CLASSES.Root.state.closed, local.class, local.className);
+                },
+                "data-slot": "drawer-root",
+                get ["data-open"] () {
+                    return isVisibleState(animState()) ? "true" : "false";
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                }
+            }), false, true);
+            insert(_el$, ()=>local.children);
+            return _el$;
+        }
+    });
+};
+const DrawerRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDrawerRoot,
+    embedded: true
+});
+const __solidLayoutDrawerTrigger = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "onClick"
+    ]);
+    const ctx = useDrawerContext();
+    const handleClick = (event)=>{
+        ctx.setIsOpen(true);
+        if ("function" == typeof local.onClick) local.onClick(event);
+    };
+    return (()=>{
+        var _el$2 = _tmpl$2();
+        spread(_el$2, mergeProps(others, {
+            type: "button",
+            get ["class"] () {
+                return twMerge(CLASSES.Trigger.base, local.class, local.className);
+            },
+            "data-slot": "drawer-trigger",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            onClick: handleClick
+        }), false, true);
+        insert(_el$2, ()=>local.children);
+        return _el$2;
+    })();
+};
+const DrawerTrigger = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDrawerTrigger,
+    embedded: true
+});
+const __solidLayoutDrawerContent = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "placement",
+        "scrollBehavior"
+    ]);
+    const ctx = useDrawerContext();
+    const placement = ()=>local.placement ?? ctx.placement();
+    const scrollBehavior = ()=>local.scrollBehavior ?? ctx.scrollBehavior();
+    createEffect(()=>{
+        if (void 0 === local.placement) return;
+        ctx.setPlacementOverride(local.placement);
+        onCleanup(()=>ctx.setPlacementOverride(void 0));
+    });
+    return (()=>{
+        var _el$3 = _tmpl$();
+        spread(_el$3, mergeProps(others, {
+            get ["class"] () {
+                return twMerge(CLASSES.Content.base, CLASSES.Content.placement[placement()], CLASSES.Content.scroll[scrollBehavior()], "entering" === ctx.animState() && CLASSES.Content.state.entering, "exiting" === ctx.animState() && 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);
+        insert(_el$3, ()=>local.children);
+        return _el$3;
+    })();
+};
+const DrawerContent = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDrawerContent,
+    embedded: true
+});
+const __solidLayoutDrawerBackdrop = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "variant",
+        "isDismissable",
+        "shouldCloseOnBackdropClick",
+        "onClick"
+    ]);
+    const ctx = useDrawerContext();
+    const variant = ()=>local.variant ?? ctx.backdrop();
+    createEffect(()=>{
+        if (void 0 !== local.isDismissable) {
+            ctx.setBackdropDismissableOverride(local.isDismissable);
+            onCleanup(()=>ctx.setBackdropDismissableOverride(void 0));
+        }
+    });
+    createEffect(()=>{
+        if (void 0 !== local.shouldCloseOnBackdropClick) {
+            ctx.setBackdropCloseOnClickOverride(local.shouldCloseOnBackdropClick);
+            onCleanup(()=>ctx.setBackdropCloseOnClickOverride(void 0));
+        }
+    });
+    const handleClick = (event)=>{
+        if (event.target === event.currentTarget) ctx.requestClose("backdrop");
+        if ("function" == typeof local.onClick) local.onClick(event);
+    };
+    return createComponent(Show, {
+        get when () {
+            return "closed" !== ctx.animState();
+        },
+        get children () {
+            return createComponent(Portal, {
+                get children () {
+                    var _el$4 = _tmpl$();
+                    spread(_el$4, mergeProps(others, {
+                        get ["class"] () {
+                            return twMerge(CLASSES.Backdrop.base, CLASSES.Backdrop.variant[variant()], "entering" === ctx.animState() && CLASSES.Backdrop.state.entering, "exiting" === ctx.animState() && 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);
+                    insert(_el$4, ()=>local.children);
+                    return _el$4;
+                }
+            });
+        }
+    });
+};
+const DrawerBackdrop = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDrawerBackdrop,
+    embedded: true
+});
+const SIDE_MAP = {
+    left: "drawer__dialog--side-left",
+    right: "drawer__dialog--side-right"
+};
+const __solidLayoutDrawerDialog = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "side",
+        "width",
+        "maxWidth",
+        "bg",
+        "padding",
+        "borderWidth",
+        "borderColor",
+        "ref",
+        "size",
+        "role",
+        "tabIndex",
+        "aria-labelledby",
+        "aria-describedby"
+    ]);
+    const ctx = useDrawerContext();
+    const placement = ()=>ctx.placement();
+    const axis = ()=>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);
+        if (local.width) s["--drawer-dialog-width"] = local.width;
+        if (local.maxWidth) s["--drawer-dialog-max-width"] = local.maxWidth;
+        if (local.bg) s["--drawer-dialog-bg"] = local.bg;
+        if (local.padding) s["--drawer-dialog-padding"] = local.padding;
+        if (local.borderWidth) s["--drawer-dialog-border-width"] = local.borderWidth;
+        if (local.borderColor) s["--drawer-dialog-border-color"] = local.borderColor;
+        return s;
+    };
+    const hasCustomSize = ()=>Boolean(local.width || local.maxWidth);
+    const hasCustomPadding = ()=>Boolean(local.padding);
+    const hasCustomBg = ()=>Boolean(local.bg);
+    return (()=>{
+        var _el$5 = _tmpl$();
+        use((node)=>{
+            ctx.setDialogRef(node);
+            if ("function" == typeof local.ref) local.ref(node);
+        }, _el$5);
+        spread(_el$5, 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 twMerge(CLASSES.Dialog.base, CLASSES.Dialog.axis[axis()], CLASSES.Dialog.size[axis()][size()], "entering" === ctx.animState() && CLASSES.Dialog.state.entering, "exiting" === ctx.animState() && 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 placement();
+            },
+            get ["data-size"] () {
+                return size();
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return mergedStyle();
+            }
+        }), false, true);
+        insert(_el$5, ()=>local.children);
+        return _el$5;
+    })();
+};
+const DrawerDialog = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDrawerDialog,
+    embedded: true
+});
+const __solidLayoutDrawerHeader = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$6 = _tmpl$();
+        spread(_el$6, mergeProps(others, {
+            get ["class"] () {
+                return twMerge(CLASSES.Header.base, local.class, local.className);
+            },
+            "data-slot": "drawer-header",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$6, ()=>local.children);
+        return _el$6;
+    })();
+};
+const DrawerHeader = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDrawerHeader,
+    embedded: true
+});
+const __solidLayoutDrawerHeading = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "id"
+    ]);
+    const ctx = useDrawerContext();
+    const uid = createUniqueId();
+    const headingId = ()=>local.id ?? `drawer-heading-${uid}`;
+    createEffect(()=>{
+        const id = headingId();
+        ctx.setLabelledBy(id);
+        onCleanup(()=>{
+            if (ctx.labelledBy() === id) ctx.setLabelledBy(void 0);
+        });
+    });
+    return (()=>{
+        var _el$7 = _tmpl$3();
+        spread(_el$7, mergeProps(others, {
+            get id () {
+                return headingId();
+            },
+            get ["class"] () {
+                return twMerge(CLASSES.Heading.base, local.class, local.className);
+            },
+            "data-slot": "drawer-heading",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$7, ()=>local.children);
+        return _el$7;
+    })();
+};
+const DrawerHeading = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDrawerHeading,
+    embedded: true
+});
+const __solidLayoutDrawerBody = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "id"
+    ]);
+    const ctx = useDrawerContext();
+    const uid = createUniqueId();
+    const bodyId = ()=>local.id ?? `drawer-body-${uid}`;
+    createEffect(()=>{
+        const id = bodyId();
+        ctx.setDescribedBy(id);
+        onCleanup(()=>{
+            if (ctx.describedBy() === id) ctx.setDescribedBy(void 0);
+        });
+    });
+    return (()=>{
+        var _el$8 = _tmpl$();
+        spread(_el$8, mergeProps(others, {
+            get id () {
+                return bodyId();
+            },
+            get ["class"] () {
+                return twMerge(CLASSES.Body.base, local.class, local.className);
+            },
+            "data-slot": "drawer-body",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$8, ()=>local.children);
+        return _el$8;
+    })();
+};
+const DrawerBody = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDrawerBody,
+    embedded: true
+});
+const __solidLayoutDrawerFooter = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$9 = _tmpl$();
+        spread(_el$9, mergeProps(others, {
+            get ["class"] () {
+                return twMerge(CLASSES.Footer.base, local.class, local.className);
+            },
+            "data-slot": "drawer-footer",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$9, ()=>local.children);
+        return _el$9;
+    })();
+};
+const DrawerFooter = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDrawerFooter,
+    embedded: true
+});
+const __solidLayoutDrawerHandle = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$0 = _tmpl$4(), _el$1 = _el$0.firstChild;
+        spread(_el$0, mergeProps(others, {
+            "aria-hidden": "true",
+            get ["class"] () {
+                return twMerge(CLASSES.Handle.base, local.class, local.className);
+            },
+            "data-slot": "drawer-handle",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        effect(()=>className(_el$1, CLASSES.Handle.bar));
+        return _el$0;
+    })();
+};
+const DrawerHandle = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDrawerHandle,
+    embedded: true
+});
+const __solidLayoutDrawerCloseTrigger = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "startIcon",
+        "endIcon",
+        "onClick",
+        "aria-label"
+    ]);
+    const ctx = useDrawerContext();
+    const handleClick = (event)=>{
+        ctx.requestClose("trigger");
+        if ("function" == typeof local.onClick) local.onClick(event);
+    };
+    return (()=>{
+        var _el$10 = _tmpl$2();
+        spread(_el$10, mergeProps(others, {
+            type: "button",
+            get ["aria-label"] () {
+                return local["aria-label"] ?? "Close";
+            },
+            get ["class"] () {
+                return twMerge(CLASSES.CloseTrigger.base, local.class, local.className);
+            },
+            "data-slot": "drawer-close-trigger",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            onClick: handleClick
+        }), false, true);
+        insert(_el$10, (()=>{
+            var _c$ = memo(()=>!!local.startIcon);
+            return ()=>_c$() ? (()=>{
+                    var _el$11 = _tmpl$5();
+                    insert(_el$11, ()=>local.startIcon);
+                    effect(()=>className(_el$11, twMerge(CLASSES.CloseTrigger.icon, CLASSES.CloseTrigger.iconStart)));
+                    return _el$11;
+                })() : null;
+        })(), null);
+        insert(_el$10, ()=>local.children, null);
+        insert(_el$10, (()=>{
+            var _c$2 = memo(()=>!!local.endIcon);
+            return ()=>_c$2() ? (()=>{
+                    var _el$12 = _tmpl$5();
+                    insert(_el$12, ()=>local.endIcon);
+                    effect(()=>className(_el$12, twMerge(CLASSES.CloseTrigger.icon, CLASSES.CloseTrigger.iconEnd)));
+                    return _el$12;
+                })() : null;
+        })(), null);
+        return _el$10;
+    })();
+};
+const DrawerCloseTrigger = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDrawerCloseTrigger,
+    embedded: true
+});
+const __solidLayoutDrawerClose = (_stable, p)=>{
+    const ctx = useDrawerContext();
+    const handleClick = ()=>{
+        ctx.requestClose("trigger");
+    };
+    return (()=>{
+        var _el$13 = _tmpl$6();
+        _el$13.$$click = handleClick;
+        insert(_el$13, ()=>p.children);
+        return _el$13;
+    })();
+};
+const DrawerClose = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDrawerClose,
+    embedded: true
+});
+const Drawer = Object.assign(DrawerRoot, {
+    Root: DrawerRoot,
+    Trigger: DrawerTrigger,
+    Backdrop: DrawerBackdrop,
+    Content: DrawerContent,
+    Dialog: DrawerDialog,
+    Header: DrawerHeader,
+    Heading: DrawerHeading,
+    Body: DrawerBody,
+    Footer: DrawerFooter,
+    Handle: DrawerHandle,
+    CloseTrigger: DrawerCloseTrigger,
+    Close: DrawerClose
+});
+const Drawer_generated = Drawer;
+delegateEvents([
+    "click"
+]);
+export default Drawer_generated;
+export { DrawerBackdrop, DrawerBody, DrawerClose, DrawerCloseTrigger, DrawerContent, DrawerDialog, DrawerFooter, DrawerHandle, DrawerHeader, DrawerHeading, DrawerRoot, DrawerTrigger };