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

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

@@ -1,52 +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<[{
-            slot: 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,23 +1,43 @@
-<script lang="ts" module>const DEFAULT_SELECTED_OPTION_TAG = "svelte:fragment";
+<script lang="ts" module>
+  import type { Props } from "../utils/types.js"
+  import type { Snippet } from "svelte"
+
+  const DEFAULT_SELECTED_OPTION_TAG = "span"
+  type SelectedOptionRenderPropArg = {
+    option: Snippet
+  }
+  type SelectedOptionPropsWeControl = never
+
+  export type ListboxSelectedOptionProps = Props<
+    typeof DEFAULT_SELECTED_OPTION_TAG,
+    SelectedOptionRenderPropArg,
+    {
+      element?: HTMLElement
+      options: Snippet
+      placeholder?: Snippet
+    }
+  >
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG">import { useData, ValueMode } from "./Listbox.svelte";
-import { setContext } from "svelte";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-let {
-  ref = $bindable(),
-  options,
-  placeholder,
-  ...theirProps
-} = $props();
-const data = useData("ListboxSelectedOption");
-const shouldShowPlaceholder = $derived(
-  data.value === void 0 || data.value === null || data.mode === ValueMode.Multi && Array.isArray(data.value) && data.value.length === 0
-);
-setContext("SelectedOptionContext", true);
+<script lang="ts">
+  import { useData, ValueMode } from "./Listbox.svelte"
+  import { setContext } from "svelte"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  let { element = $bindable(), options, placeholder, ...theirProps }: ListboxSelectedOptionProps = $props()
+
+  const data = useData("ListboxSelectedOption")
+
+  const shouldShowPlaceholder = $derived(
+    data.value === undefined ||
+      data.value === null ||
+      (data.mode === ValueMode.Multi && Array.isArray(data.value) && data.value.length === 0)
+  )
+
+  setContext("SelectedOptionContext", true)
 </script>
 
-{#snippet children()}
+{#snippet option()}
   {#if placeholder && shouldShowPlaceholder}
     {@render placeholder()}
   {:else}
@@ -26,8 +46,9 @@ setContext("SelectedOptionContext", true);
 {/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,38 +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<[{
-            slot: SelectedOptionRenderPropArg;
-            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,57 +1,81 @@
-<script lang="ts" module>let DEFAULT_MENU_TAG = "svelte:fragment";
-</script>
+<script lang="ts" module>
+  import type { PropsAsChild } from "../utils/types.js"
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_MENU_TAG">import { ActivationTrigger, createMenuContext, MenuStates } 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 } = $props();
-const context = createMenuContext({
-  __demoMode,
-  menuState: __demoMode ? MenuStates.Open : MenuStates.Closed,
-  buttonElement: null,
-  itemsElement: null,
-  items: [],
-  searchQuery: "",
-  activeItemIndex: null,
-  activationTrigger: ActivationTrigger.Other
-});
-const { menuState, itemsElement, buttonElement } = $derived(context);
-const outsideClickEnabled = $derived(menuState === MenuStates.Open);
-useOutsideClick({
-  get enabled() {
-    return outsideClickEnabled;
-  },
-  get containers() {
-    return [buttonElement, itemsElement];
-  },
-  cb: (event, target) => {
-    context.closeMenu();
-    if (!isFocusableElement(target, FocusableMode.Loose)) {
-      event.preventDefault();
-      buttonElement?.focus();
-    }
+  let DEFAULT_MENU_TAG = "svelte:fragment"
+  type MenuRenderPropArg = {
+    open: boolean
+    close: () => void
   }
-});
-const slot = $derived({
-  open: context.menuState === MenuStates.Open,
-  close: context.closeMenu
-});
-useFloatingProvider();
-const openClosed = $derived(
-  match(menuState, {
-    [MenuStates.Open]: State.Open,
-    [MenuStates.Closed]: State.Closed
+  type MenuPropsWeControl = never
+
+  export type MenuProps = PropsAsChild<
+    MenuRenderPropArg,
+    {
+      __demoMode?: boolean
+    }
+  >
+</script>
+
+<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 { __demoMode = false, ...theirProps }: MenuProps = $props()
+
+  const context = createMenuContext({
+    __demoMode,
+    menuState: __demoMode ? MenuStates.Open : MenuStates.Closed,
+    buttonElement: null,
+    itemsElement: null,
+    items: [],
+    searchQuery: "",
+    activeItemIndex: null,
+    activationTrigger: ActivationTrigger.Other,
+  } as StateDefinition)
+  const { menuState, itemsElement, buttonElement } = $derived(context)
+
+  // Handle outside click
+  const outsideClickEnabled = $derived(menuState === MenuStates.Open)
+  useOutsideClick({
+    get enabled() {
+      return outsideClickEnabled
+    },
+    get containers() {
+      return [buttonElement, itemsElement]
+    },
+    cb: (event, target) => {
+      context.closeMenu()
+
+      if (!isFocusableElement(target, FocusableMode.Loose)) {
+        event.preventDefault()
+        buttonElement?.focus()
+      }
+    },
+  })
+
+  const slot = $derived({
+    open: context.menuState === MenuStates.Open,
+    close: context.closeMenu,
+  } satisfies MenuRenderPropArg)
+
+  useFloatingProvider()
+
+  const openClosed = $derived(
+    match(menuState, {
+      [MenuStates.Open]: State.Open,
+      [MenuStates.Closed]: State.Closed,
+    })
+  )
+  createOpenClosedContext({
+    get value() {
+      return openClosed
+    },
   })
-);
-createOpenClosedContext({
-  get value() {
-    return openClosed;
-  }
-});
 </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,38 +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<[{
-            slot: 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,129 +1,169 @@
-<script lang="ts" module>import { tick } from "svelte";
-const DEFAULT_BUTTON_TAG = "button";
-</script>
+<script lang="ts" module>
+  import { tick } from "svelte"
+  import type { Props } from "../utils/types.js"
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_BUTTON_TAG">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 { 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";
-import { untrack } from "svelte";
-import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-const internalId = useId();
-let {
-  ref = $bindable(),
-  id = `headlessui-menu-button-${internalId}`,
-  disabled = false,
-  autofocus = false,
-  ...theirProps
-} = $props();
-const _state = useMenuContext("MenuButton");
-const floatingReference = useFloatingReference();
-const { setReference } = $derived(floatingReference);
-const { getReferenceProps: getFloatingReferenceProps } = useFloatingReferenceProps();
-$effect(() => {
-  untrack(() => _state.setButtonElement(ref ? ref : null));
-  setReference(ref);
-});
-const handleKeyDown = async (event) => {
-  switch (event.key) {
-    case " ":
-    case "Enter":
-    case "ArrowDown":
-      event.preventDefault();
-      event.stopPropagation();
-      _state.openMenu();
-      await tick();
-      _state.goToItem({ focus: Focus.First });
-      break;
-    case "ArrowUp":
-      event.preventDefault();
-      event.stopPropagation();
-      _state.openMenu();
-      await tick();
-      _state.goToItem({ focus: Focus.Last });
-      break;
-  }
-};
-const handleKeyUp = (event) => {
-  switch (event.key) {
-    case " ":
-      event.preventDefault();
-      break;
+  const DEFAULT_BUTTON_TAG = "button" as const
+  type ButtonRenderPropArg = {
+    open: boolean
+    active: boolean
+    hover: boolean
+    focus: boolean
+    disabled: boolean
+    autofocus: boolean
   }
-};
-const handleClick = async (event) => {
-  if (disabled) return;
-  if (_state.menuState === MenuStates.Open) {
-    _state.closeMenu();
-    await tick();
-    _state.buttonElement?.focus({ preventScroll: true });
-  } else {
-    event.preventDefault();
-    _state.openMenu();
-  }
-};
-const { isFocusVisible: focus, focusProps } = $derived(
-  useFocusRing({
-    get autofocus() {
-      return autofocus;
+  type ButtonPropsWeControl = "aria-controls" | "aria-expanded" | "aria-haspopup"
+
+  export type MenuButtonProps = Props<
+    typeof DEFAULT_BUTTON_TAG,
+    ButtonRenderPropArg,
+    {
+      element?: HTMLElement
+      id?: string
+      disabled?: boolean
+      autofocus?: boolean
+      type?: string
     }
+  >
+</script>
+
+<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 { 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"
+  import { untrack } from "svelte"
+  import ElementOrComponent from "../utils/ElementOrComponent.svelte"
+
+  const internalId = useId()
+  let {
+    element = $bindable(),
+    id = `headlessui-menu-button-${internalId}`,
+    disabled = false,
+    autofocus = false,
+    ...theirProps
+  }: MenuButtonProps = $props()
+  const _state = useMenuContext("MenuButton")
+  const floatingReference = useFloatingReference()
+  const { setReference } = $derived(floatingReference)
+  const { getReferenceProps: getFloatingReferenceProps } = useFloatingReferenceProps()
+  $effect(() => {
+    untrack(() => _state.setButtonElement(element ? (element as HTMLButtonElement) : null))
+    setReference(element)
   })
-);
-const { isHovered: hover, hoverProps } = $derived(
-  useHover({
-    get disabled() {
-      return disabled;
+
+  const handleKeyDown = async (event: KeyboardEvent) => {
+    switch (event.key) {
+      // Ref: https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/#keyboard-interaction-13
+
+      case " ":
+      case "Enter":
+      case "ArrowDown":
+        event.preventDefault()
+        event.stopPropagation()
+        _state.openMenu()
+        await tick()
+        _state.goToItem({ focus: Focus.First })
+        break
+
+      case "ArrowUp":
+        event.preventDefault()
+        event.stopPropagation()
+        _state.openMenu()
+        await tick()
+        _state.goToItem({ focus: Focus.Last })
+        break
     }
-  })
-);
-const { pressed: active, pressProps } = $derived(
-  useActivePress({
-    get disabled() {
-      return disabled;
+  }
+
+  const handleKeyUp = (event: KeyboardEvent) => {
+    switch (event.key) {
+      case " ":
+        // Required for firefox, event.preventDefault() in handleKeyDown for
+        // the Space key doesn't cancel the handleKeyUp, which in turn
+        // triggers a *click*.
+        event.preventDefault()
+        break
     }
-  })
-);
-const slot = $derived({
-  open: _state.menuState === MenuStates.Open,
-  active: active || _state.menuState === MenuStates.Open,
-  disabled,
-  hover,
-  focus,
-  autofocus: autofocus ?? false
-});
-const buttonType = useResolveButtonType({
-  get props() {
-    return { type: theirProps.type, as: theirProps.as };
-  },
-  get ref() {
-    return { current: _state.buttonElement };
   }
-});
-const ourProps = $derived(
-  mergeProps(
-    {
-      ...getFloatingReferenceProps(),
-      id,
-      type: buttonType.type,
-      "aria-haspopup": "menu",
-      "aria-controls": _state.itemsElement?.id,
-      "aria-expanded": _state.menuState === MenuStates.Open,
-      disabled: disabled || void 0,
-      autofocus,
-      onkeydown: handleKeyDown,
-      onkeyup: handleKeyUp,
-      onclick: handleClick
+
+  const handleClick = async (event: MouseEvent) => {
+    //if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
+    if (disabled) return
+    if (_state.menuState === MenuStates.Open) {
+      _state.closeMenu()
+      await tick()
+      _state.buttonElement?.focus({ preventScroll: true })
+    } else {
+      event.preventDefault()
+      _state.openMenu()
+    }
+  }
+
+  const { isFocusVisible: focus, focusProps } = $derived(
+    useFocusRing({
+      get autofocus() {
+        return autofocus
+      },
+    })
+  )
+  const { isHovered: hover, hoverProps } = $derived(
+    useHover({
+      get disabled() {
+        return disabled
+      },
+    })
+  )
+  const { pressed: active, pressProps } = $derived(
+    useActivePress({
+      get disabled() {
+        return disabled
+      },
+    })
+  )
+
+  const slot = $derived({
+    open: _state.menuState === MenuStates.Open,
+    active: active || _state.menuState === MenuStates.Open,
+    disabled,
+    hover,
+    focus,
+    autofocus: autofocus ?? false,
+  } satisfies ButtonRenderPropArg)
+
+  const buttonType = useResolveButtonType({
+    get props() {
+      return { type: theirProps.type, as: DEFAULT_BUTTON_TAG }
     },
-    focusProps,
-    hoverProps,
-    pressProps
+    get ref() {
+      return { current: _state.buttonElement }
+    },
+  })
+
+  const ourProps = $derived(
+    mergeProps(
+      {
+        ...getFloatingReferenceProps(),
+        id,
+        type: buttonType.type,
+        "aria-haspopup": "menu",
+        "aria-controls": _state.itemsElement?.id,
+        "aria-expanded": _state.menuState === MenuStates.Open,
+        disabled: disabled || undefined,
+        autofocus,
+        onkeydown: handleKeyDown,
+        onkeyup: handleKeyUp,
+        onclick: handleClick,
+      },
+      focusProps,
+      hoverProps,
+      pressProps
+    )
   )
-);
 </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 />