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

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

@@ -1,40 +1,7 @@
-import type { ElementType } from "../utils/types.js";
-import { type TransitionChildProps, DEFAULT_TRANSITION_CHILD_TAG } from "./TransitionChild.svelte";
-export type TransitionRootProps<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG> = TransitionChildProps<TTag> & {
+import { type TransitionChildProps } from "./TransitionChild.svelte";
+export type TransitionRootProps = TransitionChildProps & {
     show?: boolean;
     appear?: boolean;
 };
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "unmount" | "transition" | keyof import("./context.svelte.js").TransitionClasses | keyof import("./context.svelte.js").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;
-        class?: string | ((bag: HTMLElement) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        unmount?: boolean | undefined;
-    } & import("./context.svelte.js").TransitionClasses & import("./context.svelte.js").TransitionEvents & {
-        transition?: boolean;
-        appear?: boolean;
-    } & {
-        show?: boolean;
-        appear?: boolean;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_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_TRANSITION_CHILD_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Transition: $$IsomorphicComponent;
-type Transition<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG> = InstanceType<typeof Transition<TTag>>;
+declare const Transition: import("svelte").Component<TransitionRootProps, {}, "element">;
 export default Transition;

package/dist/transition/TransitionChild.svelte

@@ -1,16 +1,35 @@
-<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 { 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 = Props<
+    typeof DEFAULT_TRANSITION_CHILD_TAG,
+    TransitionChildRenderPropArg,
+    PropsForFeatures<typeof TransitionChildRenderFeatures> &
+      TransitionClasses &
+      TransitionEvents & { transition?: boolean; appear?: boolean; element?: HTMLElement }
+  >
+
+  export const DEFAULT_TRANSITION_CHILD_TAG = "div"
+  export type TransitionChildRenderPropArg = { element?: 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">
+  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 { element = $bindable(), ...props }: TransitionChildProps = $props()
+
+  const TransitionRootOrChild = !hasTransitionContext && hasOpenClosedContext ? Transition : InternalTransitionChild
 </script>
 
-<TransitionRootOrChild bind:ref {...props} />
+<TransitionRootOrChild bind:element {...props} />

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

@@ -1,42 +1,15 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { 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 & {
+export type TransitionChildProps = Props<typeof DEFAULT_TRANSITION_CHILD_TAG, TransitionChildRenderPropArg, PropsForFeatures<typeof TransitionChildRenderFeatures> & TransitionClasses & TransitionEvents & {
     transition?: boolean;
     appear?: boolean;
+    element?: HTMLElement;
 }>;
-export declare const DEFAULT_TRANSITION_CHILD_TAG = "svelte:fragment";
-export type TransitionChildRenderPropArg = HTMLElement;
+export declare const DEFAULT_TRANSITION_CHILD_TAG = "div";
+export type TransitionChildRenderPropArg = {
+    element?: HTMLElement;
+};
 export declare const TransitionChildRenderFeatures = RenderFeatures.RenderStrategy;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "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;
-        class?: string | ((bag: HTMLElement) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        unmount?: boolean | undefined;
-    } & TransitionClasses & TransitionEvents & {
-        transition?: boolean;
-        appear?: boolean;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_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_TRANSITION_CHILD_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const TransitionChild: $$IsomorphicComponent;
-type TransitionChild<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG> = InstanceType<typeof TransitionChild<TTag>>;
+declare const TransitionChild: import("svelte").Component<TransitionChildProps, {}, "element">;
 export default TransitionChild;

package/dist/transition/context.svelte.js

@@ -16,7 +16,7 @@ export function useTransitionContext() {
     return context;
 }
 export function useParentNesting() {
-    let context = getContext("NestingContext");
+    const context = getContext("NestingContext");
     if (!context) {
         throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.");
     }
@@ -29,7 +29,7 @@ export function hasChildren(bag) {
 }
 export function useNesting(options) {
     const { done, parent } = $derived(options);
-    let transitionableChildren = $state([]);
+    const transitionableChildren = $state([]);
     const mounted = useIsMounted();
     const d = useDisposables();
     const unregister = (container, strategy = RenderStrategy.Hidden) => {
@@ -60,13 +60,13 @@ export function useNesting(options) {
         }
         return () => unregister(container, RenderStrategy.Unmount);
     };
-    let todos = $state([]);
+    const todos = $state([]);
     let wait = $state(Promise.resolve());
-    let chains = $state({
+    const chains = $state({
         enter: [],
         leave: [],
     });
-    let onStart = (container, direction, cb) => {
+    const onStart = (container, direction, cb) => {
         // Clear out all existing todos
         todos.splice(0);
         // Remove all existing promises for the current container from the parent because we can
@@ -85,7 +85,7 @@ export function useNesting(options) {
         parent?.chains[direction].push([
             container,
             new Promise((resolve) => {
-                Promise.all(chains[direction].map(([_container, promise]) => promise)).then(() => resolve());
+                Promise.all(chains[direction].map(([, promise]) => promise)).then(() => resolve());
             }),
         ]);
         if (direction === "enter") {
@@ -96,7 +96,7 @@ export function useNesting(options) {
         }
     };
     const onStop = (_container, direction, cb) => {
-        Promise.all(chains[direction].splice(0).map(([_container, promise]) => promise)) // Wait for my children
+        Promise.all(chains[direction].splice(0).map(([, promise]) => promise)) // Wait for my children
             .then(() => {
             todos.shift()?.(); // I'm ready
         })

package/dist/utils/DisabledProvider.svelte

@@ -1,6 +1,10 @@
-<script lang="ts">import { provideDisabled } from "../hooks/use-disabled.js";
-const { disabled, children } = $props();
-provideDisabled(() => disabled ?? false);
+<script lang="ts">
+  import { provideDisabled } from "../hooks/use-disabled.js"
+  import type { Snippet } from "svelte"
+
+  const { disabled, children }: { disabled?: boolean; children?: Snippet } = $props()
+
+  provideDisabled(() => disabled ?? false)
 </script>
 
 {@render children?.()}

package/dist/utils/ElementOrComponent.svelte

@@ -1,26 +1,90 @@
-<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, TSlot extends Record<string, any>, TValue">
+  import type { Props } from "./types.js"
+  import { mergePropsAdvanced, RenderFeatures, type PropsForFeatures } from "./render.js"
+  import { stateFromSlot } from "./state.js"
+
+  let {
+    ourProps,
+    theirProps,
+    slots,
+    slot = slots,
+    defaultTag,
+    features,
+    visible = true,
+    name,
+    element = $bindable(),
+    value = $bindable(),
+    checked = $bindable(),
+  }: {
+    ourProps?: Expand<Props<any, TSlot> & PropsForFeatures<TFeature>>
+    theirProps: Expand<Props<any, TSlot, any>>
+    slot?: TSlot
+    slots?: TSlot
+    defaultTag?: string
+    features?: TFeature
+    visible?: boolean
+    name: string
+    ref?: HTMLElement
+    element?: HTMLElement
+    value?: TValue
+    checked?: boolean
+  } = $props()
+
+  const featureFlags = $derived(features ?? RenderFeatures.None)
+  let {
+    as,
+    static: isStatic = false,
+    unmount = true,
+    children,
+    asChild,
+    class: className,
+    ...rest
+  } = $derived(mergePropsAdvanced(theirProps, ourProps ?? {}))
+  const render = $derived(
+    visible ||
+      (featureFlags & RenderFeatures.Static && isStatic) ||
+      (featureFlags & RenderFeatures.RenderStrategy && !unmount)
+  )
+
+  const resolvedClass: string | undefined = $derived(
+    typeof className === "function" ? className(slot) : (className ?? undefined)
+  )
+
+  const _props = $derived.by(() => {
+    // Allow for className to be a function with the slot as the contents
+    if ("class" in rest && rest.class && typeof rest.class === "function") {
+      rest.class = rest.className(slot)
+    }
+
+    // Drop `aria-labelledby` if it only references the current element. If the `aria-labelledby`
+    // references itself but also another element then we can keep it.
+    if (rest["aria-labelledby"] && rest["aria-labelledby"] === rest.id) {
+      rest["aria-labelledby"] = undefined
+    }
+
+    const hiddenProps =
+      !visible && !(featureFlags & RenderFeatures.Static) && featureFlags & RenderFeatures.RenderStrategy && !unmount
+        ? { hidden: true, style: "display: none;" }
+        : {}
+
+    return { ...rest, ...(resolvedClass ? { class: resolvedClass } : {}), ...hiddenProps, ...stateFromSlot(slot) }
+  })
 </script>
 
-{#if render}<Generic {...rest} {...hiddenProps} {slot} tag={defaultTag} bind:ref bind:value bind:checked />{/if}
+{#if render}
+  {#if asChild || !defaultTag}
+    {@render children?.({ ...slot, props: _props })}
+  {:else if defaultTag === "select"}
+    <select {..._props} bind:this={element} bind:value>{@render children?.(slot)}</select>
+  {:else if defaultTag === "input" && (_props as Record<string, any>).type === "checkbox"}
+    <input type="checkbox" {..._props} bind:this={element} bind:checked />
+  {:else if defaultTag === "input"}
+    <input {..._props} bind:this={element} bind:value />
+  {:else if defaultTag === "textarea"}
+    <textarea {..._props} bind:this={element} bind:value></textarea>
+  {:else if children}
+    <svelte:element this={defaultTag} {..._props} bind:this={element}>{@render children(slot)}</svelte:element>
+  {:else}
+    <svelte:element this={defaultTag} {..._props} bind:this={element} />
+  {/if}
+{/if}

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

@@ -1,17 +1,29 @@
-import type { ElementType } from "./types.js";
+import type { Props } from "./types.js";
 import { RenderFeatures } from "./render.js";
-declare class __sveltets_Render<TFeature extends RenderFeatures, TTag extends ElementType, TSlot, TValue> {
+declare class __sveltets_Render<TFeature extends RenderFeatures, TSlot extends Record<string, any>, TValue> {
     props(): {
-        ourProps?: Expand<{
-            [x: string]: any;
-            [x: number]: any;
-        } & {
-            children?: import("svelte").Snippet<[{
-                slot: TSlot;
-                props: Record<string, any>;
+        ourProps?: Expand<Omit<{
+            [name: string]: any;
+        }, "asChild" | "children" | "class"> & {
+            asChild: true;
+            children?: import("svelte").Snippet<[TSlot & {
+                props?: Record<string, any>;
             }]> | undefined;
+            class?: never;
+        } & Expand<((TFeature extends RenderFeatures.Static ? {
+            static?: boolean;
+        } : {}) extends infer T ? T extends (TFeature extends RenderFeatures.Static ? {
+            static?: boolean;
+        } : {}) ? T extends any ? (x: T) => any : never : never : never) | ((TFeature extends RenderFeatures.RenderStrategy ? {
+            unmount?: boolean;
+        } : {}) extends infer T_1 ? T_1 extends (TFeature extends RenderFeatures.RenderStrategy ? {
+            unmount?: boolean;
+        } : {}) ? T_1 extends any ? (x: T_1) => any : never : never : never) extends (x: infer R) => any ? R : never>> | Expand<Omit<{
+            [name: string]: any;
+        }, "asChild" | "children" | "class"> & {
+            asChild?: never;
+            children?: import("svelte").Snippet<[TSlot]> | undefined;
             class?: string | ((bag: TSlot) => string) | null | undefined;
-            ref?: HTMLElement;
         } & Expand<((TFeature extends RenderFeatures.Static ? {
             static?: boolean;
         } : {}) extends infer T ? T extends (TFeature extends RenderFeatures.Static ? {
@@ -21,37 +33,30 @@ declare class __sveltets_Render<TFeature extends RenderFeatures, TTag extends El
         } : {}) extends infer T_1 ? T_1 extends (TFeature extends RenderFeatures.RenderStrategy ? {
             unmount?: boolean;
         } : {}) ? 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<[{
-                slot: TSlot;
-                props: Record<string, any>;
-            }]> | undefined;
-            class?: string | ((bag: TSlot) => string) | null | undefined;
-            ref?: HTMLElement | undefined;
-        };
+        theirProps: Expand<Props<any, TSlot_1, any>>;
         slot?: TSlot | undefined;
         slots?: TSlot | undefined;
-        defaultTag: ElementType;
+        defaultTag?: string;
         features?: TFeature | undefined;
         visible?: boolean;
         name: string;
         ref?: HTMLElement;
+        element?: HTMLElement;
         value?: TValue | undefined;
         checked?: boolean;
     };
     events(): {};
     slots(): {};
-    bindings(): "ref" | "value" | "checked";
+    bindings(): "element" | "value" | "checked";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TFeature extends RenderFeatures, TTag extends ElementType, TSlot, TValue>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TFeature, TTag, TSlot, TValue>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TFeature, TTag, TSlot, TValue>['props']>, ReturnType<__sveltets_Render<TFeature, TTag, TSlot, TValue>['events']>, ReturnType<__sveltets_Render<TFeature, TTag, TSlot, TValue>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TFeature, TTag, TSlot, TValue>['bindings']>;
-    } & ReturnType<__sveltets_Render<TFeature, TTag, TSlot, TValue>['exports']>;
-    <TFeature extends RenderFeatures, TTag extends ElementType, TSlot, TValue>(internal: unknown, props: ReturnType<__sveltets_Render<TFeature, TTag, TSlot, TValue>['props']> & {}): ReturnType<__sveltets_Render<TFeature, TTag, TSlot, TValue>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any, any>['bindings']>;
+    new <TFeature extends RenderFeatures, TSlot extends Record<string, any>, TValue>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TFeature, TSlot, TValue>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TFeature, TSlot, TValue>['props']>, ReturnType<__sveltets_Render<TFeature, TSlot, TValue>['events']>, ReturnType<__sveltets_Render<TFeature, TSlot, TValue>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TFeature, TSlot, TValue>['bindings']>;
+    } & ReturnType<__sveltets_Render<TFeature, TSlot, TValue>['exports']>;
+    <TFeature extends RenderFeatures, TSlot extends Record<string, any>, TValue>(internal: unknown, props: ReturnType<__sveltets_Render<TFeature, TSlot, TValue>['props']> & {}): ReturnType<__sveltets_Render<TFeature, TSlot, TValue>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
 }
 declare const ElementOrComponent: $$IsomorphicComponent;
-type ElementOrComponent<TFeature extends RenderFeatures, TTag extends ElementType, TSlot, TValue> = InstanceType<typeof ElementOrComponent<TFeature, TTag, TSlot, TValue>>;
+type ElementOrComponent<TFeature extends RenderFeatures, TSlot extends Record<string, any>, TValue> = InstanceType<typeof ElementOrComponent<TFeature, TSlot, TValue>>;
 export default ElementOrComponent;

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}