@pzerelles/headlessui-svelte 2.1.2-next.32 → 2.1.2-next.33

package/dist/dialog/Dialog.svelte

@@ -1,8 +1,10 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
   import { RenderFeatures, type PropsForFeatures } from "../utils/render.js"
+  import type { SvelteHTMLElements } from "svelte/elements"
 
   export const DEFAULT_DIALOG_TAG = "div" as const
+
   export type DialogRenderPropArg = {
     open: boolean
   }
@@ -10,12 +12,11 @@
 
   export const DialogRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
 
-  export type DialogProps<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> = Props<
-    TTag,
+  export type DialogProps = Props<
+    typeof DEFAULT_DIALOG_TAG,
     DialogRenderPropArg,
-    DialogPropsWeControl,
     PropsForFeatures<typeof DialogRenderFeatures> & {
-      as?: TTag
+      element?: HTMLElement
       id?: string
       open?: boolean
       onclose(value: boolean): void
@@ -28,7 +29,7 @@
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DIALOG_TAG">
+<script lang="ts">
   import { useId } from "../hooks/use-id.js"
   import { useMainTreeNode, useRootContainers } from "../hooks/use-root-containers.svelte.js"
   import { clearOpenClosedContext, State, useOpenClosed } from "../internal/open-closed.js"
@@ -51,26 +52,14 @@
   import { useDescriptions } from "../description/context.svelte.js"
   import MainTreeProvider from "../internal/MainTreeProvider.svelte"
   import Transition from "../transition/Transition.svelte"
+  import { BROWSER } from "esm-env"
 
-  const internalId = useId()
-  let {
-    ref = $bindable(),
-    id = `headlessui-dialog-${internalId}`,
-    open: theirOpen,
-    onclose,
-    initialFocus,
-    role: theirRole = "dialog",
-    autofocus = true,
-    __demoMode = false,
-    unmount = false,
-    transition = false,
-    ...theirProps
-  }: { as?: TTag } & DialogProps<TTag> = $props()
+  let { element = $bindable(), transition = false, open: theirOpen, ...rest }: DialogProps = $props()
 
   // Validations
   const usesOpenClosedState = useOpenClosed()
   const hasOpen = $derived(theirOpen !== undefined || usesOpenClosedState)
-  const hasOnClose = $derived(theirProps.hasOwnProperty("onclose"))
+  const hasOnClose = $derived(rest.hasOwnProperty("onclose"))
 
   $effect(() => {
     if (!hasOpen && !hasOnClose) {
@@ -91,13 +80,25 @@
       )
     }
 
-    if (typeof theirProps.onclose !== "function") {
+    if (typeof rest.onclose !== "function") {
       throw new Error(
-        `You provided an \`onclose\` prop to the \`Dialog\`, but the value is not a function. Received: ${theirProps.onclose}`
+        `You provided an \`onclose\` prop to the \`Dialog\`, but the value is not a function. Received: ${rest.onclose}`
       )
     }
   })
 
+  const internalId = useId()
+  let {
+    id = `headlessui-dialog-${internalId}`,
+    onclose,
+    initialFocus,
+    role: theirRole = "dialog",
+    autofocus = true,
+    __demoMode = false,
+    unmount = false,
+    ...theirProps
+  } = $derived(rest)
+
   let didWarnOnRole = $state(false)
 
   const role = $derived.by(() => {
@@ -122,7 +123,7 @@
       : theirOpen
   )
 
-  const ownerDocument = $derived(getOwnerDocument(ref))
+  const ownerDocument = $derived(getOwnerDocument(element))
 
   const dialogState = $derived(open ? DialogStates.Open : DialogStates.Closed)
 
@@ -135,7 +136,8 @@
 
   const setTitleId = (id: string | null) => (_state.titleId = id)
 
-  const enabled = $derived(dialogState === DialogStates.Open)
+  const ready = BROWSER
+  const enabled = $derived(ready ? dialogState === DialogStates.Open : false)
   const nestedPortals = useNestedPortals()
   const { portals } = $derived(nestedPortals)
 
@@ -145,7 +147,7 @@
   // `<Dialog.Title>` because they cause the parent to re-render
   const defaultContainer: { readonly current: HTMLElement | undefined } = {
     get current() {
-      return _state.panelRef ?? ref
+      return _state.panelRef ?? element
     },
   }
 
@@ -184,7 +186,7 @@
         return [
           // Allow the headlessui-portal of the Dialog to be interactive. This
           // contains the current dialog and the necessary focus guard elements.
-          ref?.closest<HTMLElement>("[data-headlessui-portal]") ?? null,
+          element?.closest<HTMLElement>("[data-headlessui-portal]") ?? null,
         ]
       },
       get disallowed() {
@@ -260,7 +262,7 @@
       return enabled
     },
     get ref() {
-      return ref
+      return element
     },
     get ondisappear() {
       return close
@@ -331,11 +333,11 @@
 {#snippet internal(transitionProps?: Record<string, any>)}
   <ForcePortalRoot force={true}>
     <Portal>
-      <PortalGroup target={ref ?? null}>
+      <PortalGroup target={element ?? null}>
         <ForcePortalRoot force={false}>
           <FocusTrap
             {initialFocus}
-            initialFocusFallback={ref}
+            initialFocusFallback={element}
             containers={resolvedRootContainers}
             features={focusTrapFeatures}
           >
@@ -347,7 +349,7 @@
               features={DialogRenderFeatures}
               visible={dialogState === DialogStates.Open}
               name="Dialog"
-              bind:ref
+              bind:element
             />
           </FocusTrap>
         </ForcePortalRoot>
@@ -358,7 +360,7 @@
 
 {#if (open !== undefined || transition) && !theirProps.static}
   <MainTreeProvider>
-    <Transition show={open} {transition} unmount={theirProps.unmount} {ref}>
+    <Transition asChild show={open} {transition} unmount={rest.unmount} {element}>
       {#snippet children({ props })}
         {@render internal(props)}
       {/snippet}

package/dist/dialog/Dialog.svelte.d.ts

@@ -1,13 +1,12 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import { type PropsForFeatures } from "../utils/render.js";
 export declare const DEFAULT_DIALOG_TAG: "div";
 export type DialogRenderPropArg = {
     open: boolean;
 };
-type DialogPropsWeControl = "aria-describedby" | "aria-labelledby" | "aria-modal";
 export declare const DialogRenderFeatures: number;
-export type DialogProps<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> = Props<TTag, DialogRenderPropArg, DialogPropsWeControl, PropsForFeatures<typeof DialogRenderFeatures> & {
-    as?: TTag;
+export type DialogProps = Props<typeof DEFAULT_DIALOG_TAG, DialogRenderPropArg, PropsForFeatures<typeof DialogRenderFeatures> & {
+    element?: HTMLElement;
     id?: string;
     open?: boolean;
     onclose(value: boolean): void;
@@ -17,41 +16,5 @@ export type DialogProps<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> =
     transition?: boolean;
     __demoMode?: boolean;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "autofocus" | "unmount" | "static" | "id" | "role" | "onclose" | "initialFocus" | "transition" | DialogPropsWeControl | "open" | "__demoMode"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[DialogRenderPropArg & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: DialogRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        static?: boolean | undefined;
-        unmount?: boolean | undefined;
-    } & {
-        as?: TTag | undefined;
-        id?: string;
-        open?: boolean;
-        onclose(value: boolean): void;
-        initialFocus?: HTMLElement;
-        role?: "dialog" | "alertdialog";
-        autofocus?: boolean;
-        transition?: boolean;
-        __demoMode?: boolean;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Dialog: $$IsomorphicComponent;
-type Dialog<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> = InstanceType<typeof Dialog<TTag>>;
+declare const Dialog: import("svelte").Component<DialogProps, {}, "element">;
 export default Dialog;

package/dist/dialog/DialogBackdrop.svelte

@@ -1,26 +1,26 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
+  import type { SvelteHTMLElements } from "svelte/elements"
 
   let DEFAULT_BACKDROP_TAG = "div" as const
   type BackdropRenderPropArg = {
     open: boolean
   }
 
-  export type DialogBackdropProps<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = Props<
-    TTag,
+  export type DialogBackdropProps = Props<
+    typeof DEFAULT_BACKDROP_TAG,
     BackdropRenderPropArg,
-    never,
-    { transition?: boolean }
+    { transition?: boolean; element?: HTMLElement }
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG">
+<script lang="ts">
   import { DialogStates, useDialogContext } from "./context.svelte.js"
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
   import { mergeProps } from "../utils/render.js"
   import TransitionChild from "../transition/TransitionChild.svelte"
 
-  let { ref = $bindable(), transition = false, ...theirProps }: { as?: TTag } & DialogBackdropProps<TTag> = $props()
+  let { element = $bindable(), transition = false, ...theirProps }: DialogBackdropProps = $props()
   const _state = useDialogContext("Dialog.Panel")
   const { dialogState, unmount } = $derived(_state)
 
@@ -32,7 +32,7 @@
 </script>
 
 {#if transition}
-  <TransitionChild {unmount} {ref}>
+  <TransitionChild asChild {unmount} {element}>
     {#snippet children({ props, ...slot })}
       <ElementOrComponent
         ourProps={{ ...ourProps, ...props }}
@@ -40,7 +40,7 @@
         slots={slot}
         defaultTag={DEFAULT_BACKDROP_TAG}
         name="DialogBackdrop"
-        bind:ref
+        bind:element
       />
     {/snippet}
   </TransitionChild>
@@ -51,6 +51,6 @@
     slots={slot}
     defaultTag={DEFAULT_BACKDROP_TAG}
     name="DialogBackdrop"
-    bind:ref
+    bind:element
   />
 {/if}

package/dist/dialog/DialogBackdrop.svelte.d.ts

@@ -1,35 +1,11 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare let DEFAULT_BACKDROP_TAG: "div";
 type BackdropRenderPropArg = {
     open: boolean;
 };
-export type DialogBackdropProps<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = Props<TTag, BackdropRenderPropArg, never, {
+export type DialogBackdropProps = Props<typeof DEFAULT_BACKDROP_TAG, BackdropRenderPropArg, {
     transition?: boolean;
+    element?: HTMLElement;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "transition"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[BackdropRenderPropArg & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: BackdropRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        transition?: boolean;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const DialogBackdrop: $$IsomorphicComponent;
-type DialogBackdrop<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = InstanceType<typeof DialogBackdrop<TTag>>;
+declare const DialogBackdrop: import("svelte").Component<DialogBackdropProps, {}, "element">;
 export default DialogBackdrop;

package/dist/dialog/DialogPanel.svelte

@@ -1,23 +1,24 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
+  import type { SvelteHTMLElements } from "svelte/elements"
 
   let DEFAULT_PANEL_TAG = "div" as const
   type PanelRenderPropArg = {
     open: boolean
   }
 
-  export type DialogPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<
-    TTag,
+  export type DialogPanelProps = Props<
+    typeof DEFAULT_PANEL_TAG,
     PanelRenderPropArg,
-    never,
     {
+      element?: HTMLElement
       id?: string
       transition?: boolean
     }
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANEL_TAG">
+<script lang="ts">
   import { useId } from "../hooks/use-id.js"
   import { DialogStates, useDialogContext } from "./context.svelte.js"
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
@@ -26,11 +27,11 @@
 
   let internalId = useId()
   let {
-    ref = $bindable(),
+    element = $bindable(),
     id = `headlessui-dialog-panel-${internalId}`,
     transition = false,
     ...theirProps
-  }: { as?: TTag } & DialogPanelProps<TTag> = $props()
+  }: DialogPanelProps = $props()
   const _state = useDialogContext("Dialog.Panel")
   const { dialogState, unmount } = $derived(_state)
 
@@ -51,7 +52,7 @@
 </script>
 
 {#if transition}
-  <TransitionChild {unmount} {ref}>
+  <TransitionChild asChild {unmount} {element}>
     {#snippet children({ props, ...slot })}
       <ElementOrComponent
         ourProps={{ ...ourProps, ...props }}
@@ -59,10 +60,17 @@
         slots={slot}
         defaultTag={DEFAULT_PANEL_TAG}
         name="DialogPanel"
-        bind:ref
+        bind:element
       />
     {/snippet}
   </TransitionChild>
 {:else}
-  <ElementOrComponent {ourProps} {theirProps} slots={slot} defaultTag={DEFAULT_PANEL_TAG} name="DialogPanel" bind:ref />
+  <ElementOrComponent
+    {ourProps}
+    {theirProps}
+    slots={slot}
+    defaultTag={DEFAULT_PANEL_TAG}
+    name="DialogPanel"
+    bind:element
+  />
 {/if}

package/dist/dialog/DialogPanel.svelte.d.ts

@@ -1,37 +1,12 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare let DEFAULT_PANEL_TAG: "div";
 type PanelRenderPropArg = {
     open: boolean;
 };
-export type DialogPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg, never, {
+export type DialogPanelProps = Props<typeof DEFAULT_PANEL_TAG, PanelRenderPropArg, {
+    element?: HTMLElement;
     id?: string;
     transition?: boolean;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "id" | "transition"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[PanelRenderPropArg & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: PanelRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        id?: string;
-        transition?: boolean;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const DialogPanel: $$IsomorphicComponent;
-type DialogPanel<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = InstanceType<typeof DialogPanel<TTag>>;
+declare const DialogPanel: import("svelte").Component<DialogPanelProps, {}, "element">;
 export default DialogPanel;

package/dist/dialog/DialogTitle.svelte

@@ -1,17 +1,22 @@
 <script lang="ts" module>
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
+  import type { SvelteHTMLElements } from "svelte/elements"
 
   let DEFAULT_TITLE_TAG = "h2" as const
   type TitleRenderPropArg = {
     open: boolean
   }
 
-  export type DialogTitleProps<TTag extends ElementType = typeof DEFAULT_TITLE_TAG> = Props<TTag, TitleRenderPropArg>
+  export type DialogTitleProps = Props<
+    typeof DEFAULT_TITLE_TAG,
+    TitleRenderPropArg,
+    { id?: string; element?: HTMLElement }
+  >
 
   //
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TITLE_TAG">
+<script lang="ts">
   import { useId } from "../hooks/use-id.js"
   import { DialogStates, useDialogContext } from "./context.svelte.js"
   import { onMount } from "svelte"
@@ -20,10 +25,10 @@
 
   const internalId = useId()
   let {
-    ref = $bindable(),
-    id = `headlessui-dialog-title-${internalId}` as PropsOf<TTag>[string],
+    element = $bindable(),
+    id = `headlessui-dialog-title-${internalId}`,
     ...theirProps
-  }: { as?: TTag } & DialogTitleProps<TTag> = $props()
+  }: DialogTitleProps = $props()
   const _state = useDialogContext("Dialog.Panel")
   const { dialogState, setTitleId } = $derived(_state)
 
@@ -41,4 +46,11 @@
   )
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} slots={slot} defaultTag={DEFAULT_TITLE_TAG} name="DialogTitle" bind:ref />
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  slots={slot}
+  defaultTag={DEFAULT_TITLE_TAG}
+  name="DialogTitle"
+  bind:element
+/>

package/dist/dialog/DialogTitle.svelte.d.ts

@@ -1,31 +1,11 @@
-import type { ElementType, Props, PropsOf } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare let DEFAULT_TITLE_TAG: "h2";
 type TitleRenderPropArg = {
     open: boolean;
 };
-export type DialogTitleProps<TTag extends ElementType = typeof DEFAULT_TITLE_TAG> = Props<TTag, TitleRenderPropArg>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_TITLE_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, "slot" | "as" | "children" | "class" | "ref"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[TitleRenderPropArg & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: TitleRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const DialogTitle: $$IsomorphicComponent;
-type DialogTitle<TTag extends ElementType = typeof DEFAULT_TITLE_TAG> = InstanceType<typeof DialogTitle<TTag>>;
+export type DialogTitleProps = Props<typeof DEFAULT_TITLE_TAG, TitleRenderPropArg, {
+    id?: string;
+    element?: HTMLElement;
+}>;
+declare const DialogTitle: import("svelte").Component<DialogTitleProps, {}, "element">;
 export default DialogTitle;

package/dist/field/Field.svelte

@@ -1,22 +1,21 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
   let DEFAULT_FIELD_TAG = "div" as const
 
   type FieldRenderPropArg = {}
-  type FieldPropsWeControl = never
 
-  export type FieldProps<TTag extends ElementType = typeof DEFAULT_FIELD_TAG> = Props<
-    TTag,
+  export type FieldProps = Props<
+    typeof DEFAULT_FIELD_TAG,
     FieldRenderPropArg,
-    FieldPropsWeControl,
     {
+      element?: HTMLElement
       disabled?: boolean
     }
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_FIELD_TAG">
+<script lang="ts">
   import { provideDisabled } from "../hooks/use-disabled.js"
   import { createIdContext } from "../utils/id.js"
   import { nanoid } from "nanoid"
@@ -25,12 +24,7 @@
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
   import FormFieldsProvider from "../internal/FormFieldsProvider.svelte"
 
-  let {
-    ref = $bindable(),
-    disabled: ownDisabled = false,
-    children,
-    ...theirProps
-  }: { as?: TTag } & FieldProps<TTag> = $props()
+  let { element = $bindable(), disabled: ownDisabled = false, children, ...theirProps }: FieldProps = $props()
 
   const inputId = `headlessui-control-${nanoid(8)}`
   createIdContext(inputId)
@@ -49,9 +43,9 @@
   })
 </script>
 
-{#snippet wrapper(args: Parameters<Exclude<typeof children, undefined>>[0])}
+{#snippet wrapper(args: { props: Record<string, any> })}
   <FormFieldsProvider>
-    {#if children}{@render children(args)}{/if}
+    {@render children?.(args)}
   </FormFieldsProvider>
 {/snippet}
 
@@ -61,5 +55,5 @@
   {slot}
   defaultTag={DEFAULT_FIELD_TAG}
   name="Field"
-  bind:ref
+  bind:element
 />

package/dist/field/Field.svelte.d.ts

@@ -1,34 +1,9 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare let DEFAULT_FIELD_TAG: "div";
 type FieldRenderPropArg = {};
-type FieldPropsWeControl = never;
-export type FieldProps<TTag extends ElementType = typeof DEFAULT_FIELD_TAG> = Props<TTag, FieldRenderPropArg, FieldPropsWeControl, {
+export type FieldProps = Props<typeof DEFAULT_FIELD_TAG, FieldRenderPropArg, {
+    element?: HTMLElement;
     disabled?: boolean;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_FIELD_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "disabled"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[{
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: FieldRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        disabled?: boolean;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_FIELD_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_FIELD_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Field: $$IsomorphicComponent;
-type Field<TTag extends ElementType = typeof DEFAULT_FIELD_TAG> = InstanceType<typeof Field<TTag>>;
+declare const Field: import("svelte").Component<FieldProps, {}, "element">;
 export default Field;