@pathscale/ui 1.2.1 → 1.2.3

package/dist/components/modal/Modal.js

@@ -1,125 +1,645 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
-import "./modal.css";
+import "./Modal.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_clsx__ from "clsx";
-import * as __WEBPACK_EXTERNAL_MODULE__ModalActions_js_be09c8ad__ from "./ModalActions.js";
-import * as __WEBPACK_EXTERNAL_MODULE__ModalBody_js_8b9d3ad6__ from "./ModalBody.js";
-import * as __WEBPACK_EXTERNAL_MODULE__ModalHeader_js_d57ffdf5__ from "./ModalHeader.js";
-import * as __WEBPACK_EXTERNAL_MODULE__ModalLegacy_js_990bc965__ from "./ModalLegacy.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<dialog><div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<form method=dialog class=modal-backdrop data-modal-backdrop=true><button type=submit class=sr-only>Close");
-const MODAL_BACKDROP_SELECTOR = "[data-modal-backdrop='true']";
-function Modal(props) {
+import * as __WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__ from "./Modal.classes.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)("<div><div>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<h2>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg><path d="M18 6L6 18M6 6L18 18"stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round>');
+const ModalContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+const useModalContext = ()=>{
+    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(ModalContext);
+    if (!context) throw new Error("Modal compound components must be used within <Modal>.");
+    return context;
+};
+const isVisibleState = (state)=>"entering" === state || "open" === state;
+let bodyLockCount = 0;
+let previousBodyOverflow = "";
+let previousBodyPaddingRight = "";
+const lockBodyScroll = ()=>{
+    if (0 === bodyLockCount) {
+        previousBodyOverflow = document.body.style.overflow;
+        previousBodyPaddingRight = 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 = previousBodyOverflow;
+        document.body.style.paddingRight = previousBodyPaddingRight;
+    }
+};
+const FOCUSABLE_SELECTOR = "a[href],area[href],button:not([disabled]),input:not([disabled]):not([type='hidden']),select:not([disabled]),textarea:not([disabled]),iframe,object,embed,[contenteditable='true'],[tabindex]:not([tabindex='-1'])";
+const getFocusableElements = (container)=>Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((element)=>{
+        if (element.hasAttribute("disabled")) return false;
+        if ("true" === element.getAttribute("aria-hidden")) return false;
+        if (element.tabIndex < 0) return false;
+        return !element.hidden;
+    });
+const trapFocus = (event, container)=>{
+    const focusable = getFocusableElements(container);
+    if (0 === focusable.length) {
+        event.preventDefault();
+        container.focus();
+        return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    const active = document.activeElement;
+    if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus();
+        return;
+    }
+    if (event.shiftKey && (active === first || active === container)) {
+        event.preventDefault();
+        last.focus();
+    }
+};
+const focusFirstElement = (container)=>{
+    const autofocus = container.querySelector("[autofocus]");
+    if (autofocus) return void autofocus.focus();
+    const focusable = getFocusableElements(container);
+    if (focusable.length > 0) return void focusable[0].focus();
+    container.focus();
+};
+const ModalRoot = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "children",
-        "open",
-        "position",
-        "responsive",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "ref",
+        "isOpen",
+        "defaultOpen",
+        "onOpenChange",
+        "isDismissable",
+        "shouldCloseOnEsc",
+        "shouldCloseOnBackdropClick",
+        "placement",
+        "size",
         "backdrop",
-        "ariaHidden",
+        "scrollBehavior"
+    ]);
+    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 [contentRef, setContentRef] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(void 0);
+    const [labelledBy, setLabelledBy] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(void 0);
+    const [describedBy, setDescribedBy] = (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 = (next)=>{
+        if (isOpen() === next) return;
+        if (!isControlled()) setInternalOpen(next);
+        local.onOpenChange?.(next);
+    };
+    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"), 180);
+        }
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        if (exitTimer) clearTimeout(exitTimer);
+    });
+    let hasScrollLock = false;
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        const shouldLock = isVisibleState(animState());
+        if (shouldLock && !hasScrollLock) {
+            lockBodyScroll();
+            hasScrollLock = true;
+        } else if (!shouldLock && hasScrollLock) {
+            unlockBodyScroll();
+            hasScrollLock = false;
+        }
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        if (hasScrollLock) {
+            unlockBodyScroll();
+            hasScrollLock = false;
+        }
+    });
+    let restoreFocusTarget = null;
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        const state = animState();
+        const content = contentRef();
+        if (!isVisibleState(state) || !content) return;
+        const activeElement = document.activeElement;
+        if (!restoreFocusTarget && activeElement instanceof HTMLElement) restoreFocusTarget = activeElement;
+        queueMicrotask(()=>{
+            if (!content.contains(document.activeElement)) focusFirstElement(content);
+        });
+        const handleDocumentKeyDown = (event)=>{
+            if (!isVisibleState(animState())) return;
+            if ("Escape" === event.key) {
+                if (false !== local.isDismissable && false !== local.shouldCloseOnEsc) {
+                    event.preventDefault();
+                    setIsOpen(false);
+                }
+                return;
+            }
+            if ("Tab" === event.key) trapFocus(event, content);
+        };
+        document.addEventListener("keydown", handleDocumentKeyDown);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+            document.removeEventListener("keydown", handleDocumentKeyDown);
+        });
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        if ("closed" !== animState()) return;
+        if (!restoreFocusTarget) return;
+        queueMicrotask(()=>{
+            restoreFocusTarget?.focus?.();
+            restoreFocusTarget = null;
+        });
+    });
+    const contextValue = {
+        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",
+        contentRef,
+        setContentRef,
+        labelledBy,
+        setLabelledBy,
+        describedBy,
+        setDescribedBy
+    };
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ModalContext.Provider, {
+        value: contextValue,
+        get children () {
+            var _el$ = _tmpl$();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((node)=>{
+                if ("function" == typeof local.ref) local.ref(node);
+            }, _el$);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.Root.base, isVisibleState(animState()) && __WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.Root.flag.open, local.class, local.className)
+                }), {
+                "data-slot": "modal-root",
+                get ["data-open"] () {
+                    return 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$;
+        }
+    });
+};
+const ModalTrigger = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "type",
+        "onClick"
+    ]);
+    const context = useModalContext();
+    const handleClick = (event)=>{
+        context.setIsOpen(true);
+        if ("function" == typeof local.onClick) local.onClick(event);
+    };
+    return (()=>{
+        var _el$2 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get type () {
+                return local.type ?? "button";
+            }
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.Trigger.base, local.class, local.className)
+            }), {
+            "data-slot": "modal-trigger",
+            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$2, ()=>local.children);
+        return _el$2;
+    })();
+};
+const ModalBackdrop = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
         "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 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);
