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

package/dist/listbox/ListboxOptions.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,7 +9,8 @@
   } from "../internal/floating.svelte.js"
 
   const DEFAULT_OPTIONS_TAG = "div" as const
-  type OptionsRenderPropArg = {
+
+  export type OptionsRenderPropArg = {
     open: boolean
   }
   type OptionsPropsWeControl =
@@ -22,11 +23,11 @@
 
   let OptionsRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
 
-  export type ListboxOptionsProps<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG> = Props<
-    TTag,
+  export type ListboxOptionsProps = Props<
+    typeof DEFAULT_OPTIONS_TAG,
     OptionsRenderPropArg,
-    OptionsPropsWeControl,
     {
+      element?: HTMLElement
       id?: string
       anchor?: AnchorPropsWithSelection
       portal?: boolean
@@ -36,7 +37,7 @@
   >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG">
+<script lang="ts">
   import { useId } from "../hooks/use-id.js"
   import { ListboxStates, useActions, useData, ValueMode, type ListboxDataContext } from "./Listbox.svelte"
   import { getOwnerDocument } from "../utils/owner.js"
@@ -58,14 +59,14 @@
 
   const internalId = useId()
   let {
-    ref = $bindable(),
+    element = $bindable(),
     id = `headlessui-listbox-options-${internalId}`,
     anchor: rawAnchor,
     portal = false,
     modal = true,
     transition = false,
     ...theirProps
-  }: { as?: TTag } & ListboxOptionsProps<TTag> = $props()
+  }: ListboxOptionsProps = $props()
   const resolvedAnchor = useResolvedAnchor({
     get anchor() {
       return rawAnchor
@@ -219,9 +220,9 @@
   const getFloatingPanelProps = useFloatingPanelProps()
 
   $effect(() => {
-    localOptionsElement = ref
-    data.optionsElement = ref ?? null
-    if (anchor) setFloating(ref ?? null)
+    localOptionsElement = element
+    data.optionsElement = element ?? null
+    if (anchor) setFloating(element ?? null)
   })
 
   const searchDisposables = useDisposables()
@@ -414,6 +415,6 @@
     features={OptionsRenderFeatures}
     visible={panelEnabled}
     name="ListboxOptions"
-    bind:ref
+    bind:element
   />
 </Portal>

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 = {
+export 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"
+  export 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";
+export 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/listbox/index.d.ts

@@ -1,5 +1,5 @@
-export { default as Listbox, type ListboxProps } from "./Listbox.svelte";
-export { default as ListboxButton, type ListboxButtonProps } from "./ListboxButton.svelte";
-export { default as ListboxOption, type ListboxOptionProps } from "./ListboxOption.svelte";
-export { default as ListboxOptions, type ListboxOptionsProps } from "./ListboxOptions.svelte";
-export { default as ListboxSelectedOption, type ListboxSelectedOptionProps } from "./ListboxSelectedOption.svelte";
+export { default as Listbox, type ListboxProps, type ListboxRenderPropArg as ListboxSlot } from "./Listbox.svelte";
+export { default as ListboxButton, type ListboxButtonProps, type ButtonRenderPropArg as ListboxButtonSlot, } from "./ListboxButton.svelte";
+export { default as ListboxOption, type ListboxOptionProps, type OptionRenderPropArg as ListboxOptionSlot, } from "./ListboxOption.svelte";
+export { default as ListboxOptions, type ListboxOptionsProps, type OptionsRenderPropArg as ListboxOptionsSlot, } from "./ListboxOptions.svelte";
+export { default as ListboxSelectedOption, type ListboxSelectedOptionProps, type SelectedOptionRenderPropArg as ListboxSelectedOptionSlot, } from "./ListboxSelectedOption.svelte";

package/dist/listbox/index.js

@@ -1,5 +1,5 @@
 export { default as Listbox } from "./Listbox.svelte";
-export { default as ListboxButton } from "./ListboxButton.svelte";
-export { default as ListboxOption } from "./ListboxOption.svelte";
-export { default as ListboxOptions } from "./ListboxOptions.svelte";
-export { default as ListboxSelectedOption } from "./ListboxSelectedOption.svelte";
+export { default as ListboxButton, } from "./ListboxButton.svelte";
+export { default as ListboxOption, } from "./ListboxOption.svelte";
+export { default as ListboxOptions, } from "./ListboxOptions.svelte";
+export { default as ListboxSelectedOption, } from "./ListboxSelectedOption.svelte";

package/dist/menu/Menu.svelte

@@ -1,24 +1,22 @@
 <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 = {
+  export type MenuRenderPropArg = {
     open: boolean
     close: () => void
   }
   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;
-type MenuRenderPropArg = {
+import type { PropsAsChild } from "../utils/types.js";
+export 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,9 +1,9 @@
 <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 = {
+  export type ButtonRenderPropArg = {
     open: boolean
     active: boolean
     hover: boolean
@@ -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,7 +1,6 @@
-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 = {
+export type ButtonRenderPropArg = {
     open: boolean;
     active: boolean;
     hover: 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,
-    HeadingRenderPropArg,
-    HeadingPropsWeControl,
+  export type MenuHeadingProps = Props<
+    typeof DEFAULT_HEADING_TAG,
+    {},
     {
+      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,8 @@
-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, {}, {
+    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;