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

package/dist/button/Button.svelte

@@ -1,22 +1,21 @@
 <script lang="ts" module>
-  import type { Props, ElementType } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
   const DEFAULT_BUTTON_TAG = "button" as const
 
-  type ButtonRenderPropArg = {
+  export type ButtonRenderPropArg = {
     disabled: boolean
     hover: boolean
     focus: boolean
     active: boolean
     autofocus: boolean
   }
-  type ButtonPropsWeControl = never
 
-  export type ButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<
-    TTag,
+  export type ButtonProps = Props<
+    typeof DEFAULT_BUTTON_TAG,
     ButtonRenderPropArg,
-    ButtonPropsWeControl,
     {
+      element?: HTMLElement
       disabled?: boolean
       autofocus?: boolean
       type?: "button" | "submit" | "reset"
@@ -24,7 +23,7 @@
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">
+<script lang="ts">
   import { useActivePress } from "../hooks/use-active-press.svelte.js"
   import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
   import { useDisabled } from "../hooks/use-disabled.js"
@@ -35,12 +34,12 @@
   const providedDisabled = useDisabled()
 
   let {
-    ref = $bindable(),
+    element = $bindable(),
     disabled: ownDisabled = false,
     autofocus = false,
     type = "button",
     ...theirProps
-  }: { as?: TTag } & ButtonProps<TTag> = $props()
+  }: ButtonProps = $props()
 
   const disabled = $derived(providedDisabled.current || ownDisabled)
 
@@ -88,4 +87,4 @@
   )
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="Button" bind:ref />
+<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="Button" bind:element />

package/dist/button/Button.svelte.d.ts

