@pzerelles/headlessui-svelte 2.1.2-next.22 → 2.1.2-next.24

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,22 @@ 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?: Snippet<[DialogRenderPropArg, Record<string, any>]> | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "class") | "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;
         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;
+    } & (true extends (import("svelte/elements.js").SvelteHTMLElements[TTag] extends infer T_1 ? T_1 extends import("svelte/elements.js").SvelteHTMLElements[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?: string | ((bag: DialogRenderPropArg) => string) | null | undefined;
     } : {}) & {
         static?: boolean | undefined;
         unmount?: boolean | undefined;
     } & {
+        as?: TTag | undefined;
         id?: string;
         open?: boolean;
         onclose(value: boolean): void;

package/dist/dialog/DialogBackdrop.svelte

@@ -1,22 +1,39 @@
-<script lang="ts" module>let DEFAULT_BACKDROP_TAG = "div";
+<script lang="ts" module>
+  import type { ElementType, Props } from "../utils/types.js"
+
+  let DEFAULT_BACKDROP_TAG = "div" as const
+  type BackdropRenderPropArg = {
+    open: boolean
+  }
+
+  export type DialogBackdropProps<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = Props<
+    TTag,
+    BackdropRenderPropArg,
+    never,
+    { transition?: boolean }
+  >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG">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";
-let { ref = $bindable(), transition = false, ...theirProps } = $props();
-const _state = useDialogContext("Dialog.Panel");
-const { dialogState, unmount } = $derived(_state);
-const slot = $derived({ open: dialogState === DialogStates.Open });
-const ourProps = mergeProps({
-  "aria-hidden": true
-});
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG">
+  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"
+
+  let { ref = $bindable(), transition = false, ...theirProps }: { as?: TTag } & DialogBackdropProps<TTag> = $props()
+  const _state = useDialogContext("Dialog.Panel")
+  const { dialogState, unmount } = $derived(_state)
+
+  const slot = $derived({ open: dialogState === DialogStates.Open } satisfies BackdropRenderPropArg)
+
+  const ourProps = mergeProps({
+    "aria-hidden": true,
+  })
 </script>
 
 {#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,11 +9,14 @@ 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("svelte").Snippet<[BackdropRenderPropArg, Record<string, any>]> | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "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("svelte").Snippet<[{
+            slot: BackdropRenderPropArg;
+            props: Record<string, any>;
+        }]> | 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;
+    } & (true extends (import("svelte/elements.js").SvelteHTMLElements[TTag] extends infer T_1 ? T_1 extends import("svelte/elements.js").SvelteHTMLElements[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?: string | ((bag: BackdropRenderPropArg) => string) | null | undefined;
     } : {}) & {
         transition?: boolean;
     };

package/dist/dialog/DialogPanel.svelte

@@ -1,35 +1,58 @@
-<script lang="ts" module>let DEFAULT_PANEL_TAG = "div";
+<script lang="ts" module>
+  import type { ElementType, Props } from "../utils/types.js"
+
+  let DEFAULT_PANEL_TAG = "div" as const
+  type PanelRenderPropArg = {
+    open: boolean
+  }
+
+  export type DialogPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<
+    TTag,
+    PanelRenderPropArg,
+    never,
+    {
+      id?: string
+      transition?: boolean
+    }
+  >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANEL_TAG">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";
-let internalId = useId();
-let {
-  ref = $bindable(),
-  id = `headlessui-dialog-panel-${internalId}`,
-  transition = false,
-  ...theirProps
-} = $props();
-const _state = useDialogContext("Dialog.Panel");
-const { dialogState, unmount } = $derived(_state);
-const slot = $derived({ open: dialogState === DialogStates.Open });
-const handleClick = (event) => {
-  event.stopPropagation();
-};
-const ourProps = $derived(
-  mergeProps({
-    id,
-    onclick: handleClick
-  })
-);
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANEL_TAG">
+  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"
+
+  let internalId = useId()
+  let {
+    ref = $bindable(),
+    id = `headlessui-dialog-panel-${internalId}`,
+    transition = false,
+    ...theirProps
+  }: { as?: TTag } & DialogPanelProps<TTag> = $props()
+  const _state = useDialogContext("Dialog.Panel")
+  const { dialogState, unmount } = $derived(_state)
+
+  const slot = $derived({ open: dialogState === DialogStates.Open } satisfies PanelRenderPropArg)
+
+  // Prevent the click events inside the Dialog.Panel from bubbling through the React Tree which
+  // could submit wrapping <form> elements even if we portalled the Dialog.
+  const handleClick = (event: MouseEvent) => {
+    event.stopPropagation()
+  }
+
+  const ourProps = $derived(
+    mergeProps({
+      id,
+      onclick: handleClick,
+    })
+  )
 </script>
 
 {#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,11 +10,14 @@ 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("svelte").Snippet<[PanelRenderPropArg, Record<string, any>]> | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "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("svelte").Snippet<[{
+            slot: PanelRenderPropArg;
+            props: Record<string, any>;
+        }]> | 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;
+    } & (true extends (import("svelte/elements.js").SvelteHTMLElements[TTag] extends infer T_1 ? T_1 extends import("svelte/elements.js").SvelteHTMLElements[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?: string | ((bag: PanelRenderPropArg) => string) | null | undefined;
     } : {}) & {
         id?: string;
         transition?: boolean;

package/dist/dialog/DialogTitle.svelte

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

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

@@ -7,11 +7,14 @@ 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("svelte").Snippet<[TitleRenderPropArg, Record<string, any>]> | undefined;
+    } & (Exclude<keyof PropsOf<TTag>, "as" | "children" | "class"> 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;
         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;
+    } & (true extends (import("svelte/elements.js").SvelteHTMLElements[TTag] extends infer T_1 ? T_1 extends import("svelte/elements.js").SvelteHTMLElements[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?: string | ((bag: TitleRenderPropArg) => string) | null | undefined;
     } : {});
     events(): {} & {
         [evt: string]: CustomEvent<any>;

package/dist/field/Field.svelte

@@ -1,47 +1,63 @@
-<script lang="ts" module>let DEFAULT_FIELD_TAG = "div";
+<script lang="ts" module>
+  import type { ElementType, 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
+    }
+  >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_FIELD_TAG">import { useDisabled } from "../hooks/use-disabled.js";
-import { createIdContext } from "../utils/id.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";
-import FormFieldsProvider from "../internal/FormFieldsProvider.svelte";
-let {
-  ref = $bindable(),
-  disabled: ownDisabled = false,
-  children: theirChildren,
-  ...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 slot = $derived({ disabled });
-const ourProps = $derived({
-  disabled: disabled || void 0,
-  "aria-disabled": disabled || void 0
-});
+<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 { nanoid } from "nanoid"
+  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,
+    children,
+    ...theirProps
+  }: { as?: TTag } & FieldProps<TTag> = $props()
+
+  const inputId = `headlessui-control-${nanoid(8)}`
+  createIdContext(inputId)
+
+  useLabels()
+  useDescriptions()
+
+  const disabledContext = provideDisabled(() => ownDisabled)
+  const { current: disabled } = $derived(disabledContext)
+
+  const slot = $derived({ disabled })
+
+  const ourProps = $derived({
+    disabled: disabled || undefined,
+    "aria-disabled": disabled || undefined,
+  })
 </script>
 
-{#snippet children(slot: FieldRenderPropArg, props: Record<string, any>)}
+{#snippet wrapper(args: Parameters<Exclude<typeof children, undefined>>[0])}
   <FormFieldsProvider>
-    {#if theirChildren}{@render theirChildren(slot, props)}{/if}
+    {#if children}{@render children(args)}{/if}
   </FormFieldsProvider>
 {/snippet}
 
 <ElementOrComponent
   {ourProps}
-  theirProps={{ ...theirProps, children }}
+  theirProps={{ ...theirProps, children: wrapper }}
   {slot}
   defaultTag={DEFAULT_FIELD_TAG}
   name="Field"

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

@@ -8,11 +8,14 @@ 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("svelte").Snippet<[FieldRenderPropArg, Record<string, any>]> | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "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("svelte").Snippet<[{
+            slot: FieldRenderPropArg;
+            props: Record<string, any>;
+        }]> | 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;
+    } & (true extends (import("svelte/elements.js").SvelteHTMLElements[TTag] extends infer T_1 ? T_1 extends import("svelte/elements.js").SvelteHTMLElements[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?: string | ((bag: FieldRenderPropArg) => string) | null | undefined;
     } : {}) & {
         disabled?: boolean;
     };

package/dist/fieldset/Fieldset.svelte

@@ -1,34 +1,55 @@
-<script lang="ts" module>let DEFAULT_FIELDSET_TAG = "fieldset";
+<script lang="ts" module>
+  import type { ElementType, Props } from "../utils/types.js"
+  let 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
+    }
+  >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG">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
-} = $props();
-const providedDisabled = useDisabled();
-const disabled = $derived(providedDisabled.value || ownDisabled);
-setContext("DisabledContext", {
-  get value() {
-    return disabled;
-  }
-});
-const labelledBy = useLabels();
-const slot = $derived({ disabled });
-const ourProps = $derived(
-  (theirProps.as ?? DEFAULT_FIELDSET_TAG) === "fieldset" ? {
-    "aria-labelledby": labelledBy.value,
-    disabled: disabled || void 0
-  } : {
-    role: "group",
-    "aria-labelledby": labelledBy.value,
-    "aria-disabled": disabled || void 0
-  }
-);
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG">
+  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()
+
+  const providedDisabled = useDisabled()
+  const disabled = $derived(providedDisabled.current || ownDisabled)
+
+  setContext("DisabledContext", {
+    get value() {
+      return disabled
+    },
+  })
+
+  const labelledBy = useLabels()
+  const slot = $derived({ disabled })
+  const ourProps = $derived(
+    (theirProps.as ?? DEFAULT_FIELDSET_TAG) === "fieldset"
+      ? {
+          "aria-labelledby": labelledBy.value,
+          disabled: disabled || undefined,
+        }
+      : {
+          role: "group",
+          "aria-labelledby": labelledBy.value,
+          "aria-disabled": disabled || undefined,
+        }
+  )
 </script>
 
 <ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_FIELDSET_TAG} name="Fieldset" bind:ref />

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

@@ -8,11 +8,14 @@ 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("svelte").Snippet<[FieldsetRenderPropArg, Record<string, any>]> | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "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("svelte").Snippet<[{
+            slot: FieldsetRenderPropArg;
+            props: Record<string, any>;
+        }]> | 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;
+    } & (true extends (import("svelte/elements.js").SvelteHTMLElements[TTag] extends infer T_1 ? T_1 extends import("svelte/elements.js").SvelteHTMLElements[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?: string | ((bag: FieldsetRenderPropArg) => string) | null | undefined;
     } : {}) & {
         disabled?: boolean;
     };