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

package/dist/transition/TransitionChild.svelte

@@ -1,16 +1,36 @@
-<script lang="ts" module>import { RenderFeatures } from "../utils/render.js";
-export const DEFAULT_TRANSITION_CHILD_TAG = "svelte:fragment";
-export const TransitionChildRenderFeatures = RenderFeatures.RenderStrategy;
+<script lang="ts" module>
+  import type { ElementType, Props } from "../utils/types.js"
+  import { RenderFeatures, type PropsForFeatures } from "../utils/render.js"
+  import type { TransitionEvents, TransitionClasses } from "./context.svelte.js"
+
+  type TransitionChildPropsWeControl = never
+
+  export type TransitionChildProps<TTag extends ElementType> = Props<
+    TTag,
+    TransitionChildRenderPropArg,
+    TransitionChildPropsWeControl,
+    PropsForFeatures<typeof TransitionChildRenderFeatures> &
+      TransitionClasses &
+      TransitionEvents & { transition?: boolean; appear?: boolean }
+  >
+
+  export const DEFAULT_TRANSITION_CHILD_TAG = "svelte:fragment"
+  export type TransitionChildRenderPropArg = HTMLElement
+  export const TransitionChildRenderFeatures = RenderFeatures.RenderStrategy
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG">import { useOpenClosed } from "../internal/open-closed.js";
-import { getContext } from "svelte";
-import InternalTransitionChild from "./InternalTransitionChild.svelte";
-import Transition from "./Transition.svelte";
-const hasTransitionContext = !!getContext("TransitionContext");
-const hasOpenClosedContext = useOpenClosed() !== null;
-let { ref = $bindable(), as, ...props } = $props();
-const TransitionRootOrChild = !hasTransitionContext && hasOpenClosedContext ? Transition : InternalTransitionChild;
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG">
+  import { useOpenClosed } from "../internal/open-closed.js"
+  import { getContext } from "svelte"
+  import InternalTransitionChild from "./InternalTransitionChild.svelte"
+  import Transition from "./Transition.svelte"
+
+  const hasTransitionContext = !!getContext("TransitionContext")
+  const hasOpenClosedContext = useOpenClosed() !== null
+
+  let { ref = $bindable(), as, ...props }: { as?: TTag } & TransitionChildProps<TTag> = $props()
+
+  const TransitionRootOrChild = !hasTransitionContext && hasOpenClosedContext ? Transition : InternalTransitionChild
 </script>
 
 <TransitionRootOrChild bind:ref {...props} />

package/dist/transition/TransitionChild.svelte.d.ts

