@pzerelles/headlessui-svelte 2.1.2-next.3 → 2.1.2-next.30

package/dist/popover/PopoverButton.svelte

@@ -0,0 +1,246 @@
+<script lang="ts" module>const DEFAULT_BUTTON_TAG = "button";
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">import { useId } from "../hooks/use-id.js";
+import {
+  PopoverStates,
+  usePopoverAPIContext,
+  usePopoverContext,
+  usePopoverGroupContext,
+  usePopoverPanelContext
+} from "./context.svelte.js";
+import { useFloatingReference } from "../internal/floating.svelte.js";
+import { untrack } from "svelte";
+import { getOwnerDocument } from "../utils/owner.js";
+import { useFocusRing } from "../hooks/use-focus-ring.svelte.js";
+import { useHover } from "../hooks/use-hover.svelte.js";
+import { useActivePress } from "../hooks/use-active-press.svelte.js";
+import { useResolveButtonType } from "../hooks/use-resolve-button-type.svelte.js";
+import { mergeProps } from "../utils/render.js";
+import { useTabDirection, Direction as TabDirection } from "../hooks/use-tab-direction.svelte.js";
+import { match } from "../utils/match.js";
+import { Focus, focusIn, FocusResult, getFocusableElements } from "../utils/focus-management.js";
+import { microTask } from "../utils/microTask.js";
+import Hidden, { HiddenFeatures } from "../internal/Hidden.svelte";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+const internalId = useId();
+let {
+  ref = $bindable(),
+  id = `headlessui-popover-button-${internalId}`,
+  disabled = false,
+  autofocus = false,
+  ...theirProps
+} = $props();
+const context = usePopoverContext("PopoverButton");
+const api = usePopoverAPIContext("PopoverButton");
+const { isPortalled } = $derived(api);
+const sentinelId = `headlessui-focus-sentinel-${useId()}`;
+const groupContext = usePopoverGroupContext();
+const closeOthers = $derived(groupContext?.closeOthers);
+const panelContext = usePopoverPanelContext();
+const isWithinPanel = panelContext !== void 0;
+$effect(() => {
+  if (isWithinPanel) return;
+  id;
+  return untrack(() => {
+    context.setButtonId(id);
+    return () => {
+      context.setButtonId(void 0);
+    };
+  });
+});
+const uniqueIdentifier = Symbol();
+const floatingReference = useFloatingReference();
+const { setReference } = $derived(floatingReference);
+$effect(() => {
+  setReference(ref);
+});
+$effect(() => {
+  if (isWithinPanel) return;
+  ref;
+  untrack(() => {
+    if (ref) {
+      context.buttons.push(uniqueIdentifier);
+    } else {
+      let idx = context.buttons.indexOf(uniqueIdentifier);
+      if (idx !== -1) context.buttons.splice(idx, 1);
+    }
+    if (context.buttons.length > 1) {
+      console.warn("You are already using a <PopoverButton /> but only 1 <PopoverButton /> is supported.");
+    }
+    if (ref) context.setButton(ref);
+  });
+});
+const ownerDocument = $derived(getOwnerDocument(ref));
+const handleKeyDown = (event) => {
+  if (isWithinPanel) {
+    if (context.popoverState === PopoverStates.Closed) return;
+    switch (event.key) {
+      case "Space":
+      case "Enter":
+        event.preventDefault();
+        event.target.click?.();
+        context.closePopover();
+        context.button?.focus();
+        break;
+    }
+  } else {
+    switch (event.key) {
+      case "Space":
+      case "Enter":
+        event.preventDefault();
+        event.stopPropagation();
+        if (context.popoverState === PopoverStates.Closed) closeOthers?.(context.buttonId);
+        context.togglePopover();
+        break;
+      case "Escape":
+        if (context.popoverState !== PopoverStates.Open) return closeOthers?.(context.buttonId);
+        if (!ref) return;
+        if (ownerDocument?.activeElement && !ref.contains(ownerDocument.activeElement)) {
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        context.closePopover();
+        break;
+    }
+  }
+};
+const handleKeyUp = (event) => {
+  if (isWithinPanel) return;
+  if (event.key === "Space") {
+    event.preventDefault();
+  }
+};
+const handleClick = (event) => {
+  if (disabled) return;
+  if (isWithinPanel) {
+    context.closePopover();
+    context.button?.focus();
+  } else {
+    event.preventDefault();
+    event.stopPropagation();
+    if (context.popoverState === PopoverStates.Closed) closeOthers?.(context.buttonId);
+    context.togglePopover();
+    context.button?.focus();
+  }
+};
+const handleMouseDown = (event) => {
+  event.preventDefault();
+  event.stopPropagation();
+};
+const { isFocusVisible: focus, focusProps } = $derived(
+  useFocusRing({
+    get autofocus() {
+      return autofocus;
+    }
+  })
+);
+const { isHovered: hover, hoverProps } = $derived(
+  useHover({
+    get disabled() {
+      return disabled;
+    }
+  })
+);
+const { pressed: active, pressProps } = $derived(
+  useActivePress({
+    get disabled() {
+      return disabled;
+    }
+  })
+);
+const visible = $derived(context.popoverState === PopoverStates.Open);
+const slot = $derived({
+  open: visible,
+  active: active || visible,
+  disabled,
+  hover,
+  focus,
+  autofocus
+});
+const type = useResolveButtonType({
+  get props() {
+    return { type: theirProps.type, as: theirProps.as };
+  },
+  get ref() {
+    return { current: context.button };
+  }
+});
+const ourProps = $derived(
+  isWithinPanel ? mergeProps(
+    {
+      type,
+      onkeydown: handleKeyDown,
+      onclick: handleClick,
+      disabled: disabled || void 0,
+      autofocus
+    },
+    focusProps,
+    hoverProps,
+    pressProps
+  ) : mergeProps(
+    {
+      id: context.buttonId,
+      type,
+      "aria-expanded": context.popoverState === PopoverStates.Open,
+      "aria-controls": context.panel ? context.panelId : void 0,
+      disabled: disabled || void 0,
+      autofocus,
+      onkeydown: handleKeyDown,
+      onkeyup: handleKeyUp,
+      onclick: handleClick,
+      onmousedown: handleMouseDown
+    },
+    focusProps,
+    hoverProps,
+    pressProps
+  )
+);
+const direction = useTabDirection();
+const handleFocus = () => {
+  const el = context.panel;
+  if (!el) return;
+  function run() {
+    let result = match(direction.current, {
+      [TabDirection.Forwards]: () => focusIn(el, Focus.First),
+      [TabDirection.Backwards]: () => focusIn(el, Focus.Last)
+    });
+    if (result === FocusResult.Error) {
+      focusIn(
+        getFocusableElements().filter((el2) => el2.dataset.headlessuiFocusGuard !== "true"),
+        match(direction.current, {
+          [TabDirection.Forwards]: Focus.Next,
+          [TabDirection.Backwards]: Focus.Previous
+        }),
+        { relativeTo: context.button }
+      );
+    }
+  }
+  if (process.env.NODE_ENV === "test") {
+    microTask(run);
+  } else {
+    run();
+  }
+};
+</script>
+
+<ElementOrComponent
+  {ourProps}
+  {theirProps}
+  slots={slot}
+  defaultTag={DEFAULT_BUTTON_TAG}
+  name="PopoverButton"
+  bind:ref
+/>
+{#if visible && !isWithinPanel && isPortalled}
+  <Hidden
+    id={sentinelId}
+    bind:ref={context.afterButtonSentinel as HTMLElement}
+    features={HiddenFeatures.Focusable}
+    data-headlessui-focus-guard
+    as="button"
+    type="button"
+    onfocus={handleFocus}
+  />
+{/if}

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

@@ -0,0 +1,42 @@
+import type { ElementType, Props, PropsOf } from "../utils/types.js";
+declare const DEFAULT_BUTTON_TAG: "button";
+export type PopoverButtonSlot = {
+    open: boolean;
+    active: boolean;
+    hover: boolean;
+    focus: boolean;
+    disabled: boolean;
+    autofocus: boolean;
+};
+export type PopoverButtonPropsWeControl = "aria-controls" | "aria-expanded";
+export type PopoverButtonComponentProps = {
+    disabled?: boolean;
+    autofocus?: boolean;
+};
+export type PopoverButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, PopoverButtonSlot, PopoverButtonPropsWeControl, PopoverButtonComponentProps>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | PopoverButtonPropsWeControl | keyof PopoverButtonComponentProps> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
+        children?: import("svelte").Snippet<[{
+            slot: PopoverButtonSlot;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: PopoverButtonSlot) => string) | null | undefined;
+        ref?: HTMLElement;
+    } & PopoverButtonComponentProps;
+    events(): {};
+    slots(): {};
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType = typeof DEFAULT_BUTTON_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_BUTTON_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const PopoverButton: $$IsomorphicComponent;
+type PopoverButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = InstanceType<typeof PopoverButton<TTag>>;
+export default PopoverButton;

package/dist/popover/PopoverGroup.svelte

@@ -0,0 +1,43 @@
+<script lang="ts" module>import { setContext } from "svelte";
+const DEFAULT_GROUP_TAG = "div";
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_GROUP_TAG">import MainTreeProvider from "../internal/MainTreeProvider.svelte";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { getOwnerDocument } from "../utils/owner.js";
+let { ref = $bindable(), ...theirProps } = $props();
+const popovers = $state([]);
+const unregisterPopover = (registerBag) => {
+  const idx = popovers.indexOf(registerBag);
+  if (idx !== -1) popovers.splice(idx, 1);
+};
+const registerPopover = (registerBag) => {
+  popovers.push(registerBag);
+  return () => unregisterPopover(registerBag);
+};
+const isFocusWithinPopoverGroup = () => {
+  const ownerDocument = getOwnerDocument(ref);
+  if (!ownerDocument) return false;
+  let element = ownerDocument.activeElement;
+  if (ref?.contains(element)) return true;
+  return popovers.some((bag) => {
+    return ownerDocument.getElementById(bag.buttonId)?.contains(element) || ownerDocument.getElementById(bag.panelId)?.contains(element);
+  });
+};
+const closeOthers = (buttonId) => {
+  for (const popover of popovers) {
+    if (popover.buttonId !== buttonId) popover.close();
+  }
+};
+setContext("PopoverGroupContext", {
+  registerPopover,
+  unregisterPopover,
+  isFocusWithinPopoverGroup,
+  closeOthers
+});
+const slot = {};
+</script>
+
+<MainTreeProvider>
+  <ElementOrComponent {theirProps} slots={slot} defaultTag={DEFAULT_GROUP_TAG} name="PopoverGroup" bind:ref />
+</MainTreeProvider>

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

@@ -0,0 +1,31 @@
+import type { ElementType, Props } from "../utils/types.js";
+declare const DEFAULT_GROUP_TAG: "div";
+type GroupRenderPropArg = {};
+type GroupPropsWeControl = never;
+export type PopoverGroupProps<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = Props<TTag, GroupRenderPropArg, GroupPropsWeControl>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, "slot" | "as" | "children" | "class" | "ref"> 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: GroupRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: GroupRenderPropArg) => string) | null | undefined;
+        ref?: HTMLElement;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType = typeof DEFAULT_GROUP_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_GROUP_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const PopoverGroup: $$IsomorphicComponent;
+type PopoverGroup<TTag extends ElementType = typeof DEFAULT_GROUP_TAG> = InstanceType<typeof PopoverGroup<TTag>>;
+export default PopoverGroup;

