Improve TypeScript support + JSDoc

src/lib/components/dialog/Dialog.svelte

@@ -37,6 +37,20 @@
     }
     return context;
   }
+
+  type TDialogProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp, "div"> & {
+    /** Whether the `Dialog` is open */
+    open?: boolean;
+    /** The element that should receive focus when the Dialog is first opened */
+    initialFocus?: HTMLElement | null;
+    /** Whether the element should ignore the internally managed open/closed state */
+    static?: boolean;
+    /** Whether the element should be unmounted, instead of just hidden, based on the open/closed state	*/
+    unmount?: boolean;
+  };
 </script>
 
 <script lang="ts">
@@ -60,20 +74,27 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render, { Features } from "$lib/utils/Render.svelte";
-  const forwardEvents = forwardEventsBuilder(get_current_component(), [
-    "close",
-  ]);
+  import Render from "$lib/utils/Render.svelte";
+  import { Features, type TPassThroughProps } from "$lib/types";
+
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TDialogProps<typeof slotProps, TAsProp>;
+
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
-
-  export let open: Boolean | undefined = undefined;
+  export let open: boolean | undefined = undefined;
   export let initialFocus: HTMLElement | null = null;
 
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component(), [
+    "close",
+  ]);
   const dispatch = createEventDispatcher<{
     close: boolean;
   }>();
 
+  /***** Component *****/
   let containers: Set<HTMLElement> = new Set();
   let openClosedState = useOpenClosed();
 

src/lib/components/dialog/DialogOverlay.svelte

@@ -1,3 +1,10 @@
+<script lang="ts" context="module">
+  type TDialogOverlayProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp, "div"> & {};
+</script>
+
 <script lang="ts">
   import { DialogStates, useDialogContext } from "./Dialog.svelte";
   import { useId } from "$lib/hooks/use-id";
@@ -6,11 +13,20 @@
   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());
+  import type { TPassThroughProps } from "$lib/types";
+
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TDialogOverlayProps<typeof slotProps, TAsProp>;
 
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
 
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
+
   let api = useDialogContext("DialogOverlay");
   let id = `headlessui-dialog-overlay-${useId()}`;
 

src/lib/components/dialog/DialogTitle.svelte

@@ -1,3 +1,10 @@
+<script lang="ts" context="module">
+  type TDialogTitleProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp, "h2"> & {};
+</script>
+
 <script lang="ts">
   import { DialogStates, useDialogContext } from "./Dialog.svelte";
   import { useId } from "$lib/hooks/use-id";
@@ -7,10 +14,19 @@
   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());
+  import type { TPassThroughProps } from "$lib/types";
+
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TDialogTitleProps<typeof slotProps, TAsProp>;
+
   export let as: SupportedAs = "h2";
   export let use: HTMLActionArray = [];
 
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   let api = useDialogContext("DialogTitle");
   let id = `headlessui-dialog-title-${useId()}`;
 

src/lib/components/disclosure/Disclosure.svelte

@@ -40,6 +40,14 @@
 
     return context;
   }
+
+  type TDisclosureProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp, "div"> & {
+    /** Whether the `Disclosure` should be open by default */
+    defaultOpen?: boolean;
+  };
 </script>
 
 <script lang="ts">
@@ -51,12 +59,20 @@
   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());
+  import type { TPassThroughProps } from "$lib/types";
+
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TDisclosureProps<typeof slotProps, TAsProp>;
 
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
-
   export let defaultOpen = false;
+
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   let buttonId = `headlessui-disclosure-button-${useId()}`;
   let panelId = `headlessui-disclosure-panel-${useId()}`;
 

src/lib/components/disclosure/DisclosureButton.svelte

@@ -1,3 +1,12 @@
+<script lang="ts" context="module">
+  type TDisclosureButtonProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp, "button"> & {
+    disabled?: boolean;
+  };
+</script>
+
 <script lang="ts">
   import { useDisclosureContext, DisclosureStates } from "./Disclosure.svelte";
   import { usePanelContext } from "./DisclosurePanel.svelte";
