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

package/dist/menu/Menu.svelte

@@ -1,192 +1,15 @@
-<script lang="ts" module>import { useOutsideClick } from "../hooks/use-outside-click.svelte.js";
-import { createFloatingContext } from "../internal/floating.svelte.js";
+<script lang="ts" module>let DEFAULT_MENU_TAG = "svelte:fragment";
+</script>
+
+<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 { calculateActiveIndex, Focus } from "../utils/calculate-active-index.js";
 import ElementOrComponent from "../utils/ElementOrComponent.svelte";
-import { FocusableMode, isFocusableElement, sortByDomNode } from "../utils/focus-management.js";
+import { FocusableMode, isFocusableElement } from "../utils/focus-management.js";
 import { match } from "../utils/match.js";
-let DEFAULT_MENU_TAG = "svelte:fragment";
-</script>
-
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_MENU_TAG">import { setContext } from "svelte";
-import {
-  ActivationTrigger,
-  MenuStates
-} from "./context.svelte.js";
-function adjustOrderedState(state, adjustment = (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);
-  let adjustedActiveItemIndex = currentActiveItem ? sortedItems.indexOf(currentActiveItem) : null;
-  if (adjustedActiveItemIndex === -1) {
-    adjustedActiveItemIndex = null;
-  }
-  return {
-    items: sortedItems,
-    activeItemIndex: adjustedActiveItemIndex
-  };
-}
-const stateReducer = (initialState) => {
-  let _state2 = $state(initialState);
-  return {
-    get menuState() {
-      return _state2.menuState;
-    },
-    get buttonElement() {
-      return _state2.buttonElement;
-    },
-    get itemsElement() {
-      return _state2.itemsElement;
-    },
-    get items() {
-      return _state2.items;
-    },
-    get searchQuery() {
-      return _state2.searchQuery;
-    },
-    get activeItemIndex() {
-      return _state2.activeItemIndex;
-    },
-    get activationTrigger() {
-      return _state2.activationTrigger;
-    },
-    get __demoMode() {
-      return _state2.__demoMode;
-    },
-    closeMenu() {
-      if (_state2.menuState === MenuStates.Closed) return _state2;
-      _state2.activeItemIndex = null;
-      _state2.menuState = MenuStates.Closed;
-      return _state2;
-    },
-    openMenu() {
-      if (_state2.menuState === MenuStates.Open) return _state2;
-      _state2.__demoMode = false;
-      _state2.menuState = MenuStates.Open;
-      return _state2;
-    },
-    goToItem(action) {
-      if (_state2.menuState === MenuStates.Closed) return _state2;
-      _state2.searchQuery = "";
-      _state2.activationTrigger = action.trigger ?? ActivationTrigger.Other;
-      _state2.__demoMode = false;
-      if (action.focus === Focus.Nothing) {
-        _state2.activeItemIndex = null;
-        return _state2;
-      }
-      if (action.focus === Focus.Specific) {
-        _state2.activeItemIndex = _state2.items.findIndex((o) => o.id === action.id);
-        return _state2;
-      } else if (action.focus === Focus.Previous) {
-        let activeItemIdx = _state2.activeItemIndex;
-        if (activeItemIdx !== null) {
-          let currentDom = _state2.items[activeItemIdx].dataRef.current.domRef;
-          let previousItemIndex = calculateActiveIndex(action, {
-            resolveItems: () => _state2.items,
-            resolveActiveIndex: () => _state2.activeItemIndex,
-            resolveId: (item) => item.id,
-            resolveDisabled: (item) => item.dataRef.current.disabled
-          });
-          if (previousItemIndex !== null) {
-            let previousDom = _state2.items[previousItemIndex].dataRef.current.domRef;
-            if (
-              // Next to each other
-              currentDom.current?.previousElementSibling === previousDom.current || // Or already the first element
-              previousDom.current?.previousElementSibling === null
-            ) {
-              _state2.activeItemIndex = previousItemIndex;
-              return _state2;
-            }
-          }
-        }
-      } else if (action.focus === Focus.Next) {
-        let activeItemIdx = _state2.activeItemIndex;
-        if (activeItemIdx !== null) {
-          let currentDom = _state2.items[activeItemIdx].dataRef.current.domRef;
-          let nextItemIndex = calculateActiveIndex(action, {
-            resolveItems: () => _state2.items,
-            resolveActiveIndex: () => _state2.activeItemIndex,
-            resolveId: (item) => item.id,
-            resolveDisabled: (item) => item.dataRef.current.disabled
-          });
-          if (nextItemIndex !== null) {
-            let nextDom = _state2.items[nextItemIndex].dataRef.current.domRef;
-            if (
-              // Next to each other
-              currentDom.current?.nextElementSibling === nextDom.current || // Or already the last element
-              nextDom.current?.nextElementSibling === null
-            ) {
-              _state2.activeItemIndex = nextItemIndex;
-              return _state2;
-            }
-          }
-        }
-      }
-      let adjustedState = adjustOrderedState(_state2);
-      let activeItemIndex = calculateActiveIndex(action, {
-        resolveItems: () => adjustedState.items,
-        resolveActiveIndex: () => adjustedState.activeItemIndex,
-        resolveId: (item) => item.id,
-        resolveDisabled: (item) => item.dataRef.current.disabled
-      });
-      _state2.items = adjustedState.items;
-      _state2.activeItemIndex = activeItemIndex;
-      return _state2;
-    },
-    search(value) {
-      let wasAlreadySearching = _state2.searchQuery !== "";
-      let offset = wasAlreadySearching ? 0 : 1;
-      let searchQuery = _state2.searchQuery + value.toLowerCase();
-      let reOrderedItems = _state2.activeItemIndex !== null ? _state2.items.slice(_state2.activeItemIndex + offset).concat(_state2.items.slice(0, _state2.activeItemIndex + offset)) : _state2.items;
-      let matchingItem = reOrderedItems.find(
-        (item) => item.dataRef.current.textValue?.startsWith(searchQuery) && !item.dataRef.current.disabled
-      );
-      let matchIdx = matchingItem ? _state2.items.indexOf(matchingItem) : -1;
-      if (matchIdx === -1 || matchIdx === _state2.activeItemIndex) {
-        _state2.searchQuery = searchQuery;
-        return _state2;
-      }
-      _state2.searchQuery = searchQuery;
-      _state2.activeItemIndex = matchIdx;
-      _state2.activationTrigger = ActivationTrigger.Other;
-      return _state2;
-    },
-    clearSearch() {
-      if (_state2.searchQuery === "") return _state2;
-      _state2.searchQuery = "";
-      return _state2;
-    },
-    registerItem(id, dataRef) {
-      let item = { id, dataRef };
-      let adjustedState = adjustOrderedState(_state2, (items) => [...items, item]);
-      _state2.items = adjustedState.items;
-      _state2.activeItemIndex = adjustedState.activeItemIndex;
-      return _state2;
-    },
-    unregisterItem(id) {
-      let adjustedState = adjustOrderedState(_state2, (items) => {
-        let idx = items.findIndex((a) => a.id === id);
-        if (idx !== -1) items.splice(idx, 1);
-        return items;
-      });
-      _state2.items = adjustedState.items;
-      _state2.activeItemIndex = adjustedState.activeItemIndex;
-      _state2.activationTrigger = ActivationTrigger.Other;
-      return _state2;
-    },
-    setButtonElement(element) {
-      if (_state2.buttonElement === element) return _state2;
-      _state2.buttonElement = element;
-      return _state2;
-    },
-    setItemsElement(element) {
-      if (_state2.itemsElement === element) return _state2;
-      _state2.itemsElement = element;
-      return _state2;
-    }
-  };
-};
 let { ref = $bindable(), __demoMode = false, ...theirProps } = $props();
