@pzerelles/headlessui-svelte 2.1.2-next.4 → 2.1.2-next.41

package/dist/listbox/index.d.ts

@@ -1,5 +1,5 @@
-export { default as Listbox, type ListboxProps, type ListboxChildren } from "./Listbox.svelte";
-export { default as ListboxButton, type ListboxButtonProps, type ListboxButtonChildren } from "./ListboxButton.svelte";
-export { default as ListboxOption, type ListboxOptionProps, type ListboxOptionChildren } from "./ListboxOption.svelte";
-export { default as ListboxOptions, type ListboxOptionsProps, type ListboxOptionsChildren, } from "./ListboxOptions.svelte";
-export { default as ListboxSelectedOption, type ListboxSelectedOptionProps } from "./ListboxSelectedOption.svelte";
+export { default as Listbox, type ListboxProps, type ListboxRenderPropArg as ListboxSlot, type ListboxOwnProps, } from "./Listbox.svelte";
+export { default as ListboxButton, type ListboxButtonProps, type ButtonRenderPropArg as ListboxButtonSlot, type ListboxButtonOwnProps, } from "./ListboxButton.svelte";
+export { default as ListboxOption, type ListboxOptionProps, type OptionRenderPropArg as ListboxOptionSlot, type ListboxOptionOwnProps, } from "./ListboxOption.svelte";
+export { default as ListboxOptions, type ListboxOptionsProps, type OptionsRenderPropArg as ListboxOptionsSlot, type ListboxOptionsOwnProps, } from "./ListboxOptions.svelte";
+export { default as ListboxSelectedOption, type ListboxSelectedOptionProps, type SelectedOptionRenderPropArg as ListboxSelectedOptionSlot, type ListboxSelectedOptionOwnProps, } 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 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 ListboxSelectedOption, } from "./ListboxSelectedOption.svelte";

package/dist/menu/Menu.svelte

@@ -1,275 +1,32 @@
 <script lang="ts" module>
