@pzerelles/headlessui-svelte 2.1.2-next.2 → 2.1.2-next.20

package/dist/menu/MenuButton.svelte

@@ -7,7 +7,7 @@ import { Focus } from "../utils/calculate-active-index.js";
 import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
 import { useActivePress } from "../hooks/use-active-press.svelte.js";
 import { useResolveButtonType } from "../hooks/use-resolve-button-type.svelte.js";
-import { useFloating } from "../internal/floating.svelte.js";
+import { useFloatingReference, useFloatingReferenceProps } from "../internal/floating.svelte.js";
 import { useHover } from "../hooks/use-hover.svelte.js";
 import { mergeProps } from "../utils/render.js";
 import { MenuStates, useMenuContext } from "./context.svelte.js";
@@ -22,7 +22,9 @@ let {
   ...theirProps
 } = $props();
 const _state = useMenuContext("MenuButton");
-const { setReference, getReferenceProps: getFloatingReferenceProps } = useFloating();
+const floatingReference = useFloatingReference();
+const { setReference } = $derived(floatingReference);
+const { getReferenceProps: getFloatingReferenceProps } = useFloatingReferenceProps();
 $effect(() => {
   untrack(() => _state.setButtonElement(ref ? ref : null));
   setReference(ref);

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

@@ -21,7 +21,7 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BUTTON
     props(): {
         as?: TTag | undefined;
     } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "disabled" | "autofocus" | "type" | "id" | ButtonPropsWeControl> 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<ButtonRenderPropArg> | undefined;
+        children?: Snippet<[ButtonRenderPropArg, 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: ButtonRenderPropArg) => string) | undefined;

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

@@ -11,7 +11,7 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_HEADIN
     props(): {
         as?: TTag | undefined;
     } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "id" | "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<HeadingRenderPropArg> | undefined;
+        children?: Snippet<[HeadingRenderPropArg, 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: HeadingRenderPropArg) => string) | undefined;

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

