@pathscale/ui 2.5.0 → 2.6.1

package/dist/components/dialog/Dialog.generated.js

@@ -1,8 +1,9 @@
-import { Portal, createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
+import { Portal, createComponent, insert, mergeProps, ref, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Dialog.css";
-import { Show, createContext, createEffect, createSignal, createUniqueId, onCleanup, splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
+import { Show, createContext, createEffect, createSignal, createUniqueId, omit, onCleanup, useContext } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
+import "../_shared/material.css";
 import { CLASSES, componentRecipe } from "./Dialog.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<button>"), _tmpl$3 = /*#__PURE__*/ template("<div><div>"), _tmpl$4 = /*#__PURE__*/ template("<h2>"), _tmpl$5 = /*#__PURE__*/ template('<svg><path d="M18 6L6 18M6 6L18 18"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>');
 const DialogContext = createContext();
@@ -68,34 +69,18 @@ const focusFirstElement = (container)=>{
     container.focus();
 };
 const __solidLayoutDialogRoot = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "ref",
-        "open",
-        "defaultOpen",
-        "onOpenChange",
-        "isDismissable",
-        "shouldCloseOnEsc",
-        "shouldCloseOnBackdropClick",
-        "placement",
-        "size",
-        "backdrop",
-        "scrollBehavior"
-    ]);
-    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", "ref", "open", "defaultOpen", "onOpenChange", "isDismissable", "shouldCloseOnEsc", "shouldCloseOnBackdropClick", "placement", "size", "backdrop", "scrollBehavior");
+    const [internalOpen, setInternalOpen] = createSignal(Boolean(p.defaultOpen));
+    const [animState, setAnimState] = createSignal(p.open ?? p.defaultOpen ? "open" : "closed");
     const [contentRef, setContentRef] = createSignal(void 0);
     const [labelledBy, setLabelledBy] = createSignal(void 0);
     const [describedBy, setDescribedBy] = createSignal(void 0);
