@pzerelles/headlessui-svelte 2.1.1-next.1 → 2.1.2-next.3

package/dist/hooks/use-transition.svelte.js

@@ -1,7 +1,6 @@
 import { disposables, useDisposables } from "../utils/disposables.js";
 import { once } from "../utils/once.js";
 import { untrack } from "svelte";
-import { useFlags } from "./use-flags.svelte.js";
 /**
  * ```
  * ┌──────┐                │        ┌──────────────┐
@@ -28,8 +27,8 @@ var TransitionState;
     TransitionState[TransitionState["Leave"] = 4] = "Leave";
 })(TransitionState || (TransitionState = {}));
 export function transitionDataAttributes(data) {
-    let attributes = {};
-    for (let key in data) {
+    const attributes = {};
+    for (const key in data) {
         if (data[key] === true) {
             attributes[`data-${key}`] = "";
         }
@@ -124,6 +123,7 @@ export function useTransition(options) {
         });
     }
     $effect(() => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         ;
         [enabled, show, element, d];
         return untrack(() => retry(enabled, show, element, d));
@@ -172,14 +172,14 @@ function transition(node, { prepare, run, done, inFlight, }) {
     return d.dispose;
 }
 function waitForTransition(node, _done) {
-    let done = once(_done);
-    let d = disposables();
+    const done = once(_done);
+    const d = disposables();
     if (!node)
         return d.dispose;
     // Safari returns a comma separated list of values, so let's sort them and take the highest value.
-    let { transitionDuration, transitionDelay } = getComputedStyle(node);
-    let [durationMs, delayMs] = [transitionDuration, transitionDelay].map((value) => {
-        let [resolvedValue = 0] = value
+    const { transitionDuration, transitionDelay } = getComputedStyle(node);
+    const [durationMs, delayMs] = [transitionDuration, transitionDelay].map((value) => {
+        const [resolvedValue = 0] = value
             .split(",")
             // Remove falsy we can't work with
             .filter(Boolean)
@@ -188,19 +188,19 @@ function waitForTransition(node, _done) {
             .sort((a, z) => z - a);
         return resolvedValue;
     });
-    let totalDuration = durationMs + delayMs;
+    const totalDuration = durationMs + delayMs;
     if (totalDuration !== 0) {
         if (process.env.NODE_ENV === "test") {
-            let dispose = d.setTimeout(() => {
+            const dispose = d.setTimeout(() => {
                 done();
                 dispose();
             }, totalDuration);
         }
         else {
-            let disposeGroup = d.group((d) => {
+            const disposeGroup = d.group((d) => {
                 // Mark the transition as done when the timeout is reached. This is a fallback in case the
                 // transitionrun event is not fired.
-                let cancelTimeout = d.setTimeout(() => {
+                const cancelTimeout = d.setTimeout(() => {
                     done();
                     d.dispose();
                 }, totalDuration);
@@ -241,11 +241,12 @@ function prepareTransition(node, { inFlight, prepare }) {
         prepare();
         return;
     }
-    let previous = node.style.transition;
+    const previous = node.style.transition;
     // Force cancel current transition
     node.style.transition = "none";
     prepare();
     // Trigger a reflow, flushing the CSS changes
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     node.offsetHeight;
     // Reset the transition to what it was before
     node.style.transition = previous;

package/dist/hooks/use-tree-walker.svelte.d.ts

@@ -0,0 +1,8 @@
+type AcceptNode = (node: HTMLElement) => typeof NodeFilter.FILTER_ACCEPT | typeof NodeFilter.FILTER_SKIP | typeof NodeFilter.FILTER_REJECT;
+export declare function useTreeWalker(options: {
+    enabled: boolean;
+    container: HTMLElement | null;
+    accept: AcceptNode;
+    walk(node: HTMLElement): void;
+}): void;
+export {};

package/dist/hooks/use-tree-walker.svelte.js

@@ -0,0 +1,19 @@
+import { getOwnerDocument } from "../utils/owner.js";
+export function useTreeWalker(options) {
+    const { enabled, container, accept, walk } = $derived(options);
+    $effect(() => {
+        if (!container)
+            return;
+        if (!enabled)
+            return;
+        const ownerDocument = getOwnerDocument(container);
+        if (!ownerDocument)
+            return;
+        const acceptNode = Object.assign((node) => accept(node), { acceptNode: accept });
+        const walker = ownerDocument.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, acceptNode, 
+        // @ts-expect-error This `false` is a simple small fix for older browsers
+        false);
+        while (walker.nextNode())
+            walk(walker.currentNode);
+    });
+}

package/dist/hooks/use-watch.svelte.d.ts

@@ -0,0 +1,4 @@
+export declare function useWatch<T extends any[]>(options: {
+    action: (newValues: [...T], oldValues: [...T]) => void | (() => void);
+    dependencies: [...T];
+}): void;

package/dist/hooks/use-watch.svelte.js

@@ -0,0 +1,16 @@
+import { untrack } from "svelte";
+export function useWatch(options) {
+    const { action, dependencies } = $derived(options);
+    let track = [];
+    $effect(() => {
+        let oldValues = untrack(() => [...track]);
+        for (let [idx, value] of dependencies.entries()) {
+            if (untrack(() => track[idx]) !== value) {
+                // At least 1 item changed
+                let returnValue = action(dependencies, oldValues);
+                track = dependencies;
+                return returnValue;
+            }
+        }
+    });
+}

package/dist/hooks/use-window-event.svelte.d.ts

@@ -0,0 +1,6 @@
+export declare function useWindowEvent<TType extends keyof WindowEventMap>(params: {
+    enabled: boolean;
+    type: TType;
+    listener: (ev: WindowEventMap[TType]) => any;
+    options?: boolean | AddEventListenerOptions;
+}): void;

package/dist/hooks/use-window-event.svelte.js

@@ -0,0 +1,12 @@
+export function useWindowEvent(params) {
+    let { enabled, type, listener, options } = $derived(params);
+    $effect(() => {
+        if (!enabled)
+            return;
+        function handler(event) {
+            listener(event);
+        }
+        window.addEventListener(type, handler, options);
+        return () => window.removeEventListener(type, handler, options);
+    });
+}

package/dist/index.d.ts

@@ -1,10 +1,20 @@
 export * from "./button/index.js";
 export * from "./checkbox/index.js";
+export * from "./close-button/index.js";
+export * from "./data-interactive/index.js";
 export * from "./description/index.js";
+export * from "./dialog/index.js";
 export * from "./field/index.js";
 export * from "./fieldset/index.js";
+export * from "./input/index.js";
 export * from "./label/index.js";
 export * from "./legend/index.js";
 export * from "./listbox/index.js";
+export * from "./menu/index.js";
 export * from "./switch/index.js";
 export * from "./tabs/index.js";
+export * from "./textarea/index.js";
+export * from "./transition/index.js";
+export * from "./hooks/use-id.js";
+export * from "./utils/types.js";
+export { mergeProps } from "./utils/render.js";

package/dist/index.js

@@ -1,10 +1,20 @@
 export * from "./button/index.js";
 export * from "./checkbox/index.js";
+export * from "./close-button/index.js";
+export * from "./data-interactive/index.js";
 export * from "./description/index.js";
+export * from "./dialog/index.js";
 export * from "./field/index.js";
 export * from "./fieldset/index.js";
+export * from "./input/index.js";
 export * from "./label/index.js";
 export * from "./legend/index.js";
 export * from "./listbox/index.js";
+export * from "./menu/index.js";
 export * from "./switch/index.js";
 export * from "./tabs/index.js";
+export * from "./textarea/index.js";
+export * from "./transition/index.js";
+export * from "./hooks/use-id.js";
+export * from "./utils/types.js";
+export { mergeProps } from "./utils/render.js";

package/dist/input/Input.svelte

@@ -0,0 +1,59 @@
+<script lang="ts" module>const DEFAULT_INPUT_TAG = "input";
+</script>
+
+<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 "../internal/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?.value || `headlessui-input-${internalId}`,
+  disabled: theirDisabled = false,
+  autofocus = false,
+  invalid = false,
+  ...theirProps
+} = $props();
+const disabled = $derived(providedDisabled?.value ?? 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(
+    {
+      id,
+      "aria-labelledby": labelledBy?.value,
+      "aria-describedby": describedBy?.value,
+      "aria-invalid": invalid ? "" : void 0,
+      disabled: disabled || void 0,
+      autofocus
+    },
+    focusProps,
+    hoverProps
+  )
+);
+const slot = $derived({ disabled, invalid, hover, focus, autofocus });
+</script>
+
+<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_INPUT_TAG} name="Input" bind:ref bind:value />

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

@@ -0,0 +1,52 @@
+import type { ElementType, Props } from "../utils/types.js";
+declare const DEFAULT_INPUT_TAG: "input";
+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, {
+    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 import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "invalid" | "disabled" | "autofocus" | "value" | "id" | InputPropsWeControl> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
+        children?: import("../utils/types.js").Children<InputRenderPropArg> | 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: InputRenderPropArg) => string) | undefined;
+    } : {}) & {
+        id?: string;
+        value?: TValue | undefined;
+        disabled?: boolean;
+        invalid?: boolean;
+        autofocus?: boolean;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "ref" | "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']> & {
+        $$events?: ReturnType<__sveltets_Render<TTag, TValue>['events']>;
+    }): ReturnType<__sveltets_Render<TTag, TValue>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const Input: $$IsomorphicComponent;
+type Input<TTag extends ElementType = typeof DEFAULT_INPUT_TAG, TValue = string> = InstanceType<typeof Input<TTag, TValue>>;
+export default Input;

package/dist/input/index.d.ts

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

package/dist/input/index.js

@@ -0,0 +1 @@
+export { default as Input } from "./Input.svelte";

package/dist/internal/FocusSentinel.svelte.d.ts

@@ -5,7 +5,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
-    }): Exports;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
     z_$$bindings?: Bindings;
 }
 declare const FocusSentinel: $$__sveltets_2_IsomorphicComponent<{

package/dist/internal/ForcePortalRoot.svelte

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

package/dist/internal/ForcePortalRoot.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from "svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ForcePortalRoot: $$__sveltets_2_IsomorphicComponent<{
+    force: boolean;
+    children: Snippet;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ForcePortalRoot = InstanceType<typeof ForcePortalRoot>;
+export default ForcePortalRoot;

package/dist/internal/FormFields.svelte.d.ts

@@ -5,7 +5,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
-    }): Exports;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
     z_$$bindings?: Bindings;
 }
 declare const FormFields: $$__sveltets_2_IsomorphicComponent<{

package/dist/internal/FormResolver.svelte.d.ts

@@ -5,7 +5,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
-    }): Exports;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
     z_$$bindings?: Bindings;
 }
 declare const FormResolver: $$__sveltets_2_IsomorphicComponent<{

package/dist/internal/Hidden.svelte

@@ -1,18 +1,14 @@
-<script lang="ts" context="module">export var HiddenFeatures = /* @__PURE__ */ ((HiddenFeatures2) => {
+<script lang="ts" module>import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+const DEFAULT_VISUALLY_HIDDEN_TAG = "span";
+export var HiddenFeatures = /* @__PURE__ */ ((HiddenFeatures2) => {
   HiddenFeatures2[HiddenFeatures2["None"] = 1] = "None";
   HiddenFeatures2[HiddenFeatures2["Focusable"] = 2] = "Focusable";
   HiddenFeatures2[HiddenFeatures2["Hidden"] = 4] = "Hidden";
   return HiddenFeatures2;
 })(HiddenFeatures || {});
-const DEFAULT_VISUALLY_HIDDEN_TAG = "div";
 </script>
 
-<script lang="ts" generics="TTag extends keyof SvelteHTMLElements">let {
-  as = DEFAULT_VISUALLY_HIDDEN_TAG,
-  ref = $bindable(),
-  features = HiddenFeatures.None,
-  ...theirProps
-} = $props();
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG">let { ref = $bindable(), features = HiddenFeatures.None, ...theirProps } = $props();
 let ourProps = {
   "aria-hidden": (features & HiddenFeatures.Focusable) === HiddenFeatures.Focusable ? true : theirProps["aria-hidden"] ?? void 0,
   hidden: (features & HiddenFeatures.Hidden) === HiddenFeatures.Hidden ? true : void 0,
@@ -33,4 +29,4 @@ let ourProps = {
 };
 </script>
 
-<svelte:element this={as} bind:this={ref} {...ourProps} {...theirProps} />
+<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_VISUALLY_HIDDEN_TAG} name="Hidden" bind:ref />

package/dist/internal/Hidden.svelte.d.ts

@@ -1,19 +1,26 @@
-import type { HTMLElementType, Props } from "../utils/types.js";
-import type { SvelteHTMLElements } from "svelte/elements";
+import type { ElementType, Props } from "../utils/types.js";
+declare const DEFAULT_VISUALLY_HIDDEN_TAG: "span";
 export declare enum HiddenFeatures {
     None = 1,
     Focusable = 2,
     Hidden = 4
 }
-declare const DEFAULT_VISUALLY_HIDDEN_TAG: "div";
 type HiddenRenderPropArg = {};
 type HiddenPropsWeControl = never;
-export type HiddenProps<TTag extends keyof SvelteHTMLElements = typeof DEFAULT_VISUALLY_HIDDEN_TAG> = Props<TTag, HiddenRenderPropArg, HiddenPropsWeControl, {
+export type HiddenProps<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG> = Props<TTag, HiddenRenderPropArg, HiddenPropsWeControl, {
     features?: HiddenFeatures;
-    ref?: HTMLElementType<TTag> | null;
 }>;
-declare class __sveltets_Render<TTag extends keyof SvelteHTMLElements> {
-    props(): HiddenProps<TTag>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "features"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
+        children?: import("../utils/types.js").Children<HiddenRenderPropArg> | 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: HiddenRenderPropArg) => string) | undefined;
+    } : {}) & {
+        features?: HiddenFeatures;
+    };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
@@ -22,14 +29,14 @@ declare class __sveltets_Render<TTag extends keyof SvelteHTMLElements> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TTag extends keyof SvelteHTMLElements>(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']>> & {
+    new <TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_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 keyof SvelteHTMLElements>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
+    <TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
         $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
     }): ReturnType<__sveltets_Render<TTag>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const Hidden: $$IsomorphicComponent;
