Add <Render> usage to <Listbox>

src/lib/components/listbox/Listbox.svelte

@@ -61,6 +61,17 @@
   import { Readable, writable, Writable } from "svelte/store";
   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(), [
+    "change",
+  ]);
+  export let as: SupportedAs = "div";
+  export let use: HTMLActionArray = [];
+
   export let disabled = false;
   export let horizontal = false;
   export let value: StateDefinition["value"];
@@ -205,7 +216,16 @@
       $buttonRef?.focus({ preventScroll: true });
     }
   }
+  $: slot = { open: listboxState === ListboxStates.Open };
 </script>
 
 <svelte:window on:mousedown={handleMousedown} />
-<slot open={listboxState === ListboxStates.Open} />
+<Render
+  {...$$restProps}
+  {as}
+  {slot}
+  use={[...use, forwardEvents]}
+  name={"Listbox"}
+>
+  <slot {...slot} />
+</Render>

src/lib/components/listbox/ListboxButton.svelte

@@ -4,6 +4,15 @@
   import { useId } from "$lib/hooks/use-id";
   import { Keys } from "$lib/utils/keyboard";
   import { Focus } from "$lib/utils/calculate-active-index";
+  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";
+  import Render from "$lib/utils/Render.svelte";
+
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+  export let as: SupportedAs = "button";
+  export let use: HTMLActionArray = [];
 
   let api = useListboxContext("ListboxButton");
   let id = `headlessui-listbox-button-${useId()}`;
@@ -11,7 +20,8 @@
   let optionsRef = $api.optionsRef;
   let labelRef = $api.labelRef;
 
-  async function handleKeyDown(event: KeyboardEvent) {
+  async function handleKeyDown(e: CustomEvent) {
+    let event = e as any as KeyboardEvent;
     switch (event.key) {
       // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-13
       case Keys.Space:
@@ -34,7 +44,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
@@ -45,7 +56,8 @@
     }
   }
 
-  async function handleClick(event: MouseEvent) {
+  async function handleClick(e: CustomEvent) {
+    let event = e as any as MouseEvent;
     if ($api.disabled) return;
     if ($api.listboxState === ListboxStates.Open) {
       $api.closeListbox();
@@ -69,18 +81,24 @@
     "aria-labelledby": $labelRef ? [$labelRef?.id, id].join(" ") : undefined,
     disabled: $api.disabled === true ? true : undefined,
   };
+
+  $: slot = {
+    open: $api.listboxState === ListboxStates.Open,
+    disabled: $api.disabled,
+  };
 </script>
 
-<button
+<Render
   {...$$restProps}
   {...propsWeControl}
-  bind:this={$buttonRef}
+  {as}
+  {slot}
+  use={[...use, forwardEvents]}
+  name={"ListboxButton"}
+  bind:el={$buttonRef}
   on:click={handleClick}
   on:keydown={handleKeyDown}
   on:keyup={handleKeyUp}
 >
-  <slot
+  <slot {...slot} />
-    open={$api.listboxState === ListboxStates.Open}
+</Render>
-    disabled={$api.disabled}
-  />
-</button>

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 -->
+<Render
-<label {...$$restProps} {id} bind:this={$labelRef} on:click={handleClick}>
+  {...$$restProps}
-  <slot
+  {id}
-    open={$api.listboxState === ListboxStates.Open}
+  {as}
-    disabled={$api.disabled}
+  {slot}
-  />
+  use={[...use, forwardEvents]}
-</label>
+  name={"ListboxLabel"}
+  bind:el={$labelRef}
+  on:click={handleClick}
+>
+  <slot {...slot} />
+</Render>

src/lib/components/listbox/ListboxOption.svelte

@@ -3,6 +3,16 @@
   import { ListboxStates, useListboxContext } from "./Listbox.svelte";
   import { useId } from "$lib/hooks/use-id";
   import { Focus } from "$lib/utils/calculate-active-index";
+  import Render from "$lib/utils/Render.svelte";
+  import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
+  import type { SupportedAs } from "$lib/internal/elements";
+  import { get_current_component } from "svelte/internal";
+  import type { HTMLActionArray } from "$lib/hooks/use-actions";
+
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+  export let as: SupportedAs = "li";
+  export let use: HTMLActionArray = [];
+
   export let value: unknown;
   export let disabled = false;
   let api = useListboxContext("ListboxOption");
@@ -59,7 +69,8 @@
   }
   $: updateFocus($api.listboxState, selected, active);
 
-  async function handleClick(event: MouseEvent) {
+  async function handleClick(e: CustomEvent) {
+    let event = e as any as MouseEvent;
     if (disabled) return event.preventDefault();
     $api.select(value);
     $api.closeListbox();
@@ -92,17 +103,16 @@
     "aria-selected": selected === true ? selected : undefined,
   };
 
-  $: classStyle = $$props.class
+  $: slot = { active, selected, disabled };
-    ? typeof $$props.class === "function"
-      ? $$props.class({ active, selected, disabled })
-      : $$props.class
-    : "";
 </script>
 
-<li
+<Render
   {...$$restProps}
-  class={classStyle}
   {...propsWeControl}
+  {as}
+  {slot}
+  use={[...use, forwardEvents]}
+  name={"ListboxOption"}
   on:click={handleClick}
   on:focus={handleFocus}
   on:pointermove={handleMove}
@@ -110,5 +120,5 @@
   on:pointerleave={handleLeave}
   on:mouseleave={handleLeave}
 >
-  <slot {active} {selected} {disabled} />
+  <slot {...slot} />
-</li>
+</Render>

src/lib/components/listbox/ListboxOptions.svelte

@@ -6,6 +6,15 @@
   import { Keys } from "$lib/utils/keyboard";
   import { Focus } from "$lib/utils/calculate-active-index";
   import { State, useOpenClosed } from "$lib/internal/open-closed";
+  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 = "ul";
+  export let use: HTMLActionArray = [];
 
   let api = useListboxContext("ListboxOptions");
   let id = `headlessui-listbox-options-${useId()}`;
@@ -14,7 +23,8 @@
   let labelRef = $api.labelRef;
 
   let searchDebounce: ReturnType<typeof setTimeout> | null = null;
-  async function handleKeyDown(event: KeyboardEvent) {
+  async function handleKeyDown(e: CustomEvent) {
+    let event = e as any as KeyboardEvent;
     if (searchDebounce) clearTimeout(searchDebounce);
 
     switch (event.key) {
@@ -106,15 +116,21 @@
     usesOpenClosedState !== undefined
       ? $usesOpenClosedState === State.Open
       : $api.listboxState === ListboxStates.Open;
+
+  $: slot = { open: $api.listboxState === ListboxStates.Open };
 </script>
 
 {#if visible}
-  <ul
+  <Render
-    bind:this={$optionsRef}
-    on:keydown={handleKeyDown}
     {...$$restProps}
     {...propsWeControl}
+    {as}
+    {slot}
+    use={[...use, forwardEvents]}
+    name={"ListboxOptions"}
+    bind:el={$optionsRef}
+    on:keydown={handleKeyDown}
   >
-    <slot open={$api.listboxState === ListboxStates.Open} />
+    <slot {...slot} />
-  </ul>
+  </Render>
 {/if}