-    const isControlled = ()=>void 0 !== local.open;
-    const isOpen = ()=>isControlled() ? Boolean(local.open) : internalOpen();
+    const isControlled = ()=>void 0 !== p.open;
+    const isOpen = ()=>isControlled() ? Boolean(p.open) : internalOpen();
     const setIsOpen = (next)=>{
         if (isOpen() === next) return;
         if (!isControlled()) setInternalOpen(next);
-        local.onOpenChange?.(next);
+        p.onOpenChange?.(next);
     };
     let exitTimer;
     createEffect(()=>{
@@ -152,7 +137,7 @@ const __solidLayoutDialogRoot = (_stable, p)=>{
         const handleDocumentKeyDown = (event)=>{
             if (!isVisibleState(animState())) return;
             if ("Escape" === event.key) {
-                if (false !== local.isDismissable && false !== local.shouldCloseOnEsc) {
+                if (false !== p.isDismissable && false !== p.shouldCloseOnEsc) {
                     event.preventDefault();
                     setIsOpen(false);
                 }
@@ -177,13 +162,13 @@ const __solidLayoutDialogRoot = (_stable, p)=>{
         isOpen,
         setIsOpen,
         animState,
-        isDismissable: ()=>false !== local.isDismissable,
-        shouldCloseOnEsc: ()=>false !== local.shouldCloseOnEsc,
-        shouldCloseOnBackdropClick: ()=>false !== local.shouldCloseOnBackdropClick,
-        placement: ()=>local.placement ?? "auto",
-        size: ()=>local.size ?? "md",
-        backdrop: ()=>local.backdrop ?? "opaque",
-        scrollBehavior: ()=>local.scrollBehavior ?? "inside",
+        isDismissable: ()=>false !== p.isDismissable,
+        shouldCloseOnEsc: ()=>false !== p.shouldCloseOnEsc,
+        shouldCloseOnBackdropClick: ()=>false !== p.shouldCloseOnBackdropClick,
+        placement: ()=>p.placement ?? "auto",
+        size: ()=>p.size ?? "md",
+        backdrop: ()=>p.backdrop ?? "opaque",
+        scrollBehavior: ()=>p.scrollBehavior ?? "inside",
         contentRef,
         setContentRef,
         labelledBy,
@@ -191,28 +176,28 @@ const __solidLayoutDialogRoot = (_stable, p)=>{
         describedBy,
         setDescribedBy
     };
-    return createComponent(DialogContext.Provider, {
+    return createComponent(DialogContext, {
         value: contextValue,
         get children () {
             var _el$ = _tmpl$();
-            use((node)=>{
-                if ("function" == typeof local.ref) local.ref(node);
-            }, _el$);
+            ref(()=>(node)=>{
+                    if ("function" == typeof p.ref) p.ref(node);
+                }, _el$);
             spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.Root.base, isVisibleState(animState()) && CLASSES.Root.flag.open, local.class)
+                    class: twMerge(CLASSES.Root.base, isVisibleState(animState()) && CLASSES.Root.flag.open, p.class)
                 }), {
                 "data-slot": "dialog-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$;
         }
     });
@@ -223,40 +208,31 @@ const DialogRoot = defineComponent({
     embedded: true
 });
 const __solidLayoutDialogTrigger = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "type",
-        "onClick"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style", "type", "onClick");
     const context = useModalContext();
     const handleClick = (event)=>{
         context.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, {
-            get type () {
-                return local.type ?? "button";
-            }
-        }, ()=>({
-                class: twMerge(CLASSES.Trigger.base, local.class)
-            }), {
-            "data-slot": "dialog-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, {
+        get type () {
+            return p.type ?? "button";
+        }
+    }, ()=>({
+            class: twMerge(CLASSES.Trigger.base, p.class)
+        }), {
+        "data-slot": "dialog-trigger",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        },
+        onClick: handleClick
+    }), true);
+    insert(_el$2, ()=>p.children);
+    return _el$2;
 };
 const DialogTrigger = defineComponent({
     recipe: componentRecipe,
@@ -264,49 +240,38 @@ const DialogTrigger = defineComponent({
     embedded: true
 });
 const __solidLayoutDialogBackdrop = (_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 context = useModalContext();
-    const variant = ()=>local.variant ?? context.backdrop();
-    const dismissable = ()=>local.isDismissable ?? context.isDismissable();
-    const shouldCloseOnBackdropClick = ()=>local.shouldCloseOnBackdropClick ?? context.shouldCloseOnBackdropClick();
+    const variant = ()=>p.variant ?? context.backdrop();
+    const dismissable = ()=>p.isDismissable ?? context.isDismissable();
+    const shouldCloseOnBackdropClick = ()=>p.shouldCloseOnBackdropClick ?? context.shouldCloseOnBackdropClick();
     const isEntering = ()=>"entering" === context.animState();
     const isExiting = ()=>"exiting" === context.animState();
     const handleClick = (event)=>{
         if (dismissable() && shouldCloseOnBackdropClick() && event.target === event.currentTarget) context.setIsOpen(false);
-        if ("function" == typeof local.onClick) local.onClick(event);
+        if ("function" == typeof p.onClick) p.onClick(event);
     };
-    return (()=>{
-        var _el$3 = _tmpl$();
-        spread(_el$3, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Backdrop.base, CLASSES.Backdrop.variant[variant()], isEntering() && CLASSES.Backdrop.state.entering, isExiting() && CLASSES.Backdrop.state.exiting, local.class)
-            }), {
-            "data-slot": "dialog-backdrop",
-            get ["data-entering"] () {
-                return isEntering() ? "true" : void 0;
-            },
-            get ["data-exiting"] () {
-                return isExiting() ? "true" : void 0;
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            },
-            onClick: handleClick
-        }), false, true);
-        insert(_el$3, ()=>local.children);
-        return _el$3;
-    })();
+    var _el$3 = _tmpl$();
+    spread(_el$3, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.Backdrop.base, CLASSES.Backdrop.variant[variant()], isEntering() && CLASSES.Backdrop.state.entering, isExiting() && CLASSES.Backdrop.state.exiting, p.class)
+        }), {
+        "data-slot": "dialog-backdrop",
+        get ["data-entering"] () {
+            return isEntering() ? "true" : void 0;
+        },
+        get ["data-exiting"] () {
+            return isExiting() ? "true" : void 0;
+        },
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        },
+        onClick: handleClick
+    }), true);
+    insert(_el$3, ()=>p.children);
+    return _el$3;
 };
 const DialogBackdrop = defineComponent({
     recipe: componentRecipe,
@@ -314,27 +279,11 @@ const DialogBackdrop = defineComponent({
     embedded: true
 });
 const __solidLayoutDialogContent = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "ref",
-        "placement",
-        "size",
-        "backdrop",
-        "scrollBehavior",
-        "isDismissable",
-        "shouldCloseOnBackdropClick",
-        "role",
-        "tabIndex",
-        "aria-labelledby",
-        "aria-describedby"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style", "ref", "placement", "size", "backdrop", "scrollBehavior", "isDismissable", "shouldCloseOnBackdropClick", "material", "role", "tabindex", "aria-labelledby", "aria-describedby");
     const context = useModalContext();
-    const placement = ()=>local.placement ?? context.placement();
-    const size = ()=>local.size ?? context.size();
-    const scrollBehavior = ()=>local.scrollBehavior ?? context.scrollBehavior();
+    const placement = ()=>p.placement ?? context.placement();
+    const size = ()=>p.size ?? context.size();
+    const scrollBehavior = ()=>p.scrollBehavior ?? context.scrollBehavior();
     const isEntering = ()=>"entering" === context.animState();
     const isExiting = ()=>"exiting" === context.animState();
     const containerSizeClass = ()=>{
@@ -350,16 +299,16 @@ const __solidLayoutDialogContent = (_stable, p)=>{
                 get children () {
                     return createComponent(DialogBackdrop, {
                         get variant () {
-                            return local.backdrop;
+                            return p.backdrop;
                         },
                         get isDismissable () {
-                            return local.isDismissable;
+                            return p.isDismissable;
                         },
                         get shouldCloseOnBackdropClick () {
-                            return local.shouldCloseOnBackdropClick;
+                            return p.shouldCloseOnBackdropClick;
                         },
                         get dataTheme () {
-                            return local.dataTheme;
+                            return p.dataTheme;
                         },
                         get children () {
                             var _el$4 = _tmpl$3(), _el$5 = _el$4.firstChild;
@@ -376,29 +325,32 @@ const __solidLayoutDialogContent = (_stable, p)=>{
                                 get ["data-exiting"] () {
                                     return isExiting() ? "true" : void 0;
                                 }
-                            }), false, true);
-                            use((node)=>{
-                                context.setContentRef(node);
-                                if ("function" == typeof local.ref) local.ref(node);
-                            }, _el$5);
+                            }), true);
+                            ref(()=>(node)=>{
+                                    context.setContentRef(node);
+                                    if ("function" == typeof p.ref) p.ref(node);
+                                }, _el$5);
                             spread(_el$5, mergeProps(others, {
                                 get role () {
-                                    return local.role ?? "dialog";
+                                    return p.role ?? "dialog";
                                 },
                                 "aria-modal": "true",
                                 get ["aria-labelledby"] () {
-                                    return local["aria-labelledby"] ?? context.labelledBy();
+                                    return p["aria-labelledby"] ?? context.labelledBy();
                                 },
                                 get ["aria-describedby"] () {
-                                    return local["aria-describedby"] ?? context.describedBy();
+                                    return p["aria-describedby"] ?? context.describedBy();
                                 },
-                                get tabIndex () {
-                                    return local.tabIndex ?? -1;
+                                get tabindex () {
+                                    return p.tabindex ?? -1;
                                 }
                             }, ()=>({
-                                    class: twMerge(CLASSES.Content.base, CLASSES.Content.scroll[scrollBehavior()], CLASSES.Content.size[size()], isEntering() && CLASSES.Content.state.entering, isExiting() && CLASSES.Content.state.exiting, local.class)
+                                    class: twMerge(CLASSES.Content.base, CLASSES.Content.scroll[scrollBehavior()], CLASSES.Content.size[size()], isEntering() && CLASSES.Content.state.entering, isExiting() && CLASSES.Content.state.exiting, p.class)
                                 }), {
                                 "data-slot": "dialog-content",
+                                get ["data-material"] () {
+                                    return p.material ?? "solid";
+                                },
                                 get ["data-placement"] () {
                                     return placement();
                                 },
@@ -415,13 +367,13 @@ const __solidLayoutDialogContent = (_stable, p)=>{
                                     return isExiting() ? "true" : void 0;
                                 },
                                 get ["data-theme"] () {
-                                    return local.dataTheme;
+                                    return p.dataTheme;
                                 },
                                 get style () {
-                                    return local.style;
+                                    return p.style;
                                 }
-                            }), false, true);
-                            insert(_el$5, ()=>local.children);
+                            }), true);
+                            insert(_el$5, ()=>p.children);
                             return _el$4;
                         }
                     });