+    };
+    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, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.Backdrop.base, __WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.Backdrop.variant[variant()], isEntering() && __WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.Backdrop.state.entering, isExiting() && __WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.Backdrop.state.exiting, local.class, local.className)
+            }), {
+            "data-slot": "modal-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);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
+        return _el$3;
+    })();
+};
+const ModalContent = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
         "class",
         "className",
-        "onClose",
-        "tabindex",
+        "dataTheme",
+        "style",
+        "ref",
+        "placement",
+        "size",
+        "backdrop",
+        "scrollBehavior",
+        "isDismissable",
+        "shouldCloseOnBackdropClick",
+        "role",
         "tabIndex",
-        "closeOnEsc",
-        "closeOnOutsideClick",
-        "size"
+        "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 isEntering = ()=>"entering" === context.animState();
+    const isExiting = ()=>"exiting" === context.animState();
+    const containerSizeClass = ()=>{
+        if ("cover" === size()) return __WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.Container.size.cover;
+        if ("full" === size()) return __WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.Container.size.full;
+    };
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+        get when () {
+            return "closed" !== context.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)(ModalBackdrop, {
+                        get variant () {
+                            return local.backdrop;
+                        },
+                        get isDismissable () {
+                            return local.isDismissable;
+                        },
+                        get shouldCloseOnBackdropClick () {
+                            return local.shouldCloseOnBackdropClick;
+                        },
+                        get dataTheme () {
+                            return local.dataTheme;
+                        },
+                        get children () {
+                            var _el$4 = _tmpl$3(), _el$5 = _el$4.firstChild;
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.Container.base, __WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.Container.placement[placement()], __WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.Container.scroll[scrollBehavior()], containerSizeClass(), isEntering() && __WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.Container.state.entering, isExiting() && __WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.Container.state.exiting)
+                                }), {
+                                "data-slot": "modal-container",
+                                get ["data-placement"] () {
+                                    return placement();
+                                },
+                                get ["data-entering"] () {
+                                    return isEntering() ? "true" : void 0;
+                                },
+                                get ["data-exiting"] () {
+                                    return isExiting() ? "true" : void 0;
+                                }
+                            }), false, true);
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((node)=>{
+                                context.setContentRef(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"] ?? context.labelledBy();
+                                },
+                                get ["aria-describedby"] () {
+                                    return local["aria-describedby"] ?? context.describedBy();
+                                },
+                                get tabIndex () {
+                                    return local.tabIndex ?? -1;
+                                }
+                            }, ()=>({
+                                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.Content.base, __WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.Content.scroll[scrollBehavior()], __WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.Content.size[size()], isEntering() && __WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.Content.state.entering, isExiting() && __WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.Content.state.exiting, local.class, local.className)
+                                }), {
+                                "data-slot": "modal-content",
+                                get ["data-placement"] () {
+                                    return placement();
+                                },
+                                get ["data-size"] () {
+                                    return size();
+                                },
+                                get ["data-scroll"] () {
+                                    return scrollBehavior();
+                                },
+                                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;
+                                }
+                            }), false, true);
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.children);
+                            return _el$4;
+                        }
+                    });
+                }
+            });
+        }
+    });
+};
+const ModalHeader = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$6 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.Header.base, local.class, local.className)
+            }), {
+            "data-slot": "modal-header",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.children);
+        return _el$6;
+    })();
+};
+const ModalHeading = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "id"
     ]);
