@pzerelles/headlessui-svelte 2.1.2-next.4 → 2.1.2-next.41

package/dist/dialog/DialogPanel.svelte

@@ -1,37 +1,34 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
   let DEFAULT_PANEL_TAG = "div" as const
-  type PanelRenderPropArg = {
+  export type PanelRenderPropArg = {
     open: boolean
   }
 
-  export type DialogPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<
-    TTag,
-    PanelRenderPropArg,
-    never,
-    {
-      id?: string
-      transition?: boolean
-    }
-  >
+  export type DialogPanelOwnProps = {
+    element?: HTMLElement
+    id?: string
+    transition?: boolean
+  }
+
+  export type DialogPanelProps = Props<typeof DEFAULT_PANEL_TAG, PanelRenderPropArg, DialogPanelOwnProps>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANEL_TAG">
+<script lang="ts">
   import { useId } from "../hooks/use-id.js"
   import { DialogStates, useDialogContext } from "./context.svelte.js"
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
   import { mergeProps } from "../utils/render.js"
   import TransitionChild from "../transition/TransitionChild.svelte"
-  import { onMount } from "svelte"
 
   let internalId = useId()
   let {
-    ref = $bindable(),
+    element = $bindable(),
     id = `headlessui-dialog-panel-${internalId}`,
     transition = false,
     ...theirProps
-  }: { as?: TTag } & DialogPanelProps<TTag> = $props()
+  }: DialogPanelProps = $props()
   const _state = useDialogContext("Dialog.Panel")
   const { dialogState, unmount } = $derived(_state)
 
@@ -52,18 +49,25 @@
 </script>
 
 {#if transition}
-  <TransitionChild {unmount} {ref}>
-    {#snippet children(slot, props)}
+  <TransitionChild asChild {unmount} {element}>
+    {#snippet children({ props, ...slot })}
       <ElementOrComponent
         ourProps={{ ...ourProps, ...props }}
         {theirProps}
         slots={slot}
         defaultTag={DEFAULT_PANEL_TAG}
         name="DialogPanel"
-        bind:ref
+        bind:element
       />
     {/snippet}
   </TransitionChild>
 {:else}
-  <ElementOrComponent {ourProps} {theirProps} slots={slot} defaultTag={DEFAULT_PANEL_TAG} name="DialogPanel" bind:ref />
+  <ElementOrComponent
+    {ourProps}
+    {theirProps}
+    slots={slot}
+    defaultTag={DEFAULT_PANEL_TAG}
+    name="DialogPanel"
+    bind:element
+  />
 {/if}

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

@@ -1,40 +1,14 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare let DEFAULT_PANEL_TAG: "div";
-type PanelRenderPropArg = {
+export type PanelRenderPropArg = {
     open: boolean;
 };
-export type DialogPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg, never, {
+export type DialogPanelOwnProps = {
+    element?: HTMLElement;
     id?: string;
     transition?: boolean;
-}>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "id" | "transition"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("../utils/types.js").Children<PanelRenderPropArg> | undefined;
-        ref?: HTMLElement;
-    } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
-        class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: PanelRenderPropArg) => string) | undefined;
-    } : {}) & {
-        id?: string;
-        transition?: boolean;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const DialogPanel: $$IsomorphicComponent;
-type DialogPanel<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = InstanceType<typeof DialogPanel<TTag>>;
+};
+export type DialogPanelProps = Props<typeof DEFAULT_PANEL_TAG, PanelRenderPropArg, DialogPanelOwnProps>;
+declare const DialogPanel: import("svelte").Component<DialogPanelProps, {}, "element">;
+type DialogPanel = ReturnType<typeof DialogPanel>;
 export default DialogPanel;

package/dist/dialog/DialogTitle.svelte

@@ -1,17 +1,19 @@
 <script lang="ts" module>
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
   let DEFAULT_TITLE_TAG = "h2" as const
