Add <Render> usage to <Listbox>

src/lib/components/listbox/ListboxLabel.svelte

@@ -1,6 +1,16 @@
 <script lang="ts">
   import { ListboxStates, useListboxContext } from "./Listbox.svelte";
   import { useId } from "$lib/hooks/use-id";
+  import Render from "$lib/utils/Render.svelte";
+  import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
+  import type { SupportedAs } from "$lib/internal/elements";
+  import type { HTMLActionArray } from "$lib/hooks/use-actions";
+  import { get_current_component } from "svelte/internal";
+
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+  export let as: SupportedAs = "label";
+  export let use: HTMLActionArray = [];
+
   let id = `headlessui-listbox-label-${useId()}`;
   let api = useListboxContext("ListboxLabel");
 
@@ -10,12 +20,22 @@
   function handleClick(): void {
     $buttonRef?.focus({ preventScroll: true });
   }
+
+  $: slot = {
+    open: $api.listboxState === ListboxStates.Open,
+    disabled: $api.disabled,
+  };
 </script>
 
-<!-- svelte-ignore a11y-label-has-associated-control -->
-<label {...$$restProps} {id} bind:this={$labelRef} on:click={handleClick}>
-  <slot
-    open={$api.listboxState === ListboxStates.Open}
-    disabled={$api.disabled}
-  />
-</label>
+<Render
+  {...$$restProps}
+  {id}
+  {as}
+  {slot}
+  use={[...use, forwardEvents]}
+  name={"ListboxLabel"}
+  bind:el={$labelRef}
+  on:click={handleClick}
+>
+  <slot {...slot} />
+</Render>