@pzerelles/headlessui-svelte 2.1.2-next.32 → 2.1.2-next.34

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

@@ -1,34 +1,8 @@
-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 FieldProps = Props<typeof DEFAULT_FIELD_TAG, {}, {
+    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>, ("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<[{
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: FieldRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        disabled?: boolean;
-    };
-    events(): {};
-    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']> & {}): 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>>;
+declare const Field: import("svelte").Component<FieldProps, {}, "element">;
 export default Field;

package/dist/fieldset/Fieldset.svelte

@@ -1,31 +1,27 @@
 <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,
+  export type FieldsetProps = Props<
+    typeof DEFAULT_FIELDSET_TAG,
+    {},
     {
+      element?: HTMLElement
       disabled?: boolean
     }
   >
 </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.current || ownDisabled)
@@ -39,7 +35,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 +48,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,34 +1,8 @@
-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 FieldsetProps = Props<typeof DEFAULT_FIELDSET_TAG, {}, {
+    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>, ("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<[{
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: FieldsetRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        disabled?: boolean;
-    };
-    events(): {};
-    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']> & {}): 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>>;
+declare const Fieldset: import("svelte").Component<FieldsetProps, {}, "element">;
 export default Fieldset;

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"
@@ -35,18 +35,17 @@
     return all
   }
 
-  let DEFAULT_FOCUS_TRAP_TAG = "div" as const
+  const DEFAULT_FOCUS_TRAP_TAG = "div" as const
 
   export * from "./FocusTrapFeatures.js"
 
-  type FocusTrapRenderPropArg = {}
   type FocusTrapPropsWeControl = never
 