-const _state = stateReducer({
+const context = createMenuContext({
   __demoMode,
   menuState: __demoMode ? MenuStates.Open : MenuStates.Closed,
   buttonElement: null,
@@ -196,8 +19,7 @@ const _state = stateReducer({
   activeItemIndex: null,
   activationTrigger: ActivationTrigger.Other
 });
-const { menuState, itemsElement, buttonElement } = $derived(_state);
-setContext("MenuContext", _state);
+const { menuState, itemsElement, buttonElement } = $derived(context);
 const outsideClickEnabled = $derived(menuState === MenuStates.Open);
 useOutsideClick({
   get enabled() {
@@ -207,7 +29,7 @@ useOutsideClick({
     return [buttonElement, itemsElement];
   },
   cb: (event, target) => {
-    _state.closeMenu();
+    context.closeMenu();
     if (!isFocusableElement(target, FocusableMode.Loose)) {
       event.preventDefault();
       buttonElement?.focus();
@@ -215,10 +37,10 @@ useOutsideClick({
   }
 });
 const slot = $derived({
-  open: _state.menuState === MenuStates.Open,
-  close: _state.closeMenu
+  open: context.menuState === MenuStates.Open,
+  close: context.closeMenu
 });
-createFloatingContext();
+useFloatingProvider();
 const openClosed = $derived(
   match(menuState, {
     [MenuStates.Open]: State.Open,

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

@@ -1,5 +1,4 @@
 import type { ElementType, Props } from "../utils/types.js";
-import type { Snippet } from "svelte";
 declare let DEFAULT_MENU_TAG: string;
 type MenuRenderPropArg = {
     open: boolean;
@@ -9,21 +8,20 @@ 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]>;
 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;
+    } & (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;
-    } & (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>;
-    };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -32,9 +30,7 @@ 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']>;
+    <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;

package/dist/menu/MenuButton.svelte

@@ -7,7 +7,7 @@ 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";
@@ -22,7 +22,9 @@ let {
   ...theirProps
 } = $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 : null));
   setReference(ref);

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

@@ -16,24 +16,23 @@ export type MenuButtonProps<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG
     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;
+    } & (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<[{
+            slot: ButtonRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: ButtonRenderPropArg) => string) | null | 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>;
-    };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -42,9 +41,7 @@ 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']>;
+    <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;

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

@@ -6,21 +6,20 @@ type HeadingPropsWeControl = "role";
 export type MenuHeadingProps<TTag extends ElementType = typeof DEFAULT_HEADING_TAG> = Props<TTag, HeadingRenderPropArg, HeadingPropsWeControl, {
     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;
+    } & (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<[{
+            slot: HeadingRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: HeadingRenderPropArg) => string) | null | 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>;
-    };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -29,9 +28,7 @@ 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']>;
+    <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;

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

@@ -1,4 +1,4 @@
-import type { Props, ElementType, Children } from "../utils/types.js";
+import type { Props, ElementType } from "../utils/types.js";
 declare const DEFAULT_ITEM_TAG: "svelte:fragment";
 type ItemRenderPropArg = {
     /** @deprecated use `focus` instead */
@@ -9,28 +9,25 @@ type ItemRenderPropArg = {
     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 | "children", {
+export type MenuItemProps<TTag extends ElementType = typeof DEFAULT_ITEM_TAG> = Props<TTag, ItemRenderPropArg, ItemPropsWeControl, {
     id?: string;
     disabled?: boolean;
-    children: Children<ItemRenderPropArg>;
 }>;
-export type MenuItemChildren = Children<ItemRenderPropArg>;
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_ITEM_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "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?: Children<ItemRenderPropArg> | 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<[{
+            slot: ItemRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: ItemRenderPropArg) => string) | null | 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: ItemRenderPropArg) => string) | undefined;
-    } : {}) & {
+    } & {
         id?: string;
         disabled?: boolean;
-        children: Children<ItemRenderPropArg>;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
     };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -39,9 +36,7 @@ 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']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): 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;

package/dist/menu/MenuItems.svelte

@@ -36,18 +36,23 @@ let {
   transition = false,
   ...theirProps
 } = $props();
-const anchor = $derived(useResolvedAnchor(rawAnchor));
+const resolvedAnchor = useResolvedAnchor({
+  get anchor() {
+    return rawAnchor;
+  }
+});
+const { anchor } = $derived(resolvedAnchor);
 const _state = useMenuContext("MenuOptions");
 const floatingPanel = useFloatingPanel({
   get placement() {
     return anchor;
   }
 });
-const { setFloating, style } = $derived(floatingPanel);
+const { setFloating, styles } = $derived(floatingPanel);
 const getFloatingPanelProps = useFloatingPanelProps();
 $effect(() => {
-  untrack(() => _state.setItemsElement(ref || null));
-  if (anchor) setFloating(ref);
+  untrack(() => _state.setItemsElement(ref ?? null));
+  if (anchor) setFloating(ref ?? null);
 });
 const ownerDocument = $derived(getOwnerDocument(_state.itemsElement));
 $effect(() => {
@@ -211,8 +216,8 @@ const buttonSize = useElementSize({
   },
   unit: true
 });
-const ourProps = $derived(
-  mergeProps(anchor ? getFloatingPanelProps() : {}, {
+const ourProps = $derived({
+  ...mergeProps(anchor ? getFloatingPanelProps() : {}, {
     "aria-activedescendant": _state.activeItemIndex === null ? void 0 : _state.items[_state.activeItemIndex]?.id,
     "aria-labelledby": _state.buttonElement?.id,
     id,
@@ -223,11 +228,10 @@ const ourProps = $derived(
     // to skip focusing the `MenuItems` when pressing the tab key on an
     // open `Menu`, and go to the next focusable element.
     tabindex: _state.menuState === MenuStates.Open ? 0 : void 0,
-    ref,
-    style: [theirProps.style, style, `--button-width: ${buttonSize.width}`].filter(Boolean).join("; "),
-    ...transitionDataAttributes(transitionData)
-  })
-);
+    style: [theirProps.style, styles, `--button-width: ${buttonSize.width}`].filter(Boolean).join("; ")
+  }),
+  ...transitionDataAttributes(transitionData)
+});
 </script>
 
 <Portal enabled={portal ? theirProps.static || visible : false}>

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

@@ -14,17 +14,18 @@ export type MenuItemsProps<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>
     modal?: boolean;
     transition?: boolean;
 } & PropsForFeatures<typeof ItemsRenderFeatures>>;
-export type MenuItemsChildren = Snippet<[ItemsRenderPropArg]>;
 import { type Snippet } from "svelte";
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "anchor" | "unmount" | "static" | "id" | "transition" | "portal" | "modal" | ItemsPropsWeControl> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
-        children?: import("../utils/types.js").Children<ItemsRenderPropArg> | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "anchor" | "unmount" | "static" | "id" | "transition" | "portal" | "modal" | ItemsPropsWeControl> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
+        children?: Snippet<[{
+            slot: ItemsRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: ItemsRenderPropArg) => string) | null | 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: ItemsRenderPropArg) => string) | undefined;
-    } : {}) & {
+    } & {
         id?: string;
         anchor?: AnchorProps;
         portal?: boolean;
@@ -34,9 +35,7 @@ declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_ITEMS_
         static?: boolean | undefined;
         unmount?: boolean | undefined;
     };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -45,9 +44,7 @@ interface $$IsomorphicComponent {
     new <TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
     } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TTag>['exports']>;
+    <TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const MenuItems: $$IsomorphicComponent;

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

@@ -4,19 +4,18 @@ declare const DEFAULT_SECTION_TAG: "div";
 type SectionRenderPropArg = {};
 type SectionPropsWeControl = "role" | "aria-labelledby";
 export type MenuSectionProps<TTag extends ElementType = typeof DEFAULT_SECTION_TAG> = Props<TTag, SectionRenderPropArg, SectionPropsWeControl>;
-export type MenuSectionChildren = Snippet<[SectionRenderPropArg]>;
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_SECTION_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | SectionPropsWeControl> 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<SectionRenderPropArg> | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | SectionPropsWeControl> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
+        children?: Snippet<[{
+            slot: SectionRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: SectionRenderPropArg) => string) | null | 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: SectionRenderPropArg) => string) | undefined;
-    } : {});
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
     };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -25,9 +24,7 @@ interface $$IsomorphicComponent {
     new <TTag extends ElementType = typeof DEFAULT_SECTION_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
     } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_SECTION_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TTag>['exports']>;
