@pzerelles/headlessui-svelte 2.1.2-next.5 → 2.1.2-next.50

package/dist/menu/MenuItem.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" module>
-  import type { Props, ElementType, Children } from "../utils/types.js"
-  import { onMount, type Snippet } from "svelte"
+  import type { Props } from "../utils/types.js"
+  import { onMount } from "svelte"
 
-  const DEFAULT_ITEM_TAG = "svelte:fragment" as const
-  type ItemRenderPropArg = {
+  const DEFAULT_ITEM_TAG = "button" as const
+  export type ItemRenderPropArg = {
     /** @deprecated use `focus` instead */
     active: boolean
     focus: boolean
@@ -13,21 +13,16 @@
   }
   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",
-    {
-      id?: string
-      disabled?: boolean
-      children: Children<ItemRenderPropArg>
-    }
-  >
-
-  export type MenuItemChildren = Children<ItemRenderPropArg>
+  export type MenuItemOwnProps = {
+    element?: HTMLElement
+    id?: string
+    disabled?: boolean
+  }
+
+  export type MenuItemProps = Props<typeof DEFAULT_ITEM_TAG, ItemRenderPropArg, MenuItemOwnProps>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_ITEM_TAG">
+<script lang="ts">
   import { useId } from "../hooks/use-id.js"
   import { ActivationTrigger, MenuStates, useMenuContext, type MenuItemDataRef } from "./context.svelte.js"
   import { disposables } from "../utils/disposables.js"
@@ -42,11 +37,11 @@
 
   const internalId = useId()
   let {
-    ref = $bindable(),
+    element = $bindable(),
     id = `headlessui-menu-item-${internalId}`,
     disabled = false,
     ...theirProps
-  }: { as?: TTag } & MenuItemProps<TTag> = $props()
+  }: MenuItemProps = $props()
   const _state = useMenuContext("MenuItem")
   const active = $derived(_state.activeItemIndex !== null ? _state.items[_state.activeItemIndex].id === id : false)
 
@@ -58,19 +53,19 @@
     if (!active) return
     if (_state.activationTrigger === ActivationTrigger.Pointer) return
     return disposables().requestAnimationFrame(() => {
-      ;(ref as HTMLElement)?.scrollIntoView?.({ block: "nearest" })
+      ;(element as HTMLElement)?.scrollIntoView?.({ block: "nearest" })
     })
   })
 
   const getTextValue = useTextValue({
     get element() {
-      return ref || null
+      return element || null
     },
   })
 
   const bag: MenuItemDataRef["current"] = $derived({
     disabled,
-    domRef: { current: ref || null },
+    domRef: { current: element || null },
     get textValue() {
       return getTextValue()
     },
@@ -149,4 +144,4 @@
   )
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} {slot} defaultTag={DEFAULT_ITEM_TAG} name="MenuItem" bind:ref />
+<ElementOrComponent {ourProps} {theirProps} slots={slot} defaultTag={DEFAULT_ITEM_TAG} name="MenuItem" bind:element />

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