-  type TitleRenderPropArg = {
+  export type TitleRenderPropArg = {
     open: boolean
   }
 
-  export type DialogTitleProps<TTag extends ElementType = typeof DEFAULT_TITLE_TAG> = Props<TTag, TitleRenderPropArg>
+  export type DialogTitleOwnProps = { id?: string; element?: HTMLElement }
+
+  export type DialogTitleProps = Props<typeof DEFAULT_TITLE_TAG, TitleRenderPropArg, DialogTitleOwnProps>
 
   //
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TITLE_TAG">
+<script lang="ts">
   import { useId } from "../hooks/use-id.js"
   import { DialogStates, useDialogContext } from "./context.svelte.js"
   import { onMount } from "svelte"
@@ -20,10 +22,10 @@
 
   const internalId = useId()
   let {
-    ref = $bindable(),
-    id = `headlessui-dialog-title-${internalId}` as PropsOf<TTag>[string],
+    element = $bindable(),
+    id = `headlessui-dialog-title-${internalId}`,
     ...theirProps
-  }: { as?: TTag } & DialogTitleProps<TTag> = $props()
+  }: DialogTitleProps = $props()
   const _state = useDialogContext("Dialog.Panel")
   const { dialogState, setTitleId } = $derived(_state)
 
@@ -41,4 +43,11 @@
   )
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} slots={slot} defaultTag={DEFAULT_TITLE_TAG} name="DialogTitle" bind:ref />
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  slots={slot}
+  defaultTag={DEFAULT_TITLE_TAG}
+  name="DialogTitle"
+  bind:element
+/>

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

@@ -1,34 +1,13 @@
-import type { ElementType, Props, PropsOf } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare let DEFAULT_TITLE_TAG: "h2";
-type TitleRenderPropArg = {
+export type TitleRenderPropArg = {
     open: boolean;
 };
-export type DialogTitleProps<TTag extends ElementType = typeof DEFAULT_TITLE_TAG> = Props<TTag, TitleRenderPropArg>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_TITLE_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, "as" | "children" | "refName" | "class"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
-        children?: import("../utils/types.js").Children<TitleRenderPropArg> | undefined;
-        ref?: HTMLElement;
-    } & (true extends (PropsOf<TTag> extends infer T_1 ? T_1 extends PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
-        class?: PropsOf<TTag>["class"] | ((bag: TitleRenderPropArg) => string) | undefined;
-    } : {});
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const DialogTitle: $$IsomorphicComponent;
-type DialogTitle<TTag extends ElementType = typeof DEFAULT_TITLE_TAG> = InstanceType<typeof DialogTitle<TTag>>;
+export type DialogTitleOwnProps = {
+    id?: string;
+    element?: HTMLElement;
+};
+export type DialogTitleProps = Props<typeof DEFAULT_TITLE_TAG, TitleRenderPropArg, DialogTitleOwnProps>;
+declare const DialogTitle: import("svelte").Component<DialogTitleProps, {}, "element">;
+type DialogTitle = ReturnType<typeof DialogTitle>;
 export default DialogTitle;

package/dist/dialog/context.svelte.js

