@pzerelles/headlessui-svelte 2.1.2-next.58 → 2.1.2-next.59

package/dist/dialog/Dialog.svelte

@@ -27,35 +27,16 @@
 </script>
 
 <script lang="ts">
-  import { useId } from "../hooks/use-id.js"
-  import { useMainTreeNode, useRootContainers } from "../hooks/use-root-containers.svelte.js"
-  import { clearOpenClosedContext, State, useOpenClosed } from "../internal/open-closed.js"
-  import { useNestedPortals } from "../portal/InternalPortal.svelte"
-  import { getOwnerDocument } from "../utils/owner.js"
-  import { useInertOthers } from "../hooks/use-inert-others.svelte.js"
-  import { useOutsideClick } from "../hooks/use-outside-click.svelte.js"
-  import { useEscape } from "../hooks/use-escape.svelte.js"
-  import { useScrollLock } from "../hooks/use-scroll-lock.svelte.js"
-  import { useOnDisappear } from "../hooks/use-on-disappear.svelte.js"
-  import { setContext } from "svelte"
-  import { useIsTouchDevice } from "../hooks/use-is-touch-device.svelte.js"
-  import FocusTrap, { FocusTrapFeatures } from "../focus-trap/FocusTrap.svelte"
-  import Portal from "../portal/Portal.svelte"
-  import PortalGroup from "../portal/PortalGroup.svelte"
-  import ForcePortalRoot from "../internal/ForcePortalRoot.svelte"
-  import { createCloseContext } from "../internal/close-provider.js"
-  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-  import { DialogStates, type DialogContext, type StateDefinition } from "./context.svelte.js"
-  import { useDescriptions } from "../description/context.svelte.js"
+  import { useOpenClosed } from "../internal/open-closed.js"
   import MainTreeProvider from "../internal/MainTreeProvider.svelte"
   import Transition from "../transition/Transition.svelte"
-  import { BROWSER } from "esm-env"
+  import InternalDialog from "./InternalDialog.svelte"
 
-  let { element = $bindable(), transition = false, open: theirOpen, ...rest }: DialogProps = $props()
+  let { element = $bindable(), transition = false, open, ...rest }: DialogProps = $props()
 
   // Validations
   const usesOpenClosedState = useOpenClosed()
-  const hasOpen = $derived(theirOpen !== undefined || usesOpenClosedState)
+  const hasOpen = $derived(open !== undefined || usesOpenClosedState)
   const hasOnClose = $derived(rest.hasOwnProperty("onclose"))
 
   $effect(() => {
@@ -83,288 +64,18 @@
       )
     }
   })
