Add <Render> to Dialog

src/lib/components/dialog/Dialog.svelte

@@ -55,6 +55,17 @@
   import ForcePortalRootContext from "$lib/internal/ForcePortalRootContext.svelte";
   import Portal from "$lib/components/portal/Portal.svelte";
   import PortalGroup from "$lib/components/portal/PortalGroup.svelte";
+  import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
+  import { get_current_component } from "svelte/internal";
+  import type { SupportedAs } from "$lib/internal/elements";
+  import type { HTMLActionArray } from "$lib/hooks/use-actions";
+  import Render from "$lib/utils/Render.svelte";
+  const forwardEvents = forwardEventsBuilder(get_current_component(), [
+    "close",
+  ]);
+  export let as: SupportedAs = "div";
+  export let use: HTMLActionArray = [];
+
   export let open: Boolean | undefined = undefined;
   export let initialFocus: HTMLElement | null = null;
 
@@ -217,7 +228,8 @@
     }
   });
 
-  function handleClick(event: MouseEvent) {
+  function handleClick(e: CustomEvent) {
+    let event = e as any as MouseEvent;
     event.stopPropagation();
   }
 
@@ -227,6 +239,8 @@
     "aria-modal": dialogState === DialogStates.Open ? true : undefined,
     "aria-labelledby": titleId,
   };
+
+  $: slotProps = { open };
 </script>
 
 <svelte:window
@@ -253,14 +267,18 @@
         <PortalGroup target={internalDialogRef}>
           <ForcePortalRootContext force={false}>
             <DescriptionProvider name={"Dialog.Description"} let:describedby>
-              <div
+              <Render
                 {...{ ...$$restProps, ...propsWeControl }}
-                bind:this={internalDialogRef}
+                {as}
+                {slotProps}
+                use={[...use, forwardEvents]}
+                name={"Dialog"}
+                bind:el={internalDialogRef}
                 aria-describedby={describedby}
                 on:click={handleClick}
               >
-                <slot {open} />
+                <slot {...slotProps} />
-              </div>
+              </Render>
             </DescriptionProvider>
           </ForcePortalRootContext>
         </PortalGroup>

src/lib/components/dialog/DialogOverlay.svelte

@@ -1,20 +1,42 @@
 <script lang="ts">
   import { DialogStates, useDialogContext } from "./Dialog.svelte";
   import { useId } from "$lib/hooks/use-id";
+  import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
+  import { get_current_component } from "svelte/internal";
+  import type { SupportedAs } from "$lib/internal/elements";
+  import type { HTMLActionArray } from "$lib/hooks/use-actions";
+  import Render from "$lib/utils/Render.svelte";
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  export let as: SupportedAs = "div";
+  export let use: HTMLActionArray = [];
+
   let api = useDialogContext("DialogOverlay");
   let id = `headlessui-dialog-overlay-${useId()}`;
-  function handleClick(event: MouseEvent) {
+
+  function handleClick(e: CustomEvent) {
+    let event = e as any as MouseEvent;
     if (event.target !== event.currentTarget) return;
     event.preventDefault();
     event.stopPropagation();
     $api.close();
   }
+
   $: propsWeControl = {
     id,
     "aria-hidden": true,
   };
+
+  $: slotProps = { open: $api.dialogState === DialogStates.Open };
 </script>
 
-<div {...{ ...$$restProps, ...propsWeControl }} on:click={handleClick}>
+<Render
-  <slot open={$api.dialogState === DialogStates.Open} />
+  {...{ ...$$restProps, ...propsWeControl }}
-</div>
+  {as}
+  {slotProps}
+  use={[...use, forwardEvents]}
+  name={"DialogOverlay"}
+  on:click={handleClick}
+>
+  <slot {...slotProps} />
+</Render>

src/lib/components/dialog/DialogTitle.svelte

@@ -2,6 +2,15 @@
   import { DialogStates, useDialogContext } from "./Dialog.svelte";
   import { useId } from "$lib/hooks/use-id";
   import { onMount } from "svelte";
+  import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
+  import { get_current_component } from "svelte/internal";
+  import type { SupportedAs } from "$lib/internal/elements";
+  import type { HTMLActionArray } from "$lib/hooks/use-actions";
+  import Render from "$lib/utils/Render.svelte";
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+  export let as: SupportedAs = "h2";
+  export let use: HTMLActionArray = [];
+
   let api = useDialogContext("DialogTitle");
   let id = `headlessui-dialog-title-${useId()}`;
 
@@ -12,8 +21,16 @@
   $: propsWeControl = {
     id,
   };
+
+  $: slotProps = { open: $api.dialogState === DialogStates.Open };
 </script>
 
-<h2 {...{ ...$$restProps, ...propsWeControl }}>
+<Render
-  <slot open={$api.dialogState === DialogStates.Open} />
+  {...{ ...$$restProps, ...propsWeControl }}
-</h2>
+  {as}
+  {slotProps}
+  use={[...use, forwardEvents]}
+  name={"DialogTitle"}
+>
+  <slot {...slotProps} />
+</Render>