@pzerelles/headlessui-svelte 2.1.2-next.5 → 2.1.2-next.51

package/dist/button/Button.svelte

@@ -1,30 +1,27 @@
 <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,
-    ButtonRenderPropArg,
-    ButtonPropsWeControl,
-    {
-      disabled?: boolean
-      autofocus?: boolean
-      type?: "button" | "submit" | "reset"
-    }
-  >
+  export type ButtonOwnProps = {
+    element?: HTMLElement
+    disabled?: boolean
+    autofocus?: boolean
+    type?: "button" | "submit" | "reset"
+  }
+
+  export type ButtonProps = Props<typeof DEFAULT_BUTTON_TAG, ButtonRenderPropArg, ButtonOwnProps>
 </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,14 +32,14 @@
   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.value || ownDisabled)
+  const disabled = $derived(providedDisabled.current || ownDisabled)
 
   const { isHovered: hover, hoverProps } = $derived(
     useHover({
@@ -66,7 +63,7 @@
     })
   )
 
-  const slot = $derived({
+  const slots = $derived({
     disabled,
     hover,
     focus,
@@ -88,4 +85,4 @@
   )
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="Button" bind:ref />
+<ElementOrComponent {ourProps} {theirProps} {slots} defaultTag={DEFAULT_BUTTON_TAG} name="Button" bind:element />

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

@@ -1,47 +1,19 @@
-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 ButtonOwnProps = {
+    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>, ("as" | "children" | "refName" | "class") | "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("../utils/types.js").Children<ButtonRenderPropArg> | 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: ButtonRenderPropArg) => string) | undefined;
-    } : {}) & {
-        disabled?: boolean;
-        autofocus?: boolean;
-        type?: "button" | "submit" | "reset";
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    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']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): 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>>;
+};
+export type ButtonProps = Props<typeof DEFAULT_BUTTON_TAG, ButtonRenderPropArg, ButtonOwnProps>;
+declare const Button: import("svelte").Component<ButtonProps, {}, "element">;
+type Button = ReturnType<typeof Button>;
 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, type ButtonOwnProps, } from "./Button.svelte";

package/dist/button/index.js

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

package/dist/checkbox/Checkbox.svelte

@@ -1,8 +1,9 @@
 <script lang="ts" module>
-  import type { ElementType, Props } 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,30 +22,31 @@
     | "role"
     | "tabIndex"
 
-  export type CheckboxProps<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG, TType = string> = Props<
-    TTag,
+  export type CheckboxOwnProps<TType = string> = {
+    element?: HTMLElement
+    id?: string
+    value?: TType
+    disabled?: boolean
+    indeterminate?: boolean
+    checked?: boolean
+    defaultChecked?: boolean
+    autofocus?: boolean
+    form?: string
+    name?: string
+    onchange?: (checked: boolean) => void
+  }
+
+  export type CheckboxProps<TType = string> = Props<
+    typeof DEFAULT_CHECKBOX_TAG,
     CheckboxRenderPropArg,
-    CheckboxPropsWeControl,
-    {
-      id?: string
-      value?: TType
-      disabled?: boolean
-      indeterminate?: boolean
-
-      checked?: boolean
-      defaultChecked?: boolean
-      autofocus?: boolean
-      form?: string
-      name?: string
-      onchange?: (checked: boolean) => void
-    }
+    CheckboxOwnProps<TType>
   >
 </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 { getIdContext, htmlid } from "../utils/id.js"
+  import { useProvidedId, htmlid } from "../utils/id.js"
   import { useActivePress } from "../hooks/use-active-press.svelte.js"
   import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
   import FormFields from "../internal/FormFields.svelte"
@@ -56,11 +59,11 @@
   import { useControllable } from "../hooks/use-controllable.svelte.js"
 
   const internalId = htmlid()
-  const providedId = getIdContext()
+  const providedId = useProvidedId()
   const providedDisabled = useDisabled()
 
   let {
-    ref = $bindable(),
+    element = $bindable(),
     id = providedId || `headlessui-checkbox-${internalId}`,
     disabled: theirDisabled = false,
     autofocus = false,
@@ -72,7 +75,7 @@
     form,
     indeterminate = false,
     ...theirProps
-  }: { as?: TTag } & CheckboxProps<TTag, TType> = $props()
+  }: CheckboxProps<TType> = $props()
 
   const defaultChecked = _defaultChecked
   const controllable = useControllable(
@@ -89,7 +92,7 @@
   )
   const { value: checked, onchange } = $derived(controllable)
 