-
-  const internalId = useId()
-  let {
-    id = `headlessui-dialog-${internalId}`,
-    onclose,
-    initialFocus,
-    role: theirRole = "dialog",
-    autofocus = true,
-    __demoMode = false,
-    unmount = false,
-    ...theirProps
-  } = $derived(rest)
-
-  let didWarnOnRole = $state(false)
-
-  const role = $derived.by(() => {
-    if (theirRole === "dialog" || theirRole === "alertdialog") {
-      return theirRole
-    }
-
-    if (!didWarnOnRole) {
-      didWarnOnRole = true
-      console.warn(
-        `Invalid role [${theirRole}] passed to <Dialog />. Only \`dialog\` and and \`alertdialog\` are supported. Using \`dialog\` instead.`
-      )
-    }
-
-    return "dialog"
-  })
-
-  // Update the `open` prop based on the open closed state
-  const open = $derived(
-    theirOpen === undefined && usesOpenClosedState !== null
-      ? (usesOpenClosedState.value & State.Open) === State.Open
-      : theirOpen
-  )
-
-  const ownerDocument = $derived(getOwnerDocument(element))
-
-  const dialogState = $derived(open ? DialogStates.Open : DialogStates.Closed)
-
-  let _state = $state({
-    titleId: null,
-    panelRef: null,
-  } as StateDefinition)
-
-  const close = $derived(() => onclose(false))
-
-  const setTitleId = (id: string | null) => (_state.titleId = id)
-
-  const ready = BROWSER
-  const enabled = $derived(ready ? dialogState === DialogStates.Open : false)
-  const nestedPortals = useNestedPortals()
-  const { portals } = $derived(nestedPortals)
-
-  // We use this because reading these values during initial render(s)
-  // can result in `null` rather then the actual elements
-  // This doesn't happen when using certain components like a
-  // `<Dialog.Title>` because they cause the parent to re-render
-  const defaultContainer: { readonly current: HTMLElement | undefined } = {
-    get current() {
-      return _state.panelRef ?? element
-    },
-  }
-
-  const mainTreeNode = useMainTreeNode()
-  let { resolvedContainers: resolvedRootContainers } = $derived(
-    useRootContainers({
-      get mainTreeNode() {
-        return mainTreeNode.node
-      },
-      get portals() {
-        return portals
-      },
-      get defaultContainers() {
-        return defaultContainer.current ? [defaultContainer.current] : []
-      },
-    })
-  )
-
-  // When the `Dialog` is wrapped in a `Transition` (or another Headless UI component that exposes
-  // the OpenClosed state) then we get some information via context about its state. When the
-  // `Transition` is about to close, then the `State.Closing` state will be exposed. This allows us
-  // to enable/disable certain functionality in the `Dialog` upfront instead of waiting until the
-  // `Transition` is done transitioning.
-  const isClosing = $derived(
-    usesOpenClosedState !== null ? (usesOpenClosedState.value & State.Closing) === State.Closing : false
-  )
-
-  // Ensure other elements can't be interacted with
-  const inertOthersEnabled = $derived(__demoMode ? false : isClosing ? false : enabled)
-  useInertOthers({
-    get enabled() {
-      return inertOthersEnabled
-    },
-    elements: {
-      get allowed() {
-        return [
-          // Allow the headlessui-portal of the Dialog to be interactive. This
-          // contains the current dialog and the necessary focus guard elements.
-          element?.closest<HTMLElement>("[data-headlessui-portal]") ?? null,
-        ]
-      },
-      get disallowed() {
-        return [
-          // Disallow the "main" tree root node
-          mainTreeNode.node?.closest<HTMLElement>("body > *:not(#headlessui-portal-root)") ?? null,
-        ]
-      },
-    },
-  })
-
-  // Close Dialog on outside click
-  useOutsideClick({
-    get enabled() {
-      return enabled
-    },
-    get containers() {
-      return resolvedRootContainers
-    },
-    cb(event) {
-      event.preventDefault()
-      close()
-    },
-  })
-
-  // Handle `Escape` to close
-  useEscape({
-    get enabled() {
-      return enabled
-    },
-    get view() {
-      return ownerDocument?.defaultView ?? null
-    },
-    cb(event) {
-      event.preventDefault()
-      event.stopPropagation()
-
-      // Ensure that we blur the current activeElement to prevent maintaining
-      // focus and potentially scrolling the page to the end (because the Dialog
-      // is rendered in a Portal at the end of the document.body and the browser
-      // tries to keep the focused element in view)
-      //
-      // Typically only happens in Safari.
-      if (
-        document.activeElement &&
-        "blur" in document.activeElement &&
-        typeof document.activeElement.blur === "function"
-      ) {
-        document.activeElement.blur()
-      }
-
-      close()
-    },
-  })
-
-  // Scroll lock
-  const scrollLockEnabled = $derived(__demoMode ? false : isClosing ? false : enabled)
-  useScrollLock({
-    get enabled() {
-      return scrollLockEnabled
-    },
-    get ownerDocument() {
-      return ownerDocument
-    },
-    resolveAllowedContainers() {
-      return resolvedRootContainers
-    },
-  })
-
-  // Ensure we close the dialog as soon as the dialog itself becomes hidden
-  useOnDisappear({
-    get enabled() {
-      return enabled
-    },
-    get ref() {
-      return element
-    },
-    get ondisappear() {
-      return close
-    },
-  })
-
-  const describedby = useDescriptions()
-
-  setContext<DialogContext>("DialogContext", {
-    get titleId() {
-      return _state.titleId
-    },
-    get panelRef() {
-      return _state.panelRef
-    },
-    get dialogState() {
-      return dialogState
-    },
-    get close() {
-      return close
-    },
-    get unmount() {
-      return unmount
-    },
-    setTitleId,
-  })
-
-  const slot = $derived({ open: dialogState === DialogStates.Open } satisfies DialogRenderPropArg)
-
-  const ourProps = $derived({
-    id,
-    role,
-    tabIndex: -1,
-    "aria-modal": __demoMode ? undefined : dialogState === DialogStates.Open ? true : undefined,
-    "aria-labelledby": _state.titleId,
-    "aria-describedby": describedby.value,
-    unmount,
-  })
-
-  const shouldMoveFocusInside = !useIsTouchDevice().value
-  const focusTrapFeatures = $derived.by(() => {
-    let focusTrapFeatures = FocusTrapFeatures.None
-
-    if (enabled && !__demoMode) {
-      focusTrapFeatures |= FocusTrapFeatures.RestoreFocus
-      focusTrapFeatures |= FocusTrapFeatures.TabLock
-
-      if (autofocus) {
-        focusTrapFeatures |= FocusTrapFeatures.AutoFocus
-      }
-
-      if (shouldMoveFocusInside) {
-        focusTrapFeatures |= FocusTrapFeatures.InitialFocus
-      }
-    }
-
-    return focusTrapFeatures
-  })
-
-  clearOpenClosedContext()
-  createCloseContext({
-    get close() {
-      return close
-    },
-  })
 </script>
 