@@ -1,6 +1,6 @@
-import type { Props, ElementType, Children } from "../utils/types.js";
-declare const DEFAULT_ITEM_TAG: "svelte:fragment";
-type ItemRenderPropArg = {
+import type { Props } from "../utils/types.js";
+declare const DEFAULT_ITEM_TAG: "button";
+export type ItemRenderPropArg = {
     /** @deprecated use `focus` instead */
     active: boolean;
     focus: boolean;
@@ -8,42 +8,12 @@ type ItemRenderPropArg = {
     close: () => void;
     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 MenuItemOwnProps = {
+    element?: HTMLElement;
     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;
-        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>;
-    };
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-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']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const MenuItem: $$IsomorphicComponent;
-type MenuItem<TTag extends ElementType = typeof DEFAULT_ITEM_TAG> = InstanceType<typeof MenuItem<TTag>>;
+};
+export type MenuItemProps = Props<typeof DEFAULT_ITEM_TAG, ItemRenderPropArg, MenuItemOwnProps>;
+declare const MenuItem: import("svelte").Component<MenuItemProps, {}, "element">;
+type MenuItem = ReturnType<typeof MenuItem>;
 export default MenuItem;

package/dist/menu/MenuItems.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
   import { mergeProps, RenderFeatures, type PropsForFeatures } from "../utils/render.js"
   import {
     useFloatingPanel,
@@ -9,30 +9,26 @@
   } from "../internal/floating.svelte.js"
 
   const DEFAULT_ITEMS_TAG = "div" as const
-  type ItemsRenderPropArg = {
+  export type ItemsRenderPropArg = {
     open: boolean
   }
   type ItemsPropsWeControl = "aria-activedescendant" | "aria-labelledby" | "role" | "tabIndex"
 
   let ItemsRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
 
-  export type MenuItemsProps<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG> = Props<
-    TTag,
-    ItemsRenderPropArg,
-    ItemsPropsWeControl,
-    {
-      id?: string
-      anchor?: AnchorProps
-      portal?: boolean
-      modal?: boolean
-      transition?: boolean
-    } & PropsForFeatures<typeof ItemsRenderFeatures>
-  >
-
-  export type MenuItemsChildren = Snippet<[ItemsRenderPropArg]>
+  export type MenuItemsOwnProps = {
+    element?: HTMLElement
+    id?: string
+    anchor?: AnchorProps
+    portal?: boolean
+    modal?: boolean
+    transition?: boolean
+  } & PropsForFeatures<typeof ItemsRenderFeatures>
+
+  export type MenuItemsProps = Props<typeof DEFAULT_ITEMS_TAG, ItemsRenderPropArg, MenuItemsOwnProps>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_ITEMS_TAG">
+<script lang="ts">
   import { useId } from "../hooks/use-id.js"
   import { getOwnerDocument } from "../utils/owner.js"
   import { State, useOpenClosed } from "../internal/open-closed.js"
@@ -45,7 +41,7 @@
   import { Focus } from "../utils/calculate-active-index.js"
   import { focusFrom, Focus as FocusManagementFocus, restoreFocusIfNecessary } from "../utils/focus-management.js"
   import { useElementSize } from "../hooks/use-element-size.svelte.js"
-  import { tick, untrack, type Snippet } from "svelte"
+  import { tick, untrack } from "svelte"
   import Portal from "../portal/Portal.svelte"
   import { MenuStates, useMenuContext } from "./context.svelte.js"
   import { useTreeWalker } from "../hooks/use-tree-walker.svelte.js"
@@ -53,28 +49,32 @@
 
   const internalId = useId()
   let {
-    as = DEFAULT_ITEMS_TAG as TTag,
-    ref = $bindable(),
+    element = $bindable(),
     id = `headlessui-menu-items-${internalId}`,
     anchor: rawAnchor,
     portal = false,
     modal = true,
     transition = false,
     ...theirProps
-  }: { as?: TTag } & MenuItemsProps<TTag> = $props()
-  const anchor = $derived(useResolvedAnchor(rawAnchor))
+  }: MenuItemsProps = $props()
+  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(element ?? null))
+    if (anchor) setFloating(element ?? null)
   })
   const ownerDocument = $derived(getOwnerDocument(_state.itemsElement))
 
@@ -96,7 +96,7 @@
       return transition
     },
     get element() {
-      return ref
+      return element
     },
     get show() {
       return show
@@ -285,8 +285,8 @@
     unit: true,
   })
 
