@pzerelles/headlessui-svelte 2.0.0-next.1 → 2.1.2-next.10

package/dist/menu/MenuItems.svelte

@@ -0,0 +1,244 @@
+<script lang="ts" module>import { mergeProps, RenderFeatures } from "../utils/render.js";
+import {
+  useFloatingPanel,
+  useFloatingPanelProps,
+  useResolvedAnchor
+} from "../internal/floating.svelte.js";
+const DEFAULT_ITEMS_TAG = "div";
+let ItemsRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static;
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_ITEMS_TAG">import { useId } from "../hooks/use-id.js";
+import { getOwnerDocument } from "../utils/owner.js";
+import { State, useOpenClosed } from "../internal/open-closed.js";
+import { transitionDataAttributes, useTransition } from "../hooks/use-transition.svelte.js";
+import { useOnDisappear } from "../hooks/use-on-disappear.svelte.js";
+import { useScrollLock } from "../hooks/use-scroll-lock.svelte.js";
+import { useInertOthers } from "../hooks/use-inert-others.svelte.js";
+import { useDidElementMove } from "../hooks/use-did-element-move.svelte.js";
+import { useDisposables } from "../utils/disposables.js";
+import { Focus } from "../utils/calculate-active-index.js";
+import { focusFrom, Focus as FocusManagementFocus, restoreFocusIfNecessary } from "../utils/focus-management.js";
+import { useElementSize } from "../hooks/use-element-size.svelte.js";
+import { tick, untrack } from "svelte";
+import Portal from "../portal/Portal.svelte";
+import { MenuStates, useMenuContext } from "./context.svelte.js";
+import { useTreeWalker } from "../hooks/use-tree-walker.svelte.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+const internalId = useId();
+let {
+  as = DEFAULT_ITEMS_TAG,
+  ref = $bindable(),
+  id = `headlessui-menu-items-${internalId}`,
+  anchor: rawAnchor,
+  portal = false,
+  modal = true,
+  transition = false,
+  ...theirProps
+} = $props();
+const anchor = $derived(useResolvedAnchor(rawAnchor));
+const _state = useMenuContext("MenuOptions");
+const floatingPanel = useFloatingPanel({
+  get placement() {
+    return anchor;
+  }
+});
+const { setFloating, style } = $derived(floatingPanel);
+const getFloatingPanelProps = useFloatingPanelProps();
+$effect(() => {
+  untrack(() => _state.setItemsElement(ref || null));
+  if (anchor) setFloating(ref);
+});
+const ownerDocument = $derived(getOwnerDocument(_state.itemsElement));
+$effect(() => {
+  if (anchor) {
+    portal = true;
+  }
+});
+const usesOpenClosedState = useOpenClosed();
+const show = $derived(
+  usesOpenClosedState !== null ? (usesOpenClosedState.value & State.Open) === State.Open : _state.menuState === MenuStates.Open
+);
+const _transition = useTransition({
+  get enabled() {
+    return transition;
+  },
+  get element() {
+    return ref;
+  },
+  get show() {
+    return show;
+  }
+});
+const { visible, data: transitionData } = $derived(_transition);
+useOnDisappear({
+  get enabled() {
+    return visible;
+  },
+  get ref() {
+    return _state.buttonElement;
+  },
+  get ondisappear() {
+    return _state.closeMenu;
+  }
+});
+const scrollLockEnabled = $derived(_state.__demoMode ? false : modal && _state.menuState === MenuStates.Open);
+useScrollLock({
+  get enabled() {
+    return scrollLockEnabled;
+  },
+  get ownerDocument() {
+    return ownerDocument;
+  }
+});
+const inertOthersEnabled = $derived(_state.__demoMode ? false : modal && _state.menuState === MenuStates.Open);
+useInertOthers({
+  get enabled() {
+    return inertOthersEnabled;
+  },
+  elements: {
+    get allowed() {
+      return [_state.buttonElement, _state.itemsElement].filter(Boolean);
+    }
+  }
+});
+const didElementMoveEnabled = $derived(_state.menuState !== MenuStates.Open);
+const didButtonMove = useDidElementMove({
+  get enabled() {
+    return didElementMoveEnabled;
+  },
+  get element() {
+    return _state.buttonElement;
+  }
+});
+const panelEnabled = $derived(didButtonMove.value ? false : visible);
+$effect(() => {
+  let container = _state.itemsElement;
+  if (!container) return;
+  if (_state.menuState !== MenuStates.Open) return;
+  if (container === ownerDocument?.activeElement) return;
+  container.focus({ preventScroll: true });
+});
+useTreeWalker({
+  get enabled() {
+    return _state.menuState === MenuStates.Open;
+  },
+  get container() {
+    return _state.itemsElement;
+  },
+  accept: (node) => {
+    if (node.getAttribute("role") === "menuitem") return NodeFilter.FILTER_REJECT;
+    if (node.hasAttribute("role")) return NodeFilter.FILTER_SKIP;
+    return NodeFilter.FILTER_ACCEPT;
+  },
+  walk: (node) => {
+    node.setAttribute("role", "none");
+  }
+});
+const searchDisposables = useDisposables();
+const handleKeyDown = async (event) => {
+  searchDisposables.dispose();
+  switch (event.key) {
+    case " ":
+      if (_state.searchQuery !== "") {
+        event.preventDefault();
+        event.stopPropagation();
+        return _state.search(event.key);
+      }
+    case "Enter":
+      event.preventDefault();
+      event.stopPropagation();
+      _state.closeMenu();
+      if (_state.activeItemIndex !== null) {
+        let { dataRef } = _state.items[_state.activeItemIndex];
+        dataRef.current?.domRef.current?.click();
+      }
+      restoreFocusIfNecessary(_state.buttonElement);
+      break;
+    case "ArrowDown":
+      event.preventDefault();
+      event.stopPropagation();
+      return _state.goToItem({ focus: Focus.Next });
+    case "ArrowUp":
+      event.preventDefault();
+      event.stopPropagation();
+      return _state.goToItem({ focus: Focus.Previous });
+    case "Home":
+    case "PageUp":
+      event.preventDefault();
+      event.stopPropagation();
+      return _state.goToItem({ focus: Focus.First });
+    case "End":
+    case "PageDown":
+      event.preventDefault();
+      event.stopPropagation();
+      return _state.goToItem({ focus: Focus.Last });
+    case "Escape":
+      event.preventDefault();
+      event.stopPropagation();
+      _state.closeMenu();
+      await tick();
+      _state.buttonElement?.focus({ preventScroll: true });
+      break;
+    case "Tab":
+      event.preventDefault();
+      event.stopPropagation();
+      _state.closeMenu();
+      await tick();
+      focusFrom(_state.buttonElement, event.shiftKey ? FocusManagementFocus.Previous : FocusManagementFocus.Next);
+      break;
+    default:
+      if (event.key.length === 1) {
+        _state.search(event.key);
+        searchDisposables.setTimeout(() => _state.clearSearch(), 350);
+      }
+      break;
+  }
+};
+const handleKeyUp = (event) => {
+  switch (event.key) {
+    case " ":
+      event.preventDefault();
+      break;
+  }
+};
+const slot = $derived({
+  open: _state.menuState === MenuStates.Open
+});
+const buttonSize = useElementSize({
+  get element() {
+    return _state.buttonElement;
+  },
+  unit: true
+});
+const ourProps = $derived(
+  mergeProps(anchor ? getFloatingPanelProps() : {}, {
+    "aria-activedescendant": _state.activeItemIndex === null ? void 0 : _state.items[_state.activeItemIndex]?.id,
+    "aria-labelledby": _state.buttonElement?.id,
+    id,
+    onkeydown: handleKeyDown,
+    onkeyup: handleKeyUp,
+    role: "menu",
+    // When the `Menu` is closed, it should not be focusable. This allows us
+    // to skip focusing the `MenuItems` when pressing the tab key on an
+    // open `Menu`, and go to the next focusable element.
+    tabindex: _state.menuState === MenuStates.Open ? 0 : void 0,
+    ref,
+    style: [theirProps.style, style, `--button-width: ${buttonSize.width}`].filter(Boolean).join("; "),
+    ...transitionDataAttributes(transitionData)
+  })
+);
+</script>
+
+<Portal enabled={portal ? theirProps.static || visible : false}>
+  <ElementOrComponent
+    {ourProps}
+    {theirProps}
+    slots={slot}
+    defaultTag={DEFAULT_ITEMS_TAG}
+    features={ItemsRenderFeatures}
+    visible={panelEnabled}
+    name="MenuItems"
+    bind:ref
+  />
+</Portal>

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

