refactor(modal): change data-state to data-open and data-closed

Author: maiieul

packages/kit-headless/src/components/modal/modal.tsx

@@ -86,7 +86,8 @@ export const Modal = component$((props: ModalProps) => {
   return (
     <dialog
       {...props}
-      data-state={showSig.value ? 'open' : 'closed'}
+      data-open={showSig.value ? '' : undefined}
+      data-closed={!showSig.value ? '' : undefined}
       role={props.alert === true ? 'alertdialog' : 'dialog'}
       ref={modalRefSig}
       onClick$={(event) => closeOnBackdropClick$(event)}

packages/kit-styled/src/components/modal/modal.tsx

@@ -34,7 +34,7 @@ export const Modal = component$(() => {
 
   return (
     <QwikUIModal
-      class="bg-background text-foreground rounded-base data-[state=open]:appear data-[state=closed]:disappear backdrop:data-[state=open]:appear backdrop:data-[state=closed]:disappear max-w-sm p-6 shadow-md transition-all duration-300 backdrop:backdrop-blur-sm backdrop:transition-all backdrop:duration-300"
+      class="bg-background text-foreground rounded-base data-open:appear data-closed:disappear backdrop:data-open:appear backdrop:data-closed:disappear max-w-sm p-6 shadow-md transition-all duration-300 backdrop:backdrop-blur-sm backdrop:transition-all backdrop:duration-300"
       bind:show={showSig}
     >
       <Slot />