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

package/dist/menu/MenuSeparator.svelte.d.ts

@@ -1,18 +1,19 @@
-import type { Snippet } from "svelte";
 import type { ElementType, Props } from "../utils/types.js";
 declare const DEFAULT_SEPARATOR_TAG: "div";
 type SeparatorRenderPropArg = {};
 type SeparatorPropsWeControl = "role";
 export type MenuSeparatorProps<TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG> = Props<TTag, SeparatorRenderPropArg, SeparatorPropsWeControl>;
-export type MenuSeparatorChildren = Snippet<[SeparatorRenderPropArg]>;
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "role"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: Snippet<[SeparatorRenderPropArg, Record<string, any>]> | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "class") | "role"> 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: SeparatorRenderPropArg;
+            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: SeparatorRenderPropArg) => string) | undefined;
+    } & (true extends (import("svelte/elements").SvelteHTMLElements[TTag] extends infer T_1 ? T_1 extends import("svelte/elements").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: SeparatorRenderPropArg) => string) | null | undefined;
     } : {});
     events(): {} & {
         [evt: string]: CustomEvent<any>;

package/dist/menu/context.svelte.d.ts

@@ -45,32 +45,4 @@ export type MenuContext = StateDefinition & {
     setItemsElement(element: HTMLElement | null): void;
 };
 export declare function useMenuContext(component: string): MenuContext;
-export declare const stateReducer: (initialState: StateDefinition) => {
-    readonly menuState: MenuStates;
-    readonly buttonElement: HTMLButtonElement | null;
-    readonly itemsElement: HTMLElement | null;
-    readonly items: {
-        id: string;
-        dataRef: MenuItemDataRef;
-    }[];
-    readonly searchQuery: string;
-    readonly activeItemIndex: number | null;
-    readonly activationTrigger: ActivationTrigger;
-    readonly __demoMode: boolean;
-    closeMenu(): StateDefinition;
-    openMenu(): StateDefinition;
-    goToItem(action: {
-        focus: Focus.Specific;
-        id: string;
-        trigger?: ActivationTrigger;
-    } | {
-        focus: Exclude<Focus, Focus.Specific>;
-        trigger?: ActivationTrigger;
-    }): StateDefinition;
-    search(value: string): StateDefinition;
-    clearSearch(): StateDefinition;
-    registerItem(id: string, dataRef: MenuItemDataRef): StateDefinition;
-    unregisterItem(id: string): StateDefinition;
-    setButtonElement(element: HTMLButtonElement | null): StateDefinition;
-    setItemsElement(element: HTMLElement | null): StateDefinition;
-};
+export declare const createMenuContext: (initialState: StateDefinition) => MenuContext;

package/dist/menu/context.svelte.js

@@ -1,6 +1,6 @@
 import { calculateActiveIndex, Focus } from "../utils/calculate-active-index.js";
 import { sortByDomNode } from "../utils/focus-management.js";
-import { getContext } from "svelte";
+import { getContext, setContext } from "svelte";
 export var MenuStates;
 (function (MenuStates) {
     MenuStates[MenuStates["Open"] = 0] = "Open";
@@ -14,7 +14,7 @@ export var ActivationTrigger;
 export function useMenuContext(component) {
     const context = getContext("MenuContext");
     if (!context) {
-        let err = new Error(`<${component} /> is missing a parent <Menu /> component.`);
+        const err = new Error(`<${component} /> is missing a parent <Menu /> component.`);
         if (Error.captureStackTrace)
             Error.captureStackTrace(err, useMenuContext);
         throw err;
@@ -22,8 +22,8 @@ export function useMenuContext(component) {
     return context;
 }
 function adjustOrderedState(state, adjustment = (i) => i) {
-    let currentActiveItem = state.activeItemIndex !== null ? state.items[state.activeItemIndex] : null;
-    let sortedItems = sortByDomNode(adjustment(state.items.slice()), (item) => item.dataRef.current.domRef.current);
+    const currentActiveItem = state.activeItemIndex !== null ? state.items[state.activeItemIndex] : null;
+    const sortedItems = sortByDomNode(adjustment(state.items.slice()), (item) => item.dataRef.current.domRef.current);
     // If we inserted an item before the current active item then the active item index
     // would be wrong. To fix this, we will re-lookup the correct index.
     let adjustedActiveItemIndex = currentActiveItem ? sortedItems.indexOf(currentActiveItem) : null;
@@ -36,9 +36,9 @@ function adjustOrderedState(state, adjustment = (i) => i) {
         activeItemIndex: adjustedActiveItemIndex,
     };
 }
-export const stateReducer = (initialState) => {
-    let _state = $state(initialState);
-    return {
+export const createMenuContext = (initialState) => {
+    const _state = $state(initialState);
+    const context = {
         get menuState() {
             return _state.menuState;
         },
@@ -104,17 +104,17 @@ export const stateReducer = (initialState) => {
             // or if the previous DOM node is already the first DOM node, then we don't
             // have to sort all the DOM nodes.
             else if (action.focus === Focus.Previous) {
-                let activeItemIdx = _state.activeItemIndex;
+                const activeItemIdx = _state.activeItemIndex;
                 if (activeItemIdx !== null) {
-                    let currentDom = _state.items[activeItemIdx].dataRef.current.domRef;
-                    let previousItemIndex = calculateActiveIndex(action, {
+                    const currentDom = _state.items[activeItemIdx].dataRef.current.domRef;
+                    const previousItemIndex = calculateActiveIndex(action, {
                         resolveItems: () => _state.items,
                         resolveActiveIndex: () => _state.activeItemIndex,
                         resolveId: (item) => item.id,
                         resolveDisabled: (item) => item.dataRef.current.disabled,
                     });
                     if (previousItemIndex !== null) {
-                        let previousDom = _state.items[previousItemIndex].dataRef.current.domRef;
+                        const previousDom = _state.items[previousItemIndex].dataRef.current.domRef;
                         if (
                         // Next to each other
                         currentDom.current?.previousElementSibling === previousDom.current ||
@@ -132,17 +132,17 @@ export const stateReducer = (initialState) => {
             // if the next DOM node is already the last DOM node, then we don't have to
             // sort all the DOM nodes.
             else if (action.focus === Focus.Next) {
-                let activeItemIdx = _state.activeItemIndex;
+                const activeItemIdx = _state.activeItemIndex;
                 if (activeItemIdx !== null) {
-                    let currentDom = _state.items[activeItemIdx].dataRef.current.domRef;
-                    let nextItemIndex = calculateActiveIndex(action, {
+                    const currentDom = _state.items[activeItemIdx].dataRef.current.domRef;
+                    const nextItemIndex = calculateActiveIndex(action, {
                         resolveItems: () => _state.items,
                         resolveActiveIndex: () => _state.activeItemIndex,
                         resolveId: (item) => item.id,
                         resolveDisabled: (item) => item.dataRef.current.disabled,
                     });
                     if (nextItemIndex !== null) {
-                        let nextDom = _state.items[nextItemIndex].dataRef.current.domRef;
+                        const nextDom = _state.items[nextItemIndex].dataRef.current.domRef;
                         if (
                         // Next to each other
                         currentDom.current?.nextElementSibling === nextDom.current ||
@@ -157,8 +157,8 @@ export const stateReducer = (initialState) => {
             // Slow path:
             //
             // Ensure all the items are correctly sorted according to DOM position
-            let adjustedState = adjustOrderedState(_state);
-            let activeItemIndex = calculateActiveIndex(action, {
+            const adjustedState = adjustOrderedState(_state);
+            const activeItemIndex = calculateActiveIndex(action, {
                 resolveItems: () => adjustedState.items,
                 resolveActiveIndex: () => adjustedState.activeItemIndex,
                 resolveId: (item) => item.id,
@@ -169,16 +169,16 @@ export const stateReducer = (initialState) => {
             return _state;
         },
         search(value) {
-            let wasAlreadySearching = _state.searchQuery !== "";
-            let offset = wasAlreadySearching ? 0 : 1;
-            let searchQuery = _state.searchQuery + value.toLowerCase();
-            let reOrderedItems = _state.activeItemIndex !== null
+            const wasAlreadySearching = _state.searchQuery !== "";
+            const offset = wasAlreadySearching ? 0 : 1;
+            const searchQuery = _state.searchQuery + value.toLowerCase();
+            const reOrderedItems = _state.activeItemIndex !== null
                 ? _state.items
                     .slice(_state.activeItemIndex + offset)
                     .concat(_state.items.slice(0, _state.activeItemIndex + offset))
                 : _state.items;
-            let matchingItem = reOrderedItems.find((item) => item.dataRef.current.textValue?.startsWith(searchQuery) && !item.dataRef.current.disabled);
-            let matchIdx = matchingItem ? _state.items.indexOf(matchingItem) : -1;
+            const matchingItem = reOrderedItems.find((item) => item.dataRef.current.textValue?.startsWith(searchQuery) && !item.dataRef.current.disabled);
+            const matchIdx = matchingItem ? _state.items.indexOf(matchingItem) : -1;
             if (matchIdx === -1 || matchIdx === _state.activeItemIndex) {
                 _state.searchQuery = searchQuery;
                 return _state;
@@ -195,15 +195,15 @@ export const stateReducer = (initialState) => {
             return _state;
         },
         registerItem(id, dataRef) {
-            let item = { id, dataRef };
-            let adjustedState = adjustOrderedState(_state, (items) => [...items, item]);
+            const item = { id, dataRef };
+            const adjustedState = adjustOrderedState(_state, (items) => [...items, item]);
             _state.items = adjustedState.items;
             _state.activeItemIndex = adjustedState.activeItemIndex;
             return _state;
         },
         unregisterItem(id) {
-            let adjustedState = adjustOrderedState(_state, (items) => {
-                let idx = items.findIndex((a) => a.id === id);
+            const adjustedState = adjustOrderedState(_state, (items) => {
+                const idx = items.findIndex((a) => a.id === id);
                 if (idx !== -1)
                     items.splice(idx, 1);
                 return items;
@@ -226,4 +226,6 @@ export const stateReducer = (initialState) => {
             return _state;
         },
     };
+    setContext("MenuContext", context);
+    return context;
 };

package/dist/menu/index.d.ts

@@ -1,7 +1,7 @@
-export { default as Menu, type MenuProps, type MenuChildren } from "./Menu.svelte";
-export { default as MenuButton, type MenuButtonProps, type MenuButtonChildren } from "./MenuButton.svelte";
-export { default as MenuHeading, type MenuHeadingProps, type MenuHeadingChildren } from "./MenuHeading.svelte";
-export { default as MenuItem, type MenuItemProps, type MenuItemChildren } from "./MenuItem.svelte";
-export { default as MenuItems, type MenuItemsProps, type MenuItemsChildren } from "./MenuItems.svelte";
-export { default as MenuSection, type MenuSectionProps, type MenuSectionChildren } from "./MenuSection.svelte";
-export { default as MenuSeparator, type MenuSeparatorProps, type MenuSeparatorChildren } from "./MenuSeparator.svelte";
+export { default as Menu, type MenuProps } from "./Menu.svelte";
+export { default as MenuButton, type MenuButtonProps } from "./MenuButton.svelte";
+export { default as MenuHeading, type MenuHeadingProps } from "./MenuHeading.svelte";
+export { default as MenuItem, type MenuItemProps } from "./MenuItem.svelte";
+export { default as MenuItems, type MenuItemsProps } from "./MenuItems.svelte";
+export { default as MenuSection, type MenuSectionProps } from "./MenuSection.svelte";
+export { default as MenuSeparator, type MenuSeparatorProps } from "./MenuSeparator.svelte";

package/dist/popover/Popover.svelte

@@ -1,159 +1,225 @@
-<script lang="ts" module>export const DEFAULT_POPOVER_TAG = "div";
-</script>
+<script lang="ts" module>
+  import type { ElementType, Props } from "../utils/types.js"
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_POPOVER_TAG">import { getOwnerDocument } from "../utils/owner.js";
-import { setContext, untrack } from "svelte";
-import {
-  createPopoverContext,
-  PopoverStates,
-  usePopoverGroupContext
-} from "./context.svelte.js";
-import { FocusableMode, getFocusableElements, isFocusableElement } from "../utils/focus-management.js";
-import { useNestedPortals } from "../portal/InternalPortal.svelte";
-import MainTreeProvider, { useMainTreeNode } from "../internal/MainTreeProvider.svelte";
-import { useRootContainers } from "../hooks/use-root-containers.svelte.js";
-import { useEventListener } from "../hooks/use-event-listener.svelte.js";
-import { useOutsideClick } from "../hooks/use-outside-click.svelte.js";
-import { useFloatingProvider } from "../internal/floating-provider.svelte.js";
-import { createCloseContext } from "../internal/close-provider.js";
-import { createOpenClosedContext, State } from "../internal/open-closed.js";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-let { ref = $bindable(), __demoMode = false, ...theirProps } = $props();
-let buttons = $state([]);
-const context = createPopoverContext({
-  __demoMode,
-  popoverState: __demoMode ? PopoverStates.Open : PopoverStates.Closed,
-  buttons
-});
-const {
-  popoverState,
-  button,
-  buttonId,
-  panel,
-  panelId,
-  beforePanelSentinel,
-  afterPanelSentinel,
-  afterButtonSentinel
-} = $derived(context);
-const ownerDocument = $derived(getOwnerDocument(ref ?? button));
-const isPortalled = $derived.by(() => {
-  if (!button) return false;
-  if (!panel) return false;
-  return untrack(() => {
-    for (let root2 of document.querySelectorAll("body > *")) {
-      if (Number(root2?.contains(button)) ^ Number(root2?.contains(panel))) {
-        return true;
-      }
-    }
-    let elements = getFocusableElements();
-    let buttonIdx = elements.indexOf(button);
-    let beforeIdx = (buttonIdx + elements.length - 1) % elements.length;
-    let afterIdx = (buttonIdx + 1) % elements.length;
-    let beforeElement = elements[beforeIdx];
-    let afterElement = elements[afterIdx];
-    if (!panel.contains(beforeElement) && !panel.contains(afterElement)) {
-      return true;
-    }
-    return false;
-  });
-});
-const registerBag = $derived({
-  buttonId,
-  panelId,
-  close: () => context.closePopover()
-});
-const groupContext = usePopoverGroupContext();
-const registerPopover = $derived(groupContext?.registerPopover);
-const isFocusWithinPopoverGroup = () => {
-  return groupContext?.isFocusWithinPopoverGroup() ?? (ownerDocument?.activeElement && (button?.contains(ownerDocument.activeElement) || panel?.contains(ownerDocument.activeElement)));
-};
-$effect(() => registerPopover?.(registerBag));
-const nestedPortals = useNestedPortals();
-const { portals } = $derived(nestedPortals);
-const mainTreeNode = useMainTreeNode({
-  get fallbackMainTreeNode() {
-    return button;
-  }
-});
-const root = useRootContainers({
-  get mainTreeNode() {
-    return mainTreeNode.node;
-  },
-  get portals() {
-    return portals;
-  },
-  get defaultContainers() {
-    return [button, panel];
+  export const DEFAULT_POPOVER_TAG = "div" as const
+  type PopoverRenderPropArg = {
+    open: boolean
+    close(focusableElement?: HTMLElement | MouseEvent<HTMLElement>): void
   }
-});
-useEventListener({
-  get element() {
-    return ownerDocument?.defaultView;
-  },
-  type: "focus",
-  listener: (event) => {
-    if (event.target === window) return;
-    if (!(event.target instanceof HTMLElement)) return;
-    if (popoverState !== PopoverStates.Open) return;
-    if (isFocusWithinPopoverGroup()) return;
-    if (!button) return;
-    if (!panel) return;
-    if (root.contains(event.target)) return;
-    if (beforePanelSentinel?.contains?.(event.target)) return;
-    if (afterPanelSentinel?.contains?.(event.target)) return;
-    if (afterButtonSentinel?.contains?.(event.target)) return;
-    context.closePopover();
-  },
-  options: true
-});
-const outsideClickEnabled = $derived(popoverState === PopoverStates.Open);
-useOutsideClick({
-  get enabled() {
-    return outsideClickEnabled;
-  },
-  get containers() {
-    return root.resolvedContainers;
-  },
-  cb: (event, target) => {
-    context.closePopover();
-    if (!isFocusableElement(target, FocusableMode.Loose)) {
-      event.preventDefault();
-      button?.focus();
+  type PopoverPropsWeControl = never
+
+  export type PopoverProps<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG> = Props<
+    TTag,
+    PopoverRenderPropArg,
+    PopoverPropsWeControl,
+    {
+      __demoMode?: boolean
     }
+  >
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_POPOVER_TAG">
+  import { getOwnerDocument } from "../utils/owner.js"
+
+  import { setContext, untrack } from "svelte"
+  import {
+    createPopoverContext,
+    PopoverStates,
+    usePopoverGroupContext,
+    type MouseEvent,
+    type PopoverAPIContext,
+    type PopoverPanelContext,
+  } from "./context.svelte.js"
+  import { FocusableMode, getFocusableElements, isFocusableElement } from "../utils/focus-management.js"
+  import { useNestedPortals } from "../portal/InternalPortal.svelte"
+  import MainTreeProvider, { useMainTreeNode } from "../internal/MainTreeProvider.svelte"
+  import { useRootContainers } from "../hooks/use-root-containers.svelte.js"
+  import { useEventListener } from "../hooks/use-event-listener.svelte.js"
+  import { useOutsideClick } from "../hooks/use-outside-click.svelte.js"
+  import { useFloatingProvider } from "../internal/floating-provider.svelte.js"
+  import { createCloseContext } from "../internal/close-provider.js"
+  import { createOpenClosedContext, State } from "../internal/open-closed.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  let { ref = $bindable(), __demoMode = false, ...theirProps }: { as?: TTag } & PopoverProps<TTag> = $props()
+
+  let buttons = $state([])
+  const context = createPopoverContext({
+    __demoMode,
+    popoverState: __demoMode ? PopoverStates.Open : PopoverStates.Closed,
+    buttons,
+  })
+  const {
+    popoverState,
+    button,
+    buttonId,
+    panel,
+    panelId,
+    beforePanelSentinel,
+    afterPanelSentinel,
+    afterButtonSentinel,
+  } = $derived(context)
+
+  const ownerDocument = $derived(getOwnerDocument(ref ?? button))
+
+  const isPortalled = $derived.by(() => {
+    if (!button) return false
+    if (!panel) return false
+
+    return untrack(() => {
+      // We are part of a different "root" tree, so therefore we can consider it portalled. This is a
+      // heuristic because 3rd party tools could use some form of portal, typically rendered at the
+      // end of the body but we don't have an actual reference to that.
+      for (let root of document.querySelectorAll("body > *")) {
+        if (Number(root?.contains(button)) ^ Number(root?.contains(panel))) {
+          return true
+        }
+      }
+
+      // Use another heuristic to try and calculate whether or not the focusable
+      // elements are near each other (aka, following the default focus/tab order
+      // from the browser). If they are then it doesn't really matter if they are
+      // portalled or not because we can follow the default tab order. But if they
+      // are not, then we can consider it being portalled so that we can ensure
+      // that tab and shift+tab (hopefully) go to the correct spot.
+      let elements = getFocusableElements()
+      let buttonIdx = elements.indexOf(button)
+
+      let beforeIdx = (buttonIdx + elements.length - 1) % elements.length
+      let afterIdx = (buttonIdx + 1) % elements.length
+
+      let beforeElement = elements[beforeIdx]
+      let afterElement = elements[afterIdx]
+
+      if (!panel.contains(beforeElement) && !panel.contains(afterElement)) {
+        return true
+      }
+
+      // It may or may not be portalled, but we don't really know.
+      return false
+    })
+  })
+
+  const registerBag = $derived({
+    buttonId,
+    panelId,
+    close: () => context.closePopover(),
+  })
+
+  const groupContext = usePopoverGroupContext()
+  const registerPopover = $derived(groupContext?.registerPopover)
+  const isFocusWithinPopoverGroup = () => {
+    return (
+      groupContext?.isFocusWithinPopoverGroup() ??
+      (ownerDocument?.activeElement &&
+        (button?.contains(ownerDocument.activeElement) || panel?.contains(ownerDocument.activeElement)))
+    )
   }
-});
-const close = (focusableElement) => {
-  context.closePopover();
-  const restoreElement = (() => {
-    if (!focusableElement) return button;
-    if (focusableElement instanceof HTMLElement) return focusableElement;
-    return button;
-  })();
-  restoreElement?.focus();
-};
-const api = {
-  close,
-  get isPortalled() {
-    return isPortalled;
-  }
-};
-setContext("PopoverAPIContext", api);
-const slot = $derived({
-  open: popoverState === PopoverStates.Open,
-  close
-});
-useFloatingProvider();
-setContext("PopoverPanelContext", void 0);
-createCloseContext({
-  get close() {
-    return close;
+
+  $effect(() => registerPopover?.(registerBag))
+
+  const nestedPortals = useNestedPortals()
+  const { portals } = $derived(nestedPortals)
+  const mainTreeNode = useMainTreeNode({
+    get fallbackMainTreeNode() {
+      return button
+    },
+  })
+  const root = useRootContainers({
+    get mainTreeNode() {
+      return mainTreeNode.node
+    },
+    get portals() {
+      return portals
+    },
+    get defaultContainers() {
+      return [button, panel]
+    },
+  })
+
+  // Handle focus out
+  useEventListener({
+    get element() {
+      return ownerDocument?.defaultView
+    },
+    type: "focus",
+    listener: (event) => {
+      if (event.target === window) return
+      if (!(event.target instanceof HTMLElement)) return
+      if (popoverState !== PopoverStates.Open) return
+      if (isFocusWithinPopoverGroup()) return
+      if (!button) return
+      if (!panel) return
+      if (root.contains(event.target)) return
+      if (beforePanelSentinel?.contains?.(event.target)) return
+      if (afterPanelSentinel?.contains?.(event.target)) return
+      if (afterButtonSentinel?.contains?.(event.target)) return
+
+      context.closePopover()
+    },
+    options: true,
+  })
+
+  // Handle outside click
+  const outsideClickEnabled = $derived(popoverState === PopoverStates.Open)
+  useOutsideClick({
+    get enabled() {
+      return outsideClickEnabled
+    },
+    get containers() {
+      return root.resolvedContainers
+    },
+    cb: (event, target) => {
+      context.closePopover()
+
+      if (!isFocusableElement(target, FocusableMode.Loose)) {
+        event.preventDefault()
+        button?.focus()
+      }
+    },
+  })
+
+  const close = (focusableElement?: HTMLElement | MouseEvent<HTMLElement>) => {
+    context.closePopover()
+
+    const restoreElement = (() => {
+      if (!focusableElement) return button
+      if (focusableElement instanceof HTMLElement) return focusableElement
+
+      return button
+    })()
+
+    restoreElement?.focus()
   }
-});
-createOpenClosedContext({
-  get value() {
-    return context.popoverState === PopoverStates.Open ? State.Open : State.Closed;
+
+  const api: PopoverAPIContext = {
+    close,
+    get isPortalled() {
+      return isPortalled
+    },
   }
-});
+  setContext("PopoverAPIContext", api)
+
+  const slot = $derived({
+    open: popoverState === PopoverStates.Open,
+    close,
+  } satisfies PopoverRenderPropArg)
+
+  useFloatingProvider()
+
+  setContext<PopoverPanelContext | undefined>("PopoverPanelContext", undefined)
+
+  createCloseContext({
+    get close() {
+      return close
+    },
+  })
+
+  createOpenClosedContext({
+    get value() {
+      return context.popoverState === PopoverStates.Open ? State.Open : State.Closed
+    },
+  })
 </script>
 
 <MainTreeProvider node={mainTreeNode.node}>

package/dist/popover/Popover.svelte.d.ts

@@ -12,11 +12,14 @@ import { type MouseEvent } from "./context.svelte.js";
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "__demoMode"> 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<[PopoverRenderPropArg, Record<string, any>]> | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "class") | "__demoMode"> 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: PopoverRenderPropArg;
+            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: PopoverRenderPropArg) => 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: PopoverRenderPropArg) => string) | null | undefined;
     } : {}) & {
         __demoMode?: boolean;
     };