@pzerelles/headlessui-svelte 2.1.2-next.6 → 2.1.2-next.61

package/dist/description/Description.svelte.d.ts

@@ -1,31 +1,10 @@
-import type { ElementType, Props, PropsOf } from "../utils/types.js";
-declare let DEFAULT_DESCRIPTION_TAG: "p";
-export type DescriptionProps<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG> = Props<TTag>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, "as" | "children" | "refName" | "class"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
-        children?: import("../utils/types.js").Children<{}> | undefined;
-        ref?: HTMLElement;
-    } & (true extends (PropsOf<TTag> extends infer T_1 ? T_1 extends PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
-        class?: PropsOf<TTag>["class"] | ((bag: {}) => string) | undefined;
-    } : {});
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_DESCRIPTION_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_DESCRIPTION_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Description: $$IsomorphicComponent;
-type Description<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG> = InstanceType<typeof Description<TTag>>;
+import type { Props } from "../utils/types.js";
+declare const DEFAULT_DESCRIPTION_TAG: "p";
+export type DescriptionOwnProps = {
+    id?: string;
+    element?: HTMLElement;
+};
+export type DescriptionProps = Props<typeof DEFAULT_DESCRIPTION_TAG, {}, DescriptionOwnProps>;
+declare const Description: import("svelte").Component<DescriptionProps, {}, "element">;
+type Description = ReturnType<typeof Description>;
 export default Description;

package/dist/description/context.svelte.js

@@ -1,8 +1,8 @@
 import { getContext, setContext } from "svelte";
 export function useDescriptionContext() {
-    let context = getContext("DescriptionContext");
-    if (context === null) {
-        let err = new Error("You used a <Description /> component, but it is not inside a relevant parent.");
+    const context = getContext("DescriptionContext");
+    if (!context) {
+        const err = new Error("You used a <Description /> component, but it is not inside a relevant parent.");
         if (Error.captureStackTrace)
             Error.captureStackTrace(err, useDescriptionContext);
         throw err;
@@ -18,10 +18,19 @@ export function useDescribedBy() {
     };
 }
 export const useDescriptions = (options = {}) => {
-    const { slot, name, props, inherit } = $derived(options);
-    let descriptionIds = $state([]);
+    const { slot, name, props } = $derived(options);
+    const descriptionIds = $state([]);
+    const register = (value) => {
+        descriptionIds.push(value);
+        return () => {
+            const idx = descriptionIds.indexOf(value);
+            if (idx !== -1)
+                descriptionIds.splice(idx, 1);
+        };
+    };
     const value = $derived(descriptionIds.length > 0 ? descriptionIds.join(" ") : undefined);
     const context = {
+        register,
         get slot() {
             return slot;
         },
@@ -34,17 +43,6 @@ export const useDescriptions = (options = {}) => {
         get value() {
             return value;
         },
-        register(value) {
-            descriptionIds.push(value);
-            return () => {
-                const clone = descriptionIds.slice();
-                const idx = clone.indexOf(value);
-                if (idx !== -1)
-                    clone.splice(idx, 1);
-                descriptionIds = clone;
-                return descriptionIds;
-            };
-        },
     };
     setContext("DescriptionContext", context);
     return context;

package/dist/description/index.d.ts

@@ -1 +1 @@
-export { default as Description, type DescriptionProps } from "./Description.svelte";
+export { default as Description, type DescriptionProps, type DescriptionOwnProps } from "./Description.svelte";

package/dist/dialog/Dialog.svelte

@@ -1,13 +1,9 @@
 <script lang="ts" module>
-  import { MainTreeProvider } from "../hooks/use-root-containers.svelte.js"
-  import { useOpenClosed } from "../internal/open-closed.js"
+  import type { Props } from "../utils/types.js"
   import { RenderFeatures, type PropsForFeatures } from "../utils/render.js"
-  import type { ElementType, Props } from "../utils/types.js"
-  import { getContext, type Component, type Snippet } from "svelte"
-  import InternalDialog from "./InternalDialog.svelte"
-  import Transition from "../transition/Transition.svelte"
 
   export const DEFAULT_DIALOG_TAG = "div" as const
+
   export type DialogRenderPropArg = {
     open: boolean
   }
@@ -15,27 +11,28 @@
 
   export const DialogRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
 
-  export type DialogProps<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> = Props<
-    TTag,
-    DialogRenderPropArg,
-    DialogPropsWeControl,
-    PropsForFeatures<typeof DialogRenderFeatures> & {
-      id?: string
-      open?: boolean
-      onclose(value: boolean): void
-      initialFocus?: HTMLElement
-      role?: "dialog" | "alertdialog"
-      autofocus?: boolean
-      transition?: boolean
-      __demoMode?: boolean
-    }
-  >
+  export type DialogOwnProps = PropsForFeatures<typeof DialogRenderFeatures> & {
+    element?: HTMLElement
+    id?: string
+    open?: boolean
+    onclose(value: boolean): void
+    initialFocus?: HTMLElement
+    role?: "dialog" | "alertdialog"
+    autofocus?: boolean
+    transition?: boolean
+    __demoMode?: boolean
+  }
 
-  export type DialogChildren = Snippet<[DialogRenderPropArg]>
+  export type DialogProps = Props<typeof DEFAULT_DIALOG_TAG, DialogRenderPropArg, DialogOwnProps>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DIALOG_TAG">
-  let { ref = $bindable(), transition = false, open, ...rest }: { as?: TTag } & DialogProps<TTag> = $props()
+<script lang="ts">
+  import { useOpenClosed } from "../internal/open-closed.js"
+  import MainTreeProvider from "../internal/MainTreeProvider.svelte"
+  import Transition from "../transition/Transition.svelte"
+  import InternalDialog from "./InternalDialog.svelte"
+
+  let { element = $bindable(), transition = false, open, ...rest }: DialogProps = $props()
 
   // Validations
   const usesOpenClosedState = useOpenClosed()
@@ -67,20 +64,18 @@
       )
     }
   })