@@ -9,12 +18,20 @@
   import Render from "$lib/utils/Render.svelte";
   import { writable } from "svelte/store";
   import { resolveButtonType } from "$lib/utils/resolve-button-type";
-  const forwardEvents = forwardEventsBuilder(get_current_component());
+  import type { TPassThroughProps } from "$lib/types";
+
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TDisclosureButtonProps<typeof slotProps, TAsProp>;
 
   export let as: SupportedAs = "button";
   export let use: HTMLActionArray = [];
-
   export let disabled = false;
+
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   const api = useDisclosureContext("DisclosureButton");
   const panelContext = usePanelContext();
 

src/lib/components/disclosure/DisclosurePanel.svelte

@@ -5,6 +5,15 @@
   export function usePanelContext(): string | undefined {
     return getContext(DISCLOSURE_PANEL_CONTEXT_NAME);
   }
+  type TDisclosurePanelProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp, "div"> & {
+    /** Whether the element should ignore the internally managed open/closed state */
+    static?: boolean;
+    /** Whether the element should be unmounted, instead of just hidden, based on the open/closed state	*/
+    unmount?: boolean;
+  };
 </script>
 
 <script lang="ts">
@@ -14,12 +23,20 @@
   import { get_current_component } from "svelte/internal";
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
-  import Render, { Features } from "$lib/utils/Render.svelte";
-  const forwardEvents = forwardEventsBuilder(get_current_component());
+  import Render from "$lib/utils/Render.svelte";
+  import { Features, type TPassThroughProps } from "$lib/types";
+
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TDisclosurePanelProps<typeof slotProps, TAsProp>;
 
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
 
+  /***** Events *****/
+  const forwardEvents = forwardEventsBuilder(get_current_component());
+
+  /***** Component *****/
   const api = useDisclosureContext("DisclosurePanel");
   let openClosedState = useOpenClosed();
 

src/lib/components/listbox/Listbox.svelte

@@ -50,6 +50,18 @@
 
     return context;
   }
+
+  type TListboxProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp, "div"> & {
+    /** Whether the entire `Listbox` and its children should be disabled */
+    disabled?: boolean;
+    /** Whether the entire `Listbox` should be oriented horizontally instead of vertically */
+    horizontal?: boolean;
+    /** The selected value */
+    value?: StateDefinition["value"];
+  };
 </script>
 
 <script lang="ts">
@@ -67,23 +79,32 @@
   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 type { TPassThroughProps } from "$lib/types";
+
+  /***** 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, "button"> & {};
+</script>
+
 <script lang="ts">
   import { tick } from "svelte";
   import { ListboxStates, useListboxContext } from "./Listbox.svelte";
@@ -10,11 +17,19 @@
   import { get_current_component } from "svelte/internal";
   import Render from "$lib/utils/Render.svelte";
   import { resolveButtonType } from "$lib/utils/resolve-button-type";
+  import type { TPassThroughProps } from "$lib/types";
+
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TListboxButtonProps<typeof slotProps, TAsProp>;
 
-  const forwardEvents = forwardEventsBuilder(get_current_component());
   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,3 +1,10 @@
+<script lang="ts" context="module">
+  type TListboxLabelProps<
+    TSlotProps extends {},
+    TAsProp extends SupportedAs
+  > = TPassThroughProps<TSlotProps, TAsProp, "label"> & {};
+</script>
+
 <script lang="ts">
   import { ListboxStates, useListboxContext } from "./Listbox.svelte";
   import { useId } from "$lib/hooks/use-id";
@@ -6,11 +13,19 @@
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
   import { get_current_component } from "svelte/internal";
+  import type { TPassThroughProps } from "$lib/types";
+
+  /***** Props *****/
+  type TAsProp = $$Generic<SupportedAs>;
+  type $$Props = TListboxLabelProps<typeof slotProps, TAsProp>;
 
-  const forwardEvents = forwardEventsBuilder(get_current_component());
   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");