-    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
-    let dialogRef;
+    const context = useModalContext();
+    const uniqueId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
+    const headingId = ()=>local.id ?? `modal-heading-${uniqueId}`;
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
-        if (!dialogRef) return;
-        if (local.open && !dialogRef.open) dialogRef.showModal();
-        else if (!local.open && dialogRef.open) dialogRef.close();
+        const id = headingId();
+        context.setLabelledBy(id);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+            if (context.labelledBy() === id) context.setLabelledBy(void 0);
+        });
     });
+    return (()=>{
+        var _el$7 = _tmpl$4();
+        (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();
+            }
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.Heading.base, local.class, local.className)
+            }), {
+            "data-slot": "modal-heading",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.children);
+        return _el$7;
+    })();
+};
+const ModalIcon = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$8 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.Icon.base, local.class, local.className)
+            }), {
+            "data-slot": "modal-icon",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, ()=>local.children);
+        return _el$8;
+    })();
+};
+const ModalBody = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "id"
+    ]);
+    const context = useModalContext();
+    const uniqueId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
+    const bodyId = ()=>local.id ?? `modal-body-${uniqueId}`;
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
-        if (!dialogRef) return;
-        const handleClose = ()=>{
-            local.onClose?.();
-        };
-        const handleCancel = (event)=>{
-            if (false === local.closeOnEsc) event.preventDefault();
-            else local.onClose?.();
-        };
-        const handleClick = (event)=>{
-            if (false === local.closeOnOutsideClick) return;
-            const target = event.target;
-            if (!dialogRef) return;
-            if (target === dialogRef || target.closest(MODAL_BACKDROP_SELECTOR)) local.onClose?.();
-        };
-        dialogRef.addEventListener("close", handleClose);
-        dialogRef.addEventListener("cancel", handleCancel);
-        dialogRef.addEventListener("click", handleClick);
+        const id = bodyId();
+        context.setDescribedBy(id);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
-            dialogRef?.removeEventListener("close", handleClose);
-            dialogRef?.removeEventListener("cancel", handleCancel);
-            dialogRef?.removeEventListener("click", handleClick);
+            if (context.describedBy() === id) context.setDescribedBy(void 0);
         });
     });