-
-  const DialogComponent = InternalDialog as Component<DialogProps<TTag>, any>
 </script>
 
 {#if (open !== undefined || transition) && !rest.static}
   <MainTreeProvider>
-    <Transition show={open} {transition} unmount={rest.unmount} {ref}>
-      {#snippet children(slot, props)}
-        <DialogComponent bind:ref {...props} {...rest} />
+    <Transition asChild show={open} {transition} unmount={rest.unmount} {element}>
+      {#snippet children({ props })}
+        <InternalDialog {...rest} {...props} bind:element />
       {/snippet}
     </Transition>
   </MainTreeProvider>
 {:else}
   <MainTreeProvider>
-    <DialogComponent bind:ref {open} {...rest} />
+    <InternalDialog bind:element {open} {...rest} />
   </MainTreeProvider>
 {/if}

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

@@ -1,13 +1,12 @@
+import type { Props } from "../utils/types.js";
 import { type PropsForFeatures } from "../utils/render.js";
-import type { ElementType, Props } from "../utils/types.js";
-import { type Snippet } from "svelte";
 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> & {
+export type DialogOwnProps = PropsForFeatures<typeof DialogRenderFeatures> & {
+    element?: HTMLElement;
     id?: string;
     open?: boolean;
     onclose(value: boolean): void;
@@ -16,45 +15,8 @@ export type DialogProps<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> =
     autofocus?: boolean;
     transition?: boolean;
     __demoMode?: boolean;
-}>;
-export type DialogChildren = Snippet<[DialogRenderPropArg]>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "autofocus" | "unmount" | "static" | "id" | "role" | "onclose" | "initialFocus" | DialogPropsWeControl | "open" | "transition" | "__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("../utils/types.js").Children<DialogRenderPropArg> | undefined;
-        ref?: HTMLElement;
-    } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
-        class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: DialogRenderPropArg) => string) | undefined;
-    } : {}) & {
-        static?: boolean | undefined;
-        unmount?: boolean | undefined;
-    } & {
-        id?: string;
-        open?: boolean;
-        onclose(value: boolean): void;
-        initialFocus?: HTMLElement;
-        role?: "dialog" | "alertdialog";
-        autofocus?: boolean;
-        transition?: boolean;
-        __demoMode?: boolean;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    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']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): 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>>;
+};
+export type DialogProps = Props<typeof DEFAULT_DIALOG_TAG, DialogRenderPropArg, DialogOwnProps>;
+declare const Dialog: import("svelte").Component<DialogProps, {}, "element">;
+type Dialog = ReturnType<typeof Dialog>;
 export default Dialog;