+    <TTag extends ElementType = typeof DEFAULT_SECTION_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const MenuSection: $$IsomorphicComponent;

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

@@ -1,22 +1,20 @@
-import type { Snippet } from "svelte";
 import type { ElementType, Props } from "../utils/types.js";
 declare const DEFAULT_SEPARATOR_TAG: "div";
 type SeparatorRenderPropArg = {};
 type SeparatorPropsWeControl = "role";
 export type MenuSeparatorProps<TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG> = Props<TTag, SeparatorRenderPropArg, SeparatorPropsWeControl>;
-export type MenuSeparatorChildren = Snippet<[SeparatorRenderPropArg]>;
 declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG> {
     props(): {
         as?: TTag | undefined;
-    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "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<SeparatorRenderPropArg> | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("slot" | "as" | "children" | "class" | "ref") | "role"> extends infer T extends keyof import("../utils/types.js").PropsOf<TTag> ? { [P in T]: import("../utils/types.js").PropsOf<TTag>[P]; } : never) & {
+        children?: import("svelte").Snippet<[{
+            slot: SeparatorRenderPropArg;
+            props: Record<string, any>;
+        }]> | undefined;
+        class?: string | ((bag: SeparatorRenderPropArg) => string) | null | 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: SeparatorRenderPropArg) => string) | undefined;
-    } : {});
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
     };
+    events(): {};
     slots(): {};
     bindings(): "ref";
     exports(): {};
@@ -25,9 +23,7 @@ interface $$IsomorphicComponent {
     new <TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag>['props']>, ReturnType<__sveltets_Render<TTag>['events']>, ReturnType<__sveltets_Render<TTag>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<TTag>['bindings']>;
     } & ReturnType<__sveltets_Render<TTag>['exports']>;
-    <TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
-    }): ReturnType<__sveltets_Render<TTag>['exports']>;
+    <TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {}): ReturnType<__sveltets_Render<TTag>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const MenuSeparator: $$IsomorphicComponent;

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

@@ -1,4 +1,4 @@
-import type { Focus } from "../utils/calculate-active-index.js";
+import { Focus } from "../utils/calculate-active-index.js";
 import type { MutableRefObject } from "../utils/ref.svelte.js";
 export declare enum MenuStates {
     Open = 0,
@@ -45,3 +45,4 @@ export type MenuContext = StateDefinition & {
     setItemsElement(element: HTMLElement | null): void;
 };
 export declare function useMenuContext(component: string): MenuContext;
+export declare const createMenuContext: (initialState: StateDefinition) => MenuContext;