Type Listbox with $$Props

src/lib/components/listbox/Listbox.svelte

@@ -50,6 +50,14 @@
 
     return context;
   }
+  type TListboxProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {
+    disabled?: boolean;
+    horizontal?: boolean;
+    value?: StateDefinition["value"];
+  };
 </script>
 
 <script lang="ts">
@@ -66,24 +74,32 @@
   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",
-  ]);
+  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
+
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TListboxProps<typeof slotProps, TAsProp>;
+
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
-
   export let disabled = false;
   export let horizontal = false;
   export let value: StateDefinition["value"];
-  $: orientation = (
-    horizontal ? "horizontal" : "vertical"
-  ) as StateDefinition["orientation"];
+
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component(), [
+    "change",
+  ]);
 
   const dispatch = createEventDispatcher<{
     change: any;
   }>();
 
+  /***** Component *****/
+  $: orientation = (
+    horizontal ? "horizontal" : "vertical"
+  ) as StateDefinition["orientation"];
+
   let listboxState: StateDefinition["listboxState"] = ListboxStates.Closed;
   let labelRef: StateDefinition["labelRef"] = writable(null);
   let buttonRef: StateDefinition["buttonRef"] = writable(null);

src/lib/components/listbox/ListboxButton.svelte

@@ -1,3 +1,10 @@
+<script lang="ts" context="module">
+  type TListboxButtonProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {};
+</script>
+
 <script lang="ts">
   import { tick } from "svelte";
   import { ListboxStates, useListboxContext } from "./Listbox.svelte";
@@ -8,13 +15,20 @@
   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";
+  import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
   import { resolveButtonType } from "$lib/utils/resolve-button-type";
 
-  const forwardEvents = forwardEventsBuilder(get_current_component());
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TListboxButtonProps<typeof slotProps, TAsProp>;
+
   export let as: SupportedAs = "button";
   export let use: HTMLActionArray = [];
 
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   let api = useListboxContext("ListboxButton");
   let id = `headlessui-listbox-button-${useId()}`;
   let buttonRef = $api.buttonRef;

src/lib/components/listbox/ListboxLabel.svelte

@@ -1,16 +1,30 @@
+<script lang="ts" context="module">
+  type TListboxLabelProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {};
+</script>
+
 <script lang="ts">
   import { ListboxStates, useListboxContext } from "./Listbox.svelte";
   import { useId } from "$lib/hooks/use-id";
-  import Render from "$lib/utils/Render.svelte";
+  import Render, { type TPassThroughProps } 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());
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TListboxLabelProps<typeof slotProps, TAsProp>;
+
   export let as: SupportedAs = "label";
   export let use: HTMLActionArray = [];
 
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   let id = `headlessui-listbox-label-${useId()}`;
   let api = useListboxContext("ListboxLabel");
 

src/lib/components/listbox/ListboxOption.svelte

@@ -1,20 +1,37 @@
+<script lang="ts" context="module">
+  type TListboxOptionProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {
+    value: unknown;
+    disabled?: boolean;
+  };
+</script>
+
 <script lang="ts">
   import { onDestroy, onMount, tick } from "svelte";
   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 Render, { type TPassThroughProps } 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());
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TListboxOptionProps<typeof slotProps, TAsProp>;
+
   export let as: SupportedAs = "li";
   export let use: HTMLActionArray = [];
-
   export let value: unknown;
   export let disabled = false;
+
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   let api = useListboxContext("ListboxOption");
   let id = `headlessui-listbox-option-${useId()}`;
 

src/lib/components/listbox/ListboxOptions.svelte

@@ -1,3 +1,13 @@
+<script lang="ts" context="module">
+  type TListboxOptionsProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp> & {
+    unmount?: boolean;
+    static?: boolean;
+  };
+</script>
+
 <script lang="ts">
   import { tick } from "svelte";
   import { ListboxStates, useListboxContext } from "./Listbox.svelte";
@@ -6,16 +16,26 @@
   import { Keys } from "$lib/utils/keyboard";
   import { Focus } from "$lib/utils/calculate-active-index";
   import { State, useOpenClosed } from "$lib/internal/open-closed";
-  import Render, { Features } from "$lib/utils/Render.svelte";
+  import Render, {
+    Features,
+    type TPassThroughProps,
+  } 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());
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TListboxOptionsProps<typeof slotProps, TAsProp>;
+
   export let as: SupportedAs = "ul";
   export let use: HTMLActionArray = [];
 
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   let api = useListboxContext("ListboxOptions");
   let id = `headlessui-listbox-options-${useId()}`;
   let optionsRef = $api.optionsRef;

src/routes/listbox/_PeopleList.svelte

@@ -75,7 +75,6 @@
           >
             {#each people as name (name)}
               <ListboxOption
-                key={name}
                 value={name}
                 class={({ active }) => {
                   return classNames(

src/routes/listbox/listbox-with-pure-tailwind.svelte

@@ -74,7 +74,6 @@
             >
               {#each people as name (name)}
                 <ListboxOption
-                  key={name}
                   value={name}
                   class={({ active }) => {
                     return classNames(