Modal

dist/sigpro-ui.cjs

@@ -1071,19 +1071,31 @@ 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", { 
+  return sigpro.$html("dialog", { 
     ...rest,
-      class: "modal modal-open",
+    ref: dialogRef,
+    class: "modal",
     oncancel: close
   }, [
     sigpro.$html("div", { class: "modal-box" }, [
@@ -1096,12 +1108,14 @@ const Modal = (props, children) => {
         Button({ type: "button", onclick: close }, tt("close")()),
       ]),
     ]),
-      sigpro.$html("div", { 
-        class: "modal-backdrop bg-black/20", 
-        onclick: close 
-      })
+    sigpro.$html("form", { 
+      method: "dialog", 
+      class: "modal-backdrop",
+      onsubmit: close 
+    }, [
+      sigpro.$html("button", { onclick: close }, "close")
     ])
-  );
+  ]);
 };
 
 var ModalModule = /*#__PURE__*/Object.freeze({

dist/sigpro-ui.esm.js

@@ -1,4 +1,4 @@
-import { $html, $, $for, $if, $mount } from 'sigpro';
+import { $html, $, $for, $if, $watch, $mount } from 'sigpro';
 
 const val = t => typeof t === "function" ? t() : t;
 
@@ -1067,19 +1067,31 @@ 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 };
+
+  $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 $if(open, () =>
-    $html("dialog", { 
+  return $html("dialog", { 
     ...rest,
-      class: "modal modal-open",
+    ref: dialogRef,
+    class: "modal",
     oncancel: close
   }, [
     $html("div", { class: "modal-box" }, [
@@ -1092,12 +1104,14 @@ const Modal = (props, children) => {
         Button({ type: "button", onclick: close }, tt("close")()),
       ]),
     ]),
-      $html("div", { 
-        class: "modal-backdrop bg-black/20", 
-        onclick: close 
-      })
+    $html("form", { 
+      method: "dialog", 
+      class: "modal-backdrop",
+      onsubmit: close 
+    }, [
+      $html("button", { onclick: close }, "close")
     ])
-  );
+  ]);
 };
 
 var ModalModule = /*#__PURE__*/Object.freeze({

dist/sigpro-ui.umd.js

@@ -1068,19 +1068,31 @@ var SigProUI = (function (exports, sigpro) {
     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", { 
+    return sigpro.$html("dialog", { 
       ...rest,
-        class: "modal modal-open",
+      ref: dialogRef,
+      class: "modal",
       oncancel: close
     }, [
       sigpro.$html("div", { class: "modal-box" }, [
@@ -1093,12 +1105,14 @@ var SigProUI = (function (exports, sigpro) {
           Button({ type: "button", onclick: close }, tt("close")()),
         ]),
       ]),
-        sigpro.$html("div", { 
-          class: "modal-backdrop bg-black/20", 
-          onclick: close 
-        })
+      sigpro.$html("form", { 
+        method: "dialog", 
+        class: "modal-backdrop",
+        onsubmit: close 
+      }, [
+        sigpro.$html("button", { onclick: close }, "close")
       ])
-    );
+    ]);
   };
 
   var ModalModule = /*#__PURE__*/Object.freeze({

src/components/Modal.js

@@ -1,20 +1,32 @@
-import { $html, $if } from "sigpro";
+import { $html, $watch } from "sigpro";
 import { tt } from "../core/i18n.js";
 import { Button } from "./Button.js";
 
-/** MODAL */
+/** MODAL (Recommended Method: HTML <dialog>) */
 export const Modal = (props, children) => {
   const { title, buttons, open, ...rest } = props;
+  const dialogRef = { current: null };
+
+  $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 $if(open, () =>
-    $html("dialog", { 
+  return $html("dialog", { 
     ...rest,
-      class: "modal modal-open",
+    ref: dialogRef,
+    class: "modal",
     oncancel: close
   }, [
     $html("div", { class: "modal-box" }, [
@@ -27,10 +39,12 @@ export const Modal = (props, children) => {
         Button({ type: "button", onclick: close }, tt("close")()),
       ]),
     ]),
-      $html("div", { 
-        class: "modal-backdrop bg-black/20", 
-        onclick: close 
-      })
+    $html("form", { 
+      method: "dialog", 
+      class: "modal-backdrop",
+      onsubmit: close 
+    }, [
+      $html("button", { onclick: close }, "close")
     ])
-  );
+  ]);
 };