@@ -6,8 +6,8 @@ export var DialogStates;
 })(DialogStates || (DialogStates = {}));
 export function useDialogContext(component) {
     const context = getContext("DialogContext");
-    if (context === null) {
-        let err = new Error(`<${component} /> is missing a parent <Dialog /> component.`);
+    if (!context) {
+        const err = new Error(`<${component} /> is missing a parent <Dialog /> component.`);
         if (Error.captureStackTrace)
             Error.captureStackTrace(err, useDialogContext);
         throw err;

package/dist/dialog/index.d.ts

@@ -1,4 +1,4 @@
-export { default as Dialog, type DialogProps } from "./Dialog.svelte";
-export { default as DialogBackdrop, type DialogBackdropProps } from "./DialogBackdrop.svelte";
-export { default as DialogPanel, type DialogPanelProps } from "./DialogPanel.svelte";
-export { default as DialogTitle, type DialogTitleProps } from "./DialogTitle.svelte";
+export { default as Dialog, type DialogProps, type DialogRenderPropArg as DialogSlot, type DialogOwnProps, } from "./Dialog.svelte";
+export { default as DialogBackdrop, type DialogBackdropProps, type BackdropRenderPropArg as DialogBackdropSlot, type DialogBackdropOwnProps, } from "./DialogBackdrop.svelte";
+export { default as DialogPanel, type DialogPanelProps, type PanelRenderPropArg as DialogPanelSlot, type DialogPanelOwnProps, } from "./DialogPanel.svelte";
+export { default as DialogTitle, type DialogTitleProps, type TitleRenderPropArg as DialogTitleSlot, type DialogTitleOwnProps, } from "./DialogTitle.svelte";

package/dist/dialog/index.js

@@ -1,4 +1,4 @@
-export { default as Dialog } from "./Dialog.svelte";
-export { default as DialogBackdrop } from "./DialogBackdrop.svelte";
-export { default as DialogPanel } from "./DialogPanel.svelte";
-export { default as DialogTitle } from "./DialogTitle.svelte";
+export { default as Dialog, } from "./Dialog.svelte";
+export { default as DialogBackdrop, } from "./DialogBackdrop.svelte";
+export { default as DialogPanel, } from "./DialogPanel.svelte";
+export { default as DialogTitle, } from "./DialogTitle.svelte";

package/dist/field/Field.svelte

@@ -1,32 +1,26 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
   let DEFAULT_FIELD_TAG = "div" as const
 
-  type FieldRenderPropArg = {}
-  type FieldPropsWeControl = never
-
-  export type FieldProps<TTag extends ElementType = typeof DEFAULT_FIELD_TAG> = Props<
-    TTag,
-    FieldRenderPropArg,
-    FieldPropsWeControl,
-    {
-      disabled?: boolean
-    }
-  >
+  export type FieldOwnProps = {
+    element?: HTMLElement
+    disabled?: boolean
+  }
+
+  export type FieldProps = Props<typeof DEFAULT_FIELD_TAG, {}, FieldOwnProps>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_FIELD_TAG">
-  import { useDisabled } from "../hooks/use-disabled.js"
+<script lang="ts">
+  import { provideDisabled } from "../hooks/use-disabled.js"
   import { createIdContext } from "../utils/id.js"
-  import { stateFromSlot } from "../utils/state.js"
   import { nanoid } from "nanoid"
-  import { setContext, type Snippet } from "svelte"
   import { useLabels } from "../label/context.svelte.js"
   import { useDescriptions } from "../description/context.svelte.js"
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import FormFieldsProvider from "../internal/FormFieldsProvider.svelte"
 
-  let { ref = $bindable(), disabled: ownDisabled = false, ...theirProps }: { as?: TTag } & FieldProps<TTag> = $props()
+  let { element = $bindable(), disabled: ownDisabled = false, children, ...theirProps }: FieldProps = $props()
 
   const inputId = `headlessui-control-${nanoid(8)}`
   createIdContext(inputId)
@@ -34,14 +28,8 @@
   useLabels()
   useDescriptions()
 
-  const providedDisabled = useDisabled()
-  const disabled = $derived(providedDisabled.value || ownDisabled)
-
-  setContext("DisabledContext", {
-    get value() {
-      return disabled
-    },
-  })
+  const disabledContext = provideDisabled(() => ownDisabled)
+  const { current: disabled } = $derived(disabledContext)
 
   const slot = $derived({ disabled })
 
@@ -51,4 +39,17 @@
   })
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_FIELD_TAG} name="Field" bind:ref />
+{#snippet wrapper(args: { props: Record<string, any> })}
+  <FormFieldsProvider>
+    {@render children?.(args)}
+  </FormFieldsProvider>
+{/snippet}
+
+<ElementOrComponent
+  {ourProps}
+  theirProps={{ ...theirProps, children: wrapper }}
+  {slot}
+  defaultTag={DEFAULT_FIELD_TAG}
+  name="Field"
+  bind:element
+/>

package/dist/field/Field.svelte.d.ts

@@ -1,37 +1,10 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare let DEFAULT_FIELD_TAG: "div";
-type FieldRenderPropArg = {};
-type FieldPropsWeControl = never;
-export type FieldProps<TTag extends ElementType = typeof DEFAULT_FIELD_TAG> = Props<TTag, FieldRenderPropArg, FieldPropsWeControl, {
+export type FieldOwnProps = {
+    element?: HTMLElement;
     disabled?: boolean;
-}>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_FIELD_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "disabled"> 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<FieldRenderPropArg> | 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: FieldRenderPropArg) => string) | undefined;
-    } : {}) & {
-        disabled?: boolean;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_FIELD_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_FIELD_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 Field: $$IsomorphicComponent;
-type Field<TTag extends ElementType = typeof DEFAULT_FIELD_TAG> = InstanceType<typeof Field<TTag>>;
+};
+export type FieldProps = Props<typeof DEFAULT_FIELD_TAG, {}, FieldOwnProps>;
+declare const Field: import("svelte").Component<FieldProps, {}, "element">;
+type Field = ReturnType<typeof Field>;
 export default Field;

package/dist/field/index.d.ts

@@ -1 +1 @@
-export { default as Field, type FieldProps } from "./Field.svelte";
+export { default as Field, type FieldProps, type FieldOwnProps } from "./Field.svelte";

package/dist/fieldset/Fieldset.svelte

