Move Disclosure to <Render>

src/lib/components/disclosure/DisclosurePanel.svelte

@@ -10,6 +10,16 @@
 <script lang="ts">
   import { useDisclosureContext, DisclosureStates } from "./Disclosure.svelte";
   import { State, useOpenClosed } from "$lib/internal/open-closed";
+  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 = [];
+
   const api = useDisclosureContext("DisclosureButton");
   $: id = $api.panelId;
   let openClosedState = useOpenClosed();
@@ -24,13 +34,22 @@
       : $api.disclosureState === DisclosureStates.Open;
 
   $: propsWeControl = { id };
+
+  $: slotProps = {
+    open: $api.disclosureState === DisclosureStates.Open,
+    close: $api.close,
+  };
 </script>
 
 {#if visible}
-  <div {...{ ...$$restProps, ...propsWeControl }} bind:this={$panelStore}>
-    <slot
-      open={$api.disclosureState === DisclosureStates.Open}
-      close={$api.close}
-    />
-  </div>
+  <Render
+    {...{ ...$$restProps, ...propsWeControl }}
+    {as}
+    {slotProps}
+    use={[...use, forwardEvents]}
+    name={"DisclosurePanel"}
+    bind:el={$panelStore}
+  >
+    <slot {...slotProps} />
+  </Render>
 {/if}