@@ -12,11 +12,14 @@ export declare const TransitionChildRenderFeatures = RenderFeatures.RenderStrate
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "unmount" | "transition" | keyof TransitionClasses | keyof TransitionEvents | "appear"> 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<[HTMLElement, Record<string, any>]> | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "class") | "unmount" | "transition" | keyof TransitionClasses | keyof TransitionEvents | "appear"> 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: HTMLElement;
+            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: HTMLElement) => 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: HTMLElement) => string) | null | undefined;
     } : {}) & {
         unmount?: boolean | undefined;
     } & TransitionClasses & TransitionEvents & {

package/dist/utils/ElementOrComponent.svelte

@@ -1,26 +1,46 @@
-<script lang="ts" generics="TFeature extends RenderFeatures, TTag extends ElementType, TSlot, TValue">import { mergePropsAdvanced, RenderFeatures } from "./render.js";
-import Generic from "./Generic.svelte";
-let {
-  ourProps,
-  theirProps,
-  slots,
-  slot = slots,
-  defaultTag,
-  features,
-  visible = true,
-  name,
-  ref = $bindable(),
-  value = $bindable(),
-  checked = $bindable()
-} = $props();
-const featureFlags = $derived(features ?? RenderFeatures.None);
-const { static: isStatic = false, unmount = true, ...rest } = $derived(mergePropsAdvanced(theirProps, ourProps ?? {}));
-const render = $derived(
-  visible || featureFlags & RenderFeatures.Static && isStatic || featureFlags & RenderFeatures.RenderStrategy && !unmount
-);
-const hiddenProps = $derived(
-  !visible && !(featureFlags & RenderFeatures.Static) && featureFlags & RenderFeatures.RenderStrategy && !unmount ? { hidden: true, style: "display: none;" } : {}
-);
+<script lang="ts" generics="TFeature extends RenderFeatures, TTag extends ElementType, TSlot, TValue">
+  import type { ElementType, Props } from "./types.js"
+  import { mergePropsAdvanced, RenderFeatures, type PropsForFeatures } from "./render.js"
+  import Generic from "./Generic.svelte"
+
+  let {
+    ourProps,
+    theirProps,
+    slots,
+    slot = slots,
+    defaultTag,
+    features,
+    visible = true,
+    name,
+    ref = $bindable(),
+    value = $bindable(),
+    checked = $bindable(),
+  }: {
+    ourProps?: Expand<Props<any, TSlot> & PropsForFeatures<TFeature>>
+    theirProps: Expand<{ as?: TTag } & Props<any, TSlot, any>>
+    slot?: TSlot
+    slots?: TSlot
+    defaultTag: ElementType
+    features?: TFeature
+    visible?: boolean
+    name: string
+    ref?: HTMLElement
+    value?: TValue
+    checked?: boolean
+  } = $props()
+
+  const featureFlags = $derived(features ?? RenderFeatures.None)
+  const { static: isStatic = false, unmount = true, ...rest } = $derived(mergePropsAdvanced(theirProps, ourProps ?? {}))
+  const render = $derived(
+    visible ||
+      (featureFlags & RenderFeatures.Static && isStatic) ||
+      (featureFlags & RenderFeatures.RenderStrategy && !unmount)
+  )
+  const hiddenProps = $derived(
+    !visible && !(featureFlags & RenderFeatures.Static) && featureFlags & RenderFeatures.RenderStrategy && !unmount
+      ? { hidden: true, style: "display: none;" }
+      : {}
+  )
 </script>
 
 {#if render}<Generic {...rest} {...hiddenProps} {slot} tag={defaultTag} bind:ref bind:value bind:checked />{/if}

package/dist/utils/ElementOrComponent.svelte.d.ts

@@ -6,10 +6,13 @@ declare class __sveltets_Render<TFeature extends RenderFeatures, TTag extends El
             [x: string]: any;
             [x: number]: any;
         } & {
-            children?: import("svelte").Snippet<[TSlot, Record<string, any>]> | undefined;
+            children?: import("svelte").Snippet<[{
+                slot: TSlot;
+                props: Record<string, any>;
+            }]> | undefined;
             ref?: HTMLElement;
         } & {
-            class?: any;
+            class?: string | ((bag: TSlot) => string) | null | undefined;
         } & Expand<((TFeature extends RenderFeatures.Static ? {
             static?: boolean;
         } : {}) extends infer T ? T extends (TFeature extends RenderFeatures.Static ? {
@@ -21,9 +24,12 @@ declare class __sveltets_Render<TFeature extends RenderFeatures, TTag extends El
         } : {}) ? T_1 extends any ? (x: T_1) => any : never : never : never) extends (x: infer R) => any ? R : never>> | undefined;
         theirProps: {
             as?: TTag | undefined;
-            children?: import("svelte").Snippet<[TSlot, Record<string, any>]> | undefined;
+            children?: import("svelte").Snippet<[{
+                slot: TSlot;
+                props: Record<string, any>;
+            }]> | undefined;
             ref?: HTMLElement | undefined;
-            class?: any;
+            class?: string | ((bag: TSlot) => string) | null | undefined;
         };
         slot?: TSlot | undefined;
         slots?: TSlot | undefined;

package/dist/utils/Generic.svelte

@@ -1,35 +1,49 @@
-<script lang="ts" generics="TTag extends keyof SvelteHTMLProps, TSlot, TValue">import { stateFromSlot } from "./state.js";
-let {
-  slot = {},
-  tag,
-  ref = $bindable(),
-  value = $bindable(),
-  checked = $bindable(),
-  children,
-  as = tag,
-  unmount,
-  static: isStatic,
-  ...props
-} = $props();
-const resolvedClass = $derived(
-  typeof props.class === "function" ? props.class(slot) : props.class
-);
+<script lang="ts" generics="TTag extends keyof SvelteHTMLProps, TSlot, TValue">
+  import { stateFromSlot } from "./state.js"
+  import type { ElementType, Props, SvelteHTMLProps } from "./types.js"
+
+  let {
+    slot = {} as TSlot,
+    tag,
+    ref = $bindable(),
+    value = $bindable(),
+    checked = $bindable(),
+    children,
+    as = tag as TTag,
+    unmount,
+    static: isStatic,
+    ...props
+  }: {
+    as?: TTag
+    slot: TSlot
+    tag: ElementType
+    ref?: HTMLElement
+    value?: TValue
+    checked?: boolean
+  } & Props<TTag, TSlot> = $props()
+
+  const resolvedClass = $derived(
+    typeof props.class === "function" ? props.class(slot) : (props.class as string | undefined)
+  )
 </script>
 
 {#if as === "svelte:fragment"}
-  {#if children}{@render children(slot, {
-      ...props,
-      ...(resolvedClass ? { class: resolvedClass } : {}),
-      ...stateFromSlot(slot),
+  {#if children}{@render children({
+      slot,
+      props: {
+        ...props,
+        ...(resolvedClass ? { class: resolvedClass } : {}),
+        ...stateFromSlot(slot),
+      },
     })}{/if}
 {:else if children}
   {#if as === "select"}
     <select bind:this={ref} {...props} class={resolvedClass} {...stateFromSlot(slot)} bind:value>
-      {@render children(slot, {})}
+      {@render children({ slot, props: {} })}
     </select>
   {:else}
     <svelte:element this={as} bind:this={ref} {...props} class={resolvedClass} {...stateFromSlot(slot)}>
-      {@render children(slot, {})}
+      {@render children({ slot, props: {} })}
     </svelte:element>
   {/if}
 {:else if as === "input" && props.type === "checkbox"}

package/dist/utils/Generic.svelte.d.ts

@@ -7,11 +7,14 @@ declare class __sveltets_Render<TTag extends keyof SvelteHTMLProps, TSlot, TValu
         ref?: HTMLElement;
         value?: TValue | undefined;
         checked?: boolean;
-    } & (Exclude<keyof import("./types.js").PropsOf<TTag>, "as" | "children" | "refName" | "class"> extends infer T extends keyof import("./types.js").PropsOf<TTag> ? { [P in T]: import("./types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[TSlot, Record<string, any>]> | undefined;
+    } & (Exclude<keyof import("./types.js").PropsOf<TTag>, "as" | "children" | "class"> extends infer T extends keyof import("./types.js").PropsOf<TTag> ? { [P in T]: import("./types.js").PropsOf<TTag>[P]; } : never) & {
+        children?: import("svelte").Snippet<[{
+            slot: TSlot;
+            props: Record<string, any>;
+        }]> | undefined;
         ref?: HTMLElement;
-    } & (true extends (import("./types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("./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("./types.js").PropsOf<TTag>["class"] | ((bag: TSlot) => 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: TSlot) => string) | null | undefined;
     } : {});
     events(): {} & {
         [evt: string]: CustomEvent<any>;

package/dist/utils/StableCollection.svelte

@@ -1,43 +1,61 @@
-<script lang="ts" module>import { useId } from "../hooks/use-id.js";
-import { getContext, setContext } from "svelte";
-function createCollection() {
-  return {
-    /** @type {Map<string, Map<string, number>>} */
-    groups: /* @__PURE__ */ new Map(),
-    get(group, key) {
-      let list = this.groups.get(group);
-      if (!list) {
-        list = /* @__PURE__ */ new Map();
-        this.groups.set(group, list);
-      }
-      let renders = list.get(key) ?? 0;
-      list.set(key, renders + 1);
-      let index = Array.from(list.keys()).indexOf(key);
-      function release() {
-        let renders2 = list.get(key);
-        if (renders2 > 1) {
-          list.set(key, renders2 - 1);
-        } else {
-          list.delete(key);
+<script lang="ts" module>
+  import { useId } from "../hooks/use-id.js"
+  import { getContext, setContext, type Snippet } from "svelte"
+
+  type CollectionKey = string | symbol
+  type CollectionItem = [number, () => void]
+  type Collection = ReturnType<typeof createCollection>
+
+  function createCollection() {
+    return {
+      /** @type {Map<string, Map<string, number>>} */
+      groups: new Map(),
+
+      get(group: string, key: CollectionKey): CollectionItem {
+        let list = this.groups.get(group)
+        if (!list) {
+          list = new Map()
+          this.groups.set(group, list)
+        }
+
+        let renders = list.get(key) ?? 0
+        // FIXME: This is a side-effect during render. `release` is only called in
+        // an effect cleanup so we may never release if we had to render multiple
+        // times before commit e.g. when a sibling suspends.
+        list.set(key, renders + 1)
+
+        let index = Array.from(list.keys()).indexOf(key)
+        function release() {
+          let renders = list.get(key)
+          if (renders > 1) {
+            list.set(key, renders - 1)
+          } else {
+            list.delete(key)
+          }
         }
-      }
-      return [index, release];
+
+        return [index, release]
+      },
     }
-  };
-}
-export function useStableCollectionIndex(group) {
-  let collection = getContext("StableCollection");
-  if (!collection) throw new Error("You must wrap your component in a <StableCollection>");
-  let key = useId();
-  let [idx, cleanupIdx] = collection.get(group, key);
-  $effect(() => cleanupIdx);
-  return idx;
-}
+  }
+
+  export function useStableCollectionIndex(group: string) {
+    let collection = getContext<Collection>("StableCollection")
+    if (!collection) throw new Error("You must wrap your component in a <StableCollection>")
+
+    let key = useId()
+    let [idx, cleanupIdx] = collection.get(group, key)
+
+    $effect(() => cleanupIdx)
+    return idx
+  }
 </script>
 
-<script lang="ts">const collection = createCollection();
-setContext("StableCollection", collection);
-let { children } = $props();
+<script lang="ts">
+  const collection = createCollection()
+  setContext<Collection>("StableCollection", collection)
+
+  let { children }: { children: Snippet } = $props()
 </script>
 
 {#if children}{@render children()}{/if}

package/dist/utils/floating-ui/svelte/components/FloatingNode.svelte

@@ -1,17 +1,32 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type { Snippet } from "svelte"
 
-<script lang="ts">import { setContext } from "svelte";
-import { useFloatingParentNodeId } from "./FloatingTree.svelte";
-const { children, id } = $props();
-const parentId = useFloatingParentNodeId();
-setContext("FloatingNodeContext", {
-  get id() {
-    return id;
-  },
-  get parentId() {
-    return parentId.value;
+  export interface FloatingNodeProps {
+    children?: Snippet
+    id: string
   }
-});
+</script>
+
+<script lang="ts">
+  /**
+   * Provides parent node context for nested floating elements.
+   * @see https://floating-ui.com/docs/FloatingTree
+   */
+  import { setContext } from "svelte"
+  import type { FloatingNodeType } from "../types.js"
+  import { useFloatingParentNodeId } from "./FloatingTree.svelte"
+
+  const { children, id }: FloatingNodeProps = $props()
+
+  const parentId = useFloatingParentNodeId()
+  setContext<FloatingNodeType>("FloatingNodeContext", {
+    get id() {
+      return id
+    },
+    get parentId() {
+      return parentId.value
+    },
+  })
 </script>
 
 {#if children}{@render children()}{/if}

package/dist/utils/floating-ui/svelte/components/FloatingTree.svelte

@@ -1,50 +1,94 @@
-<script lang="ts" module>import { getContext } from "svelte";
-import { useId } from "../hooks/useId.svelte.js";
-import { createPubSub } from "../utils/createPubSub.js";
-export const useFloatingParentNodeId = () => {
-  const context = getContext("FloatingNodeContext");
-  return {
-    get value() {
-      return context?.id ?? null;
+<script lang="ts" module>
+  import { getContext, type Snippet } from "svelte"
+  import { useId } from "../hooks/useId.svelte.js"
+  import type { FloatingNodeType, FloatingTreeType, ReferenceType } from "../types.js"
+  import { createPubSub } from "../utils/createPubSub.js"
+  import type { MutableRefObject } from "../../../ref.svelte.js"
+
+  //const FloatingNodeContext = React.createContext<FloatingNodeType | null>(null)
+  //const FloatingTreeContext = React.createContext<FloatingTreeType | null>(null)
+
+  /**
+   * Returns the parent node id for nested floating elements, if available.
+   * Returns `null` for top-level floating elements.
+   */
+  export const useFloatingParentNodeId = (): { readonly value: string | null } => {
+    const context = getContext<FloatingNodeType>("FloatingNodeContext")
+    return {
+      get value() {
+        return context?.id ?? null
+      },
     }
-  };
-};
-export const useFloatingTree = () => getContext("FloatingTreeContext") ?? null;
-export function useFloatingNodeId(options) {
-  const { customParentId } = $derived(options);
-  const id = useId();
-  const tree = useFloatingTree();
-  const reactParentId = useFloatingParentNodeId();
-  const parentId = $derived(customParentId || reactParentId.value);
-  $effect(() => {
-    const node = { id, parentId };
-    tree?.addNode(node);
-    return () => {
-      tree?.removeNode(node);
-    };
-  });
-  return id;
-}
+  }
+
+  /**
+   * Returns the nearest floating tree context, if available.
+   */
+  export const useFloatingTree = <RT extends ReferenceType = ReferenceType>(): FloatingTreeType<RT> | null =>
+    getContext<FloatingTreeType<RT>>("FloatingTreeContext") ?? null
+
+  /**
+   * Registers a node into the `FloatingTree`, returning its id.
+   * @see https://floating-ui.com/docs/FloatingTree
+   */
+  export function useFloatingNodeId(options: { customParentId?: string }): string {
+    const { customParentId } = $derived(options)
+    const id = useId()
+    const tree = useFloatingTree()
+    const reactParentId = useFloatingParentNodeId()
+    const parentId = $derived(customParentId || reactParentId.value)
+
+    $effect(() => {
+      const node = { id, parentId }
+      tree?.addNode(node)
+      return () => {
+        tree?.removeNode(node)
+      }
+    }) //, [tree, id, parentId])
+
+    return id
+  }
+
+  export interface FloatingTreeProps {
+    children?: Snippet
+  }
 </script>
 
-<script lang="ts">import { setContext } from "svelte";
-const { children } = $props();
-const nodesRef = $state({ current: [] });
-const addNode = (node) => {
-  nodesRef.current = [...nodesRef.current, node];
-};
-const removeNode = (node) => {
-  nodesRef.current = nodesRef.current.filter((n) => n !== node);
-};
-const events = createPubSub();
-setContext("FloatingTreeContext", {
-  get nodesRef() {
-    return nodesRef;
-  },
-  addNode,
-  removeNode,
-  events
-});
+<script lang="ts">
+  /**
+   * Provides context for nested floating elements when they are not children of
+   * each other on the DOM.
+   * This is not necessary in all cases, except when there must be explicit communication between parent and child floating elements. It is necessary for:
+   * - The `bubbles` option in the `useDismiss()` Hook
+   * - Nested virtual list navigation
+   * - Nested floating elements that each open on hover
+   * - Custom communication between parent and child floating elements
+   * @see https://floating-ui.com/docs/FloatingTree
+   */
+  import { setContext } from "svelte"
+
+  const { children }: FloatingTreeProps = $props()
+
+  const nodesRef = $state<MutableRefObject<Array<FloatingNodeType>>>({ current: [] })
+
+  const addNode = (node: FloatingNodeType) => {
+    nodesRef.current = [...nodesRef.current, node]
+  }
+
+  const removeNode = (node: FloatingNodeType) => {
+    nodesRef.current = nodesRef.current.filter((n) => n !== node)
+  }
+
+  const events = createPubSub()
+
+  setContext<FloatingTreeType<ReferenceType>>("FloatingTreeContext", {
+    get nodesRef() {
+      return nodesRef
+    },
+    addNode,
+    removeNode,
+    events,
+  })
 </script>
 
 {#if children}{@render children()}{/if}

package/dist/utils/floating-ui/svelte/hooks/useFloating.svelte.js

@@ -28,7 +28,7 @@ export function useFloating(options = {}) {
     let _domReference = $state(null);
     const setDomReference = (value) => (_domReference = value);
     let positionReference = $state(null);
-    const _setPositionReference = (value) => (positionReference = value);
+    const _setPositionReference = (value) => (positionReference = value ?? null);
     const optionDomReference = $derived(computedElements?.reference);
     const domReference = $derived((optionDomReference || _domReference));
     const domReferenceRef = $state({ current: null });
@@ -73,17 +73,17 @@ export function useFloating(options = {}) {
                 getBoundingClientRect: () => node.getBoundingClientRect(),
                 contextElement: node,
             }
-            : node;
+            : (node ?? null);
         // Store the positionReference in state if the DOM reference is specified externally via the
         // `elements.reference` option. This ensures that it won't be overridden on future renders.
         _setPositionReference(computedPositionReference);
         position.refs.setReference(computedPositionReference);
     };
     const setReference = (node) => {
-        if (isElement(node) || node === null) {
+        if (isElement(node) || !node) {
             ;
-            domReferenceRef.current = node;
-            setDomReference(node);
+            domReferenceRef.current = node ?? null;
+            setDomReference((node ?? null));
         }
         // Backwards-compatibility for passing a virtual element to `reference`
         // after it has set the DOM reference.
@@ -92,8 +92,8 @@ export function useFloating(options = {}) {
             // Don't allow setting virtual elements using the old technique back to
             // `null` to support `positionReference` + an unstable `reference`
             // callback ref.
-            (node !== null && !isElement(node))) {
-            position.refs.setReference(node);
+            (node && !isElement(node))) {
+            position.refs.setReference(node ?? null);
         }
     };
     const refs = $derived({

package/dist/utils/floating-ui/svelte/hooks/useFloatingRootContext.svelte.js

@@ -25,7 +25,7 @@ export function useFloatingRootContext(options) {
     };
     const refs = {
         setPositionReference: (value) => {
-            positionReference = value;
+            positionReference = value ?? null;
         },
     };
     const elements = $derived({

package/dist/utils/floating-ui/svelte/types.d.ts

@@ -12,9 +12,9 @@ export interface ExtendedRefs<RT> {
     reference: MutableRefObject<ReferenceType | null>;
     floating: MutableRefObject<HTMLElement | null>;
     domReference: MutableRefObject<NarrowedElement<RT> | null>;
-    setReference(node: RT | null): void;
-    setFloating(node: HTMLElement | null): void;
-    setPositionReference(node: ReferenceType | null): void;
+    setReference(node: RT | null | undefined): void;
+    setFloating(node: HTMLElement | null | undefined): void;
+    setPositionReference(node: ReferenceType | null | undefined): void;
 }
 export interface ExtendedElements<RT> {
     reference: ReferenceType | null;
@@ -45,7 +45,7 @@ export interface FloatingRootContext<RT extends ReferenceType = ReferenceType> {
     events: FloatingEvents;
     floatingId: string;
     refs: {
-        setPositionReference(node: ReferenceType | null): void;
+        setPositionReference(node: ReferenceType | null | undefined): void;
     };
 }
 export type FloatingContext<RT extends ReferenceType = ReferenceType> = Omit<UsePositionFloatingReturn<RT>, "refs" | "elements"> & {

package/dist/utils/floating-ui/svelte-dom/types.d.ts

@@ -37,11 +37,11 @@ export type UseFloatingReturn<RT extends ReferenceType = ReferenceType> = Pretti
         /**
          * A callback to set the reference element (reactive).
          */
-        setReference: (node: RT | null) => void;
+        setReference: (node: RT | null | undefined) => void;
         /**
          * A callback to set the floating element (reactive).
          */
-        setFloating: (node: HTMLElement | null) => void;
+        setFloating: (node: HTMLElement | null | undefined) => void;
     };
     /**
      * Object containing the reference and floating elements.