@@ -1,4 +1,5 @@
-import type { Props, ElementType, Children } from "../utils/types.js";
+import type { Props, ElementType } from "../utils/types.js";
+import { type Snippet } from "svelte";
 declare const DEFAULT_ITEM_TAG: "svelte:fragment";
 type ItemRenderPropArg = {
     /** @deprecated use `focus` instead */
@@ -12,21 +13,21 @@ type ItemPropsWeControl = "aria-describedby" | "aria-disabled" | "aria-labelledb
 export type MenuItemProps<TTag extends ElementType = typeof DEFAULT_ITEM_TAG> = Props<TTag, ItemRenderPropArg, ItemPropsWeControl | "children", {
     id?: string;
     disabled?: boolean;
-    children: Children<ItemRenderPropArg>;
+    children: Snippet<[ItemRenderPropArg]>;
 }>;
-export type MenuItemChildren = Children<ItemRenderPropArg>;
+export type MenuItemChildren = Snippet<[ItemRenderPropArg]>;
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_ITEM_TAG> {
     props(): {
         as?: TTag | undefined;
     } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "disabled" | "id" | ItemPropsWeControl> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: Children<ItemRenderPropArg> | undefined;
+        children?: Snippet<[ItemRenderPropArg, 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: ItemRenderPropArg) => string) | undefined;
     } : {}) & {
         id?: string;
         disabled?: boolean;
-        children: Children<ItemRenderPropArg>;
+        children: Snippet<[ItemRenderPropArg]>;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;

package/dist/menu/MenuItems.svelte

@@ -36,18 +36,23 @@ let {
   transition = false,
   ...theirProps
 } = $props();
-const anchor = $derived(useResolvedAnchor(rawAnchor));
+const resolvedAnchor = useResolvedAnchor({
+  get anchor() {
+    return rawAnchor;
+  }
+});
+const { anchor } = $derived(resolvedAnchor);
 const _state = useMenuContext("MenuOptions");
 const floatingPanel = useFloatingPanel({
   get placement() {
     return anchor;
   }
 });
-const { setFloating, style } = $derived(floatingPanel);
+const { setFloating, styles } = $derived(floatingPanel);
 const getFloatingPanelProps = useFloatingPanelProps();
 $effect(() => {
-  untrack(() => _state.setItemsElement(ref || null));
-  if (anchor) setFloating(ref);
+  untrack(() => _state.setItemsElement(ref ?? null));
+  if (anchor) setFloating(ref ?? null);
 });
 const ownerDocument = $derived(getOwnerDocument(_state.itemsElement));
 $effect(() => {
@@ -211,8 +216,8 @@ const buttonSize = useElementSize({
   },
   unit: true
 });
-const ourProps = $derived(
-  mergeProps(anchor ? getFloatingPanelProps() : {}, {
+const ourProps = $derived({
+  ...mergeProps(anchor ? getFloatingPanelProps() : {}, {
     "aria-activedescendant": _state.activeItemIndex === null ? void 0 : _state.items[_state.activeItemIndex]?.id,
     "aria-labelledby": _state.buttonElement?.id,
     id,
@@ -223,11 +228,10 @@ const ourProps = $derived(
     // 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)
-  })
-);
+    style: [theirProps.style, styles, `--button-width: ${buttonSize.width}`].filter(Boolean).join("; ")
+  }),
+  ...transitionDataAttributes(transitionData)
+});
 </script>
 
 <Portal enabled={portal ? theirProps.static || visible : false}>

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

@@ -20,7 +20,7 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_ITEMS_
     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;
+        children?: Snippet<[ItemsRenderPropArg, 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: ItemsRenderPropArg) => string) | undefined;

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

@@ -9,7 +9,7 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_SECTIO
     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;
+        children?: Snippet<[SectionRenderPropArg, 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: SectionRenderPropArg) => string) | undefined;

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

@@ -9,7 +9,7 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_SEPARA
     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;
+        children?: Snippet<[SeparatorRenderPropArg, 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;

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

@@ -1,4 +1,4 @@
-import type { Focus } from "../utils/calculate-active-index.js";
+import { Focus } from "../utils/calculate-active-index.js";
 import type { MutableRefObject } from "../utils/ref.svelte.js";
 export declare enum MenuStates {
     Open = 0,
@@ -45,3 +45,32 @@ 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;
+};

package/dist/menu/context.svelte.js

@@ -1,3 +1,5 @@
+import { calculateActiveIndex, Focus } from "../utils/calculate-active-index.js";
+import { sortByDomNode } from "../utils/focus-management.js";
 import { getContext } from "svelte";
 export var MenuStates;
 (function (MenuStates) {
@@ -19,3 +21,209 @@ 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);
+    // 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;
+    // Reset to `null` in case the currentActiveItem was removed.
+    if (adjustedActiveItemIndex === -1) {
+        adjustedActiveItemIndex = null;
+    }
+    return {
+        items: sortedItems,
+        activeItemIndex: adjustedActiveItemIndex,
+    };
+}
+export const stateReducer = (initialState) => {
+    let _state = $state(initialState);
+    return {
+        get menuState() {
+            return _state.menuState;
+        },
+        get buttonElement() {
+            return _state.buttonElement;
+        },
+        get itemsElement() {
+            return _state.itemsElement;
+        },
+        get items() {
+            return _state.items;
+        },
+        get searchQuery() {
+            return _state.searchQuery;
+        },
+        get activeItemIndex() {
+            return _state.activeItemIndex;
+        },
+        get activationTrigger() {
+            return _state.activationTrigger;
+        },
+        get __demoMode() {
+            return _state.__demoMode;
+        },
+        closeMenu() {
+            if (_state.menuState === MenuStates.Closed)
+                return _state;
+            _state.activeItemIndex = null;
+            _state.menuState = MenuStates.Closed;
+            return _state;
+        },
+        openMenu() {
+            if (_state.menuState === MenuStates.Open)
+                return _state;
+            /* We can turn off demo mode once we re-open the `Menu` */
+            _state.__demoMode = false;
+            _state.menuState = MenuStates.Open;
+            return _state;
+        },
+        goToItem(action) {
+            if (_state.menuState === MenuStates.Closed)
+                return _state;
+            _state.searchQuery = "";
+            _state.activationTrigger = action.trigger ?? ActivationTrigger.Other;
+            _state.__demoMode = false;
+            // Optimization:
+            //
+            // There is no need to sort the DOM nodes if we know that we don't want to focus anything
+            if (action.focus === Focus.Nothing) {
+                _state.activeItemIndex = null;
+                return _state;
+            }
+            // Optimization:
+            //
+            // There is no need to sort the DOM nodes if we know exactly where to go
+            if (action.focus === Focus.Specific) {
+                _state.activeItemIndex = _state.items.findIndex((o) => o.id === action.id);
+                return _state;
+            }
+            // Optimization:
+            //
+            // If the current DOM node and the previous DOM node are next to each other,
+            // 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;
+                if (activeItemIdx !== null) {
+                    let currentDom = _state.items[activeItemIdx].dataRef.current.domRef;
+                    let 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;
+                        if (
+                        // Next to each other
+                        currentDom.current?.previousElementSibling === previousDom.current ||
+                            // Or already the first element
+                            previousDom.current?.previousElementSibling === null) {
+                            _state.activeItemIndex = previousItemIndex;
+                            return _state;
+                        }
+                    }
+                }
+            }
+            // Optimization:
+            //
+            // If the current DOM node and the next DOM node are next to each other, or
+            // 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;
+                if (activeItemIdx !== null) {
+                    let currentDom = _state.items[activeItemIdx].dataRef.current.domRef;
+                    let 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;
+                        if (
+                        // Next to each other
+                        currentDom.current?.nextElementSibling === nextDom.current ||
+                            // Or already the last element
+                            nextDom.current?.nextElementSibling === null) {
+                            _state.activeItemIndex = nextItemIndex;
+                            return _state;
+                        }
+                    }
+                }
+            }
+            // Slow path:
+            //
+            // Ensure all the items are correctly sorted according to DOM position
+            let adjustedState = adjustOrderedState(_state);
+            let activeItemIndex = calculateActiveIndex(action, {
+                resolveItems: () => adjustedState.items,
+                resolveActiveIndex: () => adjustedState.activeItemIndex,
+                resolveId: (item) => item.id,
+                resolveDisabled: (item) => item.dataRef.current.disabled,
+            });
+            _state.items = adjustedState.items;
+            _state.activeItemIndex = activeItemIndex;
+            return _state;
+        },
+        search(value) {
+            let wasAlreadySearching = _state.searchQuery !== "";
+            let offset = wasAlreadySearching ? 0 : 1;
+            let searchQuery = _state.searchQuery + value.toLowerCase();
+            let 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;
+            if (matchIdx === -1 || matchIdx === _state.activeItemIndex) {
+                _state.searchQuery = searchQuery;
+                return _state;
+            }
+            _state.searchQuery = searchQuery;
+            _state.activeItemIndex = matchIdx;
+            _state.activationTrigger = ActivationTrigger.Other;
+            return _state;
+        },
+        clearSearch() {
+            if (_state.searchQuery === "")
+                return _state;
+            _state.searchQuery = "";
+            return _state;
+        },
+        registerItem(id, dataRef) {
+            let item = { id, dataRef };
+            let 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);
+                if (idx !== -1)
+                    items.splice(idx, 1);
+                return items;
+            });
+            _state.items = adjustedState.items;
+            _state.activeItemIndex = adjustedState.activeItemIndex;
+            _state.activationTrigger = ActivationTrigger.Other;
+            return _state;
+        },
+        setButtonElement(element) {
+            if (_state.buttonElement === element)
+                return _state;
+            _state.buttonElement = element;
+            return _state;
+        },
+        setItemsElement(element) {
+            if (_state.itemsElement === element)
+                return _state;
+            _state.itemsElement = element;
+            return _state;
+        },
+    };
+};