-  import { useOutsideClick } from "../hooks/use-outside-click.svelte.js"
-  import { createFloatingContext } from "../internal/floating.svelte.js"
-  import { createOpenClosedContext, State } from "../internal/open-closed.js"
-  import { calculateActiveIndex, Focus } from "../utils/calculate-active-index.js"
-  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
-  import { FocusableMode, isFocusableElement, sortByDomNode } from "../utils/focus-management.js"
-  import { match } from "../utils/match.js"
-  import type { ElementType, Props } from "../utils/types.js"
-  import type { Snippet } from "svelte"
+  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,
-    MenuRenderPropArg,
-    MenuPropsWeControl,
-    {
-      __demoMode?: boolean
-    }
-  >
-
-  export type MenuChildren<T> = Snippet<[MenuRenderPropArg]>
-</script>
-
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_MENU_TAG">
-  import { setContext } from "svelte"
-  import {
-    ActivationTrigger,
-    MenuStates,
-    type MenuContext,
-    type MenuItemDataRef,
-    type StateDefinition,
-  } from "./context.svelte.js"
-
-  function adjustOrderedState(
-    state: StateDefinition,
-    adjustment: (items: StateDefinition["items"]) => StateDefinition["items"] = (i) => i
-  ) {
-    let currentActiveItem = state.activeItemIndex !== null ? state.items[state.activeItemIndex] : null
-
-    let sortedItems = sortByDomNode(adjustment(state.items.slice()), (item) => item.dataRef.current.domRef.current)
-
-    // If we inserted an item before the current active item then the active item index
-    // would be wrong. To fix this, we will re-lookup the correct index.
-    let adjustedActiveItemIndex = currentActiveItem ? sortedItems.indexOf(currentActiveItem) : null
-
-    // Reset to `null` in case the currentActiveItem was removed.
-    if (adjustedActiveItemIndex === -1) {
-      adjustedActiveItemIndex = null
-    }
-
-    return {
-      items: sortedItems,
-      activeItemIndex: adjustedActiveItemIndex,
-    }
+  export type MenuOwnProps = {
+    __demoMode?: boolean
   }
 
-  const stateReducer = (initialState: StateDefinition) => {
-    let _state = $state(initialState)
-    return {
-      get menuState() {
-        return _state.menuState
-      },
-      get buttonElement() {
-        return _state.buttonElement
-      },
-      get itemsElement() {
-        return _state.itemsElement
-      },
-      get items() {
-        return _state.items
-      },
-      get searchQuery() {
-        return _state.searchQuery
-      },
-      get activeItemIndex() {
-        return _state.activeItemIndex
-      },
-      get activationTrigger() {
-        return _state.activationTrigger
-      },
-      get __demoMode() {
-        return _state.__demoMode
-      },
-      closeMenu() {
-        if (_state.menuState === MenuStates.Closed) return _state
-        _state.activeItemIndex = null
-        _state.menuState = MenuStates.Closed
-        return _state
-      },
-      openMenu() {
-        if (_state.menuState === MenuStates.Open) return _state
-        /* We can turn off demo mode once we re-open the `Menu` */
-        _state.__demoMode = false
-        _state.menuState = MenuStates.Open
-        return _state
-      },
-      goToItem(
-        action:
-          | { focus: Focus.Specific; id: string; trigger?: ActivationTrigger }
-          | { focus: Exclude<Focus, Focus.Specific>; trigger?: ActivationTrigger }
-      ) {
-        if (_state.menuState === MenuStates.Closed) return _state
-
-        _state.searchQuery = ""
-        _state.activationTrigger = action.trigger ?? ActivationTrigger.Other
-        _state.__demoMode = false
-
-        // Optimization:
-        //
-        // There is no need to sort the DOM nodes if we know that we don't want to focus anything
-        if (action.focus === Focus.Nothing) {
-          _state.activeItemIndex = null
-          return _state
-        }
-
-        // Optimization:
-        //
-        // There is no need to sort the DOM nodes if we know exactly where to go
-        if (action.focus === Focus.Specific) {
-          _state.activeItemIndex = _state.items.findIndex((o) => o.id === action.id)
-          return _state
-        }
-
-        // Optimization:
-        //
-        // If the current DOM node and the previous DOM node are next to each other,
-        // or if the previous DOM node is already the first DOM node, then we don't
-        // have to sort all the DOM nodes.
-        else if (action.focus === Focus.Previous) {
-          let activeItemIdx = _state.activeItemIndex
-          if (activeItemIdx !== null) {
-            let currentDom = _state.items[activeItemIdx].dataRef.current.domRef
-            let previousItemIndex = calculateActiveIndex(action, {
-              resolveItems: () => _state.items,
-              resolveActiveIndex: () => _state.activeItemIndex,
-              resolveId: (item) => item.id,
-              resolveDisabled: (item) => item.dataRef.current.disabled,
-            })
-            if (previousItemIndex !== null) {
-              let previousDom = _state.items[previousItemIndex].dataRef.current.domRef
-              if (
-                // Next to each other
-                currentDom.current?.previousElementSibling === previousDom.current ||
-                // Or already the first element
-                previousDom.current?.previousElementSibling === null
-              ) {
-                _state.activeItemIndex = previousItemIndex
-                return _state
-              }
-            }
-          }
-        }
-
-        // Optimization:
-        //
-        // If the current DOM node and the next DOM node are next to each other, or
-        // if the next DOM node is already the last DOM node, then we don't have to
-        // sort all the DOM nodes.
-        else if (action.focus === Focus.Next) {
-          let activeItemIdx = _state.activeItemIndex
-          if (activeItemIdx !== null) {
-            let currentDom = _state.items[activeItemIdx].dataRef.current.domRef
-            let nextItemIndex = calculateActiveIndex(action, {
-              resolveItems: () => _state.items,
-              resolveActiveIndex: () => _state.activeItemIndex,
-              resolveId: (item) => item.id,
-              resolveDisabled: (item) => item.dataRef.current.disabled,
-            })
-            if (nextItemIndex !== null) {
-              let nextDom = _state.items[nextItemIndex].dataRef.current.domRef
-              if (
-                // Next to each other
-                currentDom.current?.nextElementSibling === nextDom.current ||
-                // Or already the last element
-                nextDom.current?.nextElementSibling === null
-              ) {
-                _state.activeItemIndex = nextItemIndex
-                return _state
-              }
-            }
-          }
-        }
-
-        // Slow path:
-        //
-        // Ensure all the items are correctly sorted according to DOM position
-        let adjustedState = adjustOrderedState(_state)
-        let activeItemIndex = calculateActiveIndex(action, {
-          resolveItems: () => adjustedState.items,
-          resolveActiveIndex: () => adjustedState.activeItemIndex,
-          resolveId: (item) => item.id,
-          resolveDisabled: (item) => item.dataRef.current.disabled,
-        })
-
-        _state.items = adjustedState.items
-        _state.activeItemIndex = activeItemIndex
-        return _state
-      },
-      search(value: string) {
-        let wasAlreadySearching = _state.searchQuery !== ""
-        let offset = wasAlreadySearching ? 0 : 1
-        let searchQuery = _state.searchQuery + value.toLowerCase()
-
-        let reOrderedItems =
-          _state.activeItemIndex !== null
-            ? _state.items
-                .slice(_state.activeItemIndex + offset)
-                .concat(_state.items.slice(0, _state.activeItemIndex + offset))
-            : _state.items
-
-        let matchingItem = reOrderedItems.find(
-          (item) => item.dataRef.current.textValue?.startsWith(searchQuery) && !item.dataRef.current.disabled
-        )
-
-        let matchIdx = matchingItem ? _state.items.indexOf(matchingItem) : -1
-        if (matchIdx === -1 || matchIdx === _state.activeItemIndex) {
-          _state.searchQuery = searchQuery
-          return _state
-        }
-        _state.searchQuery = searchQuery
-        _state.activeItemIndex = matchIdx
-        _state.activationTrigger = ActivationTrigger.Other
-        return _state
-      },
-      clearSearch() {
-        if (_state.searchQuery === "") return _state
-        _state.searchQuery = ""
-        return _state
-      },
-      registerItem(id: string, dataRef: MenuItemDataRef) {
-        let item = { id, dataRef }
-        let adjustedState = adjustOrderedState(_state, (items) => [...items, item])
-
-        _state.items = adjustedState.items
-        _state.activeItemIndex = adjustedState.activeItemIndex
-        return _state
-      },
-      unregisterItem(id: string) {
-        let adjustedState = adjustOrderedState(_state, (items) => {
-          let idx = items.findIndex((a) => a.id === id)
-          if (idx !== -1) items.splice(idx, 1)
-          return items
-        })
+  export type MenuProps = PropsAsChild<MenuRenderPropArg, MenuOwnProps>
+</script>
 
-        _state.items = adjustedState.items
-        _state.activeItemIndex = adjustedState.activeItemIndex
-        _state.activationTrigger = ActivationTrigger.Other
-        return _state
-      },
-      setButtonElement(element: HTMLButtonElement | null) {
-        if (_state.buttonElement === element) return _state
-        _state.buttonElement = element
-        return _state
-      },
-      setItemsElement(element: HTMLElement | null) {
-        if (_state.itemsElement === element) return _state
-        _state.itemsElement = element
-        return _state
-      },
-    }
-  }
+<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"
+  import { createOpenClosedContext, State } from "../internal/open-closed.js"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+  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 _state = stateReducer({
+  const context = createMenuContext({
     __demoMode,
     menuState: __demoMode ? MenuStates.Open : MenuStates.Closed,
     buttonElement: null,
@@ -279,8 +36,7 @@
     activeItemIndex: null,
     activationTrigger: ActivationTrigger.Other,
   } as StateDefinition)
-  const { menuState, itemsElement, buttonElement } = $derived(_state)
-  setContext<MenuContext>("MenuContext", _state)
+  const { menuState, itemsElement, buttonElement } = $derived(context)
 
   // Handle outside click
   const outsideClickEnabled = $derived(menuState === MenuStates.Open)
@@ -292,7 +48,7 @@
       return [buttonElement, itemsElement]
     },
     cb: (event, target) => {
-      _state.closeMenu()
+      context.closeMenu()
 
       if (!isFocusableElement(target, FocusableMode.Loose)) {
         event.preventDefault()
@@ -302,11 +58,11 @@
   })
 
   const slot = $derived({
-    open: _state.menuState === MenuStates.Open,
-    close: _state.closeMenu,
+    open: context.menuState === MenuStates.Open,
+    close: context.closeMenu,
   } satisfies MenuRenderPropArg)
 
-  createFloatingContext()
+  useFloatingProvider()
 
   const openClosed = $derived(
     match(menuState, {
@@ -321,4 +77,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,42 +1,12 @@
-import type { ElementType, Props } from "../utils/types.js";
-import type { Snippet } from "svelte";
-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 MenuOwnProps = {
     __demoMode?: boolean;
-}>;
-export type MenuChildren<T> = Snippet<[MenuRenderPropArg]>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_MENU_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "__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("../utils/types.js").Children<MenuRenderPropArg> | undefined;
-        ref?: HTMLElement;
-    } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
-        class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: MenuRenderPropArg) => string) | undefined;
-    } : {}) & {
-        __demoMode?: boolean;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    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']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): 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>>;
+};
+export type MenuProps = PropsAsChild<MenuRenderPropArg, MenuOwnProps>;
+declare const Menu: import("svelte").Component<MenuProps, {}, "">;
+type Menu = ReturnType<typeof Menu>;
 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,28 +13,24 @@
   }
   type ButtonPropsWeControl = "aria-controls" | "aria-expanded" | "aria-haspopup"
 
