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

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

@@ -1,44 +1,15 @@
-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, FocusTrapRenderPropArg, {
+    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<[{
-            slot: FocusTrapRenderPropArg;
-            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,59 +1,100 @@
-<script lang="ts" module>const DEFAULT_INPUT_TAG = "input";
-</script>
+<script lang="ts" module>
+  import type { Props } from "../utils/types.js"
+  import type { SvelteHTMLElements } from "svelte/elements"
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TValue = string">import { htmlid } from "../utils/id.js";
-import { useDisabled } from "../hooks/use-disabled.js";
-import { useProvidedId } from "../utils/id.js";
-import { useLabelledBy } from "../label/context.svelte.js";
-import { useDescribedBy } from "../description/context.svelte.js";
-import { useHover } from "../hooks/use-hover.svelte.js";
-import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
-import { mergeProps } from "../utils/render.js";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-const internalId = htmlid();
-const providedId = useProvidedId();
-const providedDisabled = useDisabled();
-let {
-  ref = $bindable(),
-  value = $bindable(),
-  id = providedId || `headlessui-input-${internalId}`,
-  disabled: theirDisabled = false,
-  autofocus = false,
-  invalid = false,
-  ...theirProps
-} = $props();
-const disabled = $derived(providedDisabled.current || theirDisabled);
-const labelledBy = useLabelledBy();
-const describedBy = useDescribedBy();
-const { isHovered: hover, hoverProps } = $derived(
-  useHover({
-    get disabled() {
-      return disabled;
-    }
-  })
-);
-const { isFocusVisible: focus, focusProps } = $derived(
-  useFocusRing({
-    get autofocus() {
-      return autofocus;
-    }
-  })
-);
-const ourProps = $derived(
-  mergeProps(
+  const DEFAULT_INPUT_TAG = "input" as const
+
+  type InputRenderPropArg = {
+    disabled: boolean
+    hover: boolean
+    focus: boolean
+    autofocus: boolean
+    invalid: boolean
+  }
+  type InputPropsWeControl = "aria-labelledby" | "aria-describedby"
+
+  export type InputProps<TValue = string> = Props<
+    typeof DEFAULT_INPUT_TAG,
+    InputRenderPropArg,
     {
-      id,
-      "aria-labelledby": labelledBy?.value,
-      "aria-describedby": describedBy?.value,
-      "aria-invalid": invalid ? "" : void 0,
-      disabled: disabled || void 0,
-      autofocus
-    },
-    focusProps,
-    hoverProps
+      element?: HTMLElement
+      id?: string
+      value?: TValue
+      disabled?: boolean
+      invalid?: boolean
+      autofocus?: boolean
+    }
+  >
+</script>
+
+<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"
+  import { useLabelledBy } from "../label/context.svelte.js"
+  import { useDescribedBy } from "../description/context.svelte.js"
+  import { useHover } from "../hooks/use-hover.svelte.js"
+  import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
+  import { mergeProps } from "../utils/render.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  const internalId = htmlid()
+  const providedId = useProvidedId()
+  const providedDisabled = useDisabled()
+
+  let {
+    element = $bindable(),
+    value = $bindable(),
+    id = providedId || `headlessui-input-${internalId}`,
+    disabled: theirDisabled = false,
+    autofocus = false,
+    invalid = false,
+    ...theirProps
+  }: InputProps<TValue> = $props()
+  const disabled = $derived(providedDisabled.current || theirDisabled)
+
+  const labelledBy = useLabelledBy()
+  const describedBy = useDescribedBy()
+
+  const { isHovered: hover, hoverProps } = $derived(
+    useHover({
+      get disabled() {
+        return disabled
+      },
+    })
   )
-);
-const slot = $derived({ disabled, invalid, hover, focus, autofocus });
+  const { isFocusVisible: focus, focusProps } = $derived(
+    useFocusRing({
+      get autofocus() {
+        return autofocus
+      },
+    })
+  )
+
+  const ourProps = $derived(
+    mergeProps(
+      {
+        id,
+        "aria-labelledby": labelledBy?.value,
+        "aria-describedby": describedBy?.value,
+        "aria-invalid": invalid ? "" : undefined,
+        disabled: disabled || undefined,
+        autofocus,
+      },
+      focusProps,
+      hoverProps
+    )
+  )
+
+  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,4 +1,4 @@
-import type { ElementType, Props, PropsOf } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_INPUT_TAG: "input";
 type InputRenderPropArg = {
     disabled: boolean;
@@ -7,42 +7,28 @@ type InputRenderPropArg = {
     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<[{
-            slot: 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/internal/FloatingProvider.svelte

@@ -1,12 +1,17 @@
-<script lang="ts" module></script>
-
-<script lang="ts">import { useFloatingProvider } from "./floating-provider.svelte.js";
-const { children, enabled = true } = $props();
-useFloatingProvider({
-  get enabled() {
-    return enabled;
-  }
-});
+<script lang="ts" module>
+</script>
+
+<script lang="ts">
+  import type { Snippet } from "svelte"
+  import { useFloatingProvider } from "./floating-provider.svelte.js"
+
+  const { children, enabled = true }: { children: Snippet; enabled?: boolean } = $props()
+
+  useFloatingProvider({
+    get enabled() {
+      return enabled
+    },
+  })
 </script>
 
 {#if children}{@render children()}{/if}

package/dist/internal/FocusSentinel.svelte

@@ -1,45 +1,54 @@
-<script lang="ts">import { onMount } from "svelte";
-import Hidden, { HiddenFeatures } from "./Hidden.svelte";
-let { onfocus } = $props();
-let enabled = $state(true);
-let mounted = $state(false);
-onMount(() => {
-  mounted = true;
-});
-</script>
+<script lang="ts">
+  import { onMount } from "svelte"
+  import Hidden, { HiddenFeatures } from "./Hidden.svelte"
 
-{#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)
+  interface FocusSentinelProps {
+    onfocus: () => boolean
+  }
+
+  let { onfocus }: FocusSentinelProps = $props()
+
+  let enabled = $state(true)
+  let mounted = $state(false)
+
+  onMount(() => {
+    mounted = true
+  })
+
+  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/ForcePortalRoot.svelte

@@ -1,6 +1,10 @@
-<script lang="ts">import { createPortalRoot } from "./portal-force-root.svelte.js";
-let { force, children } = $props();
-createPortalRoot({ force });
+<script lang="ts">
+  import type { Snippet } from "svelte"
+  import { createPortalRoot } from "./portal-force-root.svelte.js"
+
+  let { force, children }: { force: boolean; children: Snippet } = $props()
+
+  createPortalRoot({ force })
 </script>
 
 {#if children}{@render children()}{/if}

package/dist/internal/FormFields.svelte

@@ -1,38 +1,51 @@
-<script lang="ts">import { disposables } from "../utils/disposables.js";
-import { objectToFormEntries } from "../utils/form.js";
-import FormResolver from "./FormResolver.svelte";
-import { hoistFormFields } from "./form-fields.svelte.js";
-import Hidden, { HiddenFeatures } from "./Hidden.svelte";
-import { compact } from "../utils/object.js";
-let {
-  data,
-  form: formId,
-  disabled,
-  onReset,
-  overrides
-} = $props();
-let form = $state(null);
-const d = disposables();
-$effect(() => {
-  if (!onReset) return;
-  if (!form) return;
-  return d.addEventListener(form, "reset", onReset);
-});
-const fields = $derived(
-  objectToFormEntries(data).map(
-    ([name, value]) => compact({
-      key: name,
-      as: "input",
-      type: "hidden",
-      form: formId,
-      disabled,
-      name,
-      value,
-      ...overrides
-    })
+<script lang="ts">
+  import { disposables } from "../utils/disposables.js"
+  import { objectToFormEntries } from "../utils/form.js"
+  import FormResolver from "./FormResolver.svelte"
+  import { hoistFormFields } from "./form-fields.svelte.js"
+  import Hidden, { HiddenFeatures } from "./Hidden.svelte"
+  import { compact } from "../utils/object.js"
+
+  let {
+    data,
+    form: formId,
+    disabled,
+    onReset,
+    overrides,
+  }: {
+    data: Record<string, any>
+    overrides?: Record<string, any>
+    form?: string
+    disabled?: boolean
+    onReset?: (e: Event) => void
+  } = $props()
+
+  let form = $state<HTMLFormElement | null>(null)
+  const d = disposables()
+
+  $effect(() => {
+    if (!onReset) return
+    if (!form) return
+
+    return d.addEventListener(form, "reset", onReset)
+  })
+
+  const fields = $derived(
+    objectToFormEntries(data).map(([name, value]) =>
+      compact({
+        key: name,
+        as: "input",
+        type: "hidden",
+        form: formId,
+        disabled,
+        name,
+        value,
+        ...overrides,
+      })
+    )
   )
-);
-const hoisted = hoistFormFields(formFields);
+
+  const hoisted = hoistFormFields(formFields)
 </script>
 
 {#snippet formFields()}

package/dist/internal/FormFieldsProvider.svelte

@@ -1,8 +1,12 @@
-<script lang="ts">import Hidden, { HiddenFeatures } from "./Hidden.svelte";
-import { createFormFieldsContext } from "./form-fields.svelte.js";
-const { children } = $props();
-const context = createFormFieldsContext();
-const { fields } = $derived(context);
+<script lang="ts">
+  import type { Snippet } from "svelte"
+  import Hidden, { HiddenFeatures } from "./Hidden.svelte"
+  import { createFormFieldsContext } from "./form-fields.svelte.js"
+
+  const { children }: { children?: Snippet } = $props()
+
+  const context = createFormFieldsContext()
+  const { fields } = $derived(context)
 </script>
 
 {#if children}{@render children()}{/if}

package/dist/internal/FormResolver.svelte

@@ -1,20 +1,29 @@
-<script lang="ts">import { onMount } from "svelte";
-import Hidden, { HiddenFeatures } from "./Hidden.svelte";
-let { setForm, formId } = $props();
-$effect(() => {
-  if (formId) {
-    const resolvedForm = document.getElementById(formId);
-    if (resolvedForm) setForm(resolvedForm);
-  }
-});
-let element = $state();
-onMount(() => {
-  if (!element) return;
-  const resolvedForm = element.closest("form");
-  if (resolvedForm) setForm(resolvedForm);
-});
+<script lang="ts">
+  import { onMount } from "svelte"
+  import Hidden, { HiddenFeatures } from "./Hidden.svelte"
+
+  let { setForm, formId }: { setForm: (form: HTMLFormElement) => void; formId?: string } = $props()
+
+  $effect(() => {
+    if (formId) {
+      const resolvedForm = document.getElementById(formId) as HTMLFormElement
+      if (resolvedForm) setForm(resolvedForm)
+    }
+  })
+
+  let element = $state<HTMLElement>()
+
+  onMount(() => {
+    if (!element) return
+    const resolvedForm = element.closest("form")
+    if (resolvedForm) setForm(resolvedForm)
+  })
 </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}