-{#snippet internal(transitionProps?: Record<string, any>)}
-  <ForcePortalRoot force={true}>
-    <Portal>
-      <PortalGroup target={element ?? null}>
-        <ForcePortalRoot force={false}>
-          <FocusTrap
-            {initialFocus}
-            initialFocusFallback={element}
-            containers={resolvedRootContainers}
-            features={focusTrapFeatures}
-          >
-            <ElementOrComponent
-              {ourProps}
-              theirProps={{ ...theirProps, ...transitionProps }}
-              slots={slot}
-              defaultTag={DEFAULT_DIALOG_TAG}
-              features={DialogRenderFeatures}
-              visible={dialogState === DialogStates.Open}
-              name="Dialog"
-              bind:element
-            />
-          </FocusTrap>
-        </ForcePortalRoot>
-      </PortalGroup>
-    </Portal>
-  </ForcePortalRoot>
-{/snippet}
-
-{#if (open !== undefined || transition) && !theirProps.static}
+{#if (open !== undefined || transition) && !rest.static}
   <MainTreeProvider>
     <Transition asChild show={open} {transition} unmount={rest.unmount} {element}>
       {#snippet children({ props })}
-        {@render internal(props)}
+        <InternalDialog {...rest} {...props} bind:element />
       {/snippet}
     </Transition>
   </MainTreeProvider>
 {:else}
   <MainTreeProvider>
-    {@render internal()}
+    <InternalDialog bind:element {open} {...rest} />
   </MainTreeProvider>
 {/if}

package/dist/dialog/DialogPanel.svelte

@@ -32,6 +32,13 @@
   const _state = useDialogContext("Dialog.Panel")
   const { dialogState, unmount } = $derived(_state)
 
+  $effect(() => {
+    _state.panelRef = element ?? null
+    return () => {
+      _state.panelRef = null
+    }
+  })
+
   const slot = $derived({ open: dialogState === DialogStates.Open } satisfies PanelRenderPropArg)
 
   // Prevent the click events inside the Dialog.Panel from bubbling through the React Tree which

package/dist/dialog/InternalDialog.svelte

@@ -0,0 +1,298 @@
+<script lang="ts">
+  import { useId } from "../hooks/use-id.js"
+  import { useMainTreeNode, useRootContainers } from "../hooks/use-root-containers.svelte.js"
+  import { clearOpenClosedContext, State, useOpenClosed } from "../internal/open-closed.js"
+  import { useNestedPortals } from "../portal/InternalPortal.svelte"
+  import { getOwnerDocument } from "../utils/owner.js"
+  import { useInertOthers } from "../hooks/use-inert-others.svelte.js"
+  import { useOutsideClick } from "../hooks/use-outside-click.svelte.js"
+  import { useEscape } from "../hooks/use-escape.svelte.js"
+  import { useScrollLock } from "../hooks/use-scroll-lock.svelte.js"
+  import { useOnDisappear } from "../hooks/use-on-disappear.svelte.js"
+  import { setContext } from "svelte"
+  import { useIsTouchDevice } from "../hooks/use-is-touch-device.svelte.js"
+  import FocusTrap, { FocusTrapFeatures } from "../focus-trap/FocusTrap.svelte"
+  import Portal from "../portal/Portal.svelte"
+  import PortalGroup from "../portal/PortalGroup.svelte"
+  import ForcePortalRoot from "../internal/ForcePortalRoot.svelte"
+  import { createCloseContext } from "../internal/close-provider.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { DialogStates, type DialogContext, type StateDefinition } from "./context.svelte.js"
+  import { useDescriptions } from "../description/context.svelte.js"
+  import { BROWSER } from "esm-env"
+  import { DEFAULT_DIALOG_TAG, DialogRenderFeatures, type DialogProps, type DialogRenderPropArg } from "./Dialog.svelte"
+  import PortalWrapper from "../portal/PortalWrapper.svelte"
+
+  const internalId = useId()
+  let {
+    element = $bindable(),
+    id = `headlessui-dialog-${internalId}`,
+    open: theirOpen,
+    onclose,
+    initialFocus,
+    role: theirRole = "dialog",
+    autofocus = true,
+    __demoMode = false,
+    unmount = false,
+    ...theirProps
+  }: DialogProps = $props()
+
+  let didWarnOnRole = $state(false)
+
+  const role = $derived.by(() => {
+    if (theirRole === "dialog" || theirRole === "alertdialog") {
+      return theirRole
+    }
+
+    if (!didWarnOnRole) {
+      didWarnOnRole = true
+      console.warn(
+        `Invalid role [${theirRole}] passed to <Dialog />. Only \`dialog\` and and \`alertdialog\` are supported. Using \`dialog\` instead.`
+      )
+    }
+
+    return "dialog"
+  })
+
+  // Update the `open` prop based on the open closed state
+  const usesOpenClosedState = useOpenClosed()
+  const open = $derived(
+    theirOpen === undefined && usesOpenClosedState !== null
+      ? (usesOpenClosedState.value & State.Open) === State.Open
+      : theirOpen
+  )
+
+  const ownerDocument = $derived(getOwnerDocument(element))
+
+  const dialogState = $derived(open ? DialogStates.Open : DialogStates.Closed)
+
+  let _state = $state({
+    titleId: null,
+    panelRef: null,
+  } as StateDefinition)
+
+  const close = $derived(() => onclose(false))
+
+  const setTitleId = (id: string | null) => (_state.titleId = id)
+
+  const ready = BROWSER
+  const enabled = $derived(ready ? dialogState === DialogStates.Open : false)
+  const nestedPortals = useNestedPortals()
+  const { portals } = $derived(nestedPortals)
+
+  // We use this because reading these values during initial render(s)
+  // can result in `null` rather then the actual elements
+  // This doesn't happen when using certain components like a
+  // `<Dialog.Title>` because they cause the parent to re-render
+  const defaultContainer = $derived(_state.panelRef ?? element)
+
+  const mainTreeNode = useMainTreeNode()
+  let { resolvedContainers: resolvedRootContainers } = $derived(
+    useRootContainers({
+      get mainTreeNode() {
+        return mainTreeNode.node
+      },
+      get portals() {
+        return portals
+      },
+      get defaultContainers() {
+        return defaultContainer ? [defaultContainer] : []
+      },
+    })
+  )
+
+  // When the `Dialog` is wrapped in a `Transition` (or another Headless UI component that exposes
+  // the OpenClosed state) then we get some information via context about its state. When the
+  // `Transition` is about to close, then the `State.Closing` state will be exposed. This allows us
+  // to enable/disable certain functionality in the `Dialog` upfront instead of waiting until the
+  // `Transition` is done transitioning.
+  const isClosing = $derived(
+    usesOpenClosedState !== null ? (usesOpenClosedState.value & State.Closing) === State.Closing : false
+  )
+
+  // Ensure other elements can't be interacted with
+  const inertOthersEnabled = $derived(__demoMode ? false : isClosing ? false : enabled)
+  useInertOthers({
+    get enabled() {
+      return inertOthersEnabled
+    },
+    elements: {
+      get allowed() {
+        return [
+          // Allow the headlessui-portal of the Dialog to be interactive. This
+          // contains the current dialog and the necessary focus guard elements.
+          element?.closest<HTMLElement>("[data-headlessui-portal]") ?? null,
+        ]
+      },
+      get disallowed() {
+        return [
+          // Disallow the "main" tree root node
+          mainTreeNode.node?.closest<HTMLElement>("body > *:not(#headlessui-portal-root)") ?? null,
+        ]
+      },
+    },
+  })
+
+  // Close Dialog on outside click
+  useOutsideClick({
+    get enabled() {
+      return enabled
+    },
+    get containers() {
+      return resolvedRootContainers
+    },
+    cb(event) {
+      console.log("close")
+      event.preventDefault()
+      close()
+    },
+  })
+
+  // Handle `Escape` to close
+  useEscape({
+    get enabled() {
+      return enabled
+    },
+    get view() {
+      return ownerDocument?.defaultView ?? null
+    },
+    cb(event) {
+      event.preventDefault()
+      event.stopPropagation()
+
+      // Ensure that we blur the current activeElement to prevent maintaining
+      // focus and potentially scrolling the page to the end (because the Dialog
+      // is rendered in a Portal at the end of the document.body and the browser
+      // tries to keep the focused element in view)
+      //
+      // Typically only happens in Safari.
+      if (
+        document.activeElement &&
+        "blur" in document.activeElement &&
+        typeof document.activeElement.blur === "function"
+      ) {
+        document.activeElement.blur()
+      }
+
+      close()
+    },
+  })
+
+  // Scroll lock
+  const scrollLockEnabled = $derived(__demoMode ? false : isClosing ? false : enabled)
+  useScrollLock({
+    get enabled() {
+      return scrollLockEnabled
+    },
+    get ownerDocument() {
+      return ownerDocument
+    },
+    resolveAllowedContainers() {
+      return resolvedRootContainers
+    },
+  })
+
+  // Ensure we close the dialog as soon as the dialog itself becomes hidden
+  useOnDisappear({
+    get enabled() {
+      return enabled
+    },
+    get ref() {
+      return element
+    },
+    get ondisappear() {
+      return close
+    },
+  })
+
+  const describedby = useDescriptions()
+
+  setContext<DialogContext>("DialogContext", {
+    get titleId() {
+      return _state.titleId
+    },
+    get panelRef() {
+      return _state.panelRef
+    },
+    set panelRef(value) {
+      _state.panelRef = value
+    },
+    get dialogState() {
+      return dialogState
+    },
+    get close() {
+      return close
+    },
+    get unmount() {
+      return unmount
+    },
+    setTitleId,
+  })
+
+  const slot = $derived({ open: dialogState === DialogStates.Open } satisfies DialogRenderPropArg)
+
+  const ourProps = $derived({
+    id,
+    role,
+    tabIndex: -1,
+    "aria-modal": __demoMode ? undefined : dialogState === DialogStates.Open ? true : undefined,
+    "aria-labelledby": _state.titleId,
+    "aria-describedby": describedby.value,
+    unmount,
+  })
+
+  const shouldMoveFocusInside = !useIsTouchDevice().value
+  const focusTrapFeatures = $derived.by(() => {
+    let focusTrapFeatures = FocusTrapFeatures.None
+
+    if (enabled && !__demoMode) {
+      focusTrapFeatures |= FocusTrapFeatures.RestoreFocus
+      focusTrapFeatures |= FocusTrapFeatures.TabLock
+
+      if (autofocus) {
+        focusTrapFeatures |= FocusTrapFeatures.AutoFocus
+      }
+
+      if (shouldMoveFocusInside) {
+        focusTrapFeatures |= FocusTrapFeatures.InitialFocus
+      }
+    }
+
+    return focusTrapFeatures
+  })
+
+  clearOpenClosedContext()
+  createCloseContext({
+    get close() {
+      return close
+    },
+  })
+</script>
+
+<ForcePortalRoot force={true}>
+  <Portal>
+    <PortalGroup target={element ?? null}>
+      <ForcePortalRoot force={false}>
+        <PortalWrapper context={nestedPortals}>
+          <FocusTrap
+            {initialFocus}
+            initialFocusFallback={element}
+            containers={resolvedRootContainers}
+            features={focusTrapFeatures}
+          >
+            <ElementOrComponent
+              {ourProps}
+              theirProps={{ ...theirProps }}
+              slots={slot}
+              defaultTag={DEFAULT_DIALOG_TAG}
+              features={DialogRenderFeatures}
+              visible={dialogState === DialogStates.Open}
+              name="Dialog"
+              bind:element
+            />
+          </FocusTrap>
+        </PortalWrapper>
+      </ForcePortalRoot>
+    </PortalGroup>
+  </Portal>
+</ForcePortalRoot>

package/dist/dialog/InternalDialog.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type DialogProps } from "./Dialog.svelte";
+declare const InternalDialog: import("svelte").Component<DialogProps, {}, "element">;
+type InternalDialog = ReturnType<typeof InternalDialog>;
+export default InternalDialog;

package/dist/hooks/use-root-containers.svelte.js

@@ -1,6 +1,7 @@
 import { getOwnerDocument } from "../utils/owner.js";
 export { default as MainTreeProvider, useMainTreeNode } from "../internal/MainTreeProvider.svelte";
 export function useRootContainers(options = {}) {
+    $inspect(options);
     const { defaultContainers = [], portals, 
     // Reference to a node in the "main" tree, not in the portalled Dialog tree.
     mainTreeNode, } = $derived(options);
@@ -11,7 +12,8 @@ export function useRootContainers(options = {}) {
         for (const container of defaultContainers) {
             if (!container)
                 continue;
-            containers.push(container);
+            if (container instanceof HTMLElement)
+                containers.push(container);
         }
         // Resolve portal containers
         if (portals) {

package/dist/internal/MainTreeProvider.svelte

@@ -93,6 +93,6 @@
 </script>
 
 {#if children}{@render children()}{/if}
-{#if resolvedMainTreeNode === null}
+{#if resolvedMainTreeNode.node === null}
   <Hidden features={HiddenFeatures.Hidden} bind:element={el} />
 {/if}

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

@@ -60,7 +60,7 @@ export declare function useFloatingReferenceProps(): {
     readonly getReferenceProps: (userProps?: import("svelte/elements.js").HTMLAttributes<Element>) => Record<string, unknown>;
 };
 export declare function useFloatingPanelProps(): (...args: Parameters<(userProps?: import("svelte/elements.js").HTMLAttributes<HTMLElement>) => Record<string, unknown>>) => Record<string, unknown> & {
-    "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;
+    "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 useFloatingPanel(options?: {
     placement: (AnchorPropsWithSelection & InternalFloatingPanelProps) | null;
@@ -75,7 +75,7 @@ export declare function useResolvedConfig(options: {
     config: (Exclude<AnchorPropsWithSelection, boolean | string> & InternalFloatingPanelProps) | null;
     element?: HTMLElement | null;
 }): {
-    readonly to: Placement | "top end" | "top start" | "right end" | "right start" | "bottom end" | "bottom start" | "left end" | "left start" | "selection" | "selection end" | "selection start" | undefined;
+    readonly to: Placement | "top start" | "top end" | "right start" | "right end" | "bottom start" | "bottom end" | "left start" | "left end" | "selection" | "selection start" | "selection end" | undefined;
     readonly gap: number | undefined;
     readonly offset: number | undefined;
     readonly padding: number | undefined;

package/dist/popover/Popover.svelte

@@ -38,6 +38,7 @@
   import { createCloseContext } from "../internal/close-provider.js"
   import { createOpenClosedContext, State } from "../internal/open-closed.js"
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import PortalWrapper from "../portal/PortalWrapper.svelte"
 
   let { element = $bindable(), __demoMode = false, ...theirProps }: PopoverProps = $props()
 
@@ -224,5 +225,7 @@
 </script>
 
 <MainTreeProvider node={mainTreeNode.node}>
-  <ElementOrComponent {theirProps} slots={slot} defaultTag={DEFAULT_POPOVER_TAG} name="Popover" bind:element />
+  <PortalWrapper context={nestedPortals}>
+    <ElementOrComponent {theirProps} slots={slot} defaultTag={DEFAULT_POPOVER_TAG} name="Popover" bind:element />
+  </PortalWrapper>
 </MainTreeProvider>

package/dist/portal/InternalPortal.svelte

@@ -56,7 +56,7 @@
 
   // ---
 
-  type PortalParentContext = {
+  export type PortalParentContext = {
     register: (portal: HTMLElement) => () => void
     unregister: (portal: HTMLElement) => void
     readonly portals: HTMLElement[]
@@ -85,7 +85,6 @@
         return portals
       },
     }
-    setContext("PortalParentContext", context)
 
     return context
   }

package/dist/portal/InternalPortal.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Props } from "../utils/types.js";
-type PortalParentContext = {
+export type PortalParentContext = {
     register: (portal: HTMLElement) => () => void;
     unregister: (portal: HTMLElement) => void;
     readonly portals: HTMLElement[];

package/dist/portal/PortalWrapper.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { setContext, type Snippet } from "svelte"
+  import type { PortalParentContext } from "./InternalPortal.svelte"
+
+  const { context, children }: { context: PortalParentContext; children: Snippet } = $props()
+
+  setContext("PortalParentContext", context)
+</script>
+
+{@render children()}

package/dist/portal/PortalWrapper.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type Snippet } from "svelte";
+import type { PortalParentContext } from "./InternalPortal.svelte";
+type $$ComponentProps = {
+    context: PortalParentContext;
+    children: Snippet;
+};
+declare const PortalWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
+type PortalWrapper = ReturnType<typeof PortalWrapper>;
+export default PortalWrapper;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pzerelles/headlessui-svelte",
-  "version": "2.1.2-next.58",
+  "version": "2.1.2-next.59",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",
@@ -37,36 +37,36 @@
     "@playwright/test": "^1.52.0",
     "@pzerelles/heroicons-svelte": "^2.2.1",
     "@sveltejs/adapter-auto": "^3.3.1",
-    "@sveltejs/kit": "^2.21.0",
+    "@sveltejs/kit": "^2.21.1",
     "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@tailwindcss/vite": "^4.1.6",
+    "@tailwindcss/vite": "^4.1.8",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/svelte": "^5.2.7",
+    "@testing-library/svelte": "^5.2.8",
     "@types/eslint": "^9.6.1",
-    "@types/node": "^22.15.18",
-    "eslint": "^9.26.0",
+    "@types/node": "^22.15.29",
+    "eslint": "^9.28.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.46.1",
-    "globals": "^16.1.0",
+    "globals": "^16.2.0",
     "jsdom": "^25.0.1",
     "outdent": "^0.8.0",
     "prettier": "^3.5.3",
-    "prettier-plugin-svelte": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.11",
+    "prettier-plugin-svelte": "^3.4.0",
+    "prettier-plugin-tailwindcss": "^0.6.12",
     "publint": "^0.3.12",
-    "svelte": "^5.28.6",
-    "svelte-check": "^4.1.7",
-    "tailwindcss": "^4.1.6",
+    "svelte": "^5.33.14",
+    "svelte-check": "^4.2.1",
+    "tailwindcss": "^4.1.8",
     "tslib": "^2.8.1",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.32.1",
+    "typescript-eslint": "^8.33.1",
     "vite": "^6.3.5",
-    "vitest": "^3.1.3"
+    "vitest": "^3.2.0"
   },
   "dependencies": {
-    "@floating-ui/core": "^1.7.0",
-    "@floating-ui/dom": "^1.7.0",
+    "@floating-ui/core": "^1.7.1",
+    "@floating-ui/dom": "^1.7.1",
     "@floating-ui/utils": "^0.2.9",
     "esm-env": "^1.2.2",
     "nanoid": "^5.1.5"