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

package/dist/dialog/Dialog.svelte

@@ -1,17 +1,47 @@
-<script lang="ts" module>import { MainTreeProvider } from "../hooks/use-root-containers.svelte.js";
-import { useOpenClosed } from "../internal/open-closed.js";
-import { RenderFeatures } from "../utils/render.js";
-import { getContext } from "svelte";
-import InternalDialog from "./InternalDialog.svelte";
-import Transition from "../transition/Transition.svelte";
+<script lang="ts" module>import { RenderFeatures } from "../utils/render.js";
 export const DEFAULT_DIALOG_TAG = "div";
 export const DialogRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static;
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DIALOG_TAG">let { ref = $bindable(), transition = false, open, ...rest } = $props();
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_DIALOG_TAG">import { useId } from "../hooks/use-id.js";
+import { useMainTreeNode, useRootContainers } from "../hooks/use-root-containers.svelte.js";
+import { clearOpenClosedContext, State, useOpenClosed } from "../internal/open-closed.js";
+import { useNestedPortals } from "../portal/InternalPortal.svelte";
+import { getOwnerDocument } from "../utils/owner.js";
+import { useInertOthers } from "../hooks/use-inert-others.svelte.js";
+import { useOutsideClick } from "../hooks/use-outside-click.svelte.js";
+import { useEscape } from "../hooks/use-escape.svelte.js";
+import { useScrollLock } from "../hooks/use-scroll-lock.svelte.js";
+import { useOnDisappear } from "../hooks/use-on-disappear.svelte.js";
+import { setContext } from "svelte";
+import { useIsTouchDevice } from "../hooks/use-is-touch-device.svelte.js";
+import FocusTrap, { FocusTrapFeatures } from "../focus-trap/FocusTrap.svelte";
+import Portal from "../portal/Portal.svelte";
+import PortalGroup from "../portal/PortalGroup.svelte";
+import ForcePortalRoot from "../internal/ForcePortalRoot.svelte";
+import { createCloseContext } from "../internal/close-provider.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { DialogStates } from "./context.svelte.js";
+import { useDescriptions } from "../description/context.svelte.js";
+import MainTreeProvider from "../internal/MainTreeProvider.svelte";
+import Transition from "../transition/Transition.svelte";
+const internalId = useId();
+let {
+  ref = $bindable(),
+  id = `headlessui-dialog-${internalId}`,
+  open: theirOpen,
+  onclose,
+  initialFocus,
+  role: theirRole = "dialog",
+  autofocus = true,
+  __demoMode = false,
+  unmount = false,
+  transition = false,
+  ...theirProps
+} = $props();
 const usesOpenClosedState = useOpenClosed();