-  export type MenuButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> = Props<
-    TTag,
-    ButtonRenderPropArg,
-    ButtonPropsWeControl,
-    {
-      id?: string
-      disabled?: boolean
-      autofocus?: boolean
-      type?: string
-    }
-  >
+  export type MenuButtonOwnProps = {
+    element?: HTMLElement
+    id?: string
+    disabled?: boolean
+    autofocus?: boolean
+    type?: string
+  }
 
-  export type MenuButtonChildren = Snippet<[ButtonRenderPropArg]>
+  export type MenuButtonProps = Props<typeof DEFAULT_BUTTON_TAG, ButtonRenderPropArg, MenuButtonOwnProps>
 </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"
   import { useActivePress } from "../hooks/use-active-press.svelte.js"
   import { useResolveButtonType } from "../hooks/use-resolve-button-type.svelte.js"
-  import { useFloating } from "../internal/floating.svelte.js"
+  import { useFloatingReference, useFloatingReferenceProps } from "../internal/floating.svelte.js"
   import { useHover } from "../hooks/use-hover.svelte.js"
   import { mergeProps } from "../utils/render.js"
   import { MenuStates, useMenuContext } from "./context.svelte.js"
@@ -43,17 +39,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 { setReference, getReferenceProps: getFloatingReferenceProps } = useFloating()
+  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 +135,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 +164,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,44 +8,14 @@ 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 MenuButtonOwnProps = {
+    element?: HTMLElement;
     id?: string;
     disabled?: boolean;
     autofocus?: boolean;
     type?: string;
-}>;
-export type MenuButtonChildren = Snippet<[ButtonRenderPropArg]>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "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?: import("../utils/types.js").Children<ButtonRenderPropArg> | undefined;
-        ref?: HTMLElement;
-    } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
-        class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: ButtonRenderPropArg) => string) | undefined;
-    } : {}) & {
-        id?: string;
-        disabled?: boolean;
-        autofocus?: boolean;
-        type?: string;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    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']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): 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>>;
+};
+export type MenuButtonProps = Props<typeof DEFAULT_BUTTON_TAG, ButtonRenderPropArg, MenuButtonOwnProps>;
+declare const MenuButton: import("svelte").Component<MenuButtonProps, {}, "element">;
+type MenuButton = ReturnType<typeof MenuButton>;
 export default MenuButton;