-  export type FocusTrapProps<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG> = Props<
-    TTag,
-    FocusTrapRenderPropArg,
-    FocusTrapPropsWeControl,
+  export type FocusTrapProps = Props<
+    typeof DEFAULT_FOCUS_TRAP_TAG,
+    {},
     {
+      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
@@ -293,10 +292,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,
@@ -305,13 +304,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() {
@@ -441,21 +440,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}

package/dist/focus-trap/FocusTrap.svelte.d.ts

@@ -1,43 +1,14 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import { FocusTrapFeatures } from "./FocusTrapFeatures.js";
 type Containers = (() => Iterable<HTMLElement>) | Iterable<HTMLElement>;
-declare let DEFAULT_FOCUS_TRAP_TAG: "div";
+declare const DEFAULT_FOCUS_TRAP_TAG: "div";
 export * from "./FocusTrapFeatures.js";
-type FocusTrapRenderPropArg = {};
-type FocusTrapPropsWeControl = never;
-export type FocusTrapProps<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG> = Props<TTag, FocusTrapRenderPropArg, FocusTrapPropsWeControl, {
+export type FocusTrapProps = Props<typeof DEFAULT_FOCUS_TRAP_TAG, {}, {
+    element?: HTMLElement;
     initialFocus?: HTMLElement;
     initialFocusFallback?: HTMLElement;
     features?: FocusTrapFeatures;
     containers?: Containers;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "features" | "containers" | "initialFocus" | "initialFocusFallback"> 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<[{
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: FocusTrapRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        initialFocus?: HTMLElement;
-        initialFocusFallback?: HTMLElement;
-        features?: FocusTrapFeatures;
-        containers?: Containers;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_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_FOCUS_TRAP_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const FocusTrap: $$IsomorphicComponent;
-type FocusTrap<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG> = InstanceType<typeof FocusTrap<TTag>>;
+declare const FocusTrap: import("svelte").Component<FocusTrapProps, {}, "element">;
 export default FocusTrap;

package/dist/hooks/use-inert-others.svelte.js

@@ -5,7 +5,7 @@ const originals = new Map();
 const counts = new Map();
 function markInert(element) {
     // Increase count
-    let count = counts.get(element) ?? 0;
+    const count = counts.get(element) ?? 0;
     counts.set(element, count + 1);
     // Already marked as inert, no need to do it again
     if (count !== 0)
@@ -22,7 +22,7 @@ function markInert(element) {
 }
 function markNotInert(element) {
     // Decrease counts
-    let count = counts.get(element) ?? 1; // Should always exist
+    const count = counts.get(element) ?? 1; // Should always exist
     if (count === 1)
         counts.delete(element); // We are the last one, so we can delete the count
     else
@@ -30,7 +30,7 @@ function markNotInert(element) {
     // Not the last one, so we don't restore the original values (yet)
     if (count !== 1)
         return;
-    let original = originals.get(element);
+    const original = originals.get(element);
     if (!original)
         return; // Should never happen
     // Restore original values
@@ -70,7 +70,7 @@ function markNotInert(element) {
 export function useInertOthers(options) {
     const { enabled, elements } = $derived(options);
     const { allowed, disallowed } = $derived(elements ?? {});
-    let isTopLayer = useIsTopLayer({
+    const isTopLayer = useIsTopLayer({
         get enabled() {
             return enabled;
         },
@@ -79,25 +79,25 @@ export function useInertOthers(options) {
     $effect(() => {
         if (!isTopLayer.value)
             return;
-        let d = disposables();
+        const d = disposables();
         // Mark all disallowed elements as inert
-        for (let element of disallowed ?? []) {
+        for (const element of disallowed ?? []) {
             if (!element)
                 continue;
             d.add(markInert(element));
         }
         // Mark all siblings of allowed elements (and parents) as inert
-        let allowedElements = allowed ?? [];
-        for (let element of allowedElements) {
+        const allowedElements = allowed ?? [];
+        for (const element of allowedElements) {
             if (!element)
                 continue;
-            let ownerDocument = getOwnerDocument(element);
+            const ownerDocument = getOwnerDocument(element);
             if (!ownerDocument)
                 continue;
             let parent = element.parentElement;
             while (parent && parent !== ownerDocument.body) {
                 // Mark all siblings as inert
-                for (let node of parent.children) {
+                for (const node of parent.children) {
                     // If the node contains any of the elements we should not mark it as inert
                     // because it would make the elements unreachable.
                     if (node.tagName.toLowerCase() === "svelte:fragment" || allowedElements.some((el) => node.contains(el)))

package/dist/hooks/use-resolve-button-type.svelte.js

@@ -1,4 +1,3 @@
-import { untrack } from "svelte";
 function resolveType(props) {
     if (props.type)
         return props.type;

package/dist/input/Input.svelte

@@ -1,9 +1,10 @@
 <script lang="ts" module>
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
+  import type { SvelteHTMLElements } from "svelte/elements"
 
   const DEFAULT_INPUT_TAG = "input" as const
 
-  type InputRenderPropArg = {
+  export type InputRenderPropArg = {
     disabled: boolean
     hover: boolean
     focus: boolean
@@ -12,11 +13,12 @@
   }
   type InputPropsWeControl = "aria-labelledby" | "aria-describedby"
 
-  export type InputProps<TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TValue = string> = Props<
-    TTag,
+  export type InputProps<TValue = string> = Props<
+    typeof DEFAULT_INPUT_TAG,
     InputRenderPropArg,
-    InputPropsWeControl,
     {
+      element?: HTMLElement
+      id?: string
       value?: TValue
       disabled?: boolean
       invalid?: boolean
@@ -25,7 +27,7 @@
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TValue = string">
+<script lang="ts" generics="TValue = string">
   import { htmlid } from "../utils/id.js"
   import { useDisabled } from "../hooks/use-disabled.js"
   import { useProvidedId } from "../utils/id.js"
@@ -41,14 +43,14 @@
   const providedDisabled = useDisabled()
 
   let {
-    ref = $bindable(),
+    element = $bindable(),
     value = $bindable(),
-    id = (providedId || `headlessui-input-${internalId}`) as PropsOf<TTag>["id"],
+    id = providedId || `headlessui-input-${internalId}`,
     disabled: theirDisabled = false,
     autofocus = false,
     invalid = false,
     ...theirProps
-  }: { as?: TTag; value?: TValue } & InputProps<TTag, TValue> = $props()
+  }: InputProps<TValue> = $props()
   const disabled = $derived(providedDisabled.current || theirDisabled)
 
   const labelledBy = useLabelledBy()
@@ -87,4 +89,12 @@
   const slot = $derived({ disabled, invalid, hover, focus, autofocus } satisfies InputRenderPropArg)
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_INPUT_TAG} name="Input" bind:ref bind:value />
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  {slot}
+  defaultTag={DEFAULT_INPUT_TAG}
+  name="Input"
+  bind:element
+  bind:value
+/>

package/dist/input/Input.svelte.d.ts

@@ -1,47 +1,34 @@
-import type { ElementType, Props, PropsOf } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_INPUT_TAG: "input";
-type InputRenderPropArg = {
+export type InputRenderPropArg = {
     disabled: boolean;
     hover: boolean;
     focus: boolean;
     autofocus: boolean;
     invalid: boolean;
 };
-type InputPropsWeControl = "aria-labelledby" | "aria-describedby";
-export type InputProps<TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TValue = string> = Props<TTag, InputRenderPropArg, InputPropsWeControl, {
+export type InputProps<TValue = string> = Props<typeof DEFAULT_INPUT_TAG, InputRenderPropArg, {
+    element?: HTMLElement;
+    id?: string;
     value?: TValue;
     disabled?: boolean;
     invalid?: boolean;
     autofocus?: boolean;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TValue = string> {
-    props(): {
-        as?: TTag | undefined;
-        value?: TValue | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "invalid" | "disabled" | "autofocus" | "value" | InputPropsWeControl> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[InputRenderPropArg & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: InputRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        value?: TValue | undefined;
-        disabled?: boolean;
-        invalid?: boolean;
-        autofocus?: boolean;
-    };
+declare class __sveltets_Render<TValue = string> {
+    props(): InputProps<TValue>;
     events(): {};
     slots(): {};
-    bindings(): "ref" | "value";
+    bindings(): "element" | "value";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TValue = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag, TValue>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag, TValue>['props']>, ReturnType<__sveltets_Render<TTag, TValue>['events']>, ReturnType<__sveltets_Render<TTag, TValue>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag, TValue>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag, TValue>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TValue = string>(internal: unknown, props: ReturnType<__sveltets_Render<TTag, TValue>['props']> & {}): ReturnType<__sveltets_Render<TTag, TValue>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+    new <TValue = string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TValue>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TValue>['props']>, ReturnType<__sveltets_Render<TValue>['events']>, ReturnType<__sveltets_Render<TValue>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TValue>['bindings']>;
+    } & ReturnType<__sveltets_Render<TValue>['exports']>;
+    <TValue = string>(internal: unknown, props: ReturnType<__sveltets_Render<TValue>['props']> & {}): ReturnType<__sveltets_Render<TValue>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const Input: $$IsomorphicComponent;
-type Input<TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TValue = string> = InstanceType<typeof Input<TTag, TValue>>;
+type Input<TValue = string> = InstanceType<typeof Input<TValue>>;
 export default Input;

package/dist/input/index.d.ts

@@ -1 +1 @@
-export { default as Input, type InputProps } from "./Input.svelte";
+export { default as Input, type InputProps, type InputRenderPropArg as InputSlot } from "./Input.svelte";

package/dist/internal/FocusSentinel.svelte

@@ -14,40 +14,41 @@
   onMount(() => {
     mounted = true
   })
-</script>
 
-{#if enabled}
-  <Hidden
-    as="button"
-    type="button"
-    features={HiddenFeatures.Focusable}
-    onfocus={(event: FocusEvent) => {
-      event.preventDefault()
-      let frame: ReturnType<typeof requestAnimationFrame>
-
-      let tries = 50
-      function forwardFocus() {
-        // Prevent infinite loops
-        if (tries-- <= 0) {
-          if (frame) cancelAnimationFrame(frame)
-          return
-        }
-
-        // Try to move focus to the correct element. This depends on the implementation
-        // of `onFocus` of course since it would be different for each place we use it in.
-        if (onfocus?.()) {
-          cancelAnimationFrame(frame)
-          if (!mounted) return
-
-          enabled = false
-          return
-        }
-
-        // Retry
-        frame = requestAnimationFrame(forwardFocus)
+  const handleFocus = (event: FocusEvent) => {
+    event.preventDefault()
+    let frame: ReturnType<typeof requestAnimationFrame>
+
+    let tries = 50
+    function forwardFocus() {
+      // Prevent infinite loops
+      if (tries-- <= 0) {
+        if (frame) cancelAnimationFrame(frame)
+        return
+      }
+
+      // Try to move focus to the correct element. This depends on the implementation
+      // of `onFocus` of course since it would be different for each place we use it in.
+      if (onfocus?.()) {
+        cancelAnimationFrame(frame)
+        if (!mounted) return
+
+        enabled = false
+        return
       }
 
+      // Retry
       frame = requestAnimationFrame(forwardFocus)
-    }}
-  />
+    }
+
+    frame = requestAnimationFrame(forwardFocus)
+  }
+</script>
+
+{#if enabled}
+  <Hidden asChild features={HiddenFeatures.Focusable}>
+    {#snippet children({ props })}
+      <button {...props} type="button" onfocus={handleFocus}>&zwnj;</button>
+    {/snippet}
+  </Hidden>
 {/if}

package/dist/internal/FormResolver.svelte

@@ -21,5 +21,9 @@
 </script>
 
 {#if !formId}
-  <Hidden features={HiddenFeatures.Hidden} as="input" type="hidden" hidden readonly bind:ref={element} />
+  <Hidden asChild features={HiddenFeatures.Hidden}>
+    {#snippet children({ props })}
+      <input {...props} type="hidden" hidden readonly bind:this={element} />
+    {/snippet}
+  </Hidden>
 {/if}

package/dist/internal/Hidden.svelte

@@ -1,36 +1,30 @@
 <script lang="ts" module>
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
   import { HiddenFeatures } from "./HiddenFeatures.js"
+  import type { SvelteHTMLElements } from "svelte/elements"
 
   export * from "./HiddenFeatures.js"
 
   const DEFAULT_VISUALLY_HIDDEN_TAG = "span" as const
 
-  type HiddenRenderPropArg = {}
+  export type HiddenRenderPropArg = {}
   type HiddenPropsWeControl = never
-  export type HiddenProps<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG> = Props<
-    TTag,
+  export type HiddenProps = Props<
+    typeof DEFAULT_VISUALLY_HIDDEN_TAG,
     HiddenRenderPropArg,
-    HiddenPropsWeControl,
-    { features?: HiddenFeatures }
+    { element?: HTMLElement; features?: HiddenFeatures }
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG">
-  let {
-    ref = $bindable(),
-    value,
-    checked,
-    features = HiddenFeatures.None,
-    ...theirProps
-  }: { as?: TTag } & HiddenProps<TTag> = $props()
+<script lang="ts">
+  let { element = $bindable(), features = HiddenFeatures.None, ...theirProps }: HiddenProps = $props()
 
   let ourProps = {
     "aria-hidden":
       (features & HiddenFeatures.Focusable) === HiddenFeatures.Focusable
         ? true
-        : (theirProps["aria-hidden" as keyof typeof theirProps] ?? undefined),
+        : (theirProps["aria-hidden"] ?? undefined),
     hidden: (features & HiddenFeatures.Hidden) === HiddenFeatures.Hidden ? true : undefined,
     style: [
       "position: fixed",
@@ -52,12 +46,4 @@
   }
 </script>
 
-<ElementOrComponent
-  {ourProps}
-  {theirProps}
-  defaultTag={DEFAULT_VISUALLY_HIDDEN_TAG}
-  name="Hidden"
-  bind:ref
-  {value}
-  {checked}
-/>
+<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_VISUALLY_HIDDEN_TAG} name="Hidden" bind:element />