@pzerelles/headlessui-svelte 2.1.2-next.3 → 2.1.2-next.31

package/dist/button/Button.svelte

@@ -15,7 +15,7 @@ let {
   type = "button",
   ...theirProps
 } = $props();
-const disabled = $derived(providedDisabled.value || ownDisabled);
+const disabled = $derived(providedDisabled.current || ownDisabled);
 const { isHovered: hover, hoverProps } = $derived(
   useHover({
     get disabled() {

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

@@ -16,19 +16,19 @@ export type ButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> =
 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;
+    } & (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<[{
+            slot: ButtonRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: ButtonRenderPropArg) => string) | null | 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>;
-    };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -37,9 +37,7 @@ 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']>;
+    <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;

package/dist/checkbox/Checkbox.svelte

@@ -3,7 +3,7 @@
 
 <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 { 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";
@@ -15,12 +15,12 @@ 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 providedId = useProvidedId();
 const providedDisabled = useDisabled();
 let {
   ref = $bindable(),
   id = providedId || `headlessui-checkbox-${internalId}`,
-  disabled: ownDisabled = false,
+  disabled: theirDisabled = false,
   autofocus = false,
   checked: controlledChecked = $bindable(),
   defaultChecked: _defaultChecked,
@@ -45,7 +45,7 @@ const controllable = useControllable(
   defaultChecked ?? false
 );
 const { value: checked, onchange } = $derived(controllable);
-const disabled = $derived(providedDisabled.value || ownDisabled);
+const disabled = $derived(providedDisabled.current || theirDisabled);
 const { isHovered: hover, hoverProps } = $derived(
   useHover({
     get disabled() {

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

@@ -1,4 +1,4 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { ElementType, Props, PropsOf } from "../utils/types.js";
 declare let DEFAULT_CHECKBOX_TAG: "span";
 type CheckboxRenderPropArg = {
     checked: boolean;
@@ -12,7 +12,6 @@ type CheckboxRenderPropArg = {
 };
 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;
@@ -26,13 +25,14 @@ export type CheckboxProps<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG
 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;
+    } & (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<[{
+            slot: CheckboxRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: CheckboxRenderPropArg) => string) | null | 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;
@@ -43,9 +43,7 @@ declare class __sveltets_Render<TType, TTag extends ElementType = typeof DEFAULT
         name?: string;
         onchange?: (checked: boolean) => void;
     };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+    events(): {};
     slots(): {};
     bindings(): "ref" | "checked";
     exports(): {};
@@ -54,9 +52,7 @@ 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']>;
+    <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']>;
 }
 declare const Checkbox: $$IsomorphicComponent;

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

@@ -5,31 +5,31 @@ export type CloseButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TA
 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<{
+    } & (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<[{
+            slot: {
+                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;
-        }> | undefined;
+        }) => string) | null | 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>;
-    };
+    events(): {};
     slots(): {};
     bindings(): "";
     exports(): {};
@@ -38,9 +38,7 @@ 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']>;
+    <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;

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

@@ -8,19 +8,18 @@ type DataInteractiveRenderPropArg = {
 };
 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;
+    } & (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<[{
+            slot: DataInteractiveRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: DataInteractiveRenderPropArg) => string) | null | 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>;
     };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -29,9 +28,7 @@ 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']>;
+    <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;

package/dist/description/Description.svelte

@@ -1,28 +1,33 @@
 <script lang="ts" module>let DEFAULT_DESCRIPTION_TAG = "p";
 </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" generics="TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG">import { useId } from "../hooks/use-id.js";
 import { useDisabled } from "../hooks/use-disabled.js";
-import { onMount } from "svelte";
 import { useDescriptionContext } from "./context.svelte.js";
-const internalId = htmlid();
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { untrack } from "svelte";
+const internalId = useId();
 const providedDisabled = useDisabled();
 let {
-  as,
+  ref = $bindable(),
   id = `headlessui-description-${internalId}`,
-  children,
   ...theirProps
 } = $props();
-const context = useDescriptionContext();
-onMount(() => {
-  context.register(id);
+const { register } = useDescriptionContext();
+$effect(() => {
+  id;
+  return untrack(() => register(id));
 });
-const disabled = $derived(providedDisabled.value || false);
+const disabled = $derived(providedDisabled.current || false);
 const slot = $derived({ disabled });
-const ourProps = $derived({ id, ...stateFromSlot(slot) });
+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={slot}
+  defaultTag={DEFAULT_DESCRIPTION_TAG}
+  name="Description"
+  bind:ref
+/>

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

@@ -4,26 +4,24 @@ export type DescriptionProps<TTag extends ElementType = typeof DEFAULT_DESCRIPTI
 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;
+    } & (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<[{
+            slot: {};
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: {}) => string) | null | 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>;
     };
+    events(): {};
     slots(): {};
-    bindings(): "";
+    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']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): 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;

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;