package/dist/menu/MenuHeading.svelte

@@ -1,34 +1,30 @@
 <script lang="ts" module>
-  import { onMount, type Snippet } from "svelte"
-  import type { ElementType, Props } from "../utils/types.js"
+  import { onMount } from "svelte"
+  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,
-    {
-      id?: string
-    }
-  >
+  export type MenuHeadingOwnProps = {
+    element?: HTMLElement
+    id?: string
+  }
 
-  export type MenuHeadingChildren = Snippet<[HeadingRenderPropArg]>
+  export type MenuHeadingProps = Props<typeof DEFAULT_HEADING_TAG, {}, MenuHeadingOwnProps>
 </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))
@@ -36,4 +32,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,39 +1,10 @@
-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 MenuHeadingOwnProps = {
+    element?: HTMLElement;
     id?: string;
-}>;
-export type MenuHeadingChildren = Snippet<[HeadingRenderPropArg]>;
-declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_HEADING_TAG> {
-    props(): {
-        as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "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?: import("../utils/types.js").Children<HeadingRenderPropArg> | undefined;
-        ref?: HTMLElement;
-    } & (true extends (import("../utils/types.js").PropsOf<TTag> extends infer T_1 ? T_1 extends import("../utils/types.js").PropsOf<TTag> ? T_1 extends never ? never : "class" extends infer T_2 ? T_2 extends "class" ? T_2 extends keyof T_1 ? true : never : never : never : never : never) ? {
-        class?: import("../utils/types.js").PropsOf<TTag>["class"] | ((bag: HeadingRenderPropArg) => string) | undefined;
-    } : {}) & {
-        id?: string;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    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']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): 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>>;
+};
+export type MenuHeadingProps = Props<typeof DEFAULT_HEADING_TAG, {}, MenuHeadingOwnProps>;
+declare const MenuHeading: import("svelte").Component<MenuHeadingProps, {}, "element">;
+type MenuHeading = ReturnType<typeof MenuHeading>;
 export default MenuHeading;