@pathscale/ui 2.5.0 → 2.6.0

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

@@ -1,12 +1,13 @@
-import { Portal, className, createComponent, delegateEvents, effect, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { Portal, className, createComponent, delegateEvents, effect, insert, memo, mergeProps, ref, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Drawer.css";
-import { Show, createEffect, createSignal, createUniqueId, onCleanup, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { Show, createEffect, createSignal, createUniqueId, omit, onCleanup } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
+import "../_shared/material.css";
 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>");
+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("<button><!><!><!>"), _tmpl$6 = /*#__PURE__*/ template("<span>"), _tmpl$7 = /*#__PURE__*/ template("<span data-slot=drawer-close>");
 let bodyLockCount = 0;
 let prevBodyOverflow = "";
 let prevBodyPaddingRight = "";
@@ -30,47 +31,30 @@ const unlockBodyScroll = ()=>{
 };
 const EXIT_MS = 200;
 const __solidLayoutDrawerRoot = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "open",
-        "defaultOpen",
-        "onOpenChange",
-        "placement",
-        "size",
-        "backdrop",
-        "scrollBehavior",
-        "isDismissable",
-        "shouldCloseOnEsc",
-        "shouldCloseOnBackdropClick",
-        "trapFocus",
-        "restoreFocus"
-    ]);
-    const [internalOpen, setInternalOpen] = createSignal(Boolean(local.defaultOpen));
-    const [animState, setAnimState] = createSignal(Boolean(local.open ?? local.defaultOpen) ? "open" : "closed");
+    const others = omit(p, "children", "class", "dataTheme", "style", "open", "defaultOpen", "onOpenChange", "placement", "size", "backdrop", "scrollBehavior", "isDismissable", "shouldCloseOnEsc", "shouldCloseOnBackdropClick", "trapFocus", "restoreFocus");
+    const [internalOpen, setInternalOpen] = createSignal(Boolean(p.defaultOpen));
+    const [animState, setAnimState] = createSignal(p.open ?? p.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.open;
-    const isOpen = ()=>isControlled() ? Boolean(local.open) : 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 isControlled = ()=>void 0 !== p.open;
+    const isOpen = ()=>isControlled() ? Boolean(p.open) : internalOpen();
+    const placement = ()=>placementOverride() ?? p.placement ?? "bottom";
+    const size = ()=>p.size ?? "md";
+    const backdrop = ()=>p.backdrop ?? "opaque";
+    const scrollBehavior = ()=>p.scrollBehavior ?? "inside";
+    const isDismissable = ()=>backdropDismissableOverride() ?? p.isDismissable ?? true;
+    const shouldCloseOnEsc = ()=>p.shouldCloseOnEsc ?? true;
+    const shouldCloseOnBackdropClick = ()=>backdropCloseOnClickOverride() ?? p.shouldCloseOnBackdropClick ?? true;
+    const trapFocusEnabled = ()=>p.trapFocus ?? true;
+    const restoreFocusEnabled = ()=>p.restoreFocus ?? true;
     const setIsOpen = (next)=>{
         if (next === isOpen()) return;
         if (!isControlled()) setInternalOpen(next);
-        local.onOpenChange?.(next);
+        p.onOpenChange?.(next);
     };
     const requestClose = (reason)=>{
         if (!isDismissable()) return;
@@ -173,26 +157,26 @@ const __solidLayoutDrawerRoot = (_stable, p)=>{
         setBackdropDismissableOverride,
         setBackdropCloseOnClickOverride
     };
-    return createComponent(DrawerContext.Provider, {
+    return createComponent(DrawerContext, {
         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);
+                    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, p.class);
                 },
                 "data-slot": "drawer-root",
                 get ["data-open"] () {
                     return isVisibleState(animState()) ? "true" : "false";
                 },
                 get ["data-theme"] () {
-                    return local.dataTheme;
+                    return p.dataTheme;
                 },
                 get style () {
-                    return local.style;
+                    return p.style;
                 }
-            }), false, true);
-            insert(_el$, ()=>local.children);
+            }), true);
+            insert(_el$, ()=>p.children);
             return _el$;
         }
     });
@@ -203,37 +187,29 @@ const DrawerRoot = defineComponent({
     embedded: true
 });
 const __solidLayoutDrawerTrigger = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "onClick"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style", "onClick");
     const ctx = useDrawerContext();
     const handleClick = (event)=>{
         ctx.setIsOpen(true);
-        if ("function" == typeof local.onClick) local.onClick(event);
+        if ("function" == typeof p.onClick) p.onClick(event);
     };