@@ -0,0 +1,55 @@
+import type { ElementType, Props } from "../utils/types.js";
+import { type PropsForFeatures } from "../utils/render.js";
+import { type AnchorProps } from "../internal/floating.svelte.js";
+declare const DEFAULT_ITEMS_TAG: "div";
+type ItemsRenderPropArg = {
+    open: boolean;
+};
+type ItemsPropsWeControl = "aria-activedescendant" | "aria-labelledby" | "role" | "tabIndex";
+declare let ItemsRenderFeatures: number;
+export type MenuItemsProps<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG> = Props<TTag, ItemsRenderPropArg, ItemsPropsWeControl, {
+    id?: string;
+    anchor?: AnchorProps;
+    portal?: boolean;
+    modal?: boolean;
+    transition?: boolean;
+} & PropsForFeatures<typeof ItemsRenderFeatures>>;
+export type MenuItemsChildren = Snippet<[ItemsRenderPropArg]>;
+import { type Snippet } from "svelte";
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "anchor" | "unmount" | "static" | "id" | "transition" | "portal" | "modal" | ItemsPropsWeControl> 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<ItemsRenderPropArg> | 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: ItemsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        id?: string;
+        anchor?: AnchorProps;
+        portal?: boolean;
+        modal?: boolean;
+        transition?: boolean;
+    } & {
+        static?: boolean | undefined;
+        unmount?: boolean | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType = typeof DEFAULT_ITEMS_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_ITEMS_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 MenuItems: $$IsomorphicComponent;
+type MenuItems<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG> = InstanceType<typeof MenuItems<TTag>>;
+export default MenuItems;

package/dist/menu/MenuSection.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" module>const DEFAULT_SECTION_TAG = "div";
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SECTION_TAG">import { useLabels } from "../label/context.svelte.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+const labelledby = useLabels();
+let { ref = $bindable(), ...theirProps } = $props();
+const ourProps = $derived({
+  "aria-labelledby": labelledby,
+  role: "group"
+});
+</script>
+
+<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_SECTION_TAG} name="MenuSection" bind:ref />

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