@@ -436,28 +388,21 @@ const DialogContent = defineComponent({
     embedded: true
 });
 const __solidLayoutDialogHeader = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$6 = _tmpl$();
-        spread(_el$6, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Header.base, local.class)
-            }), {
-            "data-slot": "dialog-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, ()=>({
+            class: twMerge(CLASSES.Header.base, p.class)
+        }), {
+        "data-slot": "dialog-header",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$6, ()=>p.children);
+    return _el$6;
 };
 const DialogHeader = defineComponent({
     recipe: componentRecipe,
@@ -465,16 +410,10 @@ const DialogHeader = defineComponent({
     embedded: true
 });
 const __solidLayoutDialogHeading = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "id"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style", "id");
     const context = useModalContext();
     const uniqueId = createUniqueId();
-    const headingId = ()=>local.id ?? `dialog-heading-${uniqueId}`;
+    const headingId = ()=>("string" == typeof p.id ? p.id : void 0) ?? `dialog-heading-${uniqueId}`;
     createEffect(()=>{
         const id = headingId();
         context.setLabelledBy(id);
@@ -482,26 +421,24 @@ const __solidLayoutDialogHeading = (_stable, p)=>{
             if (context.labelledBy() === id) context.setLabelledBy(void 0);
         });
     });
-    return (()=>{
-        var _el$7 = _tmpl$4();
-        spread(_el$7, mergeProps(others, {
-            get id () {
-                return headingId();
-            }
-        }, ()=>({
-                class: twMerge(CLASSES.Heading.base, local.class)
-            }), {
-            "data-slot": "dialog-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$4();
+    spread(_el$7, mergeProps(others, {
+        get id () {
+            return headingId();
+        }
+    }, ()=>({
+            class: twMerge(CLASSES.Heading.base, p.class)
+        }), {
+        "data-slot": "dialog-heading",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$7, ()=>p.children);
+    return _el$7;
 };
 const DialogHeading = defineComponent({
     recipe: componentRecipe,
@@ -509,28 +446,21 @@ const DialogHeading = defineComponent({
     embedded: true
 });
 const __solidLayoutDialogIcon = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$8 = _tmpl$();
-        spread(_el$8, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Icon.base, local.class)
-            }), {
-            "data-slot": "dialog-icon",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$8, ()=>local.children);
-        return _el$8;
-    })();
+    const others = omit(p, "children", "class", "dataTheme", "style");
+    var _el$8 = _tmpl$();
+    spread(_el$8, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.Icon.base, p.class)
+        }), {
+        "data-slot": "dialog-icon",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$8, ()=>p.children);
+    return _el$8;
 };
 const DialogIcon = defineComponent({
     recipe: componentRecipe,
@@ -538,16 +468,10 @@ const DialogIcon = defineComponent({
     embedded: true
 });
 const __solidLayoutDialogBody = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "id"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style", "id");
     const context = useModalContext();
     const uniqueId = createUniqueId();
-    const bodyId = ()=>local.id ?? `dialog-body-${uniqueId}`;
+    const bodyId = ()=>("string" == typeof p.id ? p.id : void 0) ?? `dialog-body-${uniqueId}`;
     createEffect(()=>{
         const id = bodyId();
         context.setDescribedBy(id);
@@ -555,29 +479,27 @@ const __solidLayoutDialogBody = (_stable, p)=>{
             if (context.describedBy() === id) context.setDescribedBy(void 0);
         });
     });
-    return (()=>{
-        var _el$9 = _tmpl$();
-        spread(_el$9, mergeProps(others, {
-            get id () {
-                return bodyId();
-            }
-        }, ()=>({
-                class: twMerge(CLASSES.Body.base, CLASSES.Body.scroll[context.scrollBehavior()], local.class)
-            }), {
-            "data-slot": "dialog-body",
-            get ["data-scroll"] () {
-                return context.scrollBehavior();
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$9, ()=>local.children);
-        return _el$9;
-    })();
+    var _el$9 = _tmpl$();
+    spread(_el$9, mergeProps(others, {
+        get id () {
+            return bodyId();
+        }
+    }, ()=>({
+            class: twMerge(CLASSES.Body.base, CLASSES.Body.scroll[context.scrollBehavior()], p.class)
+        }), {
+        "data-slot": "dialog-body",
+        get ["data-scroll"] () {
+            return context.scrollBehavior();
+        },
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$9, ()=>p.children);
+    return _el$9;
 };
 const DialogBody = defineComponent({
     recipe: componentRecipe,
@@ -585,28 +507,21 @@ const DialogBody = defineComponent({
     embedded: true
 });
 const __solidLayoutDialogFooter = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style"
-    ]);
-    return (()=>{
-        var _el$0 = _tmpl$();
-        spread(_el$0, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.Footer.base, local.class)
-            }), {
-            "data-slot": "dialog-footer",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$0, ()=>local.children);
-        return _el$0;
-    })();
+    const others = omit(p, "children", "class", "dataTheme", "style");
+    var _el$0 = _tmpl$();
+    spread(_el$0, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.Footer.base, p.class)
+        }), {
+        "data-slot": "dialog-footer",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        }
+    }), true);
+    insert(_el$0, ()=>p.children);
+    return _el$0;
 };
 const DialogFooter = defineComponent({
     recipe: componentRecipe,
@@ -614,56 +529,45 @@ const DialogFooter = defineComponent({
     embedded: true
 });
 const __solidLayoutDialogCloseTrigger = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "dataTheme",
-        "style",
-        "type",
-        "onClick",
-        "aria-label"
-    ]);
+    const others = omit(p, "children", "class", "dataTheme", "style", "type", "onClick", "aria-label");
     const context = useModalContext();
     const handleClick = (event)=>{
         context.setIsOpen(false);
-        if ("function" == typeof local.onClick) local.onClick(event);
+        if ("function" == typeof p.onClick) p.onClick(event);
     };