-    const containerClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("modal", (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
-            "modal-open": local.open,
-            "modal-end": "end" === local.position,
-            "modal-start": "start" === local.position,
-            "modal-top": "top" === local.position,
-            "modal-middle": "middle" === local.position,
-            "modal-bottom": "bottom" === local.position,
-            "modal-bottom modal-responsive-middle": local.responsive
-        })));
-    const bodyClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("modal-box", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
-            "max-w-none w-11/12 max-w-7xl": "xl" === local.size,
-            "max-w-none w-11/12 max-w-4xl": "lg" === local.size,
-            "max-w-none w-11/12 max-w-2xl": "md" === local.size,
-            "max-w-none w-80": "sm" === local.size,
-            "max-w-none w-64": "xs" === local.size,
-            "max-w-none w-full h-full": "full" === local.size
-        })));
     return (()=>{
-        var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>{
-            dialogRef = el;
-            if ("function" == typeof others.ref) others.ref(el);
-        }, _el$);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            "aria-label": "Modal",
-            get ["aria-hidden"] () {
-                return local.ariaHidden ?? !local.open;
+        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 id () {
+                return bodyId();
+            }
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.Body.base, __WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.Body.scroll[context.scrollBehavior()], local.class, local.className)
+            }), {
+            "data-slot": "modal-body",
+            get ["data-scroll"] () {
+                return context.scrollBehavior();
             },
-            get ["aria-modal"] () {
-                return local.open;
+            get ["data-theme"] () {
+                return local.dataTheme;
             },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, ()=>local.children);
+        return _el$9;
+    })();
+};
+const ModalFooter = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    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, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.Footer.base, local.class, local.className)
+            }), {
+            "data-slot": "modal-footer",
             get ["data-theme"] () {
                 return local.dataTheme;
             },
-            get ["class"] () {
-                return containerClasses();
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$0, ()=>local.children);
+        return _el$0;
+    })();
+};
+const ModalCloseTrigger = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "type",
+        "onClick",
+        "aria-label"
+    ]);
+    const context = useModalContext();
+    const handleClick = (event)=>{
+        context.setIsOpen(false);
+        if ("function" == typeof local.onClick) local.onClick(event);
+    };
+    return (()=>{
+        var _el$1 = _tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$1, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get type () {
+                return local.type ?? "button";
             },
-            get tabIndex () {
-                return local.tabIndex ?? local.tabindex;
+            get ["aria-label"] () {
+                return local["aria-label"] ?? "Close modal";
             }
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.CloseTrigger.base, local.class, local.className)
+            }), {
+            "data-slot": "modal-close-trigger",
+            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$2, resolvedChildren);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (()=>{
-            var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>!!local.backdrop);
-            return ()=>_c$() && _tmpl$2();
-        })(), null);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$ = local.dataTheme, _v$2 = bodyClasses();
-            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$2, "data-theme", _p$.e = _v$);
-            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.t = _v$2);
-            return _p$;
-        }, {
-            e: void 0,
-            t: void 0
-        });
-        return _el$;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$1, ()=>local.children ?? (()=>{
+                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: __WEBPACK_EXTERNAL_MODULE__Modal_classes_js_d9ef4fe3__.CLASSES.CloseTrigger.icon
+                    }), {
+                    "data-slot": "modal-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;
     })();
-}
-const modal_Modal = Object.assign(Modal, {
-    Header: __WEBPACK_EXTERNAL_MODULE__ModalHeader_js_d57ffdf5__["default"],
-    Body: __WEBPACK_EXTERNAL_MODULE__ModalBody_js_8b9d3ad6__["default"],
-    Actions: __WEBPACK_EXTERNAL_MODULE__ModalActions_js_be09c8ad__["default"],
-    Legacy: __WEBPACK_EXTERNAL_MODULE__ModalLegacy_js_990bc965__["default"]
+};
+const Modal = Object.assign(ModalRoot, {
+    Root: ModalRoot,
+    Trigger: ModalTrigger,
+    Backdrop: ModalBackdrop,
+    Content: ModalContent,
+    Header: ModalHeader,
+    Heading: ModalHeading,
+    Icon: ModalIcon,
+    Body: ModalBody,
+    Footer: ModalFooter,
+    CloseTrigger: ModalCloseTrigger
 });
-export { Modal, modal_Modal as default };
+const modal_Modal = Modal;
+export { ModalBackdrop, ModalBody, ModalCloseTrigger, ModalContent, ModalFooter, ModalHeader, ModalHeading, ModalIcon, ModalRoot, ModalTrigger, modal_Modal as default };