@pzerelles/headlessui-svelte 2.1.2-next.31 → 2.1.2-next.33

package/dist/menu/MenuSeparator.svelte

@@ -1,9 +1,24 @@
-<script lang="ts" module>const DEFAULT_SEPARATOR_TAG = "div";
+<script lang="ts" module>
+  import type { Props } from "../utils/types.js"
+
+  const DEFAULT_SEPARATOR_TAG = "div" as const
+  type SeparatorRenderPropArg = {}
+  type SeparatorPropsWeControl = "role"
+
+  export type MenuSeparatorProps = Props<
+    typeof DEFAULT_SEPARATOR_TAG,
+    SeparatorRenderPropArg,
+    {
+      element?: HTMLElement
+    }
+  >
 </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 lang="ts">
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  let { element = $bindable(), ...theirProps }: MenuSeparatorProps = $props()
+  const ourProps = { role: "separator" }
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_SEPARATOR_TAG} name="MenuSeparator" bind:ref />
+<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_SEPARATOR_TAG} name="MenuSeparator" bind:element />

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

@@ -1,31 +1,8 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { 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>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "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;
-        class?: string | ((bag: SeparatorRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    };
-    events(): {};
-    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']> & {}): 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 type MenuSeparatorProps = Props<typeof DEFAULT_SEPARATOR_TAG, SeparatorRenderPropArg, {
+    element?: HTMLElement;
+}>;
+declare const MenuSeparator: import("svelte").Component<MenuSeparatorProps, {}, "element">;
 export default MenuSeparator;

package/dist/popover/Popover.svelte

@@ -1,161 +1,227 @@
-<script lang="ts" module>export const DEFAULT_POPOVER_TAG = "div";
-</script>
+<script lang="ts" module>
+  import type { 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 = Props<
+    typeof DEFAULT_POPOVER_TAG,
+    PopoverRenderPropArg,
+    {
+      element?: HTMLElement
+      __demoMode?: boolean
     }
+  >
+</script>
+
+<script lang="ts">
+  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 { element = $bindable(), __demoMode = false, ...theirProps }: PopoverProps = $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(element ?? 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}>
-  <ElementOrComponent {theirProps} slots={slot} defaultTag={DEFAULT_POPOVER_TAG} name="Popover" bind:ref />
+  <ElementOrComponent {theirProps} slots={slot} defaultTag={DEFAULT_POPOVER_TAG} name="Popover" bind:element />
 </MainTreeProvider>

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

@@ -1,39 +1,13 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { 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, {
+export type PopoverProps = Props<typeof DEFAULT_POPOVER_TAG, PopoverRenderPropArg, {
+    element?: HTMLElement;
     __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>, ("slot" | "as" | "children" | "class" | "ref") | "__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;
-        class?: string | ((bag: PopoverRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        __demoMode?: boolean;
-    };
-    events(): {};
-    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']> & {}): 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>>;
+declare const Popover: import("svelte").Component<PopoverProps, {}, "element">;
 export default Popover;

package/dist/popover/PopoverBackdrop.svelte

@@ -1,47 +1,76 @@
-<script lang="ts" module>import { RenderFeatures } from "../utils/render.js";
-let DEFAULT_BACKDROP_TAG = "div";
-const BackdropRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static;
+<script lang="ts" module>
+  import type { Props } from "../utils/types.js"
+  import { RenderFeatures, type PropsForFeatures } from "../utils/render.js"
+
+  let DEFAULT_BACKDROP_TAG = "div" as const
+  type BackdropRenderPropArg = {
+    open: boolean
+  }
+  type BackdropPropsWeControl = "aria-hidden"
+
+  const BackdropRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
+
+  export type PopoverBackdropProps = Props<
+    typeof DEFAULT_BACKDROP_TAG,
+    BackdropRenderPropArg,
+    {
+      element?: HTMLElement
+      id?: string
+      transition?: boolean
+    } & PropsForFeatures<typeof BackdropRenderFeatures>
+  >
+
+  export type PopoverOverlayProps = PopoverBackdropProps
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG">import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-import { useId } from "../hooks/use-id.js";
-import { PopoverStates, usePopoverContext } from "./context.svelte.js";
-import { State, useOpenClosed } from "../internal/open-closed.js";
-import { transitionDataAttributes, useTransition } from "../hooks/use-transition.svelte.js";
-const internalId = useId();
-let {
-  ref = $bindable(),
-  id = `headlessui-popover-backdrop-${internalId}`,
-  transition = false,
-  ...theirProps
-} = $props();
-const context = usePopoverContext("PopoverBackdrop");
-const { popoverState } = $derived(context);
-const usesOpenClosedState = useOpenClosed();
-const _transition = useTransition({
-  get enabled() {
-    return transition;
-  },
-  get element() {
-    return ref;
-  },
-  get show() {
-    return usesOpenClosedState !== null ? (usesOpenClosedState.value & State.Open) === State.Open : popoverState === PopoverStates.Open;
+<script lang="ts">
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  import { useId } from "../hooks/use-id.js"
+  import { PopoverStates, usePopoverContext } from "./context.svelte.js"
+  import { State, useOpenClosed } from "../internal/open-closed.js"
+  import { transitionDataAttributes, useTransition } from "../hooks/use-transition.svelte.js"
+
+  const internalId = useId()
+  let {
+    element = $bindable(),
+    id = `headlessui-popover-backdrop-${internalId}`,
+    transition = false,
+    ...theirProps
+  }: PopoverBackdropProps = $props()
+  const context = usePopoverContext("PopoverBackdrop")
+  const { popoverState } = $derived(context)
+
+  const usesOpenClosedState = useOpenClosed()
+  const _transition = useTransition({
+    get enabled() {
+      return transition
+    },
+    get element() {
+      return element
+    },
+    get show() {
+      return usesOpenClosedState !== null
+        ? (usesOpenClosedState.value & State.Open) === State.Open
+        : popoverState === PopoverStates.Open
+    },
+  })
+  const { visible, data: transitionData } = $derived(_transition)
+
+  const handleClick = (event: MouseEvent) => {
+    //if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
+    context.closePopover()
   }
-});
-const { visible, data: transitionData } = $derived(_transition);
-const handleClick = (event) => {
-  context.closePopover();
-};
-const slot = $derived({
-  open: popoverState === PopoverStates.Open
-});
-const ourProps = $derived({
-  id,
-  "aria-hidden": true,
-  onclick: handleClick,
-  ...transitionDataAttributes(transitionData)
-});
+
+  const slot = $derived({
+    open: popoverState === PopoverStates.Open,
+  } satisfies BackdropRenderPropArg)
+
+  const ourProps = $derived({
+    id,
+    "aria-hidden": true,
+    onclick: handleClick,
+    ...transitionDataAttributes(transitionData),
+  })
 </script>
 
 <ElementOrComponent
@@ -52,5 +81,5 @@ const ourProps = $derived({
   features={BackdropRenderFeatures}
   name="PopoverBackdrop"
   {visible}
-  bind:ref
+  bind:element
 />

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

@@ -1,43 +1,15 @@
-import type { ElementType, Props, PropsOf } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import { type PropsForFeatures } from "../utils/render.js";
 declare let DEFAULT_BACKDROP_TAG: "div";
 type BackdropRenderPropArg = {
     open: boolean;
 };
-type BackdropPropsWeControl = "aria-hidden";
 declare const BackdropRenderFeatures: number;
-export type PopoverBackdropProps<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = Props<TTag, BackdropRenderPropArg, BackdropPropsWeControl, {
+export type PopoverBackdropProps = Props<typeof DEFAULT_BACKDROP_TAG, BackdropRenderPropArg, {
+    element?: HTMLElement;
+    id?: string;
     transition?: boolean;
 } & PropsForFeatures<typeof BackdropRenderFeatures>>;
-export type PopoverOverlayProps<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = PopoverBackdropProps<TTag>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "unmount" | "static" | "aria-hidden" | "transition"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
-        children?: import("svelte").Snippet<[{
-            slot: BackdropRenderPropArg;
-            props: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: BackdropRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        transition?: boolean;
-    } & {
-        static?: boolean | undefined;
-        unmount?: boolean | undefined;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_BACKDROP_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_BACKDROP_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const PopoverBackdrop: $$IsomorphicComponent;
-type PopoverBackdrop<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = InstanceType<typeof PopoverBackdrop<TTag>>;
+export type PopoverOverlayProps = PopoverBackdropProps;
+declare const PopoverBackdrop: import("svelte").Component<PopoverBackdropProps, {}, "element">;
 export default PopoverBackdrop;