@@ -1,44 +1,17 @@
-import type { Props, ElementType } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_BUTTON_TAG: "button";
-type ButtonRenderPropArg = {
+export type ButtonRenderPropArg = {
     disabled: boolean;
     hover: boolean;
     focus: boolean;
     active: boolean;
     autofocus: boolean;
 };
-type ButtonPropsWeControl = never;
-export type ButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, {
+export type ButtonProps = Props<typeof DEFAULT_BUTTON_TAG, ButtonRenderPropArg, {
+    element?: HTMLElement;
     disabled?: boolean;
     autofocus?: boolean;
     type?: "button" | "submit" | "reset";
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "disabled" | "autofocus" | "type"> 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<[ButtonRenderPropArg & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: ButtonRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        disabled?: boolean;
-        autofocus?: boolean;
-        type?: "button" | "submit" | "reset";
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_BUTTON_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_BUTTON_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Button: $$IsomorphicComponent;
-type Button<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = InstanceType<typeof Button<TTag>>;
+declare const Button: import("svelte").Component<ButtonProps, {}, "element">;
 export default Button;

package/dist/button/index.d.ts

@@ -1 +1 @@
-export { default as Button, type ButtonProps } from "./Button.svelte";
+export { default as Button, type ButtonProps, type ButtonRenderPropArg as ButtonSlot } from "./Button.svelte";

package/dist/checkbox/Checkbox.svelte

@@ -1,8 +1,9 @@
 <script lang="ts" module>
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
-  let DEFAULT_CHECKBOX_TAG = "span" as const
-  type CheckboxRenderPropArg = {
+  const DEFAULT_CHECKBOX_TAG = "span" as const
+
+  export type CheckboxRenderPropArg = {
     checked: boolean
     changing: boolean
     focus: boolean
@@ -12,6 +13,7 @@
     disabled: boolean
     indeterminate: boolean
   }
+
   type CheckboxPropsWeControl =
     | "aria-checked"
     | "aria-describedby"
@@ -20,15 +22,15 @@
     | "role"
     | "tabIndex"
 
-  export type CheckboxProps<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG, TType = string> = Props<
-    TTag,
+  export type CheckboxProps<TType = string> = Props<
+    typeof DEFAULT_CHECKBOX_TAG,
     CheckboxRenderPropArg,
-    CheckboxPropsWeControl,
     {
+      element?: HTMLElement
+      id?: string
       value?: TType
       disabled?: boolean
       indeterminate?: boolean
-
       checked?: boolean
       defaultChecked?: boolean
       autofocus?: boolean
@@ -39,7 +41,7 @@
   >
 </script>
 
-<script lang="ts" generics="TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG">
+<script lang="ts" generics="TType">
   import { tick } from "svelte"
   import { attemptSubmit } from "../utils/form.js"
   import { useProvidedId, htmlid } from "../utils/id.js"
@@ -59,8 +61,8 @@
   const providedDisabled = useDisabled()
 
   let {
-    ref = $bindable(),
-    id = (providedId || `headlessui-checkbox-${internalId}`) as PropsOf<TTag>["id"],
+    element = $bindable(),
+    id = providedId || `headlessui-checkbox-${internalId}`,
     disabled: theirDisabled = false,
     autofocus = false,
     checked: controlledChecked = $bindable(),
@@ -71,7 +73,7 @@
     form,
     indeterminate = false,
     ...theirProps
-  }: { as?: TTag } & CheckboxProps<TTag, TType> = $props()
+  }: CheckboxProps<TType> = $props()
 
   const defaultChecked = _defaultChecked
   const controllable = useControllable(
@@ -188,12 +190,13 @@
     onReset={reset}
   />
 {/if}
+
 <ElementOrComponent
   {ourProps}
   {theirProps}
   {slot}
   defaultTag={DEFAULT_CHECKBOX_TAG}
   name="Checkbox"
-  bind:ref
+  bind:element
   bind:value
 />

package/dist/checkbox/Checkbox.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { ElementType, Props, PropsOf } from "../utils/types.js";
-declare let DEFAULT_CHECKBOX_TAG: "span";
-type CheckboxRenderPropArg = {
+import type { Props } from "../utils/types.js";
+declare const DEFAULT_CHECKBOX_TAG: "span";
+export type CheckboxRenderPropArg = {
     checked: boolean;
     changing: boolean;
     focus: boolean;
@@ -10,8 +10,9 @@ type CheckboxRenderPropArg = {
     disabled: boolean;
     indeterminate: boolean;
 };
-type CheckboxPropsWeControl = "aria-checked" | "aria-describedby" | "aria-disabled" | "aria-labelledby" | "role" | "tabIndex";
-export type CheckboxProps<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG, TType = string> = Props<TTag, CheckboxRenderPropArg, CheckboxPropsWeControl, {
+export type CheckboxProps<TType = string> = Props<typeof DEFAULT_CHECKBOX_TAG, CheckboxRenderPropArg, {
+    element?: HTMLElement;
+    id?: string;
     value?: TType;
     disabled?: boolean;
     indeterminate?: boolean;
@@ -22,38 +23,20 @@ export type CheckboxProps<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG
     name?: string;
     onchange?: (checked: boolean) => void;
 }>;
-declare class __sveltets_Render<TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, "form" | ("slot" | "as" | "children" | "class" | "ref") | "disabled" | "autofocus" | "value" | "checked" | "name" | "onchange" | "indeterminate" | CheckboxPropsWeControl | "defaultChecked"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[CheckboxRenderPropArg & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: CheckboxRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        value?: TType | undefined;
-        disabled?: boolean;
-        indeterminate?: boolean;
-        checked?: boolean;
-        defaultChecked?: boolean;
-        autofocus?: boolean;
-        form?: string;
-        name?: string;
-        onchange?: (checked: boolean) => void;
-    };
+declare class __sveltets_Render<TType> {
+    props(): CheckboxProps<TType>;
     events(): {};
     slots(): {};
-    bindings(): "ref" | "checked";
+    bindings(): "element" | "checked";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TType, TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TType, TTag>['props']>, ReturnType<__sveltets_Render<TType, TTag>['events']>, ReturnType<__sveltets_Render<TType, TTag>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TType, TTag>['bindings']>;
-    } & ReturnType<__sveltets_Render<TType, TTag>['exports']>;
-    <TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TType, TTag>['props']> & {}): ReturnType<__sveltets_Render<TType, TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+    new <TType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TType>['props']>, ReturnType<__sveltets_Render<TType>['events']>, ReturnType<__sveltets_Render<TType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TType>['bindings']>;
+    } & ReturnType<__sveltets_Render<TType>['exports']>;
+    <TType>(internal: unknown, props: ReturnType<__sveltets_Render<TType>['props']> & {}): ReturnType<__sveltets_Render<TType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const Checkbox: $$IsomorphicComponent;
-type Checkbox<TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG> = InstanceType<typeof Checkbox<TType, TTag>>;
+type Checkbox<TType> = InstanceType<typeof Checkbox<TType>>;
 export default Checkbox;

package/dist/checkbox/index.d.ts

@@ -1 +1 @@
-export { default as Checkbox, type CheckboxProps } from "./Checkbox.svelte";
+export { default as Checkbox, type CheckboxProps, type CheckboxRenderPropArg as CheckboxSlot } from "./Checkbox.svelte";

package/dist/close-button/CloseButton.svelte

@@ -1,17 +1,14 @@
 <script lang="ts" module>
   import Button, { type ButtonProps } from "../button/Button.svelte"
   import { useClose } from "../internal/close-provider.js"
-  import type { ElementType } from "../utils/types.js"
 
-  let DEFAULT_BUTTON_TAG = "button" as const
-
-  export type CloseButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = ButtonProps<TTag>
+  export type CloseButtonProps = ButtonProps
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">
+<script lang="ts">
   const closeContext = useClose()
   const close = $derived(closeContext?.close)
-  let { ...props }: { as?: TTag } & CloseButtonProps<TTag> = $props()
+  let { element = $bindable(), ...props }: CloseButtonProps = $props()
 </script>
 
-<Button onclick={close} {...props} />
+<Button {...props} onclick={close} bind:element />

package/dist/close-button/CloseButton.svelte.d.ts

@@ -1,45 +1,4 @@
 import { type ButtonProps } from "../button/Button.svelte";
-import type { ElementType } from "../utils/types.js";
-declare let DEFAULT_BUTTON_TAG: "button";
-export type CloseButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = ButtonProps<TTag>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "disabled" | "autofocus" | "type"> 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<[{
-            disabled: boolean;
-            hover: boolean;
-            focus: boolean;
-            active: boolean;
-            autofocus: boolean;
-        } & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: {
-            disabled: boolean;
-            hover: boolean;
-            focus: boolean;
-            active: boolean;
-            autofocus: boolean;
-        }) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        disabled?: boolean;
-        autofocus?: boolean;
-        type?: "button" | "submit" | "reset";
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_BUTTON_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_BUTTON_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const CloseButton: $$IsomorphicComponent;
-type CloseButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = InstanceType<typeof CloseButton<TTag>>;
+export type CloseButtonProps = ButtonProps;
+declare const CloseButton: import("svelte").Component<ButtonProps, {}, "element">;
 export default CloseButton;

package/dist/close-button/index.d.ts

@@ -1 +1,2 @@
 export { default as CloseButton, type CloseButtonProps } from "./CloseButton.svelte";
+export { type ButtonSlot as CloseButtonSlot } from "../button/index.js";

package/dist/close-button/index.js

@@ -1 +1,2 @@
 export { default as CloseButton } from "./CloseButton.svelte";
+export {} from "../button/index.js";

package/dist/data-interactive/DataInteractive.svelte

@@ -1,31 +1,24 @@
 <script lang="ts" module>
-  import type { Props, ElementType } from "../utils/types.js"
+  import type { PropsAsChild } from "../utils/types.js"
   import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
   import { useActivePress } from "../hooks/use-active-press.svelte.js"
-  import type { Snippet } from "svelte"
   import { useHover } from "../hooks/use-hover.svelte.js"
   import { mergeProps } from "../utils/render.js"
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
 
   const DEFAULT_DATA_INTERACTIVE_TAG = "svelte:fragment" as const
 
-  type DataInteractiveRenderPropArg = {
+  export type DataInteractiveRenderPropArg = {
     hover: boolean
     focus: boolean
     active: boolean
   }
-  type DataInteractivePropsWeControl = never
 
-  export type DataInteractiveProps<TTag extends ElementType = typeof DEFAULT_DATA_INTERACTIVE_TAG> = Props<
-    TTag,
-    DataInteractiveRenderPropArg,
-    DataInteractivePropsWeControl,
-    {}
-  >
+  export type DataInteractiveProps = PropsAsChild<DataInteractiveRenderPropArg>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DATA_INTERACTIVE_TAG">
-  let { ref = $bindable(), ...theirProps }: { as?: TTag } & DataInteractiveProps<TTag> = $props()
+<script lang="ts">
+  let { ...theirProps }: DataInteractiveProps = $props()
 
   // Ideally we can use a `disabled` prop, but that would depend on the props of the child element
   // and we don't have access to that in this component.
@@ -57,11 +50,4 @@
   const ourProps = $derived(mergeProps(focusProps, hoverProps, pressProps))
 </script>
 
-<ElementOrComponent
-  {ourProps}
-  {theirProps}
-  {slot}
-  defaultTag={DEFAULT_DATA_INTERACTIVE_TAG}
-  name="DataInteractive"
-  bind:ref
-/>
+<ElementOrComponent {ourProps} {theirProps} {slot} name="DataInteractive" />

package/dist/data-interactive/DataInteractive.svelte.d.ts

@@ -1,35 +1,13 @@
-import type { Props, ElementType } from "../utils/types.js";
-import type { Snippet } from "svelte";
-declare const DEFAULT_DATA_INTERACTIVE_TAG: "svelte:fragment";
-type DataInteractiveRenderPropArg = {
+import type { PropsAsChild } from "../utils/types.js";
+export type DataInteractiveRenderPropArg = {
     hover: boolean;
     focus: boolean;
     active: boolean;
 };
-type DataInteractivePropsWeControl = never;
-export type DataInteractiveProps<TTag extends ElementType = typeof DEFAULT_DATA_INTERACTIVE_TAG> = Props<TTag, DataInteractiveRenderPropArg, DataInteractivePropsWeControl, {}>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_DATA_INTERACTIVE_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "slot" | "as" | "children" | "class" | "ref"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: Snippet<[DataInteractiveRenderPropArg & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: DataInteractiveRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_DATA_INTERACTIVE_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_DATA_INTERACTIVE_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const DataInteractive: $$IsomorphicComponent;
-type DataInteractive<TTag extends ElementType = typeof DEFAULT_DATA_INTERACTIVE_TAG> = InstanceType<typeof DataInteractive<TTag>>;
+export type DataInteractiveProps = PropsAsChild<DataInteractiveRenderPropArg>;
+declare const DataInteractive: import("svelte").Component<{
+    children?: import("svelte").Snippet<[DataInteractiveRenderPropArg & {
+        props?: Record<string, any>;
+    }]> | undefined;
+}, {}, "">;
 export default DataInteractive;

package/dist/data-interactive/index.d.ts

@@ -1 +1 @@
-export { default as DataInteractive, type DataInteractiveProps } from "./DataInteractive.svelte";
+export { default as DataInteractive, type DataInteractiveProps, type DataInteractiveRenderPropArg as DataInteractiveSlot, } from "./DataInteractive.svelte";

package/dist/data-interactive/index.js

@@ -1 +1 @@
-export { default as DataInteractive } from "./DataInteractive.svelte";
+export { default as DataInteractive, } from "./DataInteractive.svelte";

package/dist/description/Description.svelte

@@ -1,12 +1,19 @@
 <script lang="ts" module>
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
-
-  let DEFAULT_DESCRIPTION_TAG = "p" as const
-
-  export type DescriptionProps<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG> = Props<TTag>
+  import type { Props } from "../utils/types.js"
+
+  const DEFAULT_DESCRIPTION_TAG = "p" as const
+
+  export type DescriptionProps = Props<
+    typeof DEFAULT_DESCRIPTION_TAG,
+    {},
+    {
+      id?: string
+      element?: HTMLElement
+    }
+  >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG">
+<script lang="ts">
   import { useId } from "../hooks/use-id.js"
   import { useDisabled } from "../hooks/use-disabled.js"
   import { useDescriptionContext } from "./context.svelte.js"
@@ -16,11 +23,7 @@
   const internalId = useId()
   const providedDisabled = useDisabled()
 
-  let {
-    ref = $bindable(),
-    id = `headlessui-description-${internalId}` as PropsOf<TTag>["id"],
-    ...theirProps
-  }: { as?: TTag } & DescriptionProps<TTag> = $props()
+  let { element = $bindable(), id = `headlessui-description-${internalId}`, ...theirProps }: DescriptionProps = $props()
 
   const { register } = useDescriptionContext()
   $effect(() => {
@@ -39,5 +42,5 @@
   slots={slot}
   defaultTag={DEFAULT_DESCRIPTION_TAG}
   name="Description"
-  bind:ref
+  bind:element
 />

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

@@ -1,28 +1,8 @@
-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>, "slot" | "as" | "children" | "class" | "ref"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[{
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: {}) => string) | null | undefined;
-        ref?: HTMLElement;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    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']> & {}): 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 DescriptionProps = Props<typeof DEFAULT_DESCRIPTION_TAG, {}, {
+    id?: string;
+    element?: HTMLElement;
+}>;
+declare const Description: import("svelte").Component<DescriptionProps, {}, "element">;
 export default Description;