@pzerelles/headlessui-svelte 2.1.1-next.1 → 2.1.2-next.2

package/dist/button/Button.svelte

@@ -1,19 +1,18 @@
-<script lang="ts" context="module">const DEFAULT_BUTTON_TAG = "button";
+<script lang="ts" module>const DEFAULT_BUTTON_TAG = "button";
 </script>
 
-<script lang="ts" generics="TTag extends keyof SvelteHTMLElements, TType">import { useActivePress } from "../hooks/use-active-press.svelte.js";
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">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";
-import { stateFromSlot } from "../utils/state.js";
 import { useHover } from "../hooks/use-hover.svelte.js";
 import { mergeProps } from "../utils/render.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
 const providedDisabled = useDisabled();
 let {
-  as,
+  ref = $bindable(),
   disabled: ownDisabled = false,
   autofocus = false,
   type = "button",
-  children,
   ...theirProps
 } = $props();
 const disabled = $derived(providedDisabled.value || ownDisabled);
@@ -54,12 +53,9 @@ const ourProps = $derived(
     },
     focusProps,
     hoverProps,
-    pressProps,
-    stateFromSlot(slot)
+    pressProps
   )
 );
 </script>
 
-<svelte:element this={as ?? DEFAULT_BUTTON_TAG} {...ourProps} {...theirProps}>
-  {#if children}{@render children(slot)}{/if}
-</svelte:element>
+<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="Button" bind:ref />

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

@@ -1,39 +1,47 @@
-import type { SvelteHTMLElements } from "svelte/elements";
-export type ButtonProps<TTag extends keyof SvelteHTMLElements = typeof DEFAULT_BUTTON_TAG> = SvelteHTMLElements[TTag] & {
-    as?: TTag;
+import type { Props, ElementType } from "../utils/types.js";
+declare const DEFAULT_BUTTON_TAG: "button";
+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";
-    children?: Snippet<[
-        {
-            disabled: boolean;
-            hover: boolean;
-            focus: boolean;
-            active: boolean;
-            autofocus: boolean;
-        }
-    ]>;
-};
-declare const DEFAULT_BUTTON_TAG: "button";
-import type { Snippet } from "svelte";
-declare class __sveltets_Render<TTag extends keyof SvelteHTMLElements, TType> {
-    props(): 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<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(): "";
+    bindings(): "ref";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TTag extends keyof SvelteHTMLElements, TType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag, TType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag, TType>['props']>, ReturnType<__sveltets_Render<TTag, TType>['events']>, ReturnType<__sveltets_Render<TTag, TType>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag, TType>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag, TType>['exports']>;
-    <TTag extends keyof SvelteHTMLElements, TType>(internal: unknown, props: ReturnType<__sveltets_Render<TTag, TType>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag, TType>['events']>;
-    }): ReturnType<__sveltets_Render<TTag, TType>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+    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 keyof SvelteHTMLElements, TType> = InstanceType<typeof Button<TTag, TType>>;
+type Button<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = InstanceType<typeof Button<TTag>>;
 export default Button;

package/dist/checkbox/Checkbox.svelte

@@ -1,36 +1,50 @@
-<script lang="ts" context="module">const DEFAULT_CHECKBOX_TAG = "div";
+<script lang="ts" module>let DEFAULT_CHECKBOX_TAG = "span";
 </script>
 
-<script lang="ts" generics="TTag extends keyof SvelteHTMLElements, TType">import { tick } from "svelte";
+<script lang="ts" generics="TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG">import { tick } from "svelte";
 import { attemptSubmit } from "../utils/form.js";
 import { getIdContext, 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";
 import { useDisabled } from "../hooks/use-disabled.js";
-import { stateFromSlot } from "../utils/state.js";
-import { useLabelledBy } from "../label/Label.svelte";
-import { useDescribedBy } from "../description/Description.svelte";
+import { useLabelledBy } from "../label/context.svelte.js";
+import { useDescribedBy } from "../description/context.svelte.js";
 import { useHover } from "../hooks/use-hover.svelte.js";
 import { mergeProps } from "../utils/render.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { useControllable } from "../hooks/use-controllable.svelte.js";
 const internalId = htmlid();
 const providedId = getIdContext();
 const providedDisabled = useDisabled();
 let {
+  ref = $bindable(),
   id = providedId || `headlessui-checkbox-${internalId}`,
-  as,
-  value,
   disabled: ownDisabled = false,
-  indeterminate = false,
-  defaultChecked,
-  checked = $bindable(defaultChecked ?? false),
-  autofocus,
-  form,
+  autofocus = false,
+  checked: controlledChecked = $bindable(),
+  defaultChecked: _defaultChecked,
+  onchange: controlledOnChange,
   name,
-  onchange,
-  children,
+  value,
+  form,
+  indeterminate = false,
   ...theirProps
 } = $props();
+const defaultChecked = _defaultChecked;
+const controllable = useControllable(
+  {
+    get controlledValue() {
+      return controlledChecked;
+    },
+    set controlledValue(checked2) {
+      controlledChecked = checked2;
+    }
+  },
+  controlledOnChange,
+  defaultChecked ?? false
+);
+const { value: checked, onchange } = $derived(controllable);
 const disabled = $derived(providedDisabled.value || ownDisabled);
 const { isHovered: hover, hoverProps } = $derived(
   useHover({
@@ -58,8 +72,7 @@ const describedBy = useDescribedBy();
 let changing = $state(false);
 const toggle = () => {
   changing = true;
-  checked = !checked;
-  onchange?.(checked);
+  onchange?.(!checked);
   tick().then(() => {
     changing = false;
   });
@@ -88,7 +101,7 @@ const slot = $derived({
   disabled,
   indeterminate
 });
-const ownProps = $derived(
+const ourProps = $derived(
   mergeProps(
     {
       id,
@@ -104,8 +117,7 @@ const ownProps = $derived(
     },
     focusProps,
     hoverProps,
-    pressProps,
-    stateFromSlot(slot)
+    pressProps
   )
 );
 const reset = $derived(() => {
@@ -123,6 +135,12 @@ const reset = $derived(() => {
     onReset={reset}
   />
 {/if}
-<svelte:element this={as ?? DEFAULT_CHECKBOX_TAG} {...ownProps} {...theirProps}>
-  {#if children}{@render children(slot)}{/if}
-</svelte:element>
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  {slot}
+  defaultTag={DEFAULT_CHECKBOX_TAG}
+  name="Checkbox"
+  bind:ref
+  bind:value
+/>

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

@@ -1,6 +1,18 @@
-import type { SvelteHTMLElements } from "svelte/elements";
-export type CheckboxProps<TType = string, TTag extends keyof SvelteHTMLElements = typeof DEFAULT_CHECKBOX_TAG> = SvelteHTMLElements[TTag] & {
-    as?: TTag;
+import type { ElementType, Props } from "../utils/types.js";
+declare let DEFAULT_CHECKBOX_TAG: "span";
+type CheckboxRenderPropArg = {
+    checked: boolean;
+    changing: boolean;
+    focus: boolean;
+    active: boolean;
+    hover: boolean;
+    autofocus: boolean;
+    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, {
+    id?: string;
     value?: TType;
     disabled?: boolean;
     indeterminate?: boolean;
@@ -10,39 +22,43 @@ export type CheckboxProps<TType = string, TTag extends keyof SvelteHTMLElements
     form?: string;
     name?: string;
     onchange?: (checked: boolean) => void;
-    children?: Snippet<[
-        {
-            checked: boolean;
-            changing: boolean;
-            focus: boolean;
-            active: boolean;
-            hover: boolean;
-            autofocus: boolean;
-            disabled: boolean;
-            indeterminate: boolean;
-        }
-    ]>;
-};
-declare const DEFAULT_CHECKBOX_TAG: "div";
-import { type Snippet } from "svelte";
-declare class __sveltets_Render<TTag extends keyof SvelteHTMLElements, TType> {
-    props(): CheckboxProps<TType, TTag>;
+}>;
+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>;
     };
     slots(): {};
-    bindings(): "checked";
+    bindings(): "ref" | "checked";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TTag extends keyof SvelteHTMLElements, TType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag, TType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag, TType>['props']>, ReturnType<__sveltets_Render<TTag, TType>['events']>, ReturnType<__sveltets_Render<TTag, TType>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag, TType>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag, TType>['exports']>;
-    <TTag extends keyof SvelteHTMLElements, TType>(internal: unknown, props: ReturnType<__sveltets_Render<TTag, TType>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag, TType>['events']>;
-    }): ReturnType<__sveltets_Render<TTag, TType>['exports']>;
+    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']>;
 }
 declare const Checkbox: $$IsomorphicComponent;
-type Checkbox<TTag extends keyof SvelteHTMLElements, TType> = InstanceType<typeof Checkbox<TTag, TType>>;
+type Checkbox<TType, TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG> = InstanceType<typeof Checkbox<TType, TTag>>;
 export default Checkbox;

package/dist/close-button/CloseButton.svelte

@@ -1,9 +1,10 @@
-<script lang="ts" context="module">import Button, {} from "../button/Button.svelte";
-import { getCloseContext } from "../utils/close.js";
-const DEFAULT_BUTTON_TAG = "button";
+<script lang="ts" module>import Button, {} from "../button/Button.svelte";
+import { useClose } from "../internal/close-provider.js";
+let DEFAULT_BUTTON_TAG = "button";
 </script>
 
-<script lang="ts" generics="TTag extends keyof SvelteHTMLElements, TType">const close = getCloseContext();
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">const closeContext = useClose();
+const close = $derived(closeContext?.close);
 let { ...props } = $props();
 </script>
 

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

@@ -1,9 +1,32 @@
-import type { SvelteHTMLElements } from "svelte/elements";
 import { type ButtonProps } from "../button/Button.svelte";
-export type CloseButtonProps<TTag extends keyof SvelteHTMLElements = typeof DEFAULT_BUTTON_TAG> = ButtonProps<TTag>;
-declare const DEFAULT_BUTTON_TAG: "button";
-declare class __sveltets_Render<TTag extends keyof SvelteHTMLElements, TType> {
-    props(): CloseButtonProps<TTag>;
+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>;
     };
@@ -12,14 +35,14 @@ declare class __sveltets_Render<TTag extends keyof SvelteHTMLElements, TType> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TTag extends keyof SvelteHTMLElements, TType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag, TType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag, TType>['props']>, ReturnType<__sveltets_Render<TTag, TType>['events']>, ReturnType<__sveltets_Render<TTag, TType>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag, TType>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag, TType>['exports']>;
-    <TTag extends keyof SvelteHTMLElements, TType>(internal: unknown, props: ReturnType<__sveltets_Render<TTag, TType>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag, TType>['events']>;
-    }): ReturnType<__sveltets_Render<TTag, TType>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+    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 keyof SvelteHTMLElements, TType> = InstanceType<typeof CloseButton<TTag, TType>>;
+type CloseButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = InstanceType<typeof CloseButton<TTag>>;
 export default CloseButton;

package/dist/combobox/Combobox.svelte

@@ -1,6 +1,6 @@
-<script lang="ts" context="module">const DEFAULT_COMBOBOX_TAG = "svelte:fragment";
+<script lang="ts" module>const DEFAULT_COMBOBOX_TAG = "svelte:fragment";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType, TType">import { useDisabled } from "../hooks/use-disabled.js";
+<script lang="ts" generics="TType, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG">import { useDisabled } from "../hooks/use-disabled.js";
 const providedDisabled = useDisabled();
 </script>

package/dist/combobox/Combobox.svelte.d.ts

@@ -24,10 +24,10 @@ export type CheckboxProps<TValue, TMultiple extends boolean | undefined, TTag ex
         options: NoInfer<TValue>[];
         disabled?: (value: NoInfer<TValue>) => boolean;
     } | null;
-    onClose?(): void;
+    onclose?(): void;
     __demoMode?: boolean;
 }>;
-declare class __sveltets_Render<TTag extends ElementType, TType> {
+declare class __sveltets_Render<TType, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG> {
     props(): Record<string, never>;
     events(): {} & {
         [evt: string]: CustomEvent<any>;
@@ -37,14 +37,14 @@ declare class __sveltets_Render<TTag extends ElementType, TType> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TTag extends ElementType, TType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag, TType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag, TType>['props']>, ReturnType<__sveltets_Render<TTag, TType>['events']>, ReturnType<__sveltets_Render<TTag, TType>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag, TType>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag, TType>['exports']>;
-    <TTag extends ElementType, TType>(internal: unknown, props: {
-        $$events?: ReturnType<__sveltets_Render<TTag, TType>['events']>;
-    }): ReturnType<__sveltets_Render<TTag, TType>['exports']>;
+    new <TType, TTag extends ElementType = typeof DEFAULT_COMBOBOX_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_COMBOBOX_TAG>(internal: unknown, props: {
+        $$events?: ReturnType<__sveltets_Render<TType, TTag>['events']>;
+    }): ReturnType<__sveltets_Render<TType, TTag>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const Combobox: $$IsomorphicComponent;
-type Combobox<TTag extends ElementType, TType> = InstanceType<typeof Combobox<TTag, TType>>;
+type Combobox<TType, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG> = InstanceType<typeof Combobox<TType, TTag>>;
 export default Combobox;

package/dist/data-interactive/DataInteractive.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" module>import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
+import { useActivePress } from "../hooks/use-active-press.svelte.js";
+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";
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DATA_INTERACTIVE_TAG">let { ref = $bindable(), ...theirProps } = $props();
+const disabled = false;
+const { isHovered: hover, hoverProps } = $derived(
+  useHover({
+    get disabled() {
+      return disabled;
+    }
+  })
+);
+const { pressed: active, pressProps } = $derived(
+  useActivePress({
+    get disabled() {
+      return disabled;
+    }
+  })
+);
+const { isFocusVisible: focus, focusProps } = $derived(useFocusRing());
+const slot = $derived({
+  hover,
+  focus,
+  active
+});
+const ourProps = $derived(mergeProps(focusProps, hoverProps, pressProps));
+</script>
+
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  {slot}
+  defaultTag={DEFAULT_DATA_INTERACTIVE_TAG}
+  name="DataInteractive"
+  bind:ref
+/>

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

@@ -0,0 +1,39 @@
+import type { Props, ElementType } from "../utils/types.js";
+import type { Snippet } from "svelte";
+declare const DEFAULT_DATA_INTERACTIVE_TAG: "svelte:fragment";
+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 default DataInteractive;

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

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

package/dist/data-interactive/index.js

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

package/dist/description/Description.svelte

@@ -1,62 +1,19 @@
-<script lang="ts" context="module">import { getContext, setContext } from "svelte";
-const DEFAULT_DESCRIPTION_TAG = "p";
-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.");
-    if (Error.captureStackTrace) Error.captureStackTrace(err, useDescriptionContext);
-    throw err;
-  }
-  return context;
-}
-export function useDescribedBy() {
-  const context = getContext("DescriptionContext");
-  return {
-    get value() {
-      return context?.value;
-    }
-  };
-}
-export const useDescriptions = (options = {}) => {
-  const { slot, name, props, inherit } = $derived(options);
-  let descriptionIds = $state([]);
-  const value = $derived(descriptionIds.length > 0 ? descriptionIds.join(" ") : void 0);
-  const context = {
-    get slot() {
-      return slot;
-    },
-    get name() {
-      return name;
-    },
-    get props() {
-      return props;
-    },
-    get value() {
-      return value;
-    },
-    register(value2) {
-      descriptionIds.push(value2);
-      return () => {
-        const clone = descriptionIds.slice();
-        const idx = clone.indexOf(value2);
-        if (idx !== -1) clone.splice(idx, 1);
-        descriptionIds = clone;
-        return descriptionIds;
-      };
-    }
-  };
-  setContext("DescriptionContext", context);
-  return context;
-};
+<script lang="ts" module>let DEFAULT_DESCRIPTION_TAG = "p";
 </script>
 
-<script lang="ts" generics="TTag extends keyof SvelteHTMLElements">import { htmlid } from "../utils/id.js";
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG">import { htmlid } from "../utils/id.js";
 import { stateFromSlot } from "../utils/state.js";
 import { useDisabled } from "../hooks/use-disabled.js";
 import { onMount } from "svelte";
+import { useDescriptionContext } from "./context.svelte.js";
 const internalId = htmlid();
 const providedDisabled = useDisabled();
-let { as, id = `headlessui-description-${internalId}`, children, ...theirProps } = $props();
+let {
+  as,
+  id = `headlessui-description-${internalId}`,
+  children,
+  ...theirProps
+} = $props();
 const context = useDescriptionContext();
 onMount(() => {
   context.register(id);
@@ -67,5 +24,5 @@ const ourProps = $derived({ id, ...stateFromSlot(slot) });
 </script>
 
 <svelte:element this={as ?? DEFAULT_DESCRIPTION_TAG} {...ourProps} {...theirProps}>
-  {#if children}{@render children(slot)}{/if}
+  {#if children}{@render children(slot, {})}{/if}
 </svelte:element>