package/dist/popover/PopoverPanel.svelte

@@ -0,0 +1,274 @@
+<script lang="ts" module>import { RenderFeatures } from "../utils/render.js";
+const DEFAULT_PANEL_TAG = "div";
+const PanelRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static;
+</script>
+
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_PANEL_TAG">import { useId } from "../hooks/use-id.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
+import { mergeProps } from "../utils/render.js";
+import {
+  useFloatingPanel,
+  useFloatingPanelProps,
+  useResolvedAnchor
+} from "../internal/floating.svelte.js";
+import {
+  PopoverStates,
+  usePopoverAPIContext,
+  usePopoverContext
+} from "./context.svelte.js";
+import { getOwnerDocument } from "../utils/owner.js";
+import { clearOpenClosedContext, 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 { Focus, focusIn, FocusResult, getFocusableElements } from "../utils/focus-management.js";
+import { useElementSize } from "../hooks/use-element-size.svelte.js";
+import { useTabDirection, Direction as TabDirection } from "../hooks/use-tab-direction.svelte.js";
+import { match } from "../utils/match.js";
+import { microTask } from "../utils/microTask.js";
+import { setContext, untrack } from "svelte";
+import Portal from "../portal/Portal.svelte";
+import Hidden, { HiddenFeatures } from "../internal/Hidden.svelte";
+let internalId = useId();
+let {
+  ref = $bindable(),
+  id = `headlessui-popover-panel-${internalId}`,
+  focus = false,
+  anchor: rawAnchor,
+  portal: theirPortal = false,
+  modal = false,
+  transition = false,
+  ...theirProps
+} = $props();
+const context = usePopoverContext("PopoverPanel");
+const api = usePopoverAPIContext("PopoverPanel");
+const { close, isPortalled } = $derived(api);
+const beforePanelSentinelId = `headlessui-focus-sentinel-before-${internalId}`;
+const afterPanelSentinelId = `headlessui-focus-sentinel-after-${internalId}`;
+const resolvedAnchor = useResolvedAnchor({
+  get anchor() {
+    return rawAnchor;
+  }
+});
+const { anchor } = $derived(resolvedAnchor);
+const floatingPanel = useFloatingPanel({
+  get placement() {
+    return anchor;
+  }
+});
+const { setFloating, styles } = $derived(floatingPanel);
+const getFloatingPanelProps = useFloatingPanelProps();
+const portal = $derived(!!anchor || theirPortal);
+$effect(() => {
+  if (anchor) setFloating(ref ?? null);
+  untrack(() => context.setPanel(ref));
+});
+const ownerDocument = $derived(getOwnerDocument(ref));
+$effect(() => {
+  id;
+  return untrack(() => {
+    context.setPanelId(id);
+    return () => {
+      context.setPanelId(void 0);
+    };
+  });
+});
+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 : context.popoverState === PopoverStates.Open;
+  }
+});
+const { visible, data: transitionData } = $derived(_transition);
+useOnDisappear({
+  get enabled() {
+    return visible;
+  },
+  get ref() {
+    return context.button;
+  },
+  ondisappear: () => {
+    context.closePopover();
+  }
+});
+const scrollLockEnabled = $derived(context.__demoMode ? false : modal && visible);
+useScrollLock({
+  get enabled() {
+    return scrollLockEnabled;
+  },
+  get ownerDocument() {
+    return ownerDocument;
+  }
+});
+const handleKeyDown = (event) => {
+  switch (event.key) {
+    case "Escape":
+      if (context.popoverState !== PopoverStates.Open) return;
+      if (!ref) return;
+      if (ownerDocument?.activeElement && !ref.contains(ownerDocument.activeElement)) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      context.closePopover();
+      context.button?.focus();
+      break;
+  }
+};
+$effect(() => {
+  if (theirProps.static) return;
+  if (context.popoverState === PopoverStates.Closed && (theirProps.unmount ?? true)) {
+    context.setPanel(void 0);
+  }
+});
+$effect(() => {
+  if (context.__demoMode) return;
+  if (!focus) return;
+  if (context.popoverState !== PopoverStates.Open) return;
+  if (!ref) return;
+  const activeElement = ownerDocument?.activeElement;
+  if (ref.contains(activeElement)) return;
+  focusIn(ref, Focus.First);
+});
+const slot = $derived({
+  open: context.popoverState === PopoverStates.Open,
+  close
+});
+const buttonSize = useElementSize({
+  get element() {
+    return context.button ?? null;
+  },
+  unit: true
+});
+const ourProps = $derived(
+  mergeProps(anchor ? getFloatingPanelProps() : {}, {
+    id,
+    onkeydown: handleKeyDown,
+    onblur: focus && context.popoverState === PopoverStates.Open ? (event) => {
+      let el = event.relatedTarget;
+      if (!el) return;
+      if (!ref) return;
+      if (ref.contains(el)) return;
+      context.closePopover();
+      if (context.beforePanelSentinel?.contains?.(el) || context.afterPanelSentinel?.contains?.(el)) {
+        el.focus({ preventScroll: true });
+      }
+    } : void 0,
+    tabIndex: -1,
+    style: [theirProps.style, styles, `--button-width: ${buttonSize.width}`].filter(Boolean).join("; "),
+    ...transitionDataAttributes(transitionData)
+  })
+);
+const direction = useTabDirection();
+const handleBeforeFocus = () => {
+  let el = ref;
+  if (!el) return;
+  function run() {
+    match(direction.current, {
+      [TabDirection.Forwards]: () => {
+        let result = focusIn(el, Focus.First);
+        if (result === FocusResult.Error) {
+          context.afterPanelSentinel?.focus();
+        }
+      },
+      [TabDirection.Backwards]: () => {
+        context.button?.focus({ preventScroll: true });
+      }
+    });
+  }
+  if (process.env.NODE_ENV === "test") {
+    microTask(run);
+  } else {
+    run();
+  }
+};
+const handleAfterFocus = () => {
+  let el = ref;
+  if (!el) return;
+  function run() {
+    match(direction.current, {
+      [TabDirection.Forwards]: () => {
+        if (!context.button) return;
+        const elements = getFocusableElements();
+        const idx = elements.indexOf(context.button);
+        const before = elements.slice(0, idx + 1);
+        const after = elements.slice(idx + 1);
+        const combined = [...after, ...before];
+        for (const element of combined.slice()) {
+          if (element.dataset.headlessuiFocusGuard === "true" || ref?.contains(element)) {
+            let idx2 = combined.indexOf(element);
+            if (idx2 !== -1) combined.splice(idx2, 1);
+          }
+        }
+        focusIn(combined, Focus.First, { sorted: false });
+      },
+      [TabDirection.Backwards]: () => {
+        let result = focusIn(el, Focus.Previous);
+        if (result === FocusResult.Error) {
+          context.button?.focus();
+        }
+      }
+    });
+  }
+  if (process.env.NODE_ENV === "test") {
+    microTask(run);
+  } else {
+    run();
+  }
+};
+clearOpenClosedContext();
+setContext("PopoverPanelContext", {
+  get value() {
+    return id;
+  }
+});
+setContext("PopoverAPIContext", {
+  get close() {
+    return close;
+  },
+  get isPortalled() {
+    return isPortalled;
+  }
+});
+</script>
+
+<Portal enabled={portal ? theirProps.static || visible : false}>
+  {#if visible && isPortalled}
+    <Hidden
+      id={beforePanelSentinelId}
+      bind:ref={context.beforePanelSentinel as HTMLElement}
+      features={HiddenFeatures.Focusable}
+      data-headlessui-focus-guard
+      as="button"
+      type="button"
+      onfocus={handleBeforeFocus}
+    />
+  {/if}
+  <ElementOrComponent
+    {ourProps}
+    {theirProps}
+    slots={slot}
+    defaultTag={DEFAULT_PANEL_TAG}
+    features={PanelRenderFeatures}
+    {visible}
+    name="PopoverPanel"
+    bind:ref
+  />
+  {#if visible && isPortalled}
+    <Hidden
+      id={afterPanelSentinelId}
+      bind:ref={context.afterPanelSentinel as HTMLElement}
+      features={HiddenFeatures.Focusable}
+      data-headlessui-focus-guard
+      as="button"
+      type="button"
+      onfocus={handleAfterFocus}
+    />
+  {/if}
+</Portal>

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

@@ -0,0 +1,51 @@
+import type { ElementType, Props, PropsOf } from "../utils/types.js";
+declare const DEFAULT_PANEL_TAG: "div";
+type PanelRenderPropArg = {
+    open: boolean;
+    close: (focusableElement?: HTMLElement) => void;
+};
+type PanelPropsWeControl = "tabIndex";
+export type PopoverPanelProps<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = Props<TTag, PanelRenderPropArg, PanelPropsWeControl, {
+    focus?: boolean;
+    anchor?: AnchorProps;
+    portal?: boolean;
+    modal?: boolean;
+    transition?: boolean;
+    static?: boolean;
+    unmount?: boolean;
+}>;
+import { type AnchorProps } from "../internal/floating.svelte.js";
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "focus" | "anchor" | "unmount" | "static" | "tabIndex" | "transition" | "portal" | "modal"> extends infer T extends keyof PropsOf<TTag> ? { [P in T]: PropsOf<TTag>[P]; } : never) & {
+        children?: import("svelte").Snippet<[{
+            slot: PanelRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: PanelRenderPropArg) => string) | null | undefined;
+        ref?: HTMLElement;
+    } & {
+        focus?: boolean;
+        anchor?: AnchorProps;
+        portal?: boolean;
+        modal?: boolean;
+        transition?: boolean;
+        static?: boolean;
+        unmount?: boolean;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "ref";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TTag extends ElementType = typeof DEFAULT_PANEL_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_PANEL_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const PopoverPanel: $$IsomorphicComponent;
+type PopoverPanel<TTag extends ElementType = typeof DEFAULT_PANEL_TAG> = InstanceType<typeof PopoverPanel<TTag>>;
+export default PopoverPanel;