package/dist/popover/Popover.svelte

@@ -0,0 +1,161 @@
+<script lang="ts" module>export const DEFAULT_POPOVER_TAG = "div";
+</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
+} 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];
+  }
+});
+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();
+    }
+  }
+});
+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;
+  }
+});
+createOpenClosedContext({
+  get value() {
+    return context.popoverState === PopoverStates.Open ? State.Open : State.Closed;
+  }
+});
+</script>
+
+<MainTreeProvider node={mainTreeNode.node}>
+  <ElementOrComponent {theirProps} slots={slot} defaultTag={DEFAULT_POPOVER_TAG} name="Popover" bind:ref />
+</MainTreeProvider>

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

@@ -0,0 +1,41 @@
+import type { ElementType, Props } from "../utils/types.js";
+export declare const DEFAULT_POPOVER_TAG: "div";
+type PopoverRenderPropArg = {
+    open: boolean;
+    close(focusableElement?: HTMLElement | MouseEvent<HTMLElement>): void;
+};
+type PopoverPropsWeControl = never;
+export type PopoverProps<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG> = Props<TTag, PopoverRenderPropArg, PopoverPropsWeControl, {
+    __demoMode?: boolean;
+}>;
+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;
+        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;
+    } : {}) & {
+        __demoMode?: boolean;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType = typeof DEFAULT_POPOVER_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_POPOVER_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 Popover: $$IsomorphicComponent;
+type Popover<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG> = InstanceType<typeof Popover<TTag>>;
+export default Popover;