-    return (()=>{
-        var _el$2 = _tmpl$2();
-        spread(_el$2, mergeProps(others, {
-            type: "button",
-            get ["class"] () {
-                return twMerge(CLASSES.Trigger.base, local.class);
-            },
-            "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;
-    })();
+    var _el$2 = _tmpl$2();
+    spread(_el$2, mergeProps(others, {
+        type: "button",
+        get ["class"] () {
+            return twMerge(CLASSES.Trigger.base, p.class);
+        },
+        "data-slot": "drawer-trigger",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        },
+        onClick: handleClick
+    }), true);
+    insert(_el$2, ()=>p.children);
+    return _el$2;
 };
 const DrawerTrigger = defineComponent({
     recipe: componentRecipe,
@@ -241,51 +217,45 @@ const DrawerTrigger = defineComponent({
     embedded: true
 });
 const __solidLayoutDrawerContent = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "placement",
-        "scrollBehavior"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style", "placement", "scrollBehavior", "material");
     const ctx = useDrawerContext();
-    const placement = ()=>local.placement ?? ctx.placement();
-    const scrollBehavior = ()=>local.scrollBehavior ?? ctx.scrollBehavior();
+    const placement = ()=>p.placement ?? ctx.placement();
+    const scrollBehavior = ()=>p.scrollBehavior ?? ctx.scrollBehavior();
     createEffect(()=>{
-        if (void 0 === local.placement) return;
-        ctx.setPlacementOverride(local.placement);
+        if (void 0 === p.placement) return;
+        ctx.setPlacementOverride(p.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);
-            },
-            "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;
-    })();
+    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, p.class);
+        },
+        "data-slot": "drawer-content",
+        get ["data-material"] () {
+            return p.material ?? "solid";
+        },
+        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 p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$3, ()=>p.children);
+    return _el$3;
 };
 const DrawerContent = defineComponent({
     recipe: componentRecipe,
@@ -293,33 +263,24 @@ const DrawerContent = defineComponent({
     embedded: true
 });
 const __solidLayoutDrawerBackdrop = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "variant",
-        "isDismissable",
-        "shouldCloseOnBackdropClick",
-        "onClick"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style", "variant", "isDismissable", "shouldCloseOnBackdropClick", "onClick");
     const ctx = useDrawerContext();
-    const variant = ()=>local.variant ?? ctx.backdrop();
+    const variant = ()=>p.variant ?? ctx.backdrop();
     createEffect(()=>{
-        if (void 0 !== local.isDismissable) {
-            ctx.setBackdropDismissableOverride(local.isDismissable);
+        if (void 0 !== p.isDismissable) {
+            ctx.setBackdropDismissableOverride(p.isDismissable);
             onCleanup(()=>ctx.setBackdropDismissableOverride(void 0));
         }
     });
     createEffect(()=>{
-        if (void 0 !== local.shouldCloseOnBackdropClick) {
-            ctx.setBackdropCloseOnClickOverride(local.shouldCloseOnBackdropClick);
+        if (void 0 !== p.shouldCloseOnBackdropClick) {
+            ctx.setBackdropCloseOnClickOverride(p.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);
+        if ("function" == typeof p.onClick) p.onClick(event);
     };
     return createComponent(Show, {
         get when () {
@@ -331,7 +292,7 @@ const __solidLayoutDrawerBackdrop = (_stable, p)=>{
                     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);
+                            return twMerge(CLASSES.Backdrop.base, CLASSES.Backdrop.variant[variant()], "entering" === ctx.animState() && CLASSES.Backdrop.state.entering, "exiting" === ctx.animState() && CLASSES.Backdrop.state.exiting, p.class);
                         },
                         "data-slot": "drawer-backdrop",
                         get ["data-entering"] () {
@@ -341,14 +302,14 @@ const __solidLayoutDrawerBackdrop = (_stable, p)=>{
                             return "exiting" === ctx.animState() ? "true" : void 0;
                         },
                         get ["data-theme"] () {
-                            return local.dataTheme;
+                            return p.dataTheme;
                         },
                         get style () {
-                            return local.style;
+                            return p.style;
                         },
                         onClick: handleClick
-                    }), false, true);
-                    insert(_el$4, ()=>local.children);
+                    }), true);
+                    insert(_el$4, ()=>p.children);
                     return _el$4;
                 }
             });
@@ -365,83 +326,63 @@ const SIDE_MAP = {
     right: "drawer__dialog--side-right"
 };
 const __solidLayoutDrawerDialog = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "side",
