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

package/dist/menu/MenuItems.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
   import { mergeProps, RenderFeatures, type PropsForFeatures } from "../utils/render.js"
   import {
     useFloatingPanel,
@@ -16,11 +16,11 @@
 
   let ItemsRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
 
-  export type MenuItemsProps<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG> = Props<
-    TTag,
+  export type MenuItemsProps = Props<
+    typeof DEFAULT_ITEMS_TAG,
     ItemsRenderPropArg,
-    ItemsPropsWeControl,
     {
+      element?: HTMLElement
       id?: string
       anchor?: AnchorProps
       portal?: boolean
@@ -30,7 +30,7 @@
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_ITEMS_TAG">
+<script lang="ts">
   import { useId } from "../hooks/use-id.js"
   import { getOwnerDocument } from "../utils/owner.js"
   import { State, useOpenClosed } from "../internal/open-closed.js"
@@ -43,7 +43,7 @@
   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, type Snippet } from "svelte"
+  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"
@@ -51,15 +51,14 @@
 
   const internalId = useId()
   let {
-    as = DEFAULT_ITEMS_TAG as TTag,
-    ref = $bindable(),
+    element = $bindable(),
     id = `headlessui-menu-items-${internalId}`,
     anchor: rawAnchor,
     portal = false,
     modal = true,
     transition = false,
     ...theirProps
-  }: { as?: TTag } & MenuItemsProps<TTag> = $props()
+  }: MenuItemsProps = $props()
   const resolvedAnchor = useResolvedAnchor({
     get anchor() {
       return rawAnchor
@@ -76,8 +75,8 @@
   const getFloatingPanelProps = useFloatingPanelProps()
 
   $effect(() => {
-    untrack(() => _state.setItemsElement(ref ?? null))
-    if (anchor) setFloating(ref ?? null)
+    untrack(() => _state.setItemsElement(element ?? null))
+    if (anchor) setFloating(element ?? null)
   })
   const ownerDocument = $derived(getOwnerDocument(_state.itemsElement))
 
@@ -99,7 +98,7 @@
       return transition
     },
     get element() {
-      return ref
+      return element
     },
     get show() {
       return show
@@ -315,6 +314,6 @@
     features={ItemsRenderFeatures}
     visible={panelEnabled}
     name="MenuItems"
-    bind:ref
+    bind:element
   />
 </Portal>

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

@@ -1,51 +1,18 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { 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, {
+export type MenuItemsProps = Props<typeof DEFAULT_ITEMS_TAG, ItemsRenderPropArg, {
+    element?: HTMLElement;
     id?: string;
     anchor?: AnchorProps;
     portal?: boolean;
     modal?: boolean;
     transition?: boolean;
 } & PropsForFeatures<typeof ItemsRenderFeatures>>;
-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>, ("slot" | "as" | "children" | "class" | "ref") | "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?: Snippet<[ItemsRenderPropArg & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: ItemsRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        id?: string;
-        anchor?: AnchorProps;
-        portal?: boolean;
-        modal?: boolean;
-        transition?: boolean;
-    } & {
-        static?: boolean | undefined;
-        unmount?: boolean | undefined;
-    };
-    events(): {};
-    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']> & {}): 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>>;
+declare const MenuItems: import("svelte").Component<MenuItemsProps, {}, "element">;
 export default MenuItems;

package/dist/menu/MenuSection.svelte

@@ -1,29 +1,30 @@
 <script lang="ts" module>
-  import type { Snippet } from "svelte"
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
   const DEFAULT_SECTION_TAG = "div" as const
   type SectionRenderPropArg = {}
   type SectionPropsWeControl = "role" | "aria-labelledby"
 
-  export type MenuSectionProps<TTag extends ElementType = typeof DEFAULT_SECTION_TAG> = Props<
-    TTag,
+  export type MenuSectionProps = Props<
+    typeof DEFAULT_SECTION_TAG,
     SectionRenderPropArg,
-    SectionPropsWeControl
+    {
+      element?: HTMLElement
+    }
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SECTION_TAG">
+<script lang="ts">
   import { useLabels } from "../label/context.svelte.js"
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
 
   const labelledby = useLabels()
 
-  let { ref = $bindable(), ...theirProps }: { as?: TTag } & MenuSectionProps<TTag> = $props()
+  let { element = $bindable(), ...theirProps }: MenuSectionProps = $props()
   const ourProps = $derived({
     "aria-labelledby": labelledby,
     role: "group",
   })
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_SECTION_TAG} name="MenuSection" bind:ref />
+<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_SECTION_TAG} name="MenuSection" bind:element />

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

@@ -1,31 +1,8 @@
-import type { Snippet } from "svelte";
-import type { ElementType, Props } from "../utils/types.js";
+import type { 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>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_SECTION_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | SectionPropsWeControl> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: Snippet<[{
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: SectionRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    };
-    events(): {};
-    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']> & {}): 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 type MenuSectionProps = Props<typeof DEFAULT_SECTION_TAG, SectionRenderPropArg, {
+    element?: HTMLElement;
+}>;
+declare const MenuSection: import("svelte").Component<MenuSectionProps, {}, "element">;
 export default MenuSection;

package/dist/menu/MenuSeparator.svelte

@@ -1,22 +1,24 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
   const DEFAULT_SEPARATOR_TAG = "div" as const
   type SeparatorRenderPropArg = {}
   type SeparatorPropsWeControl = "role"
 
-  export type MenuSeparatorProps<TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG> = Props<
-    TTag,
+  export type MenuSeparatorProps = Props<
+    typeof DEFAULT_SEPARATOR_TAG,
     SeparatorRenderPropArg,
-    SeparatorPropsWeControl
+    {
+      element?: HTMLElement
+    }
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG">
+<script lang="ts">
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
 
-  let { ref = $bindable(), ...theirProps }: { as?: TTag } & MenuSeparatorProps<TTag> = $props()
+  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,30 +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<[{
-            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,5 +1,5 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
   export const DEFAULT_POPOVER_TAG = "div" as const
   type PopoverRenderPropArg = {
@@ -8,17 +8,17 @@
   }
   type PopoverPropsWeControl = never
 
-  export type PopoverProps<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG> = Props<
-    TTag,
+  export type PopoverProps = Props<
+    typeof DEFAULT_POPOVER_TAG,
     PopoverRenderPropArg,
-    PopoverPropsWeControl,
     {
+      element?: HTMLElement
       __demoMode?: boolean
     }
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_POPOVER_TAG">
+<script lang="ts">
   import { getOwnerDocument } from "../utils/owner.js"
 
   import { setContext, untrack } from "svelte"
@@ -41,7 +41,7 @@
   import { createOpenClosedContext, State } from "../internal/open-closed.js"
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
 
-  let { ref = $bindable(), __demoMode = false, ...theirProps }: { as?: TTag } & PopoverProps<TTag> = $props()
+  let { element = $bindable(), __demoMode = false, ...theirProps }: PopoverProps = $props()
 
   let buttons = $state([])
   const context = createPopoverContext({
@@ -60,7 +60,7 @@
     afterButtonSentinel,
   } = $derived(context)
 
-  const ownerDocument = $derived(getOwnerDocument(ref ?? button))
+  const ownerDocument = $derived(getOwnerDocument(element ?? button))
 
   const isPortalled = $derived.by(() => {
     if (!button) return false
@@ -223,5 +223,5 @@
 </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,38 +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<[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,5 +1,5 @@
 <script lang="ts" module>
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
   import { RenderFeatures, type PropsForFeatures } from "../utils/render.js"
 
   let DEFAULT_BACKDROP_TAG = "div" as const
@@ -10,17 +10,20 @@
 
   const BackdropRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
 
-  export type PopoverBackdropProps<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = Props<
-    TTag,
+  export type PopoverBackdropProps = Props<
+    typeof DEFAULT_BACKDROP_TAG,
     BackdropRenderPropArg,
-    BackdropPropsWeControl,
-    { transition?: boolean } & PropsForFeatures<typeof BackdropRenderFeatures>
+    {
+      element?: HTMLElement
+      id?: string
+      transition?: boolean
+    } & PropsForFeatures<typeof BackdropRenderFeatures>
   >
 
-  export type PopoverOverlayProps<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = PopoverBackdropProps<TTag>
+  export type PopoverOverlayProps = PopoverBackdropProps
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG">
+<script lang="ts">
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
   import { useId } from "../hooks/use-id.js"
   import { PopoverStates, usePopoverContext } from "./context.svelte.js"
@@ -29,11 +32,11 @@
 
   const internalId = useId()
   let {
-    ref = $bindable(),
-    id = `headlessui-popover-backdrop-${internalId}` as PropsOf<TTag>["id"],
+    element = $bindable(),
+    id = `headlessui-popover-backdrop-${internalId}`,
     transition = false,
     ...theirProps
-  }: { as?: TTag } & PopoverBackdropProps<TTag> = $props()
+  }: PopoverBackdropProps = $props()
   const context = usePopoverContext("PopoverBackdrop")
   const { popoverState } = $derived(context)
 
@@ -43,7 +46,7 @@
       return transition
     },
     get element() {
-      return ref
+      return element
     },
     get show() {
       return usesOpenClosedState !== null
@@ -78,5 +81,5 @@
   features={BackdropRenderFeatures}
   name="PopoverBackdrop"
   {visible}
-  bind:ref
+  bind:element
 />

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

@@ -1,42 +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<[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;

package/dist/popover/PopoverButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { ElementType, Props, PropsOf } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
   const DEFAULT_BUTTON_TAG = "button" as const
   export type PopoverButtonSlot = {
@@ -12,20 +12,19 @@
   }
   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,
+  export type PopoverButtonProps = Props<
+    typeof DEFAULT_BUTTON_TAG,
     PopoverButtonSlot,
-    PopoverButtonPropsWeControl,
-    PopoverButtonComponentProps
+    {
+      element?: HTMLElement
+      id?: string
+      disabled?: boolean
+      autofocus?: boolean
+    }
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">
+<script lang="ts">
   import { useId } from "../hooks/use-id.js"
   import {
     PopoverStates,
@@ -48,16 +47,15 @@
   import { microTask } from "../utils/microTask.js"
   import Hidden, { HiddenFeatures } from "../internal/Hidden.svelte"
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-  import type { FocusEventHandler } from "svelte/elements"
 
   const internalId = useId()
   let {
-    ref = $bindable(),
-    id = `headlessui-popover-button-${internalId}` as PropsOf<TTag>["id"],
+    element = $bindable(),
+    id = `headlessui-popover-button-${internalId}`,
     disabled = false,
-    autofocus = false as PropsOf<TTag>["autofocus"],
+    autofocus = false,
     ...theirProps
-  }: { as?: TTag } & PopoverButtonProps<TTag> = $props()
+  }: PopoverButtonProps = $props()
   const context = usePopoverContext("PopoverButton")
   const api = usePopoverAPIContext("PopoverButton")
   const { isPortalled } = $derived(api)
@@ -111,13 +109,13 @@
   const floatingReference = useFloatingReference()
   const { setReference } = $derived(floatingReference)
   $effect(() => {
-    setReference(ref)
+    setReference(element)
   })
   $effect(() => {
     if (isWithinPanel) return
-    ref
+    element
     untrack(() => {
-      if (ref) {
+      if (element) {
         context.buttons.push(uniqueIdentifier)
       } else {
         let idx = context.buttons.indexOf(uniqueIdentifier)
@@ -128,10 +126,10 @@
         console.warn("You are already using a <PopoverButton /> but only 1 <PopoverButton /> is supported.")
       }
 
-      if (ref) context.setButton(ref)
+      if (element) context.setButton(element)
     })
   })
-  const ownerDocument = $derived(getOwnerDocument(ref))
+  const ownerDocument = $derived(getOwnerDocument(element))
 
   const handleKeyDown = (event: KeyboardEvent) => {
     if (isWithinPanel) {
@@ -158,8 +156,8 @@
 
         case "Escape":
           if (context.popoverState !== PopoverStates.Open) return closeOthers?.(context.buttonId!)
-          if (!ref) return
-          if (ownerDocument?.activeElement && !ref.contains(ownerDocument.activeElement)) {
+          if (!element) return
+          if (ownerDocument?.activeElement && !element.contains(ownerDocument.activeElement)) {
             return
           }
           event.preventDefault()
@@ -234,7 +232,7 @@
 
   const type = useResolveButtonType({
     get props() {
-      return { type: theirProps.type, as: theirProps.as }
+      return { type: theirProps.type ?? undefined, as: element ? element.tagName.toLowerCase() : DEFAULT_BUTTON_TAG }
     },
     get ref() {
       return { current: context.button }
@@ -311,16 +309,18 @@
   slots={slot}
   defaultTag={DEFAULT_BUTTON_TAG}
   name="PopoverButton"
-  bind:ref
+  bind:element
 />
 {#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}
-  />
+  <Hidden id={sentinelId} features={HiddenFeatures.Focusable} asChild>
+    {#snippet children({ props })}
+      <button
+        {...props}
+        type="button"
+        data-headlessui-focus-guard
+        onfocus={handleFocus}
+        bind:this={context.afterButtonSentinel}>&zwnj;</button
+      >
+    {/snippet}
+  </Hidden>
 {/if}