-  const ourProps = $derived(
-    mergeProps(anchor ? getFloatingPanelProps() : {}, {
+  const ourProps = $derived({
+    ...mergeProps(anchor ? getFloatingPanelProps() : {}, {
       "aria-activedescendant": _state.activeItemIndex === null ? undefined : _state.items[_state.activeItemIndex]?.id,
       "aria-labelledby": _state.buttonElement?.id,
       id,
@@ -297,11 +297,10 @@
       // 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 : undefined,
-      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}>
@@ -313,6 +312,6 @@
     features={ItemsRenderFeatures}
     visible={panelEnabled}
     name="MenuItems"
-    bind:ref
+    bind:element
   />
 </Portal>

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

@@ -1,55 +1,20 @@
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import { type PropsForFeatures } from "../utils/render.js";
 import { type AnchorProps } from "../internal/floating.svelte.js";
 declare const DEFAULT_ITEMS_TAG: "div";
-type ItemsRenderPropArg = {
+export type ItemsRenderPropArg = {
     open: boolean;
 };
-type ItemsPropsWeControl = "aria-activedescendant" | "aria-labelledby" | "role" | "tabIndex";
 declare let ItemsRenderFeatures: number;
-export type MenuItemsProps<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG> = Props<TTag, ItemsRenderPropArg, ItemsPropsWeControl, {
+export type MenuItemsOwnProps = {
+    element?: HTMLElement;
     id?: string;
     anchor?: AnchorProps;
     portal?: boolean;
     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;
-        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;
-        modal?: boolean;
-        transition?: boolean;
-    } & {
-        static?: boolean | undefined;
-        unmount?: boolean | undefined;
-    };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-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']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const MenuItems: $$IsomorphicComponent;
-type MenuItems<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG> = InstanceType<typeof MenuItems<TTag>>;
+} & PropsForFeatures<typeof ItemsRenderFeatures>;
+export type MenuItemsProps = Props<typeof DEFAULT_ITEMS_TAG, ItemsRenderPropArg, MenuItemsOwnProps>;
+declare const MenuItems: import("svelte").Component<MenuItemsProps, {}, "element">;
+type MenuItems = ReturnType<typeof MenuItems>;
 export default MenuItems;

package/dist/menu/MenuSection.svelte

@@ -1,31 +1,28 @@
 <script lang="ts" module>
-  import type { Snippet } from "svelte"
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
   const DEFAULT_SECTION_TAG = "div" as const
-  type SectionRenderPropArg = {}
+
   type SectionPropsWeControl = "role" | "aria-labelledby"
 
-  export type MenuSectionProps<TTag extends ElementType = typeof DEFAULT_SECTION_TAG> = Props<
-    TTag,
-    SectionRenderPropArg,
-    SectionPropsWeControl
-  >
+  export type MenuSectionOwnProps = {
+    element?: HTMLElement
+  }
 
-  export type MenuSectionChildren = Snippet<[SectionRenderPropArg]>
+  export type MenuSectionProps = Props<typeof DEFAULT_SECTION_TAG, {}, MenuSectionOwnProps>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SECTION_TAG">
+<script lang="ts">
   import { useLabels } from "../label/context.svelte.js"
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
 
   const labelledby = useLabels()
 
-  let { ref = $bindable(), ...theirProps }: { as?: TTag } & MenuSectionProps<TTag> = $props()
+  let { element = $bindable(), ...theirProps }: MenuSectionProps = $props()
   const ourProps = $derived({
     "aria-labelledby": labelledby,
     role: "group",
   })
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_SECTION_TAG} name="MenuSection" bind:ref />
+<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_SECTION_TAG} name="MenuSection" bind:element />

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

@@ -1,35 +1,9 @@
-import type { Snippet } from "svelte";
-import type { ElementType, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 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;
-        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>;
-    };
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-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']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const MenuSection: $$IsomorphicComponent;
-type MenuSection<TTag extends ElementType = typeof DEFAULT_SECTION_TAG> = InstanceType<typeof MenuSection<TTag>>;
+export type MenuSectionOwnProps = {
+    element?: HTMLElement;
+};
+export type MenuSectionProps = Props<typeof DEFAULT_SECTION_TAG, {}, MenuSectionOwnProps>;
+declare const MenuSection: import("svelte").Component<MenuSectionProps, {}, "element">;
+type MenuSection = ReturnType<typeof MenuSection>;
 export default MenuSection;

package/dist/menu/MenuSeparator.svelte

@@ -1,25 +1,22 @@
 <script lang="ts" module>
-  import type { Snippet } from "svelte"
-  import type { ElementType, Props } from "../utils/types.js"
+  import type { Props } from "../utils/types.js"
 
   const DEFAULT_SEPARATOR_TAG = "div" as const
-  type SeparatorRenderPropArg = {}
+
   type SeparatorPropsWeControl = "role"
 
-  export type MenuSeparatorProps<TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG> = Props<
-    TTag,
-    SeparatorRenderPropArg,
-    SeparatorPropsWeControl
-  >
+  export type MenuSeparatorOwnProps = {
+    element?: HTMLElement
+  }
 
-  export type MenuSeparatorChildren = Snippet<[SeparatorRenderPropArg]>
+  export type MenuSeparatorProps = Props<typeof DEFAULT_SEPARATOR_TAG, {}, MenuSeparatorOwnProps>
 </script>
 
-<script lang="ts" generics="TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG">
+<script lang="ts">
   import ElementOrComponent from "../utils/ElementOrComponent.svelte"
 
-  let { ref = $bindable(), ...theirProps }: { as?: TTag } & MenuSeparatorProps<TTag> = $props()
+  let { element = $bindable(), ...theirProps }: MenuSeparatorProps = $props()
   const ourProps = { role: "separator" }
 </script>
 
-<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_SEPARATOR_TAG} name="MenuSeparator" bind:ref />
+<ElementOrComponent {ourProps} {theirProps} defaultTag={DEFAULT_SEPARATOR_TAG} name="MenuSeparator" bind:element />

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

@@ -1,35 +1,9 @@
-import type { Snippet } from "svelte";
-import type { ElementType, Props } from "../utils/types.js";
+import type { 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;
-        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>;
-    };
-    slots(): {};
-    bindings(): "ref";
-    exports(): {};
-}
-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']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-declare const MenuSeparator: $$IsomorphicComponent;
-type MenuSeparator<TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG> = InstanceType<typeof MenuSeparator<TTag>>;
+export type MenuSeparatorOwnProps = {
+    element?: HTMLElement;
+};
+export type MenuSeparatorProps = Props<typeof DEFAULT_SEPARATOR_TAG, {}, MenuSeparatorOwnProps>;
+declare const MenuSeparator: import("svelte").Component<MenuSeparatorProps, {}, "element">;
+type MenuSeparator = ReturnType<typeof MenuSeparator>;
 export default MenuSeparator;

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;