Docs Updated

src/components/Modal.js

@@ -1,6 +1,6 @@
 // components/Modal.js
 import { $html, $watch } from "sigpro";
-import { ui, val } from "../core/utils.js";
+import { ui } from "../core/utils.js";
 import { tt } from "../core/i18n.js";
 import { Button } from "./Button.js";
 
@@ -15,45 +15,50 @@ import { Button } from "./Button.js";
  */
 export const Modal = (props, children) => {
   const { class: className, title, buttons, open, ...rest } = props;
-  const dialogRef = { current: null };
+  let dialogElement = null;
 
-  $watch(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-
-    if (val(open)) {
-      if (!dialog.open) dialog.showModal();
+  const handleOpen = () => {
+    const isOpen = typeof open === "function" ? open() : open;
+    if (!dialogElement) return;
+    
+    if (isOpen) {
+      if (!dialogElement.open) dialogElement.showModal();
     } else {
-      if (dialog.open) dialog.close();
+      if (dialogElement.open) dialogElement.close();
     }
-  });
+  };
 
-  const close = (e) => {
-    if (e && e.preventDefault) e.preventDefault();
+  $watch(() => handleOpen());
+
+  const close = () => {
     if (typeof open === "function") open(false);
   };
 
   return $html("dialog", { 
     ...rest,
-    ref: dialogRef,
+    ref: (el) => {
+      dialogElement = el;
+      if (el) handleOpen();
+    },
     class: ui('modal', className),
-    oncancel: () => typeof open === "function" && open(false)
+    onclose: close,
+    oncancel: close
   }, [
     $html("div", { class: "modal-box" }, [
-      title ? $html("h3", { class: "text-lg font-bold mb-4" }, title) : null,
+      title ? $html("h3", { class: "text-lg font-bold mb-4" }, () => 
+        typeof title === "function" ? title() : title
+      ) : null,
       $html("div", { class: "py-2" }, [
         typeof children === "function" ? children() : children
       ]),
-      $html("div", { class: "modal-action flex gap-2" }, [
-        ...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
-        Button({ type: "button", onclick: close }, tt("close")()),
-      ]),
+      $html("div", { class: "modal-action" }, [
+        $html("form", { method: "dialog", class: "flex gap-2" }, [
+          ...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
+          Button({ type: "submit" }, tt("close")())
+        ])
+      ])
     ]),
-    $html("form", { 
-      method: "dialog", 
-      class: "modal-backdrop",
-      onsubmit: close 
-    }, [
+    $html("form", { method: "dialog", class: "modal-backdrop" }, [
       $html("button", {}, "close")
     ])
   ]);