@pzerelles/headlessui-svelte 2.1.1-next.1 → 2.1.2-next.10

package/dist/listbox/ListboxOptions.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">import { mergeProps, RenderFeatures } from "../utils/render.js";
+<script lang="ts" module>import { mergeProps, RenderFeatures } from "../utils/render.js";
 import {
   useFloatingPanel,
   useFloatingPanelProps,
@@ -8,7 +8,7 @@ const DEFAULT_OPTIONS_TAG = "div";
 let OptionsRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static;
 </script>
 
-<script lang="ts" generics="TTag extends ElementType">import { useId } from "../hooks/use-id.js";
+<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG">import { useId } from "../hooks/use-id.js";
 import { ListboxStates, useActions, useData, ValueMode } from "./Listbox.svelte";
 import { getOwnerDocument } from "../utils/owner.js";
 import { State, useOpenClosed } from "../internal/open-closed.js";
@@ -23,20 +23,19 @@ import { match } from "../utils/match.js";
 import { Focus } from "../utils/calculate-active-index.js";
 import { focusFrom, Focus as FocusManagementFocus } from "../utils/focus-management.js";
 import { useElementSize } from "../hooks/use-element-size.svelte.js";
-import { getContext, setContext } from "svelte";
+import { setContext } from "svelte";
 import Hidden from "../internal/Hidden.svelte";
 import Portal from "../portal/Portal.svelte";
 import { stateFromSlot } from "../utils/state.js";
+import ElementOrComponent from "../utils/ElementOrComponent.svelte";
 const internalId = useId();
 let {
-  as = DEFAULT_OPTIONS_TAG,
   ref = $bindable(),
   id = `headlessui-listbox-options-${internalId}`,
   anchor: rawAnchor,
   portal = false,
   modal = true,
   transition = false,
-  children,
   static: isStatic = false,
   unmount = true,
   ...theirProps
@@ -93,7 +92,7 @@ useInertOthers({
   },
   elements: {
     get allowed() {
-      return () => [data.buttonRef.current, data.optionsRef.current];
+      return [data.buttonRef.current, data.optionsRef.current];
     }
   }
 });
@@ -124,7 +123,7 @@ const selectedOptionIndex = () => {
   if (idx === -1) idx = 0;
   return idx;
 };
-const anchorOptions = (() => {
+const anchorOptions = $derived.by(() => {
   if (anchor == null) return void 0;
   if (selectedOptionIndex === null) return { ...anchor, inner: void 0 };
   let elements = Array.from(data.listRef.current.values());
@@ -135,8 +134,12 @@ const anchorOptions = (() => {
       index: selectedOptionIndex
     }
   };
-})();
-const floatingPanel = useFloatingPanel(anchorOptions);
+});
+const floatingPanel = useFloatingPanel({
+  get placement() {
+    return anchorOptions ?? null;
+  }
+});
 const { setFloating, style } = $derived(floatingPanel);
 const getFloatingPanelProps = useFloatingPanelProps();
 $effect(() => {
@@ -224,7 +227,6 @@ const buttonSize = useElementSize({
 const ourProps = $derived(
   mergeProps(anchor ? getFloatingPanelProps() : {}, {
     id,
-    ref: optionsRef,
     "aria-activedescendant": data.activeOptionIndex === null ? void 0 : data.options[data.activeOptionIndex]?.id,
     "aria-multiselectable": data.mode === ValueMode.Multi ? true : void 0,
     "aria-labelledby": labelledby,
@@ -253,15 +255,14 @@ setContext("ListboxDataContext", derivedData);
   {#if !panelEnabled && unmount && !isStatic}
     <Hidden as="span" bind:ref aria-hidden="true" {...ourProps} />
   {:else}
-    <svelte:element
-      this={as}
-      bind:this={ref}
-      {...ourProps}
-      {...theirProps}
-      hidden={isStatic || panelEnabled ? undefined : true}
-      style={isStatic || panelEnabled ? theirProps.style : "display: none;"}
-    >
-      {#if children}{@render children(slot)}{/if}
-    </svelte:element>
+    <ElementOrComponent
+      {ourProps}
+      {theirProps}
+      slots={slot}
+      defaultTag={DEFAULT_OPTIONS_TAG}
+      features={OptionsRenderFeatures}
+      name="MenuItems"
+      bind:ref
+    />
   {/if}
 </Portal>

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

@@ -1,4 +1,4 @@
-import type { ElementType, HTMLElementType, Props } from "../utils/types.js";
+import type { ElementType, 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";
@@ -8,16 +8,32 @@ type OptionsRenderPropArg = {
 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, {
+    id?: string;
     anchor?: AnchorPropsWithSelection;
     portal?: boolean;
     modal?: boolean;
     transition?: boolean;
-    ref?: HTMLElementType<TTag> | null;
 } & PropsForFeatures<typeof OptionsRenderFeatures>>;
 export type ListboxOptionsChildren = Snippet<[OptionsRenderPropArg]>;
 import { type Snippet } from "svelte";
-declare class __sveltets_Render<TTag extends ElementType> {
-    props(): ListboxOptionsProps<TTag>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "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?: import("../utils/types.js").Children<OptionsRenderPropArg> | 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: OptionsRenderPropArg) => string) | undefined;
+    } : {}) & {
+        id?: string;
+        anchor?: AnchorPropsWithSelection;
+        portal?: boolean;
+        modal?: boolean;
+        transition?: boolean;
+    } & {
+        static?: boolean | undefined;
+        unmount?: boolean | undefined;
+    };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
@@ -26,14 +42,14 @@ declare class __sveltets_Render<TTag extends ElementType> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TTag extends ElementType>(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']>> & {
+    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>(internal: unknown, props: ReturnType<__sveltets_Render<TTag>['props']> & {
+    <TTag extends ElementType = typeof DEFAULT_OPTIONS_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 ListboxOptions: $$IsomorphicComponent;
-type ListboxOptions<TTag extends ElementType> = InstanceType<typeof ListboxOptions<TTag>>;
+type ListboxOptions<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG> = InstanceType<typeof ListboxOptions<TTag>>;
 export default ListboxOptions;

package/dist/listbox/ListboxSelectedOption.svelte

@@ -1,10 +1,11 @@
-<script lang="ts" context="module">const DEFAULT_SELECTED_OPTION_TAG = "svelte:fragment";
+<script lang="ts" module>const DEFAULT_SELECTED_OPTION_TAG = "svelte:fragment";
 </script>
 
-<script lang="ts" generics="TTag extends ElementType, TType">import { useData, ValueMode } from "./Listbox.svelte";
+<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 {
-  as = DEFAULT_SELECTED_OPTION_TAG,
+  ref = $bindable(),
   options,
   placeholder,
   ...theirProps
@@ -16,10 +17,17 @@ const shouldShowPlaceholder = $derived(
 setContext("SelectedOptionContext", true);
 </script>
 
-<svelte:element this={as} {...theirProps}>
+{#snippet children()}
   {#if placeholder && shouldShowPlaceholder}
-    <svelte:component this={placeholder} />
+    {@render placeholder()}
   {:else}
-    <svelte:component this={options} />
+    {@render options()}
   {/if}
-</svelte:element>
+{/snippet}
+
+<ElementOrComponent
+  theirProps={{ ...theirProps, children }}
+  defaultTag={DEFAULT_SELECTED_OPTION_TAG}
+  name="ListboxSelectedOption"
+  bind:ref
+></ElementOrComponent>

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

@@ -1,30 +1,40 @@
 import type { ElementType, Props } from "../utils/types.js";
-import type { Component } from "svelte";
+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, {
-    options: Component;
-    placeholder?: Component;
+    options: Snippet;
+    placeholder?: Snippet;
 }>;
-declare class __sveltets_Render<TTag extends ElementType, TType> {
-    props(): ListboxSelectedOptionProps<TTag>;
+declare class __sveltets_Render<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG> {
+    props(): {
+        as?: TTag | undefined;
+    } & (Exclude<keyof import("../utils/types.js").PropsOf<TTag>, ("as" | "children" | "refName" | "class") | "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?: import("../utils/types.js").Children<SelectedOptionRenderPropArg> | 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: SelectedOptionRenderPropArg) => string) | undefined;
+    } : {}) & {
+        options: Snippet;
+        placeholder?: Snippet;
+    };
     events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
     slots(): {};
-    bindings(): "";
+    bindings(): "ref";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <TTag extends ElementType, TType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TTag, TType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TTag, TType>['props']>, ReturnType<__sveltets_Render<TTag, TType>['events']>, ReturnType<__sveltets_Render<TTag, TType>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<TTag, TType>['bindings']>;
-    } & ReturnType<__sveltets_Render<TTag, TType>['exports']>;
-    <TTag extends ElementType, TType>(internal: unknown, props: ReturnType<__sveltets_Render<TTag, TType>['props']> & {
-        $$events?: ReturnType<__sveltets_Render<TTag, TType>['events']>;
-    }): ReturnType<__sveltets_Render<TTag, TType>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+    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']> & {
+        $$events?: ReturnType<__sveltets_Render<TTag>['events']>;
+    }): ReturnType<__sveltets_Render<TTag>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const ListboxSelectedOption: $$IsomorphicComponent;
-type ListboxSelectedOption<TTag extends ElementType, TType> = InstanceType<typeof ListboxSelectedOption<TTag, TType>>;
+type ListboxSelectedOption<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG> = InstanceType<typeof ListboxSelectedOption<TTag>>;
 export default ListboxSelectedOption;

package/dist/listbox/ListboxStates.d.ts

@@ -0,0 +1,12 @@
+export declare enum ListboxStates {
+    Open = 0,
+    Closed = 1
+}
+export declare enum ValueMode {
+    Single = 0,
+    Multi = 1
+}
+export declare enum ActivationTrigger {
+    Pointer = 0,
+    Other = 1
+}

package/dist/listbox/ListboxStates.js

@@ -0,0 +1,15 @@
+export var ListboxStates;
+(function (ListboxStates) {
+    ListboxStates[ListboxStates["Open"] = 0] = "Open";
+    ListboxStates[ListboxStates["Closed"] = 1] = "Closed";
+})(ListboxStates || (ListboxStates = {}));
+export var ValueMode;
+(function (ValueMode) {
+    ValueMode[ValueMode["Single"] = 0] = "Single";
+    ValueMode[ValueMode["Multi"] = 1] = "Multi";
+})(ValueMode || (ValueMode = {}));
+export var ActivationTrigger;
+(function (ActivationTrigger) {
+    ActivationTrigger[ActivationTrigger["Pointer"] = 0] = "Pointer";
+    ActivationTrigger[ActivationTrigger["Other"] = 1] = "Other";
+})(ActivationTrigger || (ActivationTrigger = {}));

package/dist/menu/Menu.svelte

@@ -0,0 +1,235 @@
+<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";
+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({
+  __demoMode,
+  menuState: __demoMode ? MenuStates.Open : MenuStates.Closed,
+  buttonElement: null,
+  itemsElement: null,
+  items: [],
+  searchQuery: "",
+  activeItemIndex: null,
+  activationTrigger: ActivationTrigger.Other
+});
+const { menuState, itemsElement, buttonElement } = $derived(_state);
+setContext("MenuContext", _state);
+const outsideClickEnabled = $derived(menuState === MenuStates.Open);
+useOutsideClick({
+  get enabled() {
+    return outsideClickEnabled;
+  },
+  get containers() {
+    return [buttonElement, itemsElement];
+  },
+  cb: (event, target) => {
+    _state.closeMenu();
+    if (!isFocusableElement(target, FocusableMode.Loose)) {
+      event.preventDefault();
+      buttonElement?.focus();
+    }
+  }
+});
+const slot = $derived({
+  open: _state.menuState === MenuStates.Open,
+  close: _state.closeMenu
+});
+createFloatingContext();
+const openClosed = $derived(
+  match(menuState, {
+    [MenuStates.Open]: State.Open,
+    [MenuStates.Closed]: State.Closed
+  })
+);
+createOpenClosedContext({
+  get value() {
+    return openClosed;
+  }
+});
+</script>
+
+<ElementOrComponent {theirProps} {slot} defaultTag={DEFAULT_MENU_TAG} name="Menu" bind:ref />

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

@@ -0,0 +1,42 @@
+import type { ElementType, Props } from "../utils/types.js";
+import type { Snippet } from "svelte";
+declare let DEFAULT_MENU_TAG: string;
+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]>;
+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 default Menu;