@@ -1,34 +1,28 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
-  let DEFAULT_FIELDSET_TAG = "fieldset" as const
+  import type { Props } from "../utils/types.js"
+
+  const DEFAULT_FIELDSET_TAG = "fieldset" as const
 
-  type FieldsetRenderPropArg = {}
   type FieldsetPropsWeControl = "aria-labelledby" | "aria-disabled" | "role"
 
-  export type FieldsetProps<TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG> = Props<
-    TTag,
-    FieldsetRenderPropArg,
-    FieldsetPropsWeControl,
-    {
-      disabled?: boolean
-    }
-  >
+  export type FieldsetOwnProps = {
+    element?: HTMLElement
+    disabled?: boolean
+  }
+
+  export type FieldsetProps = Props<typeof DEFAULT_FIELDSET_TAG, {}, FieldsetOwnProps>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG">
+<script lang="ts">
   import { setContext } from "svelte"
   import { useDisabled } from "../hooks/use-disabled.js"
   import { useLabels } from "../label/context.svelte.js"
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
 
-  let {
-    ref = $bindable(),
-    disabled: ownDisabled = false,
-    ...theirProps
-  }: { as?: TTag } & FieldsetProps<TTag> = $props()
+  let { element = $bindable(), disabled: ownDisabled = false, ...theirProps }: FieldsetProps = $props()
 
   const providedDisabled = useDisabled()
-  const disabled = $derived(providedDisabled.value || ownDisabled)
+  const disabled = $derived(providedDisabled.current || ownDisabled)
 
   setContext("DisabledContext", {
     get value() {
@@ -39,7 +33,7 @@
   const labelledBy = useLabels()
   const slot = $derived({ disabled })
   const ourProps = $derived(
-    (theirProps.as ?? DEFAULT_FIELDSET_TAG) === "fieldset"
+    !theirProps.asChild
       ? {
           "aria-labelledby": labelledBy.value,
           disabled: disabled || undefined,
@@ -52,4 +46,4 @@
   )
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_FIELDSET_TAG} name="Fieldset" bind:ref />
+<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_FIELDSET_TAG} name="Fieldset" bind:element />

package/dist/fieldset/Fieldset.svelte.d.ts

@@ -1,37 +1,10 @@
-import type { ElementType, Props } from "../utils/types.js";
-declare let DEFAULT_FIELDSET_TAG: "fieldset";
-type FieldsetRenderPropArg = {};
-type FieldsetPropsWeControl = "aria-labelledby" | "aria-disabled" | "role";
-export type FieldsetProps<TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG> = Props<TTag, FieldsetRenderPropArg, FieldsetPropsWeControl, {
+import type { Props } from "../utils/types.js";
+declare const DEFAULT_FIELDSET_TAG: "fieldset";
+export type FieldsetOwnProps = {
+    element?: HTMLElement;
     disabled?: boolean;
-}>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "disabled" | FieldsetPropsWeControl> 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<FieldsetRenderPropArg> | 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: FieldsetRenderPropArg) => string) | undefined;
-    } : {}) & {
-        disabled?: boolean;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_FIELDSET_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_FIELDSET_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 Fieldset: $$IsomorphicComponent;
-type Fieldset<TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG> = InstanceType<typeof Fieldset<TTag>>;
+};
+export type FieldsetProps = Props<typeof DEFAULT_FIELDSET_TAG, {}, FieldsetOwnProps>;
+declare const Fieldset: import("svelte").Component<FieldsetProps, {}, "element">;
+type Fieldset = ReturnType<typeof Fieldset>;
 export default Fieldset;

package/dist/fieldset/index.d.ts

@@ -1 +1 @@
-export { default as Fieldset, type FieldsetProps } from "./Fieldset.svelte";
+export { default as Fieldset, type FieldsetProps, type FieldsetOwnProps } from "./Fieldset.svelte";

package/dist/focus-trap/FocusTrap.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import { getOwnerDocument } from "../utils/owner.js"
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
   import { history } from "../utils/active-element-history.js"
   import { useWatch } from "../hooks/use-watch.svelte.js"
   import { microTask } from "../utils/microTask.js"
@@ -13,6 +13,7 @@
   import { useDisposables } from "../utils/disposables.js"
   import Hidden, { HiddenFeatures } from "../internal/Hidden.svelte"
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { FocusTrapFeatures } from "./FocusTrapFeatures.js"
 
   type Containers =
     // Lazy resolved containers
@@ -34,45 +35,24 @@
     return all
   }
 