-type Hidden<TTag extends keyof SvelteHTMLElements> = InstanceType<typeof Hidden<TTag>>;
+type Hidden<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG> = InstanceType<typeof Hidden<TTag>>;
 export default Hidden;

package/dist/internal/HoistFormFields.svelte.d.ts

@@ -6,7 +6,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
-    }): Exports;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
     z_$$bindings?: Bindings;
 }
 declare const HoistFormFields: $$__sveltets_2_IsomorphicComponent<{

package/dist/internal/MainTreeProvider.svelte

@@ -0,0 +1,45 @@
+<script lang="ts" module>import { getContext, onMount } from "svelte";
+export function useMainTreeNode(options = {}) {
+  const { fallbackMainTreeNode = null } = $derived(options);
+  return getContext("MainTreeContext") ?? {
+    get node() {
+      return fallbackMainTreeNode;
+    }
+  };
+}
+</script>
+
+<script lang="ts">import { setContext } from "svelte";
+import Hidden, { HiddenFeatures } from "./Hidden.svelte";
+import { getOwnerDocument } from "../utils/owner.js";
+let { node, children } = $props();
+let mainTreeNode = $state(null);
+const resolvedMainTreeNode = useMainTreeNode({
+  get fallbackMainTreeNode() {
+    return node ?? mainTreeNode;
+  }
+});
+setContext("MainTreeContext", {
+  get node() {
+    return resolvedMainTreeNode.node;
+  }
+});
+let el = $state();
+onMount(() => {
+  if (!el) return;
+  for (let container of getOwnerDocument(el)?.querySelectorAll("html > *, body > *") ?? []) {
+    if (container === document.body) continue;
+    if (container === document.head) continue;
+    if (!(container instanceof HTMLElement)) continue;
+    if (container?.contains(el)) {
+      mainTreeNode = container;
+      break;
+    }
+  }
+});
+</script>
+
+{#if children}{@render children()}{/if}
+{#if resolvedMainTreeNode === null}
+  <Hidden features={HiddenFeatures.Hidden} bind:ref={el} />
+{/if}

package/dist/internal/MainTreeProvider.svelte.d.ts

@@ -0,0 +1,31 @@
+type MainTreeContext = {
+    node: HTMLElement | null;
+};
+/**
+ * Get the main tree node from context or fallback to the optionally provided node.
+ */
+export declare function useMainTreeNode(options?: {
+    fallbackMainTreeNode?: HTMLElement | null;
+}): MainTreeContext;
+import { type Snippet } from "svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const MainTreeProvider: $$__sveltets_2_IsomorphicComponent<{
+    children: Snippet;
+    node?: HTMLElement | null;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type MainTreeProvider = InstanceType<typeof MainTreeProvider>;
+export default MainTreeProvider;

package/dist/internal/Portal.svelte.d.ts

@@ -6,7 +6,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
-    }): Exports;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
     z_$$bindings?: Bindings;
 }
 declare const Portal: $$__sveltets_2_IsomorphicComponent<{

package/dist/internal/close-provider.d.ts

@@ -0,0 +1,7 @@
+export type CloseContext = {
+    close: () => void;
+};
+export declare function useClose(): CloseContext;
+export declare function createCloseContext(options: {
+    readonly close: () => void;
+}): void;

package/dist/internal/close-provider.js

@@ -0,0 +1,7 @@
+import { getContext, setContext } from "svelte";
+export function useClose() {
+    return getContext("CloseContext");
+}
+export function createCloseContext(options) {
+    setContext("CloseContext", options);
+}

package/dist/internal/floating.svelte.d.ts

@@ -1,4 +1,4 @@
-import { useInteractions, type UseFloatingReturn } from "@skeletonlabs/floating-ui-svelte";
+import type { MutableRefObject } from "../utils/ref.svelte.js";
 type Align = "start" | "end";
 type Placement = "top" | "right" | "bottom" | "left";
 type BaseAnchorProps = {
@@ -30,24 +30,29 @@ export type AnchorPropsWithSelection = false | (`${Placement | "selection"}` | `
     to: `${Placement | "selection"}` | `${Placement | "selection"} ${Align}`;
 }>;
 export type InternalFloatingPanelProps = Partial<{
-    inner: {};
+    inner: {
+        listRef: MutableRefObject<(HTMLElement | null)[]>;
+        index: () => number | null;
+    };
 }>;
 type FloatingContext = {
-    styles?: UseFloatingReturn["floatingStyles"];
+    styles?: string;
     setReference: (reference: HTMLElement | null | undefined) => void;
     setFloating: (floating: HTMLElement | null | undefined) => void;
-    getReferenceProps: ReturnType<typeof useInteractions>["getReferenceProps"];
-    getFloatingProps: ReturnType<typeof useInteractions>["getFloatingProps"];
+    getReferenceProps: () => Record<string, any>;
+    getFloatingProps: () => Record<string, any>;
     slot: Partial<{
         anchor: `${Placement | "selection"}` | `${Placement | "selection"} ${Align}`;
     }>;
 };
 export declare function useResolvedAnchor<T extends AnchorProps | AnchorPropsWithSelection>(anchor?: T): Exclude<T, boolean | string> | null;
 export declare function useFloating(): FloatingContext;
-export declare function useFloatingPanelProps(): (userProps?: import("svelte/elements").HTMLAttributes<Element> | undefined) => Record<string, unknown> & {
-    "data-anchor": Placement | "top start" | "top end" | "right start" | "right end" | "bottom start" | "bottom end" | "left start" | "left end" | "selection" | "selection start" | "selection end" | undefined;
+export declare function useFloatingPanelProps(): () => Record<string, any> & {
+    "data-anchor": Placement | "top end" | "top start" | "right end" | "right start" | "bottom end" | "bottom start" | "left end" | "left start" | "selection" | "selection end" | "selection start" | undefined;
 };
-export declare function useFloatingPanel(placement?: (AnchorPropsWithSelection & InternalFloatingPanelProps) | null): {
+export declare function useFloatingPanel(options: {
+    placement: (AnchorPropsWithSelection & InternalFloatingPanelProps) | null;
+}): {
     readonly setFloating: (floating: HTMLElement | null | undefined) => void;
     readonly style: string | undefined;
 };