package/dist/dialog/DialogBackdrop.svelte

@@ -1,26 +1,23 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
   let DEFAULT_BACKDROP_TAG = "div" as const
-  type BackdropRenderPropArg = {
+  export type BackdropRenderPropArg = {
     open: boolean
   }
 
-  export type DialogBackdropProps<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = Props<
-    TTag,
-    BackdropRenderPropArg,
-    never,
-    { transition?: boolean }
-  >
+  export type DialogBackdropOwnProps = { transition?: boolean; element?: HTMLElement }
+
+  export type DialogBackdropProps = Props<typeof DEFAULT_BACKDROP_TAG, BackdropRenderPropArg, DialogBackdropOwnProps>
 </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,15 +29,15 @@
 </script>
 
 {#if transition}
-  <TransitionChild {unmount} {ref}>
-    {#snippet children(slot, props)}
+  <TransitionChild asChild {unmount} {element}>
+    {#snippet children({ props, ...slot })}
       <ElementOrComponent
         ourProps={{ ...ourProps, ...props }}
         {theirProps}
         slots={slot}
         defaultTag={DEFAULT_BACKDROP_TAG}
         name="DialogBackdrop"
-        bind:ref
+        bind:element
       />
     {/snippet}
   </TransitionChild>
@@ -51,6 +48,6 @@
     slots={slot}
     defaultTag={DEFAULT_BACKDROP_TAG}
     name="DialogBackdrop"
-    bind:ref
+    bind:element
   />
 {/if}

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

@@ -1,38 +1,13 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare let DEFAULT_BACKDROP_TAG: "div";
-type BackdropRenderPropArg = {
+export type BackdropRenderPropArg = {
     open: boolean;
 };
-export type DialogBackdropProps<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = Props<TTag, BackdropRenderPropArg, never, {
+export type DialogBackdropOwnProps = {
     transition?: boolean;
-}>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "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("../utils/types.js").Children<BackdropRenderPropArg> | undefined;
-        ref?: HTMLElement;
-    } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
-        class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: BackdropRenderPropArg) => string) | undefined;
-    } : {}) & {
-        transition?: boolean;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    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']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): 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>>;
+    element?: HTMLElement;
+};
+export type DialogBackdropProps = Props<typeof DEFAULT_BACKDROP_TAG, BackdropRenderPropArg, DialogBackdropOwnProps>;
+declare const DialogBackdrop: import("svelte").Component<DialogBackdropProps, {}, "element">;
+type DialogBackdrop = ReturnType<typeof DialogBackdrop>;
 export default DialogBackdrop;

package/dist/dialog/DialogPanel.svelte

@@ -1,40 +1,44 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
   let DEFAULT_PANEL_TAG = "div" as const
-  type PanelRenderPropArg = {
+  export type PanelRenderPropArg = {
     open: boolean
   }
 
-  export type DialogPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<
-    TTag,
-    PanelRenderPropArg,
-    never,
-    {
-      id?: string
-      transition?: boolean
-    }
-  >
+  export type DialogPanelOwnProps = {
+    element?: HTMLElement
+    id?: string
+    transition?: boolean
+  }
+
+  export type DialogPanelProps = Props<typeof DEFAULT_PANEL_TAG, PanelRenderPropArg, DialogPanelOwnProps>
 </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"
   import { mergeProps } from "../utils/render.js"
   import TransitionChild from "../transition/TransitionChild.svelte"
-  import { onMount } from "svelte"
 
   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)
 
+  $effect(() => {
+    _state.panelRef = element ?? null
+    return () => {
+      _state.panelRef = null
+    }
+  })
+
   const slot = $derived({ open: dialogState === DialogStates.Open } satisfies PanelRenderPropArg)
 
   // Prevent the click events inside the Dialog.Panel from bubbling through the React Tree which
@@ -52,18 +56,25 @@
 </script>
 
 {#if transition}
-  <TransitionChild {unmount} {ref}>
-    {#snippet children(slot, props)}
+  <TransitionChild asChild {unmount} {element}>
+    {#snippet children({ props, ...slot })}
       <ElementOrComponent
         ourProps={{ ...ourProps, ...props }}
         {theirProps}
         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,40 +1,14 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare let DEFAULT_PANEL_TAG: "div";
-type PanelRenderPropArg = {
+export type PanelRenderPropArg = {
     open: boolean;
 };
-export type DialogPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg, never, {
+export type DialogPanelOwnProps = {
+    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>, ("as" | "children" | "refName" | "class") | "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("../utils/types.js").Children<PanelRenderPropArg> | undefined;
-        ref?: HTMLElement;
-    } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
-        class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: PanelRenderPropArg) => string) | undefined;
-    } : {}) & {
-        id?: string;
-        transition?: boolean;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    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']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): 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>>;
+};
+export type DialogPanelProps = Props<typeof DEFAULT_PANEL_TAG, PanelRenderPropArg, DialogPanelOwnProps>;
+declare const DialogPanel: import("svelte").Component<DialogPanelProps, {}, "element">;
+type DialogPanel = ReturnType<typeof DialogPanel>;
 export default DialogPanel;

package/dist/dialog/DialogTitle.svelte

@@ -1,17 +1,19 @@
 <script lang="ts" module>
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
   let DEFAULT_TITLE_TAG = "h2" as const
-  type TitleRenderPropArg = {
+  export type TitleRenderPropArg = {
     open: boolean
   }
 
-  export type DialogTitleProps<TTag extends ElementType = typeof DEFAULT_TITLE_TAG> = Props<TTag, TitleRenderPropArg>
+  export type DialogTitleOwnProps = { id?: string; element?: HTMLElement }
+
+  export type DialogTitleProps = Props<typeof DEFAULT_TITLE_TAG, TitleRenderPropArg, DialogTitleOwnProps>
 
   //
 </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 +22,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 +43,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,34 +1,13 @@
-import type { ElementType, Props, PropsOf } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare let DEFAULT_TITLE_TAG: "h2";
-type TitleRenderPropArg = {
+export 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>, "as" | "children" | "refName" | "class"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
-        children?: import("../utils/types.js").Children<TitleRenderPropArg> | undefined;
-        ref?: HTMLElement;
-    } & (true extends (PropsOf<TTag> extends infer T_1 ? T_1 extends PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
-        class?: PropsOf<TTag>["class"] | ((bag: TitleRenderPropArg) => string) | undefined;
-    } : {});
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    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']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): 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 DialogTitleOwnProps = {
+    id?: string;
+    element?: HTMLElement;
+};
+export type DialogTitleProps = Props<typeof DEFAULT_TITLE_TAG, TitleRenderPropArg, DialogTitleOwnProps>;
+declare const DialogTitle: import("svelte").Component<DialogTitleProps, {}, "element">;
+type DialogTitle = ReturnType<typeof DialogTitle>;
 export default DialogTitle;