@@ -0,0 +1,35 @@
+import type { Snippet } from "svelte";
+import type { ElementType, Props } from "../utils/types.js";
+declare const DEFAULT_SECTION_TAG: "div";
+type SectionRenderPropArg = {};
+type SectionPropsWeControl = "role" | "aria-labelledby";
+export type MenuSectionProps<TTag extends ElementType = typeof DEFAULT_SECTION_TAG> = Props<TTag, SectionRenderPropArg, SectionPropsWeControl>;
+export type MenuSectionChildren = Snippet<[SectionRenderPropArg]>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_SECTION_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | SectionPropsWeControl> 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<SectionRenderPropArg> | 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: SectionRenderPropArg) => string) | undefined;
+    } : {});
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType = typeof DEFAULT_SECTION_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_SECTION_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 MenuSection: $$IsomorphicComponent;
+type MenuSection<TTag extends ElementType = typeof DEFAULT_SECTION_TAG> = InstanceType<typeof MenuSection<TTag>>;
+export default MenuSection;

package/dist/menu/MenuSeparator.svelte

@@ -0,0 +1,9 @@
+<script lang="ts" module>const DEFAULT_SEPARATOR_TAG = "div";
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG">import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+let { ref = $bindable(), ...theirProps } = $props();
+const ourProps = { role: "separator" };
+</script>
+
+<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_SEPARATOR_TAG} name="MenuSeparator" bind:ref />

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

@@ -0,0 +1,35 @@
+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?: import("../utils/types.js").Children<SeparatorRenderPropArg> | 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;
+    } : {});
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType = typeof DEFAULT_SEPARATOR_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_SEPARATOR_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 MenuSeparator: $$IsomorphicComponent;
+type MenuSeparator<TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG> = InstanceType<typeof MenuSeparator<TTag>>;
+export default MenuSeparator;

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

