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

package/dist/listbox/ListboxOptions.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 AnchorPropsWithSelection } from "../internal/floating.svelte.js";
 declare const DEFAULT_OPTIONS_TAG: "div";
 type OptionsRenderPropArg = {
     open: boolean;
 };
-type OptionsPropsWeControl = "aria-activedescendant" | "aria-labelledby" | "aria-multiselectable" | "aria-orientation" | "role" | "tabIndex";
 declare let OptionsRenderFeatures: number;
-export type ListboxOptionsProps<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG> = Props<TTag, OptionsRenderPropArg, OptionsPropsWeControl, {
+export type ListboxOptionsProps = Props<typeof DEFAULT_OPTIONS_TAG, OptionsRenderPropArg, {
+    element?: HTMLElement;
     id?: string;
     anchor?: AnchorPropsWithSelection;
     portal?: boolean;
     modal?: boolean;
     transition?: boolean;
 } & PropsForFeatures<typeof OptionsRenderFeatures>>;
-import { type Snippet } from "svelte";
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "anchor" | "unmount" | "static" | "id" | "transition" | OptionsPropsWeControl | "portal" | "modal"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: Snippet<[OptionsRenderPropArg & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: OptionsRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        id?: string;
-        anchor?: AnchorPropsWithSelection;
-        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_OPTIONS_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_OPTIONS_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const ListboxOptions: $$IsomorphicComponent;
-type ListboxOptions<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG> = InstanceType<typeof ListboxOptions<TTag>>;
+declare const ListboxOptions: import("svelte").Component<ListboxOptionsProps, {}, "element">;
 export default ListboxOptions;

package/dist/listbox/ListboxSelectedOption.svelte

@@ -1,33 +1,30 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
   import type { Snippet } from "svelte"
 
-  const DEFAULT_SELECTED_OPTION_TAG = "svelte:fragment"
-  type SelectedOptionRenderPropArg = {}
+  const DEFAULT_SELECTED_OPTION_TAG = "span"
+  type SelectedOptionRenderPropArg = {
+    option: Snippet
+  }
   type SelectedOptionPropsWeControl = never
 
-  export type ListboxSelectedOptionProps<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG> = Props<
-    TTag,
+  export type ListboxSelectedOptionProps = Props<
+    typeof DEFAULT_SELECTED_OPTION_TAG,
     SelectedOptionRenderPropArg,
-    SelectedOptionPropsWeControl,
     {
+      element?: HTMLElement
       options: Snippet
       placeholder?: Snippet
     }
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG">
+<script lang="ts">
   import { useData, ValueMode } from "./Listbox.svelte"
   import { setContext } from "svelte"
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
 
-  let {
-    ref = $bindable(),
-    options,
-    placeholder,
-    ...theirProps
-  }: { as?: TTag } & ListboxSelectedOptionProps<TTag> = $props()
+  let { element = $bindable(), options, placeholder, ...theirProps }: ListboxSelectedOptionProps = $props()
 
   const data = useData("ListboxSelectedOption")
 
@@ -40,7 +37,7 @@
   setContext("SelectedOptionContext", true)
 </script>
 
-{#snippet children()}
+{#snippet option()}
   {#if placeholder && shouldShowPlaceholder}
     {@render placeholder()}
   {:else}
@@ -49,8 +46,9 @@
 {/snippet}
 
 <ElementOrComponent
-  theirProps={{ ...theirProps, children }}
+  theirProps={{ ...theirProps, ...(theirProps.asChild ? {} : { children: option }) }}
+  slot={{ option }}
   defaultTag={DEFAULT_SELECTED_OPTION_TAG}
   name="ListboxSelectedOption"
-  bind:ref
-></ElementOrComponent>
+  bind:element
+/>

package/dist/listbox/ListboxSelectedOption.svelte.d.ts

@@ -1,37 +1,13 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { Snippet } from "svelte";
-declare const DEFAULT_SELECTED_OPTION_TAG = "svelte:fragment";
-type SelectedOptionRenderPropArg = {};
-type SelectedOptionPropsWeControl = never;
-export type ListboxSelectedOptionProps<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG> = Props<TTag, SelectedOptionRenderPropArg, SelectedOptionPropsWeControl, {
+declare const DEFAULT_SELECTED_OPTION_TAG = "span";
+type SelectedOptionRenderPropArg = {
+    option: Snippet;
+};
+export type ListboxSelectedOptionProps = Props<typeof DEFAULT_SELECTED_OPTION_TAG, SelectedOptionRenderPropArg, {
+    element?: HTMLElement;
     options: Snippet;
     placeholder?: Snippet;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "placeholder" | "options"> 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: SelectedOptionRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        options: Snippet;
-        placeholder?: Snippet;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_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_SELECTED_OPTION_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const ListboxSelectedOption: $$IsomorphicComponent;
-type ListboxSelectedOption<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG> = InstanceType<typeof ListboxSelectedOption<TTag>>;
+declare const ListboxSelectedOption: import("svelte").Component<ListboxSelectedOptionProps, {}, "element">;
 export default ListboxSelectedOption;

package/dist/menu/Menu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { PropsAsChild } from "../utils/types.js"
 
   let DEFAULT_MENU_TAG = "svelte:fragment"
   type MenuRenderPropArg = {
@@ -8,17 +8,15 @@
   }
   type MenuPropsWeControl = never
 
-  export type MenuProps<TTag extends ElementType = typeof DEFAULT_MENU_TAG> = Props<
-    TTag,
+  export type MenuProps = PropsAsChild<
     MenuRenderPropArg,
-    MenuPropsWeControl,
     {
       __demoMode?: boolean
     }
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_MENU_TAG">
+<script lang="ts">
   import { ActivationTrigger, createMenuContext, MenuStates, type StateDefinition } from "./context.svelte.js"
   import { useOutsideClick } from "../hooks/use-outside-click.svelte.js"
   import { useFloatingProvider } from "../internal/floating-provider.svelte.js"
@@ -27,7 +25,7 @@
   import { FocusableMode, isFocusableElement } from "../utils/focus-management.js"
   import { match } from "../utils/match.js"
 
-  let { ref = $bindable(), __demoMode = false, ...theirProps }: { as?: TTag } & MenuProps<TTag> = $props()
+  let { __demoMode = false, ...theirProps }: MenuProps = $props()
 
   const context = createMenuContext({
     __demoMode,
@@ -80,4 +78,4 @@
   })
 </script>
 
-<ElementOrComponent {theirProps} {slot} defaultTag={DEFAULT_MENU_TAG} name="Menu" bind:ref />
+<ElementOrComponent {theirProps} {slot} name="Menu" />

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

@@ -1,37 +1,10 @@
-import type { ElementType, Props } from "../utils/types.js";
-declare let DEFAULT_MENU_TAG: string;
+import type { PropsAsChild } from "../utils/types.js";
 type MenuRenderPropArg = {
     open: boolean;
     close: () => void;
 };
-type MenuPropsWeControl = never;
-export type MenuProps<TTag extends ElementType = typeof DEFAULT_MENU_TAG> = Props<TTag, MenuRenderPropArg, MenuPropsWeControl, {
+export type MenuProps = PropsAsChild<MenuRenderPropArg, {
     __demoMode?: boolean;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_MENU_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<[MenuRenderPropArg & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: MenuRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        __demoMode?: boolean;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_MENU_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_MENU_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const Menu: $$IsomorphicComponent;
-type Menu<TTag extends ElementType = typeof DEFAULT_MENU_TAG> = InstanceType<typeof Menu<TTag>>;
+declare const Menu: import("svelte").Component<MenuProps, {}, "">;
 export default Menu;

package/dist/menu/MenuButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
-  import { tick, type Snippet } from "svelte"
-  import type { Props, ElementType } from "../utils/types.js"
+  import { tick } from "svelte"
+  import type { Props } from "../utils/types.js"
 
   const DEFAULT_BUTTON_TAG = "button" as const
   type ButtonRenderPropArg = {
@@ -13,11 +13,11 @@
   }
   type ButtonPropsWeControl = "aria-controls" | "aria-expanded" | "aria-haspopup"
 
-  export type MenuButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<
-    TTag,
+  export type MenuButtonProps = Props<
+    typeof DEFAULT_BUTTON_TAG,
     ButtonRenderPropArg,
-    ButtonPropsWeControl,
     {
+      element?: HTMLElement
       id?: string
       disabled?: boolean
       autofocus?: boolean
@@ -26,7 +26,7 @@
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">
+<script lang="ts">
   import { useId } from "../hooks/use-id.js"
   import { Focus } from "../utils/calculate-active-index.js"
   import { useFocusRing } from "../hooks/use-focus-ring.svelte.js"
@@ -41,19 +41,19 @@
 
   const internalId = useId()
   let {
-    ref = $bindable(),
+    element = $bindable(),
     id = `headlessui-menu-button-${internalId}`,
     disabled = false,
     autofocus = false,
     ...theirProps
-  }: { as?: TTag } & MenuButtonProps<TTag> = $props()
+  }: MenuButtonProps = $props()
   const _state = useMenuContext("MenuButton")
   const floatingReference = useFloatingReference()
   const { setReference } = $derived(floatingReference)
   const { getReferenceProps: getFloatingReferenceProps } = useFloatingReferenceProps()
   $effect(() => {
-    untrack(() => _state.setButtonElement(ref ? (ref as HTMLButtonElement) : null))
-    setReference(ref)
+    untrack(() => _state.setButtonElement(element ? (element as HTMLButtonElement) : null))
+    setReference(element)
   })
 
   const handleKeyDown = async (event: KeyboardEvent) => {
@@ -137,7 +137,7 @@
 
   const buttonType = useResolveButtonType({
     get props() {
-      return { type: theirProps.type, as: theirProps.as }
+      return { type: theirProps.type, as: DEFAULT_BUTTON_TAG }
     },
     get ref() {
       return { current: _state.buttonElement }
@@ -166,4 +166,4 @@
   )
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="MenuButton" bind:ref />
+<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_BUTTON_TAG} name="MenuButton" bind:element />

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

@@ -1,5 +1,4 @@
-import { type Snippet } from "svelte";
-import type { Props, ElementType } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_BUTTON_TAG: "button";
 type ButtonRenderPropArg = {
     open: boolean;
@@ -9,40 +8,12 @@ type ButtonRenderPropArg = {
     disabled: boolean;
     autofocus: boolean;
 };
-type ButtonPropsWeControl = "aria-controls" | "aria-expanded" | "aria-haspopup";
-export type MenuButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<TTag, ButtonRenderPropArg, ButtonPropsWeControl, {
+export type MenuButtonProps = Props<typeof DEFAULT_BUTTON_TAG, ButtonRenderPropArg, {
+    element?: HTMLElement;
     id?: string;
     disabled?: boolean;
     autofocus?: boolean;
     type?: string;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "disabled" | "autofocus" | "type" | "id" | ButtonPropsWeControl> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: Snippet<[ButtonRenderPropArg & {
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: ButtonRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        id?: string;
-        disabled?: boolean;
-        autofocus?: boolean;
-        type?: string;
-    };
-    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 MenuButton: $$IsomorphicComponent;
-type MenuButton<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = InstanceType<typeof MenuButton<TTag>>;
+declare const MenuButton: import("svelte").Component<MenuButtonProps, {}, "element">;
 export default MenuButton;

package/dist/menu/MenuHeading.svelte

@@ -1,32 +1,33 @@
 <script lang="ts" module>
-  import { onMount, type Snippet } from "svelte"
-  import type { ElementType, Props } from "../utils/types.js"
+  import { onMount } from "svelte"
+  import type { SvelteHTMLElements } from "svelte/elements"
+  import type { Props } from "../utils/types.js"
 
   const DEFAULT_HEADING_TAG = "header" as const
   type HeadingRenderPropArg = {}
   type HeadingPropsWeControl = "role"
 
-  export type MenuHeadingProps<TTag extends ElementType = typeof DEFAULT_HEADING_TAG> = Props<
-    TTag,
+  export type MenuHeadingProps = Props<
+    typeof DEFAULT_HEADING_TAG,
     HeadingRenderPropArg,
-    HeadingPropsWeControl,
     {
+      element?: HTMLElement
       id?: string
     }
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_HEADING_TAG">
+<script lang="ts">
   import { useId } from "../hooks/use-id.js"
   import { useLabelContext } from "../label/context.svelte.js"
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
 
   const internalId = useId()
   let {
-    ref = $bindable(),
+    element = $bindable(),
     id = `headlessui-menu-heading-${internalId}`,
     ...theirProps
-  }: { as?: TTag } & MenuHeadingProps<TTag> = $props()
+  }: MenuHeadingProps = $props()
 
   const context = useLabelContext()
   onMount(() => context.register(id))
@@ -34,4 +35,4 @@
   const ourProps = $derived({ id, role: "presentation", ...context.props })
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_HEADING_TAG} name="MenuItem" bind:ref />
+<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_HEADING_TAG} name="MenuItem" bind:element />

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

@@ -1,35 +1,9 @@
-import { type Snippet } from "svelte";
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 declare const DEFAULT_HEADING_TAG: "header";
 type HeadingRenderPropArg = {};
-type HeadingPropsWeControl = "role";
-export type MenuHeadingProps<TTag extends ElementType = typeof DEFAULT_HEADING_TAG> = Props<TTag, HeadingRenderPropArg, HeadingPropsWeControl, {
+export type MenuHeadingProps = Props<typeof DEFAULT_HEADING_TAG, HeadingRenderPropArg, {
+    element?: HTMLElement;
     id?: string;
 }>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_HEADING_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "id" | "role"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: Snippet<[{
-            props?: Record<string, any>;
-        }]> | undefined;
-        class?: string | ((bag: HeadingRenderPropArg) => string) | null | undefined;
-        ref?: HTMLElement;
-    } & {
-        id?: string;
-    };
-    events(): {};
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <TTag extends ElementType = typeof DEFAULT_HEADING_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_HEADING_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const MenuHeading: $$IsomorphicComponent;
-type MenuHeading<TTag extends ElementType = typeof DEFAULT_HEADING_TAG> = InstanceType<typeof MenuHeading<TTag>>;
+declare const MenuHeading: import("svelte").Component<MenuHeadingProps, {}, "element">;
 export default MenuHeading;

package/dist/menu/MenuItem.svelte

@@ -1,8 +1,8 @@
 <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
+  const DEFAULT_ITEM_TAG = "button" as const
   type ItemRenderPropArg = {
     /** @deprecated use `focus` instead */
     active: 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,5 +1,5 @@
-import type { Props, ElementType } from "../utils/types.js";
-declare const DEFAULT_ITEM_TAG: "svelte:fragment";
+import type { Props } from "../utils/types.js";
+declare const DEFAULT_ITEM_TAG: "button";
 type ItemRenderPropArg = {
     /** @deprecated use `focus` instead */
     active: 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;