Modal

dist/sigpro-ui.cjs

@@ -1071,37 +1071,51 @@ var MenuModule = /*#__PURE__*/Object.freeze({
   Menu: Menu
 });
 
-/** MODAL */
+/** MODAL (Recommended Method: HTML <dialog>) */
 const Modal = (props, children) => {
   const { title, buttons, open, ...rest } = props;
+  const dialogRef = { current: null };
+
+  sigpro.$watch(() => {
+    const el = dialogRef.current;
+    if (!el) return;
+    
+    if (open()) {
+      if (!el.open) el.showModal();
+    } else {
+      if (el.open) el.close();
+    }
+  });
 
   const close = (e) => {
     if (e && e.preventDefault) e.preventDefault();
     open(false);
   };
 
-  return sigpro.$if(open, () =>
-    sigpro.$html("dialog", { 
-      ...rest, 
-      class: "modal modal-open",
-      oncancel: close 
-    }, [
-      sigpro.$html("div", { class: "modal-box" }, [
-        title ? sigpro.$html("h3", { class: "text-lg font-bold mb-4" }, title) : null,
-        sigpro.$html("div", { class: "py-2" }, [
-          typeof children === "function" ? children() : children
-        ]),
-        sigpro.$html("div", { class: "modal-action flex gap-2" }, [
-          ...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
-          Button({ type: "button", onclick: close }, tt("close")()),
-        ]),
+  return sigpro.$html("dialog", { 
+    ...rest,
+    ref: dialogRef,
+    class: "modal",
+    oncancel: close
+  }, [
+    sigpro.$html("div", { class: "modal-box" }, [
+      title ? sigpro.$html("h3", { class: "text-lg font-bold mb-4" }, title) : null,
+      sigpro.$html("div", { class: "py-2" }, [
+        typeof children === "function" ? children() : children
       ]),
-      sigpro.$html("div", { 
-        class: "modal-backdrop bg-black/20", 
-        onclick: close 
-      })
+      sigpro.$html("div", { class: "modal-action flex gap-2" }, [
+        ...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
+        Button({ type: "button", onclick: close }, tt("close")()),
+      ]),
+    ]),
+    sigpro.$html("form", { 
+      method: "dialog", 
+      class: "modal-backdrop",
+      onsubmit: close 
+    }, [
+      sigpro.$html("button", { onclick: close }, "close")
     ])
-  );
+  ]);
 };
 
 var ModalModule = /*#__PURE__*/Object.freeze({