docs: clarify event-driven action examples

README.md

@@ -79,16 +79,30 @@ const DialogMolecule = molecule<DialogProps>((props) => {
   const isOpen = toSignal(props, "open");
   const isDisabled = computed(() => props.disabled ?? false);
 
-  const requestOpenChange = async (next: boolean) => {
+  const emitOpenChange = async (next: boolean) => {
     if (isDisabled.value || isOpen.value === next) {
       return;
     }
     await send("update:open", next);
   };
 
+  const open = () => {
+    return emitOpenChange(true);
+  };
+
+  const close = () => {
+    return emitOpenChange(false);
+  };
+
+  const toggle = () => {
+    return emitOpenChange(!isOpen.value);
+  };
+
   return {
     on,
-    requestOpenChange,
+    open,
+    close,
+    toggle,
   };
 });
 
@@ -104,7 +118,9 @@ const DialogControllerMolecule = molecule(() => {
 
   return {
     isOpen: readonly(isOpen),
-    requestOpenChange: dialog.requestOpenChange,
+    open: dialog.open,
+    close: dialog.close,
+    toggle: dialog.toggle,
   };
 });
 
@@ -113,7 +129,7 @@ export function DialogButton() {
   const isOpen = useSignal(dialog.isOpen);
 
   return (
-    <button onClick={() => dialog.requestOpenChange(!isOpen)}>
+    <button onClick={dialog.toggle}>
       {isOpen ? "Close" : "Open"}
     </button>
   );