-  let DEFAULT_FOCUS_TRAP_TAG = "div" as const
+  const DEFAULT_FOCUS_TRAP_TAG = "div" as const
 
-  export enum FocusTrapFeatures {
-    /** No features enabled for the focus trap. */
-    None = 0,
+  export * from "./FocusTrapFeatures.js"
 
-    /** Ensure that we move focus initially into the container. */
-    InitialFocus = 1 << 0,
-
-    /** Ensure that pressing `Tab` and `Shift+Tab` is trapped within the container. */
-    TabLock = 1 << 1,
-
-    /** Ensure that programmatically moving focus outside of the container is disallowed. */
-    FocusLock = 1 << 2,
-
-    /** Ensure that we restore the focus when unmounting the focus trap. */
-    RestoreFocus = 1 << 3,
+  type FocusTrapPropsWeControl = never
 
-    /** Initial focus should look for the `data-autofocus` */
-    AutoFocus = 1 << 4,
+  export type FocusTrapOwnProps = {
+    element?: HTMLElement
+    initialFocus?: HTMLElement
+    // A fallback element to focus, but this element will be skipped when tabbing around. This is
+    // only done for focusing a fallback parent container (e.g.: A `Dialog`, but you want to tab
+    // *inside* the dialog excluding the dialog itself).
+    initialFocusFallback?: HTMLElement
+    features?: FocusTrapFeatures
+    containers?: Containers
   }
 
-  type FocusTrapRenderPropArg = {}
-  type FocusTrapPropsWeControl = never
-
-  export type FocusTrapProps<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG> = Props<
-    TTag,
-    FocusTrapRenderPropArg,
-    FocusTrapPropsWeControl,
-    {
-      initialFocus?: HTMLElement
-      // A fallback element to focus, but this element will be skipped when tabbing around. This is
-      // only done for focusing a fallback parent container (e.g.: A `Dialog`, but you want to tab
-      // *inside* the dialog excluding the dialog itself).
-      initialFocusFallback?: HTMLElement
-      features?: FocusTrapFeatures
-      containers?: Containers
-    }
-  >
+  export type FocusTrapProps = Props<typeof DEFAULT_FOCUS_TRAP_TAG, {}, FocusTrapOwnProps>
 
   function useRestoreElement(options?: { enabled: boolean }) {
     const { enabled } = $derived(options ?? { enabled: true })
@@ -310,10 +290,10 @@
   }
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG">
+<script lang="ts">
   let container = $state<HTMLElement | null>(null)
   let {
-    ref = $bindable(),
+    element = $bindable(),
     initialFocus,
     initialFocusFallback,
     containers,
@@ -322,13 +302,13 @@
       FocusTrapFeatures.FocusLock |
       FocusTrapFeatures.RestoreFocus,
     ...theirProps
-  }: { as?: TTag } & FocusTrapProps<TTag> = $props()
+  }: FocusTrapProps = $props()
 
   /*if (!useServerHandoffComplete()) {
     features = FocusTrapFeatures.None
   }*/
 
-  const ownerDocument = $derived(getOwnerDocument(ref))
+  const ownerDocument = $derived(getOwnerDocument(element))
 
   useRestoreFocus({
     get features() {
@@ -458,21 +438,17 @@
 </script>
 
 {#if tabLockEnabled}
-  <Hidden
-    as="button"
-    type="button"
-    data-headlessui-focus-guard
-    onfocus={handleFocus}
-    features={HiddenFeatures.Focusable}
-  />
+  <Hidden asChild features={HiddenFeatures.Focusable}>
+    {#snippet children({ props })}
+      <button {...props} type="button" data-headlessui-focus-guard onfocus={handleFocus}>&zwnj;</button>
+    {/snippet}
+  </Hidden>
 {/if}
-<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_FOCUS_TRAP_TAG} name="FocusTrap" bind:ref />
+<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_FOCUS_TRAP_TAG} name="FocusTrap" bind:element />
 {#if tabLockEnabled}
-  <Hidden
-    as="button"
-    type="button"
-    data-headlessui-focus-guard
-    onfocus={handleFocus}
-    features={HiddenFeatures.Focusable}
-  />
+  <Hidden asChild features={HiddenFeatures.Focusable}>
+    {#snippet children({ props })}
+      <button {...props} type="button" data-headlessui-focus-guard onfocus={handleFocus}>&zwnj;</button>
+    {/snippet}
+  </Hidden>
 {/if}