Move Disclosure to <Render>

src/lib/components/disclosure/Disclosure.svelte

@@ -45,6 +45,16 @@
   import { useId } from "$lib/hooks/use-id";
   import { match } from "$lib/utils/match";
   import { State, useOpenClosedProvider } 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 = [];
+
   export let defaultOpen = false;
   let buttonId = `headlessui-disclosure-button-${useId()}`;
   let panelId = `headlessui-disclosure-panel-${useId()}`;
@@ -107,8 +117,19 @@
   useOpenClosedProvider(openClosedState);
 
   $: $openClosedState = computeOpenClosedState(disclosureState);
+
+  $: slotProps = {
+    open: disclosureState === DisclosureStates.Open,
+    close: $api.close,
+  };
 </script>
 
-<div {...$$restProps}>
-  <slot open={disclosureState === DisclosureStates.Open} close={$api.close} />
-</div>
+<Render
+  {...$$restProps}
+  {as}
+  {slotProps}
+  use={[...use, forwardEvents]}
+  name={"Disclosure"}
+>
+  <slot {...slotProps} />
+</Render>

src/lib/components/disclosure/DisclosureButton.svelte

@@ -3,6 +3,16 @@
   import { usePanelContext } from "./DisclosurePanel.svelte";
   import { useId } from "$lib/hooks/use-id";
   import { Keys } from "$lib/utils/keyboard";
+  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 = "button";
+  export let use: HTMLActionArray = [];
+
   export let disabled = false;
   const api = useDisclosureContext("DisclosureButton");
   const panelContext = usePanelContext();
@@ -25,8 +35,9 @@
     }
   }
 
-  function handleKeyDown(event: KeyboardEvent) {
+  function handleKeyDown(e: CustomEvent) {
     if (disabled) return;
+    let event = e as any as KeyboardEvent;
 
     if (isWithinPanel) {
       switch (event.key) {
@@ -50,7 +61,8 @@
     }
   }
 
-  function handleKeyUp(event: KeyboardEvent) {
+  function handleKeyUp(e: CustomEvent) {
+    let event = e as any as KeyboardEvent;
     switch (event.key) {
       case Keys.Space:
         // Required for firefox, event.preventDefault() in handleKeyDown for
@@ -71,30 +83,37 @@
         "aria-controls": $panelStore ? $api.panelId : undefined,
         disabled: disabled ? true : undefined,
       };
+
+  $: slotProps = {
+    open: $api.disclosureState === DisclosureStates.Open,
+    close: $api.close,
+  };
 </script>
 
 {#if isWithinPanel}
-  <button
+  <Render
     {...{ ...$$restProps, ...propsWeControl }}
+    {as}
+    {slotProps}
+    use={[...use, forwardEvents]}
+    name={"DisclosureButton"}
     on:click={handleClick}
     on:keydown={handleKeyDown}
   >
-    <slot
-      open={$api.disclosureState === DisclosureStates.Open}
-      close={$api.close}
-    />
-  </button>
+    <slot {...slotProps} />
+  </Render>
 {:else}
-  <button
+  <Render
     {...{ ...$$restProps, ...propsWeControl }}
-    bind:this={$buttonStore}
+    {as}
+    {slotProps}
+    use={[...use, forwardEvents]}
+    name={"DisclosureButton"}
+    bind:el={$buttonStore}
     on:click={handleClick}
     on:keydown={handleKeyDown}
     on:keyup={handleKeyUp}
   >
-    <slot
-      open={$api.disclosureState === DisclosureStates.Open}
-      close={$api.close}
-    />
-  </button>
+    <slot {...slotProps} />
+  </Render>
 {/if}

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}