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

package/dist/menu/MenuItem.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" module>
-  import type { Props, ElementType } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
   import { onMount } from "svelte"
 
-  const DEFAULT_ITEM_TAG = "svelte:fragment" as const
-  type ItemRenderPropArg = {
+  const DEFAULT_ITEM_TAG = "button" as const
+  export type ItemRenderPropArg = {
     /** @deprecated use `focus` instead */
     active: boolean
     focus: boolean
@@ -13,18 +13,18 @@
   }
   type ItemPropsWeControl = "aria-describedby" | "aria-disabled" | "aria-labelledby" | "role" | "tabIndex"
 
-  export type MenuItemProps<TTag extends ElementType = typeof DEFAULT_ITEM_TAG> = Props<
-    TTag,
+  export type MenuItemProps = Props<
+    typeof DEFAULT_ITEM_TAG,
     ItemRenderPropArg,
-    ItemPropsWeControl,
     {
+      element?: HTMLElement
       id?: string
       disabled?: boolean
     }
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_ITEM_TAG">
+<script lang="ts">
   import { useId } from "../hooks/use-id.js"
   import { ActivationTrigger, MenuStates, useMenuContext, type MenuItemDataRef } from "./context.svelte.js"
   import { disposables } from "../utils/disposables.js"
@@ -39,11 +39,11 @@
 
   const internalId = useId()
   let {
-    ref = $bindable(),
+    element = $bindable(),
     id = `headlessui-menu-item-${internalId}`,
     disabled = false,
     ...theirProps
-  }: { as?: TTag } & MenuItemProps<TTag> = $props()
+  }: MenuItemProps = $props()
   const _state = useMenuContext("MenuItem")
   const active = $derived(_state.activeItemIndex !== null ? _state.items[_state.activeItemIndex].id === id : false)
 
@@ -55,19 +55,19 @@
     if (!active) return
     if (_state.activationTrigger === ActivationTrigger.Pointer) return
     return disposables().requestAnimationFrame(() => {
-      ;(ref as HTMLElement)?.scrollIntoView?.({ block: "nearest" })
+      ;(element as HTMLElement)?.scrollIntoView?.({ block: "nearest" })
     })
   })
 
   const getTextValue = useTextValue({
     get element() {
-      return ref || null
+      return element || null
     },
   })
 
   const bag: MenuItemDataRef["current"] = $derived({
     disabled,
-    domRef: { current: ref || null },
+    domRef: { current: element || null },
     get textValue() {
       return getTextValue()
     },
@@ -146,4 +146,4 @@
   )
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_ITEM_TAG} name="MenuItem" bind:ref />
+<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_ITEM_TAG} name="MenuItem" bind:element />

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

@@ -1,6 +1,6 @@
-import type { Props, ElementType } from "../utils/types.js";
-declare const DEFAULT_ITEM_TAG: "svelte:fragment";
-type ItemRenderPropArg = {
+import type { Props } from "../utils/types.js";
+declare const DEFAULT_ITEM_TAG: "button";
+export type ItemRenderPropArg = {
     /** @deprecated use `focus` instead */
     active: boolean;
     focus: boolean;
@@ -8,36 +8,10 @@ type ItemRenderPropArg = {
     close: () => void;
     props?: Record<string, any>;
 };
-type ItemPropsWeControl = "aria-describedby" | "aria-disabled" | "aria-labelledby" | "role" | "tabIndex";
-export type MenuItemProps<TTag extends ElementType = typeof DEFAULT_ITEM_TAG> = Props<TTag, ItemRenderPropArg, ItemPropsWeControl, {
+export type MenuItemProps = Props<typeof DEFAULT_ITEM_TAG, ItemRenderPropArg, {
+    element?: HTMLElement;
     id?: string;
     disabled?: boolean;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_ITEM_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "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?: import("svelte").Snippet<[ItemRenderPropArg & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: ItemRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        id?: string;
-        disabled?: boolean;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_ITEM_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_ITEM_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const MenuItem: $$IsomorphicComponent;
-type MenuItem<TTag extends ElementType = typeof DEFAULT_ITEM_TAG> = InstanceType<typeof MenuItem<TTag>>;
+declare const MenuItem: import("svelte").Component<MenuItemProps, {}, "element">;
 export default MenuItem;

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,
@@ -9,18 +9,18 @@
   } from "../internal/floating.svelte.js"
 
   const DEFAULT_ITEMS_TAG = "div" as const
-  type ItemsRenderPropArg = {
+  export type ItemsRenderPropArg = {
     open: boolean
   }
   type ItemsPropsWeControl = "aria-activedescendant" | "aria-labelledby" | "role" | "tabIndex"
 
   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 = {
+export 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,
-    SectionRenderPropArg,
-    SectionPropsWeControl
+  export type MenuSectionProps = Props<
+    typeof DEFAULT_SECTION_TAG,
+    {},
+    {
+      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,7 @@
-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, {}, {
+    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,
-    SeparatorRenderPropArg,
-    SeparatorPropsWeControl
+  export type MenuSeparatorProps = Props<
+    typeof DEFAULT_SEPARATOR_TAG,
+    {},
+    {
+      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,7 @@
-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, {}, {
+    element?: HTMLElement;
+}>;
+declare const MenuSeparator: import("svelte").Component<MenuSeparatorProps, {}, "element">;
 export default MenuSeparator;

package/dist/menu/index.d.ts

@@ -1,7 +1,7 @@
-export { default as Menu, type MenuProps } from "./Menu.svelte";
-export { default as MenuButton, type MenuButtonProps } from "./MenuButton.svelte";
+export { default as Menu, type MenuProps, type MenuRenderPropArg as MenuSlot } from "./Menu.svelte";
+export { default as MenuButton, type MenuButtonProps, type ButtonRenderPropArg as MenuButtonSlot, } from "./MenuButton.svelte";
 export { default as MenuHeading, type MenuHeadingProps } from "./MenuHeading.svelte";
-export { default as MenuItem, type MenuItemProps } from "./MenuItem.svelte";
-export { default as MenuItems, type MenuItemsProps } from "./MenuItems.svelte";
+export { default as MenuItem, type MenuItemProps, type ItemRenderPropArg as MenuItemSlot } from "./MenuItem.svelte";
+export { default as MenuItems, type MenuItemsProps, type ItemsRenderPropArg as MenuItemsSlot } from "./MenuItems.svelte";
 export { default as MenuSection, type MenuSectionProps } from "./MenuSection.svelte";
 export { default as MenuSeparator, type MenuSeparatorProps } from "./MenuSeparator.svelte";

package/dist/menu/index.js

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

package/dist/popover/Popover.svelte

@@ -1,24 +1,24 @@
 <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 = {
+  export 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,
+  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 = {
+export 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,26 +1,29 @@
 <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
-  type BackdropRenderPropArg = {
+  export type BackdropRenderPropArg = {
     open: boolean
   }
   type BackdropPropsWeControl = "aria-hidden"
 
   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
 />