-        "width",
-        "maxWidth",
-        "bg",
-        "padding",
-        "borderWidth",
-        "borderColor",
-        "ref",
-        "size",
-        "role",
-        "tabIndex",
-        "aria-labelledby",
-        "aria-describedby"
-    ]);
+    const others = omit(p, "children", "class", "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 size = ()=>p.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;
+        if ("object" == typeof p.style && p.style) Object.assign(s, p.style);
+        if (p.width) s["--drawer-dialog-width"] = p.width;
+        if (p.maxWidth) s["--drawer-dialog-max-width"] = p.maxWidth;
+        if (p.bg) s["--drawer-dialog-bg"] = p.bg;
+        if (p.padding) s["--drawer-dialog-padding"] = p.padding;
+        if (p.borderWidth) s["--drawer-dialog-border-width"] = p.borderWidth;
+        if (p.borderColor) s["--drawer-dialog-border-color"] = p.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)=>{
+    const hasCustomSize = ()=>Boolean(p.width || p.maxWidth);
+    const hasCustomPadding = ()=>Boolean(p.padding);
+    const hasCustomBg = ()=>Boolean(p.bg);
+    var _el$5 = _tmpl$();
+    ref(()=>(node)=>{
             ctx.setDialogRef(node);
-            if ("function" == typeof local.ref) local.ref(node);
+            if ("function" == typeof p.ref) p.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);
-            },
-            "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;
-    })();
+    spread(_el$5, mergeProps(others, {
+        get role () {
+            return p.role ?? "dialog";
+        },
+        "aria-modal": "true",
+        get ["aria-labelledby"] () {
+            return p["aria-labelledby"] ?? ctx.labelledBy();
+        },
+        get ["aria-describedby"] () {
+            return p["aria-describedby"] ?? ctx.describedBy();
+        },
+        get tabindex () {
+            return p.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, p.side ? SIDE_MAP[p.side] : void 0, hasCustomBg() ? "drawer__dialog--custom-bg" : void 0, hasCustomSize() ? "drawer__dialog--custom-size" : void 0, hasCustomPadding() ? "drawer__dialog--custom-padding" : void 0, p.class);
+        },
+        "data-slot": "drawer-dialog",
+        get ["data-placement"] () {
+            return placement();
+        },
+        get ["data-size"] () {
+            return size();
+        },
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return mergedStyle();
+        }
+    }), true);
+    insert(_el$5, ()=>p.children);
+    return _el$5;
 };
 const DrawerDialog = defineComponent({
     recipe: componentRecipe,
@@ -449,29 +390,22 @@ const DrawerDialog = defineComponent({
     embedded: true
 });
 const __solidLayoutDrawerHeader = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$6 = _tmpl$();
-        spread(_el$6, mergeProps(others, {
-            get ["class"] () {
-                return twMerge(CLASSES.Header.base, local.class);
-            },
-            "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 others = omit(p, "children", "class", "dataTheme", "style");
+    var _el$6 = _tmpl$();
+    spread(_el$6, mergeProps(others, {
+        get ["class"] () {
+            return twMerge(CLASSES.Header.base, p.class);
+        },
+        "data-slot": "drawer-header",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$6, ()=>p.children);
+    return _el$6;
 };
 const DrawerHeader = defineComponent({
     recipe: componentRecipe,
@@ -479,16 +413,10 @@ const DrawerHeader = defineComponent({
     embedded: true
 });
 const __solidLayoutDrawerHeading = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "id"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style", "id");
     const ctx = useDrawerContext();
     const uid = createUniqueId();
-    const headingId = ()=>local.id ?? `drawer-heading-${uid}`;
+    const headingId = ()=>p.id ?? `drawer-heading-${uid}`;
     createEffect(()=>{
         const id = headingId();
         ctx.setLabelledBy(id);
@@ -496,26 +424,24 @@ const __solidLayoutDrawerHeading = (_stable, p)=>{
             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);
-            },
-            "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;
-    })();
+    var _el$7 = _tmpl$3();
+    spread(_el$7, mergeProps(others, {
+        get id () {
+            return headingId();
+        },
+        get ["class"] () {
+            return twMerge(CLASSES.Heading.base, p.class);
+        },
+        "data-slot": "drawer-heading",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$7, ()=>p.children);
+    return _el$7;
 };
 const DrawerHeading = defineComponent({
     recipe: componentRecipe,
@@ -523,16 +449,10 @@ const DrawerHeading = defineComponent({
     embedded: true
 });
 const __solidLayoutDrawerBody = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "id"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style", "id");
     const ctx = useDrawerContext();
     const uid = createUniqueId();
-    const bodyId = ()=>local.id ?? `drawer-body-${uid}`;
+    const bodyId = ()=>p.id ?? `drawer-body-${uid}`;
     createEffect(()=>{
         const id = bodyId();
         ctx.setDescribedBy(id);
@@ -540,26 +460,24 @@ const __solidLayoutDrawerBody = (_stable, p)=>{
             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);
-            },
-            "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;
-    })();
+    var _el$8 = _tmpl$();
+    spread(_el$8, mergeProps(others, {
+        get id () {
+            return bodyId();
+        },
+        get ["class"] () {
+            return twMerge(CLASSES.Body.base, p.class);
+        },
+        "data-slot": "drawer-body",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$8, ()=>p.children);
+    return _el$8;
 };
 const DrawerBody = defineComponent({
     recipe: componentRecipe,
@@ -567,29 +485,22 @@ const DrawerBody = defineComponent({
     embedded: true
 });
 const __solidLayoutDrawerFooter = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$9 = _tmpl$();
-        spread(_el$9, mergeProps(others, {
-            get ["class"] () {
-                return twMerge(CLASSES.Footer.base, local.class);
-            },
-            "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 others = omit(p, "children", "class", "dataTheme", "style");
+    var _el$9 = _tmpl$();
+    spread(_el$9, mergeProps(others, {
+        get ["class"] () {
+            return twMerge(CLASSES.Footer.base, p.class);
+        },
+        "data-slot": "drawer-footer",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$9, ()=>p.children);
+    return _el$9;
 };
 const DrawerFooter = defineComponent({
     recipe: componentRecipe,
@@ -597,29 +508,25 @@ const DrawerFooter = defineComponent({
     embedded: true
 });
 const __solidLayoutDrawerHandle = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "class",
-        "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);
-            },
-            "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 others = omit(p, "class", "dataTheme", "style");
+    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, p.class);
+        },
+        "data-slot": "drawer-handle",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    effect(()=>CLASSES.Handle.bar, (_v$, _$p)=>{
+        className(_el$1, _v$, _$p);
+    });
+    return _el$0;
 };
 const DrawerHandle = defineComponent({
     recipe: componentRecipe,
@@ -627,61 +534,54 @@ const DrawerHandle = defineComponent({
     embedded: true
 });
 const __solidLayoutDrawerCloseTrigger = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "startIcon",
-        "endIcon",
-        "onClick",
-        "aria-label"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style", "startIcon", "endIcon", "onClick", "aria-label");
     const ctx = useDrawerContext();
     const handleClick = (event)=>{
         ctx.requestClose("trigger");
-        if ("function" == typeof local.onClick) local.onClick(event);
+        if ("function" == typeof p.onClick) p.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);
-            },
-            "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;
-    })();
+    var _el$10 = _tmpl$5(), _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling, _el$13 = _el$12.nextSibling;
+    spread(_el$10, mergeProps(others, {
+        type: "button",
+        get ["aria-label"] () {
+            return p["aria-label"] ?? "Close";
+        },
+        get ["class"] () {
+            return twMerge(CLASSES.CloseTrigger.base, p.class);
+        },
+        "data-slot": "drawer-close-trigger",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        },
+        onClick: handleClick
+    }), true);
+    insert(_el$10, (()=>{
+        var _c$ = memo(()=>!!p.startIcon);
+        return ()=>_c$() ? (()=>{
+                var _el$14 = _tmpl$6();
+                insert(_el$14, ()=>p.startIcon);
+                effect(()=>twMerge(CLASSES.CloseTrigger.icon, CLASSES.CloseTrigger.iconStart), (_v$, _$p)=>{
+                    className(_el$14, _v$, _$p);
+                });
+                return _el$14;
+            })() : null;
+    })(), _el$11);
+    insert(_el$10, ()=>p.children, _el$12);
+    insert(_el$10, (()=>{
+        var _c$2 = memo(()=>!!p.endIcon);
+        return ()=>_c$2() ? (()=>{
+                var _el$15 = _tmpl$6();
+                insert(_el$15, ()=>p.endIcon);
+                effect(()=>twMerge(CLASSES.CloseTrigger.icon, CLASSES.CloseTrigger.iconEnd), (_v$, _$p)=>{
+                    className(_el$15, _v$, _$p);
+                });
+                return _el$15;
+            })() : null;
+    })(), _el$13);
+    return _el$10;
 };
 const DrawerCloseTrigger = defineComponent({
     recipe: componentRecipe,
@@ -693,12 +593,10 @@ const __solidLayoutDrawerClose = (_stable, p)=>{
     const handleClick = ()=>{
         ctx.requestClose("trigger");
     };
-    return (()=>{
-        var _el$13 = _tmpl$6();
-        _el$13.$$click = handleClick;
-        insert(_el$13, ()=>p.children);
-        return _el$13;
-    })();
+    var _el$16 = _tmpl$7();
+    _el$16.$$click = handleClick;
+    insert(_el$16, ()=>p.children);
+    return _el$16;
 };
 const DrawerClose = defineComponent({
     recipe: componentRecipe,