@@ -0,0 +1,47 @@
+import type { Focus } from "../utils/calculate-active-index.js";
+import type { MutableRefObject } from "../utils/ref.svelte.js";
+export declare enum MenuStates {
+    Open = 0,
+    Closed = 1
+}
+export declare enum ActivationTrigger {
+    Pointer = 0,
+    Other = 1
+}
+export type MenuItemDataRef = MutableRefObject<{
+    textValue?: string;
+    disabled: boolean;
+    domRef: MutableRefObject<HTMLElement | null>;
+}>;
+export interface StateDefinition {
+    __demoMode: boolean;
+    menuState: MenuStates;
+    buttonElement: HTMLButtonElement | null;
+    itemsElement: HTMLElement | null;
+    items: {
+        id: string;
+        dataRef: MenuItemDataRef;
+    }[];
+    searchQuery: string;
+    activeItemIndex: number | null;
+    activationTrigger: ActivationTrigger;
+}
+export type MenuContext = StateDefinition & {
+    closeMenu(): void;
+    openMenu(): void;
+    goToItem(action: {
+        focus: Focus.Specific;
+        id: string;
+        trigger?: ActivationTrigger;
+    } | {
+        focus: Exclude<Focus, Focus.Specific>;
+        trigger?: ActivationTrigger;
+    }): void;
+    search(value: string): void;
+    clearSearch(): void;
+    registerItem(id: string, dataRef: MenuItemDataRef): void;
+    unregisterItem(id: string): void;
+    setButtonElement(element: HTMLButtonElement | null): void;
+    setItemsElement(element: HTMLElement | null): void;
+};
+export declare function useMenuContext(component: string): MenuContext;

package/dist/menu/context.svelte.js

@@ -0,0 +1,21 @@
+import { getContext } from "svelte";
+export var MenuStates;
+(function (MenuStates) {
+    MenuStates[MenuStates["Open"] = 0] = "Open";
+    MenuStates[MenuStates["Closed"] = 1] = "Closed";
+})(MenuStates || (MenuStates = {}));
+export var ActivationTrigger;
+(function (ActivationTrigger) {
+    ActivationTrigger[ActivationTrigger["Pointer"] = 0] = "Pointer";
+    ActivationTrigger[ActivationTrigger["Other"] = 1] = "Other";
+})(ActivationTrigger || (ActivationTrigger = {}));
+export function useMenuContext(component) {
+    const context = getContext("MenuContext");
+    if (!context) {
+        let err = new Error(`<${component} /> is missing a parent <Menu /> component.`);
+        if (Error.captureStackTrace)
+            Error.captureStackTrace(err, useMenuContext);
+        throw err;
+    }
+    return context;
+}

package/dist/menu/index.d.ts

@@ -0,0 +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";

package/dist/menu/index.js

@@ -0,0 +1,7 @@
+export { default as Menu } from "./Menu.svelte";
+export { default as MenuButton } from "./MenuButton.svelte";
+export { default as MenuHeading } from "./MenuHeading.svelte";
+export { default as MenuItem } from "./MenuItem.svelte";
+export { default as MenuItems } from "./MenuItems.svelte";
+export { default as MenuSection } from "./MenuSection.svelte";
+export { default as MenuSeparator } from "./MenuSeparator.svelte";

package/dist/portal/InternalPortal.svelte