-const hasOpen = $derived(open !== void 0 || usesOpenClosedState);
-const hasOnClose = $derived(rest.hasOwnProperty("onclose"));
+const hasOpen = $derived(theirOpen !== void 0 || usesOpenClosedState);
+const hasOnClose = $derived(theirProps.hasOwnProperty("onclose"));
 $effect(() => {
   if (!hasOpen && !hasOnClose) {
     throw new Error(`You have to provide an \`open\` and an \`onclose\` prop to the \`Dialog\` component.`);
@@ -27,25 +57,223 @@ $effect(() => {
       `You provided an \`open\` prop to the \`Dialog\`, but the value is not a boolean. Received: ${open}`
     );
   }
-  if (typeof rest.onclose !== "function") {
+  if (typeof theirProps.onclose !== "function") {
     throw new Error(
-      `You provided an \`onclose\` prop to the \`Dialog\`, but the value is not a function. Received: ${rest.onclose}`
+      `You provided an \`onclose\` prop to the \`Dialog\`, but the value is not a function. Received: ${theirProps.onclose}`
     );
   }
 });
-const DialogComponent = InternalDialog;
+let didWarnOnRole = $state(false);
+const role = $derived.by(() => {
+  if (theirRole === "dialog" || theirRole === "alertdialog") {
+    return theirRole;
+  }
+  if (!didWarnOnRole) {
+    didWarnOnRole = true;
+    console.warn(
+      `Invalid role [${theirRole}] passed to <Dialog />. Only \`dialog\` and and \`alertdialog\` are supported. Using \`dialog\` instead.`
+    );
+  }
+  return "dialog";
+});
+const open = $derived(
+  theirOpen === void 0 && usesOpenClosedState !== null ? (usesOpenClosedState.value & State.Open) === State.Open : theirOpen
+);
+const ownerDocument = $derived(getOwnerDocument(ref));
+const dialogState = $derived(open ? DialogStates.Open : DialogStates.Closed);
+let _state = $state({
+  titleId: null,
+  panelRef: null
+});
+const close = $derived(() => onclose(false));
+const setTitleId = (id2) => _state.titleId = id2;
+const enabled = $derived(dialogState === DialogStates.Open);
+const nestedPortals = useNestedPortals();
+const { portals } = $derived(nestedPortals);
+const defaultContainer = {
+  get current() {
+    return _state.panelRef ?? ref;
+  }
+};
+const mainTreeNode = useMainTreeNode();
+let { resolvedContainers: resolvedRootContainers } = $derived(
+  useRootContainers({
+    get mainTreeNode() {
+      return mainTreeNode.node;
+    },
+    get portals() {
+      return portals;
+    },
+    get defaultContainers() {
+      return defaultContainer.current ? [defaultContainer.current] : [];
+    }
+  })
+);
+const isClosing = $derived(
+  usesOpenClosedState !== null ? (usesOpenClosedState.value & State.Closing) === State.Closing : false
+);
+const inertOthersEnabled = $derived(__demoMode ? false : isClosing ? false : enabled);
+useInertOthers({
+  get enabled() {
+    return inertOthersEnabled;
+  },
+  elements: {
+    get allowed() {
+      return [
+        // Allow the headlessui-portal of the Dialog to be interactive. This
+        // contains the current dialog and the necessary focus guard elements.
+        ref?.closest("[data-headlessui-portal]") ?? null
+      ];
+    },
+    get disallowed() {
+      return [
+        // Disallow the "main" tree root node
+        mainTreeNode.node?.closest("body > *:not(#headlessui-portal-root)") ?? null
+      ];
+    }
+  }
+});
+useOutsideClick({
+  get enabled() {
+    return enabled;
+  },
+  get containers() {
+    return resolvedRootContainers;
+  },
+  cb(event) {
+    event.preventDefault();
+    close();
+  }
+});
+useEscape({
+  get enabled() {
+    return enabled;
+  },
+  get view() {
+    return ownerDocument?.defaultView ?? null;
+  },
+  cb(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (document.activeElement && "blur" in document.activeElement && typeof document.activeElement.blur === "function") {
+      document.activeElement.blur();
+    }
+    close();
+  }
+});
+const scrollLockEnabled = $derived(__demoMode ? false : isClosing ? false : enabled);
+useScrollLock({
+  get enabled() {
+    return scrollLockEnabled;
+  },
+  get ownerDocument() {
+    return ownerDocument;
+  },
+  resolveAllowedContainers() {
+    return resolvedRootContainers;
+  }
+});
+useOnDisappear({
+  get enabled() {
+    return enabled;
+  },
+  get ref() {
+    return ref;
+  },
+  get ondisappear() {
+    return close;
+  }
+});
+const describedby = useDescriptions();
+setContext("DialogContext", {
+  get titleId() {
+    return _state.titleId;
+  },
+  get panelRef() {
+    return _state.panelRef;
+  },
+  get dialogState() {
+    return dialogState;
+  },
+  get close() {
+    return close;
+  },
+  get unmount() {
+    return unmount;
+  },
+  setTitleId
+});
+const slot = $derived({ open: dialogState === DialogStates.Open });
+const ourProps = $derived({
+  id,
+  role,
+  tabIndex: -1,
+  "aria-modal": __demoMode ? void 0 : dialogState === DialogStates.Open ? true : void 0,
+  "aria-labelledby": _state.titleId,
+  "aria-describedby": describedby.value,
+  unmount
+});
+const shouldMoveFocusInside = !useIsTouchDevice().value;
+const focusTrapFeatures = $derived.by(() => {
+  let focusTrapFeatures2 = FocusTrapFeatures.None;
+  if (enabled && !__demoMode) {
+    focusTrapFeatures2 |= FocusTrapFeatures.RestoreFocus;
+    focusTrapFeatures2 |= FocusTrapFeatures.TabLock;
+    if (autofocus) {
+      focusTrapFeatures2 |= FocusTrapFeatures.AutoFocus;
+    }
+    if (shouldMoveFocusInside) {
+      focusTrapFeatures2 |= FocusTrapFeatures.InitialFocus;
+    }
+  }
+  return focusTrapFeatures2;
+});
+clearOpenClosedContext();
+createCloseContext({
+  get close() {
+    return close;
+  }
+});
 </script>
 
-{#if (open !== undefined || transition) && !rest.static}
+{#snippet internal(transitionProps?: Record<string, any>)}
+  <ForcePortalRoot force={true}>
+    <Portal>
+      <PortalGroup target={ref ?? null}>
+        <ForcePortalRoot force={false}>
+          <FocusTrap
+            {initialFocus}
+            initialFocusFallback={ref}
+            containers={resolvedRootContainers}
+            features={focusTrapFeatures}
+          >
+            <ElementOrComponent
+              {ourProps}
+              theirProps={{ ...theirProps, ...transitionProps }}
+              slots={slot}
+              defaultTag={DEFAULT_DIALOG_TAG}
+              features={DialogRenderFeatures}
+              visible={dialogState === DialogStates.Open}
+              name="Dialog"
+              bind:ref
+            />
+          </FocusTrap>
+        </ForcePortalRoot>
+      </PortalGroup>
+    </Portal>
+  </ForcePortalRoot>
+{/snippet}
+
+{#if (open !== undefined || transition) && !theirProps.static}
   <MainTreeProvider>
-    <Transition show={open} {transition} unmount={rest.unmount} {ref}>
-      {#snippet children(slot, props)}
-        <DialogComponent bind:ref {...props} {...rest} />
+    <Transition show={open} {transition} unmount={theirProps.unmount} {ref}>
+      {#snippet children({ props })}
+        {@render internal(props)}
       {/snippet}
     </Transition>
   </MainTreeProvider>
 {:else}
   <MainTreeProvider>
-    <DialogComponent bind:ref {open} {...rest} />
+    {@render internal()}
   </MainTreeProvider>
 {/if}

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

@@ -1,6 +1,5 @@
-import { type PropsForFeatures } from "../utils/render.js";
 import type { ElementType, Props } from "../utils/types.js";
-import { type Snippet } from "svelte";
+import { type PropsForFeatures } from "../utils/render.js";
 export declare const DEFAULT_DIALOG_TAG: "div";
 export type DialogRenderPropArg = {
     open: boolean;
@@ -8,6 +7,7 @@ export type DialogRenderPropArg = {
 type DialogPropsWeControl = "aria-describedby" | "aria-labelledby" | "aria-modal";
 export declare const DialogRenderFeatures: number;
 export type DialogProps<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> = Props<TTag, DialogRenderPropArg, DialogPropsWeControl, PropsForFeatures<typeof DialogRenderFeatures> & {
+    as?: TTag;
     id?: string;
     open?: boolean;
     onclose(value: boolean): void;
@@ -17,19 +17,21 @@ export type DialogProps<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> =
     transition?: boolean;
     __demoMode?: boolean;
 }>;
-export type DialogChildren = Snippet<[DialogRenderPropArg]>;
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "autofocus" | "unmount" | "static" | "id" | "role" | "onclose" | "initialFocus" | DialogPropsWeControl | "open" | "transition" | "__demoMode"> 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<DialogRenderPropArg> | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "autofocus" | "unmount" | "static" | "id" | "role" | "onclose" | "initialFocus" | "transition" | DialogPropsWeControl | "open" | "__demoMode"> 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: DialogRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: DialogRenderPropArg) => 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: DialogRenderPropArg) => string) | undefined;
-    } : {}) & {
+    } & {
         static?: boolean | undefined;
         unmount?: boolean | undefined;
     } & {
+        as?: TTag | undefined;
         id?: string;
         open?: boolean;
         onclose(value: boolean): void;
@@ -39,9 +41,7 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_DIALOG
         transition?: boolean;
         __demoMode?: boolean;
     };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -50,9 +50,7 @@ interface $$IsomorphicComponent {
     new <TTag extends ElementType = typeof DEFAULT_DIALOG_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_DIALOG_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_DIALOG_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const Dialog: $$IsomorphicComponent;

package/dist/dialog/DialogBackdrop.svelte

@@ -16,7 +16,7 @@ const ourProps = mergeProps({
 
 {#if transition}
   <TransitionChild {unmount} {ref}>
-    {#snippet children(slot, props)}
+    {#snippet children({ slot, props })}
       <ElementOrComponent
         ourProps={{ ...ourProps, ...props }}
         {theirProps}

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

@@ -9,17 +9,17 @@ export type DialogBackdropProps<TTag extends ElementType = typeof DEFAULT_BACKDR
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "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<BackdropRenderPropArg> | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "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("svelte").Snippet<[{
+            slot: BackdropRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: BackdropRenderPropArg) => 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: BackdropRenderPropArg) => string) | undefined;
-    } : {}) & {
+    } & {
         transition?: boolean;
     };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -28,9 +28,7 @@ interface $$IsomorphicComponent {
     new <TTag extends ElementType = typeof DEFAULT_BACKDROP_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_BACKDROP_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_BACKDROP_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const DialogBackdrop: $$IsomorphicComponent;

package/dist/dialog/DialogPanel.svelte

@@ -6,7 +6,6 @@ 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(),
@@ -30,7 +29,7 @@ const ourProps = $derived(
 
 {#if transition}
   <TransitionChild {unmount} {ref}>
-    {#snippet children(slot, props)}
+    {#snippet children({ slot, props })}
       <ElementOrComponent
         ourProps={{ ...ourProps, ...props }}
         {theirProps}

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

@@ -10,18 +10,18 @@ export type DialogPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG
 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;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "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("svelte").Snippet<[{
+            slot: PanelRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: PanelRenderPropArg) => 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: PanelRenderPropArg) => string) | undefined;
-    } : {}) & {
+    } & {
         id?: string;
         transition?: boolean;
     };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -30,9 +30,7 @@ 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']>;
+    <TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const DialogPanel: $$IsomorphicComponent;

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

@@ -7,15 +7,15 @@ export type DialogTitleProps<TTag extends ElementType = typeof DEFAULT_TITLE_TAG
 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;
+    } & (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: TitleRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: TitleRenderPropArg) => 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: TitleRenderPropArg) => string) | undefined;
-    } : {});
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
     };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -24,9 +24,7 @@ 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']>;
+    <TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const DialogTitle: $$IsomorphicComponent;

package/dist/dialog/context.svelte.js

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

package/dist/field/Field.svelte

@@ -1,26 +1,25 @@
 <script lang="ts" module>let DEFAULT_FIELD_TAG = "div";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_FIELD_TAG">import { useDisabled } from "../hooks/use-disabled.js";
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_FIELD_TAG">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 } from "svelte";
 import { useLabels } from "../label/context.svelte.js";
 import { useDescriptions } from "../description/context.svelte.js";
 import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-let { ref = $bindable(), disabled: ownDisabled = false, ...theirProps } = $props();
+import FormFieldsProvider from "../internal/FormFieldsProvider.svelte";
+let {
+  ref = $bindable(),
+  disabled: ownDisabled = false,
+  children,
+  ...theirProps
+} = $props();
 const inputId = `headlessui-control-${nanoid(8)}`;
 createIdContext(inputId);
 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 });
 const ourProps = $derived({
   disabled: disabled || void 0,
@@ -28,4 +27,17 @@ const ourProps = $derived({
 });
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_FIELD_TAG} name="Field" bind:ref />
+{#snippet wrapper(args: Parameters<Exclude<typeof children, undefined>>[0])}
+  <FormFieldsProvider>
+    {#if children}{@render children(args)}{/if}
+  </FormFieldsProvider>
+{/snippet}
+
+<ElementOrComponent
+  {ourProps}
+  theirProps={{ ...theirProps, children: wrapper }}
+  {slot}
+  defaultTag={DEFAULT_FIELD_TAG}
+  name="Field"
+  bind:ref
+/>

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

@@ -8,17 +8,17 @@ export type FieldProps<TTag extends ElementType = typeof DEFAULT_FIELD_TAG> = Pr
 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;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "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("svelte").Snippet<[{
+            slot: FieldRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: FieldRenderPropArg) => 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: FieldRenderPropArg) => string) | undefined;
-    } : {}) & {
+    } & {
         disabled?: boolean;
     };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -27,9 +27,7 @@ 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']>;
+    <TTag extends ElementType = typeof DEFAULT_FIELD_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const Field: $$IsomorphicComponent;

package/dist/fieldset/Fieldset.svelte

@@ -11,7 +11,7 @@ let {
   ...theirProps
 } = $props();
 const providedDisabled = useDisabled();
-const disabled = $derived(providedDisabled.value || ownDisabled);
+const disabled = $derived(providedDisabled.current || ownDisabled);
 setContext("DisabledContext", {
   get value() {
     return disabled;

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

@@ -8,17 +8,17 @@ export type FieldsetProps<TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG
 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;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "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("svelte").Snippet<[{
+            slot: FieldsetRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: FieldsetRenderPropArg) => 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: FieldsetRenderPropArg) => string) | undefined;
-    } : {}) & {
+    } & {
         disabled?: boolean;
     };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -27,9 +27,7 @@ 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']>;
+    <TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const Fieldset: $$IsomorphicComponent;