-    return (()=>{
-        var _el$1 = _tmpl$2();
-        spread(_el$1, mergeProps(others, {
-            get type () {
-                return local.type ?? "button";
-            },
-            get ["aria-label"] () {
-                return local["aria-label"] ?? "Close dialog";
-            }
-        }, ()=>({
-                class: twMerge(CLASSES.CloseTrigger.base, local.class)
-            }), {
-            "data-slot": "dialog-close-trigger",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            },
-            onClick: handleClick
-        }), false, true);
-        insert(_el$1, ()=>local.children ?? (()=>{
-                var _el$10 = _tmpl$5();
-                spread(_el$10, mergeProps(()=>({
-                        class: CLASSES.CloseTrigger.icon
-                    }), {
-                    "data-slot": "dialog-close-trigger-icon",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    "aria-hidden": "true"
-                }), true, true);
-                return _el$10;
-            })());
-        return _el$1;
-    })();
+    var _el$1 = _tmpl$2();
+    spread(_el$1, mergeProps(others, {
+        get type () {
+            return p.type ?? "button";
+        },
+        get ["aria-label"] () {
+            return p["aria-label"] ?? "Close dialog";
+        }
+    }, ()=>({
+            class: twMerge(CLASSES.CloseTrigger.base, p.class)
+        }), {
+        "data-slot": "dialog-close-trigger",
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get style () {
+            return p.style;
+        },
+        onClick: handleClick
+    }), true);
+    insert(_el$1, ()=>p.children ?? (()=>{
+            var _el$10 = _tmpl$5();
+            spread(_el$10, mergeProps(()=>({
+                    class: CLASSES.CloseTrigger.icon
+                }), {
+                "data-slot": "dialog-close-trigger-icon",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                "aria-hidden": "true"
+            }), true);
+            return _el$10;
+        })());
+    return _el$1;
 };
 const DialogCloseTrigger = defineComponent({
     recipe: componentRecipe,