-  const disabled = $derived(providedDisabled?.value ?? theirDisabled)
+  const disabled = $derived(providedDisabled.current || theirDisabled)
 
   const { isHovered: hover, hoverProps } = $derived(
     useHover({
@@ -189,12 +192,13 @@
     onReset={reset}
   />
 {/if}
+
 <ElementOrComponent
   {ourProps}
   {theirProps}
-  {slot}
+  slots={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 } 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,8 @@ 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 CheckboxOwnProps<TType = string> = {
+    element?: HTMLElement;
     id?: string;
     value?: TType;
     disabled?: boolean;
@@ -22,43 +22,22 @@ export type CheckboxProps<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG
     form?: string;
     name?: string;
     onchange?: (checked: boolean) => void;
-}>;
-declare class __sveltets_Render<TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "form" | ("as" | "children" | "refName" | "class") | "disabled" | "autofocus" | "name" | "value" | "checked" | "id" | "onchange" | "indeterminate" | CheckboxPropsWeControl | "defaultChecked"> 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<CheckboxRenderPropArg> | 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: CheckboxRenderPropArg) => string) | undefined;
-    } : {}) & {
-        id?: string;
-        value?: TType | undefined;
-        disabled?: boolean;
-        indeterminate?: boolean;
-        checked?: boolean;
-        defaultChecked?: boolean;
-        autofocus?: boolean;
-        form?: string;
-        name?: string;
-        onchange?: (checked: boolean) => void;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+};
+export type CheckboxProps<TType = string> = Props<typeof DEFAULT_CHECKBOX_TAG, CheckboxRenderPropArg, CheckboxOwnProps<TType>>;
+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']> & {
-        $$events?: ReturnType<__sveltets_Render<TType, TTag>['events']>;
-    }): 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, type CheckboxOwnProps, } from "./Checkbox.svelte";

package/dist/checkbox/index.js

@@ -1 +1 @@
-export { default as Checkbox } from "./Checkbox.svelte";
+export { default as Checkbox, } 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,48 +1,5 @@
 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>, ("as" | "children" | "refName" | "class") | "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("../utils/types.js").Children<{
-            disabled: boolean;
-            hover: boolean;
-            focus: boolean;
-            active: boolean;
-            autofocus: boolean;
-        }> | 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: {
-            disabled: boolean;
-            hover: boolean;
-            focus: boolean;
-            active: boolean;
-            autofocus: boolean;
-        }) => string) | undefined;
-    } : {}) & {
-        disabled?: boolean;
-        autofocus?: boolean;
-        type?: "button" | "submit" | "reset";
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    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']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): 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">;
+type CloseButton = ReturnType<typeof CloseButton>;
 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, type ButtonOwnProps as CloseButtonOwnProps } 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,33 +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 DataInteractiveChildren = Snippet<[DataInteractiveRenderPropArg]>
+  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.
@@ -59,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} slots={slot} name="DataInteractive" />

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

@@ -1,39 +1,14 @@
-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, {}>;
-export type DataInteractiveChildren = Snippet<[DataInteractiveRenderPropArg]>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_DATA_INTERACTIVE_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "as" | "children" | "refName" | "class"> 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<DataInteractiveRenderPropArg> | 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: DataInteractiveRenderPropArg) => string) | undefined;
-    } : {});
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    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']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): 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;
+}, {}, "">;
+type DataInteractive = ReturnType<typeof DataInteractive>;
 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,39 +1,44 @@
 <script lang="ts" module>
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
-  let DEFAULT_DESCRIPTION_TAG = "p" as const
+  const DEFAULT_DESCRIPTION_TAG = "p" as const
 
-  export type DescriptionProps<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG> = Props<TTag>
+  export type DescriptionOwnProps = {
+    id?: string
+    element?: HTMLElement
+  }
+
+  export type DescriptionProps = Props<typeof DEFAULT_DESCRIPTION_TAG, {}, DescriptionOwnProps>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG">
-  import { htmlid } from "../utils/id.js"
-  import { stateFromSlot } from "../utils/state.js"
+<script lang="ts">
+  import { useId } from "../hooks/use-id.js"
   import { useDisabled } from "../hooks/use-disabled.js"
-  import { onMount } from "svelte"
   import { useDescriptionContext } from "./context.svelte.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { untrack } from "svelte"
 
-  const internalId = htmlid()
+  const internalId = useId()
   const providedDisabled = useDisabled()
 
-  let {
-    as,
-    id = `headlessui-description-${internalId}` as PropsOf<TTag>["id"],
-    children,
-    ...theirProps
-  }: { as?: TTag } & DescriptionProps<TTag> = $props()
-
-  const context = useDescriptionContext()
+  let { element = $bindable(), id = `headlessui-description-${internalId}`, ...theirProps }: DescriptionProps = $props()
 
-  onMount(() => {
-    context.register(id)
+  const { register } = useDescriptionContext()
+  $effect(() => {
+    id
+    return untrack(() => register(id))
   })
 
-  const disabled = $derived(providedDisabled.value || false)
-  const slot = $derived({ disabled })
-  const ourProps = $derived({ id, ...stateFromSlot(slot) })
+  const disabled = $derived(providedDisabled.current || false)
+  const slots = $derived({ disabled })
+  const ourProps = $derived({ id })
 </script>
 
-<svelte:element this={as ?? DEFAULT_DESCRIPTION_TAG} {...ourProps} {...theirProps}>
-  {#if children}{@render children(slot, {})}{/if}
-</svelte:element>
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  {slots}
+  defaultTag={DEFAULT_DESCRIPTION_TAG}
+  name="Description"
+  bind:element
+/>