@@ -0,0 +1,97 @@
+<script lang="ts" module>import { usePortalRoot } from "../internal/portal-force-root.svelte.js";
+import { getOwnerDocument } from "../utils/owner.js";
+import { getContext, onMount, setContext } from "svelte";
+import { env } from "../utils/env.js";
+function usePortalTarget(options) {
+  const { element } = $derived(options);
+  const forceInRoot = usePortalRoot();
+  const portalGroupContext = getContext("PortalGroupContext");
+  const { target: groupTarget } = $derived(portalGroupContext ?? {});
+  const ownerDocument = $derived(getOwnerDocument(element));
+  const initialTarget = () => {
+    if (!forceInRoot?.force && groupTarget) return groupTarget ?? null;
+    if (env.isServer) return null;
+    let existingRoot = ownerDocument?.getElementById("headlessui-portal-root");
+    if (existingRoot) return existingRoot;
+    if (ownerDocument === null) return null;
+    let root = ownerDocument.createElement("div");
+    root.setAttribute("id", "headlessui-portal-root");
+    return ownerDocument.body.appendChild(root);
+  };
+  let target = $state(initialTarget());
+  $effect(() => {
+    if (!target) return;
+    if (!ownerDocument?.body.contains(target)) {
+      ownerDocument?.body.appendChild(target);
+    }
+  });
+  $effect(() => {
+    if (forceInRoot?.force) return;
+    if (!groupTarget) return;
+    target = groupTarget;
+  });
+  return {
+    get target() {
+      return target;
+    }
+  };
+}
+export function useNestedPortals() {
+  const parent = getContext("PortalParentContext");
+  const portals = $state([]);
+  const register = (portal) => {
+    portals.push(portal);
+    if (parent) parent.register(portal);
+    return () => unregister(portal);
+  };
+  const unregister = (portal) => {
+    let idx = portals.indexOf(portal);
+    if (idx !== -1) portals.splice(idx, 1);
+    if (parent) parent.unregister(portal);
+  };
+  const context = {
+    register,
+    unregister,
+    get portals() {
+      return portals;
+    }
+  };
+  setContext("PortalParentContext", context);
+  return context;
+}
+export const DEFAULT_PORTAL_TAG = "div";
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PORTAL_TAG">import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+let { ref = $bindable(), ...theirProps } = $props();
+const portalTarget = usePortalTarget({
+  get element() {
+    return ref ?? null;
+  }
+});
+const { target } = $derived(portalTarget);
+const parent = getContext("PortalParentContext");
+$effect(() => {
+  if (!target || !ref) return;
+  if (ref.parentNode !== target) {
+    ref.setAttribute("data-headlessui-portal", "");
+    target.appendChild(ref);
+  }
+});
+onMount(() => {
+  if (parent) parent.register(ref);
+  return () => {
+    if (!target || !ref) return;
+    if (ref instanceof Node && target.contains(ref)) {
+      target.removeChild(ref);
+    }
+    if (target.childNodes.length <= 0) {
+      target.parentElement?.removeChild(target);
+    }
+  };
+});
+</script>
+
+{#if target}
+  <ElementOrComponent {theirProps} defaultTag={DEFAULT_PORTAL_TAG} name="InternalPortal" bind:ref />
+{/if}

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

@@ -0,0 +1,43 @@
+import type { ElementType, Props } from "../utils/types.js";
+type PortalParentContext = {
+    register: (portal: HTMLElement) => () => void;
+    unregister: (portal: HTMLElement) => void;
+    readonly portals: HTMLElement[];
+};
+export declare function useNestedPortals(): PortalParentContext;
+export declare const DEFAULT_PORTAL_TAG = "div";
+type PortalRenderPropArg = {};
+type PortalPropsWeControl = never;
+export type PortalProps<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> = Props<TTag, PortalRenderPropArg, PortalPropsWeControl, {
+    enabled?: boolean;
+}>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "enabled"> 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<PortalRenderPropArg> | 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: PortalRenderPropArg) => string) | undefined;
+    } : {}) & {
+        enabled?: boolean;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType = typeof DEFAULT_PORTAL_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_PORTAL_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 InternalPortal: $$IsomorphicComponent;
+type InternalPortal<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> = InstanceType<typeof InternalPortal<TTag>>;
+export default InternalPortal;

package/dist/portal/Portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PORTAL_TAG">import InternalPortal, { DEFAULT_PORTAL_TAG } from "./InternalPortal.svelte";
+let { ref = $bindable(), enabled = true, ...theirProps } = $props();
+</script>
+
+{#if enabled}
+  <InternalPortal {...theirProps} bind:ref />
+{:else if theirProps.children}{@render theirProps.children()}{/if}

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

@@ -0,0 +1,23 @@
+import type { ElementType } from "../utils/types.js";
+import { DEFAULT_PORTAL_TAG, type PortalProps } from "./InternalPortal.svelte";
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> {
+    props(): PortalProps<TTag>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType = typeof DEFAULT_PORTAL_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_PORTAL_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 Portal: $$IsomorphicComponent;
+type Portal<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG> = InstanceType<typeof Portal<TTag>>;
+export default Portal;