@ark-ui/svelte 5.14.1 → 5.16.0

package/dist/components/fieldset/use-fieldset.svelte.js

@@ -72,6 +72,11 @@ export const useFieldset = (inProps = {}) => {
     });
     const api = $derived({
         setRootRef,
+        ids: {
+            legend: legendId,
+            errorText: errorTextId,
+            helperText: helperTextId,
+        },
         disabled,
         invalid,
         getRootProps,

package/dist/components/file-upload/file-upload-item-delete-trigger.svelte

@@ -2,8 +2,10 @@
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
   export interface FileUploadItemDeleteTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
-  export interface FileUploadItemDeleteTriggerProps
-    extends Assign<HTMLProps<'button'>, FileUploadItemDeleteTriggerBaseProps> {}
+  export interface FileUploadItemDeleteTriggerProps extends Assign<
+    HTMLProps<'button'>,
+    FileUploadItemDeleteTriggerBaseProps
+  > {}
 </script>
 
 <script lang="ts">

package/dist/components/file-upload/file-upload-item-preview-image.svelte

@@ -2,8 +2,10 @@
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
 
   export interface FileUploadItemPreviewImageBaseProps extends PolymorphicProps<'img'>, RefAttribute {}
-  export interface FileUploadItemPreviewImageProps
-    extends Assign<HTMLProps<'img'>, FileUploadItemPreviewImageBaseProps> {}
+  export interface FileUploadItemPreviewImageProps extends Assign<
+    HTMLProps<'img'>,
+    FileUploadItemPreviewImageBaseProps
+  > {}
 </script>
 
 <script lang="ts">

package/dist/components/file-upload/file-upload-root.svelte

@@ -37,6 +37,7 @@
       'onFileChange',
       'onFileReject',
       'preventDocumentDrop',
+      'readOnly',
       'required',
       'translations',
       'transformFiles',

package/dist/components/floating-panel/floating-panel-close-trigger.svelte

@@ -2,8 +2,10 @@
   import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types.js'
 
   export interface FloatingPanelCloseTriggerBaseProps extends PolymorphicProps<'button'>, RefAttribute {}
-  export interface FloatingPanelCloseTriggerProps
-    extends Assign<HTMLProps<'button'>, FloatingPanelCloseTriggerBaseProps> {}
+  export interface FloatingPanelCloseTriggerProps extends Assign<
+    HTMLProps<'button'>,
+    FloatingPanelCloseTriggerBaseProps
+  > {}
 </script>
 
 <script lang="ts">

package/dist/components/floating-panel/floating-panel-resize-trigger.svelte

@@ -3,11 +3,11 @@
   import type { ResizeTriggerProps } from '@zag-js/floating-panel'
 
   export interface FloatingPanelResizeTriggerBaseProps
-    extends ResizeTriggerProps,
-      PolymorphicProps<'div'>,
-      RefAttribute {}
-  export interface FloatingPanelResizeTriggerProps
-    extends Assign<HTMLProps<'div'>, FloatingPanelResizeTriggerBaseProps> {}
+    extends ResizeTriggerProps, PolymorphicProps<'div'>, RefAttribute {}
+  export interface FloatingPanelResizeTriggerProps extends Assign<
+    HTMLProps<'div'>,
+    FloatingPanelResizeTriggerBaseProps
+  > {}
 </script>
 
 <script lang="ts">

package/dist/components/floating-panel/floating-panel-root.svelte

@@ -5,9 +5,7 @@
   import type { UseFloatingPanelProps } from './use-floating-panel.svelte.js'
 
   export interface FloatingPanelRootBaseProps
-    extends UseFloatingPanelProps,
-      UsePresenceProps,
-      PolymorphicProps<'div'> {}
+    extends UseFloatingPanelProps, UsePresenceProps, PolymorphicProps<'div'> {}
   export interface FloatingPanelRootProps extends FloatingPanelRootBaseProps {
     children?: Snippet
   }

package/dist/components/floating-panel/floating-panel-stage-trigger.svelte

@@ -3,11 +3,11 @@
   import type { StageTriggerProps } from '@zag-js/floating-panel'
 
   export interface FloatingPanelStageTriggerBaseProps
-    extends StageTriggerProps,
-      PolymorphicProps<'button'>,
-      RefAttribute {}
-  export interface FloatingPanelStageTriggerProps
-    extends Assign<HTMLProps<'button'>, FloatingPanelStageTriggerBaseProps> {}
+    extends StageTriggerProps, PolymorphicProps<'button'>, RefAttribute {}
+  export interface FloatingPanelStageTriggerProps extends Assign<
+    HTMLProps<'button'>,
+    FloatingPanelStageTriggerBaseProps
+  > {}
 </script>
 
 <script lang="ts">

package/dist/components/focus-trap/focus-trap.svelte

@@ -4,11 +4,10 @@
   import { type FocusTrapOptions, trapFocus } from '@zag-js/focus-trap'
   import { Ark } from '../factory/index.js'
 
-  export interface TrapOptions
-    extends Pick<
-      FocusTrapOptions,
-      'onActivate' | 'onDeactivate' | 'initialFocus' | 'fallbackFocus' | 'returnFocusOnDeactivate' | 'setReturnFocus'
-    > {
+  export interface TrapOptions extends Pick<
+    FocusTrapOptions,
+    'onActivate' | 'onDeactivate' | 'initialFocus' | 'fallbackFocus' | 'returnFocusOnDeactivate' | 'setReturnFocus'
+  > {
     /**
      * Whether the focus trap is disabled.
      */

package/dist/components/image-cropper/image-cropper-root-provider.svelte

@@ -1,16 +1,12 @@
 <script module lang="ts">
-  import type { Snippet } from 'svelte'
-  import type { PolymorphicProps, RefAttribute } from '../../types'
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
   import type { UseImageCropperReturn } from './use-image-cropper.svelte'
 
-  interface RootProviderProps {
+  export interface ImageCropperRootProviderBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     value: UseImageCropperReturn
   }
-
-  export interface ImageCropperRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {}
-  export interface ImageCropperRootProviderProps extends ImageCropperRootProviderBaseProps {
-    children?: Snippet
-  }
+  export interface ImageCropperRootProviderProps
+    extends Assign<HTMLProps<'div'>, ImageCropperRootProviderBaseProps> {}
 </script>
 
 <script lang="ts">

package/dist/components/image-cropper/image-cropper-root-provider.svelte.d.ts

@@ -1,13 +1,9 @@
-import type { Snippet } from 'svelte';
-import type { PolymorphicProps, RefAttribute } from '../../types';
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
 import type { UseImageCropperReturn } from './use-image-cropper.svelte';
-interface RootProviderProps {
+export interface ImageCropperRootProviderBaseProps extends PolymorphicProps<'div'>, RefAttribute {
     value: UseImageCropperReturn;
 }
-export interface ImageCropperRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'div'>, RefAttribute {
-}
-export interface ImageCropperRootProviderProps extends ImageCropperRootProviderBaseProps {
-    children?: Snippet;
+export interface ImageCropperRootProviderProps extends Assign<HTMLProps<'div'>, ImageCropperRootProviderBaseProps> {
 }
 declare const ImageCropperRootProvider: import("svelte").Component<ImageCropperRootProviderProps, {}, "ref">;
 type ImageCropperRootProvider = ReturnType<typeof ImageCropperRootProvider>;

package/dist/components/json-tree-view/json-tree-view-root-provider.svelte

@@ -1,12 +1,23 @@
 <script lang="ts">
   import type { JsonNode } from '@zag-js/json-tree-utils'
   import { TreeViewRootProvider, type TreeViewRootProviderProps } from '../tree-view'
+  import { JsonTreeViewPropsProvider } from './json-tree-view-props-context'
+  import type { UseJsonTreeViewReturn } from './use-json-tree-view.svelte'
 
   export interface JsonTreeViewRootProviderProps extends TreeViewRootProviderProps<JsonNode> {}
 
-  const props: JsonTreeViewRootProviderProps = $props()
+  const { value, ...props }: JsonTreeViewRootProviderProps = $props()
+
+  const jsonTreeView = value as unknown as UseJsonTreeViewReturn
+
+  const treeView = $derived(() => {
+    const { options: _, ...rest } = jsonTreeView()
+    return rest
+  })
+
+  JsonTreeViewPropsProvider(() => jsonTreeView().options)
 </script>
 
-<TreeViewRootProvider data-scope="json-tree-view" {...props}>
+<TreeViewRootProvider data-scope="json-tree-view" value={treeView} {...props}>
   {@render props.children?.()}
 </TreeViewRootProvider>

package/dist/components/json-tree-view/json-tree-view-root.svelte

@@ -17,8 +17,7 @@
   }
 
   export interface JsonTreeViewRootProps
-    extends Omit<TreeViewRootProps<JsonNode>, 'collection'>,
-      JsonTreeViewRootBaseProps {}
+    extends Omit<TreeViewRootProps<JsonNode>, 'collection'>, JsonTreeViewRootBaseProps {}
 
   const { data, defaultExpandedDepth, ...props }: JsonTreeViewRootProps = $props()
 

package/dist/components/json-tree-view/use-json-tree-view.svelte.d.ts

@@ -1,10 +1,16 @@
+import type { Accessor } from '../../types';
 import { type JsonNode } from '@zag-js/json-tree-utils';
+import type { PropTypes } from '@zag-js/svelte';
+import type * as treeView from '@zag-js/tree-view';
 import type { MaybeFunction } from '@zag-js/utils';
-import { type UseTreeViewProps, type UseTreeViewReturn } from '../tree-view';
-export interface UseJsonTreeViewProps extends Omit<UseTreeViewProps<JsonNode>, 'collection'> {
+import { type UseTreeViewProps } from '../tree-view';
+import type { JsonTreeViewOptions } from './json-tree-view-props-context';
+export interface UseJsonTreeViewProps extends Omit<UseTreeViewProps<JsonNode>, 'collection'>, JsonTreeViewOptions {
     data: unknown;
     defaultExpandedDepth?: number;
 }
-export interface UseJsonTreeViewReturn extends UseTreeViewReturn<JsonNode> {
+export interface UseJsonTreeViewReturn extends Accessor<treeView.Api<PropTypes, JsonNode> & {
+    options: JsonTreeViewOptions;
+}> {
 }
 export declare const useJsonTreeView: (props: MaybeFunction<UseJsonTreeViewProps>) => UseJsonTreeViewReturn;

package/dist/components/json-tree-view/use-json-tree-view.svelte.js

@@ -1,11 +1,20 @@
 import { runIfFn } from '../../utils/run-if-fn';
 import { getRootNode, nodeToString, nodeToValue } from '@zag-js/json-tree-utils';
 import { untrack } from 'svelte';
+import { createSplitProps } from '../../utils/create-split-props';
 import { createTreeCollection, useTreeView } from '../tree-view';
 import { getBranchValues } from './get-branch-value';
+const splitJsonTreeViewProps = createSplitProps();
 export const useJsonTreeView = (props) => {
+    const [jsonTreeProps, localProps] = splitJsonTreeViewProps(runIfFn(props), [
+        'maxPreviewItems',
+        'collapseStringsAfterLength',
+        'quotesOnKeys',
+        'groupArraysAfterLength',
+        'showNonenumerable',
+    ]);
     const machineProps = $derived.by(() => {
-        const { data, defaultExpandedDepth, ...restProps } = runIfFn(props);
+        const { data, defaultExpandedDepth, ...restProps } = localProps;
         const collection = createTreeCollection({
             nodeToValue,
             nodeToString,
@@ -19,5 +28,7 @@ export const useJsonTreeView = (props) => {
             typeahead: false,
         };
     });
-    return useTreeView(() => machineProps);
+    const treeView = useTreeView(() => machineProps);
+    const api = $derived({ ...treeView(), options: jsonTreeProps });
+    return () => api;
 };

package/dist/components/listbox/listbox-root-provider.svelte

@@ -6,10 +6,11 @@
   }
 
   export interface ListboxRootProviderBaseProps<T extends CollectionItem>
-    extends PolymorphicProps<'div'>,
-      RootProviderProps<T> {}
-  export interface ListboxRootProviderProps<T extends CollectionItem>
-    extends Assign<HTMLProps<'div'>, ListboxRootProviderBaseProps<T>> {}
+    extends PolymorphicProps<'div'>, RootProviderProps<T> {}
+  export interface ListboxRootProviderProps<T extends CollectionItem> extends Assign<
+    HTMLProps<'div'>,
+    ListboxRootProviderBaseProps<T>
+  > {}
 
   export type ListboxRootProviderComponent<P = {}> = <T extends CollectionItem>(
     props: Assign<ListboxRootProviderProps<T>, P>,

package/dist/components/listbox/listbox-root.svelte

@@ -6,8 +6,10 @@
   import type { UseListboxProps } from './use-listbox.svelte.js'
 
   export interface ListboxRootBaseProps<T extends CollectionItem> extends UseListboxProps<T>, PolymorphicProps<'div'> {}
-  export interface ListboxRootProps<T extends CollectionItem>
-    extends Assign<HTMLProps<'div'>, ListboxRootBaseProps<T>> {}
+  export interface ListboxRootProps<T extends CollectionItem> extends Assign<
+    HTMLProps<'div'>,
+    ListboxRootBaseProps<T>
+  > {}
 
   export type ListboxRootComponentProps<T extends CollectionItem = CollectionItem, P = {}> = Assign<
     ListboxRootProps<T>,

package/dist/components/marquee/marquee-root.svelte

@@ -3,9 +3,7 @@
   import type { UseMarqueeProps } from './use-marquee.svelte'
 
   export interface MarqueeRootBaseProps
-    extends Optional<UseMarqueeProps, 'id'>,
-      PolymorphicProps<'div'>,
-      RefAttribute {}
+    extends Optional<UseMarqueeProps, 'id'>, PolymorphicProps<'div'>, RefAttribute {}
   export interface MarqueeRootProps extends Assign<HTMLProps<'div'>, MarqueeRootBaseProps> {}
 </script>
 

package/dist/components/menu/menu-radio-item-group.svelte

@@ -5,9 +5,7 @@
   type OptionalUseMenuItemGroupContext = Optional<ReturnType<UseMenuItemGroupContext>, 'id'>
 
   export interface MenuRadioItemGroupBaseProps
-    extends OptionalUseMenuItemGroupContext,
-      PolymorphicProps<'div'>,
-      RefAttribute {}
+    extends OptionalUseMenuItemGroupContext, PolymorphicProps<'div'>, RefAttribute {}
   export interface MenuRadioItemGroupProps extends Assign<HTMLProps<'div'>, MenuRadioItemGroupBaseProps> {}
 </script>
 

package/dist/components/navigation-menu/index.d.ts

@@ -0,0 +1,18 @@
+export type { ValueChangeDetails as NavigationMenuValueChangeDetails } from '@zag-js/navigation-menu';
+export { default as NavigationMenuArrow, type NavigationMenuArrowBaseProps, type NavigationMenuArrowProps, } from './navigation-menu-arrow.svelte';
+export { default as NavigationMenuContent, type NavigationMenuContentBaseProps, type NavigationMenuContentProps, } from './navigation-menu-content.svelte';
+export { default as NavigationMenuContext, type NavigationMenuContextProps } from './navigation-menu-context.svelte';
+export { default as NavigationMenuIndicator, type NavigationMenuIndicatorBaseProps, type NavigationMenuIndicatorProps, } from './navigation-menu-indicator.svelte';
+export { default as NavigationMenuItem, type NavigationMenuItemBaseProps, type NavigationMenuItemProps, } from './navigation-menu-item.svelte';
+export { default as NavigationMenuItemIndicator, type NavigationMenuItemIndicatorBaseProps, type NavigationMenuItemIndicatorProps, } from './navigation-menu-item-indicator.svelte';
+export { default as NavigationMenuLink, type NavigationMenuLinkBaseProps, type NavigationMenuLinkProps, } from './navigation-menu-link.svelte';
+export { default as NavigationMenuList, type NavigationMenuListBaseProps, type NavigationMenuListProps, } from './navigation-menu-list.svelte';
+export { default as NavigationMenuRoot, type NavigationMenuRootBaseProps, type NavigationMenuRootProps, } from './navigation-menu-root.svelte';
+export { default as NavigationMenuRootProvider, type NavigationMenuRootProviderBaseProps, type NavigationMenuRootProviderProps, } from './navigation-menu-root-provider.svelte';
+export { default as NavigationMenuTrigger, type NavigationMenuTriggerBaseProps, type NavigationMenuTriggerProps, } from './navigation-menu-trigger.svelte';
+export { default as NavigationMenuViewport, type NavigationMenuViewportBaseProps, type NavigationMenuViewportProps, } from './navigation-menu-viewport.svelte';
+export { default as NavigationMenuViewportPositioner, type NavigationMenuViewportPositionerBaseProps, type NavigationMenuViewportPositionerProps, } from './navigation-menu-viewport-positioner.svelte';
+export { navigationMenuAnatomy } from './navigation-menu.anatomy';
+export { useNavigationMenu, type UseNavigationMenuProps, type UseNavigationMenuReturn, } from './use-navigation-menu.svelte';
+export { useNavigationMenuContext, type UseNavigationMenuContext } from './use-navigation-menu-context';
+export * as NavigationMenu from './navigation-menu';

package/dist/components/navigation-menu/index.js

@@ -0,0 +1,17 @@
+export { default as NavigationMenuArrow, } from './navigation-menu-arrow.svelte';
+export { default as NavigationMenuContent, } from './navigation-menu-content.svelte';
+export { default as NavigationMenuContext } from './navigation-menu-context.svelte';
+export { default as NavigationMenuIndicator, } from './navigation-menu-indicator.svelte';
+export { default as NavigationMenuItem, } from './navigation-menu-item.svelte';
+export { default as NavigationMenuItemIndicator, } from './navigation-menu-item-indicator.svelte';
+export { default as NavigationMenuLink, } from './navigation-menu-link.svelte';
+export { default as NavigationMenuList, } from './navigation-menu-list.svelte';
+export { default as NavigationMenuRoot, } from './navigation-menu-root.svelte';
+export { default as NavigationMenuRootProvider, } from './navigation-menu-root-provider.svelte';
+export { default as NavigationMenuTrigger, } from './navigation-menu-trigger.svelte';
+export { default as NavigationMenuViewport, } from './navigation-menu-viewport.svelte';
+export { default as NavigationMenuViewportPositioner, } from './navigation-menu-viewport-positioner.svelte';
+export { navigationMenuAnatomy } from './navigation-menu.anatomy';
+export { useNavigationMenu, } from './use-navigation-menu.svelte';
+export { useNavigationMenuContext } from './use-navigation-menu-context';
+export * as NavigationMenu from './navigation-menu';

package/dist/components/navigation-menu/navigation-menu-arrow.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface NavigationMenuArrowBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface NavigationMenuArrowProps extends Assign<HTMLProps<'div'>, NavigationMenuArrowBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useNavigationMenuContext } from './use-navigation-menu-context'
+
+  let { ref = $bindable(null), ...props }: NavigationMenuArrowProps = $props()
+
+  const navigationMenu = useNavigationMenuContext()
+  const mergedProps = $derived(mergeProps(navigationMenu().getArrowProps(), props))
+</script>
+
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/navigation-menu/navigation-menu-arrow.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface NavigationMenuArrowBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+}
+export interface NavigationMenuArrowProps extends Assign<HTMLProps<'div'>, NavigationMenuArrowBaseProps> {
+}
+declare const NavigationMenuArrow: import("svelte").Component<NavigationMenuArrowProps, {}, "ref">;
+type NavigationMenuArrow = ReturnType<typeof NavigationMenuArrow>;
+export default NavigationMenuArrow;

package/dist/components/navigation-menu/navigation-menu-content.svelte

@@ -0,0 +1,61 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { ContentProps } from '@zag-js/navigation-menu'
+
+  export interface NavigationMenuContentBaseProps
+    extends Partial<ContentProps>, PolymorphicProps<'div'>, RefAttribute {}
+  export interface NavigationMenuContentProps extends Assign<HTMLProps<'div'>, NavigationMenuContentBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { useRenderStrategyPropsContext } from '../../utils/render-strategy'
+  import { mergeProps } from '@zag-js/svelte'
+  import type { RequiredBy } from '@zag-js/types'
+  import { Ark } from '../factory'
+  import { Portal } from '../portal'
+  import { usePresence } from '../presence'
+  import { useNavigationMenuContext } from './use-navigation-menu-context'
+  import { useNavigationMenuItemPropsContext } from './use-navigation-menu-item-props-context'
+
+  let { ref = $bindable(null), ...props }: NavigationMenuContentProps = $props()
+
+  const splitContentProps = createSplitProps<ContentProps>()
+
+  const navigationMenu = useNavigationMenuContext()
+  const itemContext = useNavigationMenuItemPropsContext()
+
+  const value = $derived(props.value ?? itemContext()?.value)
+
+  const combinedProps = $derived(mergeProps(props, { value }) as RequiredBy<NavigationMenuContentProps, 'value'>)
+  const [contentProps, localProps] = $derived(splitContentProps(combinedProps, ['value']))
+
+  const renderStrategyProps = useRenderStrategyPropsContext()
+
+  const presence = usePresence(() => ({
+    ...renderStrategyProps,
+    present: navigationMenu().value === value,
+  }))
+
+  const mergedProps = $derived(
+    mergeProps(navigationMenu().getContentProps(contentProps), presence().getPresenceProps(), localProps),
+  )
+
+  const viewportNode = $derived(navigationMenu().getViewportNode())
+
+  function setNode(node: Element | null) {
+    presence().setNode(node)
+  }
+</script>
+
+{#if navigationMenu().isViewportRendered && viewportNode}
+  <div {...navigationMenu().getViewportProxyProps(contentProps)}></div>
+  <div {...navigationMenu().getTriggerProxyProps(contentProps)}></div>
+  <Portal container={viewportNode}>
+    {#if !presence().unmounted}
+      <Ark as="div" bind:ref {...mergedProps} {@attach setNode} />
+    {/if}
+  </Portal>
+{:else if !presence().unmounted}
+  <Ark as="div" bind:ref {...mergedProps} {@attach setNode} />
+{/if}

package/dist/components/navigation-menu/navigation-menu-content.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+import type { ContentProps } from '@zag-js/navigation-menu';
+export interface NavigationMenuContentBaseProps extends Partial<ContentProps>, PolymorphicProps<'div'>, RefAttribute {
+}
+export interface NavigationMenuContentProps extends Assign<HTMLProps<'div'>, NavigationMenuContentBaseProps> {
+}
+declare const NavigationMenuContent: import("svelte").Component<NavigationMenuContentProps, {}, "ref">;
+type NavigationMenuContent = ReturnType<typeof NavigationMenuContent>;
+export default NavigationMenuContent;

package/dist/components/navigation-menu/navigation-menu-context.svelte

@@ -0,0 +1,18 @@
+<script module lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { UseNavigationMenuContext } from './use-navigation-menu-context'
+
+  export interface NavigationMenuContextProps {
+    render?: Snippet<[UseNavigationMenuContext]>
+  }
+</script>
+
+<script lang="ts">
+  import { useNavigationMenuContext } from './use-navigation-menu-context'
+
+  const { render }: NavigationMenuContextProps = $props()
+
+  const context = useNavigationMenuContext()
+</script>
+
+{@render render?.(context)}

package/dist/components/navigation-menu/navigation-menu-context.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { UseNavigationMenuContext } from './use-navigation-menu-context';
+export interface NavigationMenuContextProps {
+    render?: Snippet<[UseNavigationMenuContext]>;
+}
+declare const NavigationMenuContext: import("svelte").Component<NavigationMenuContextProps, {}, "">;
+type NavigationMenuContext = ReturnType<typeof NavigationMenuContext>;
+export default NavigationMenuContext;

package/dist/components/navigation-menu/navigation-menu-indicator.svelte

@@ -0,0 +1,29 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface NavigationMenuIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface NavigationMenuIndicatorProps extends Assign<HTMLProps<'div'>, NavigationMenuIndicatorBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { usePresence } from '../presence'
+  import { useNavigationMenuContext } from './use-navigation-menu-context'
+  import { useRenderStrategyPropsContext } from '../../utils/render-strategy'
+
+  let { ref = $bindable(null), ...props }: NavigationMenuIndicatorProps = $props()
+
+  const navigationMenu = useNavigationMenuContext()
+  const renderStrategyProps = useRenderStrategyPropsContext()
+  const presence = usePresence(() => ({ ...renderStrategyProps, present: navigationMenu().open }))
+  const mergedProps = $derived(mergeProps(navigationMenu().getIndicatorProps(), presence().getPresenceProps(), props))
+
+  function setNode(node: Element | null) {
+    presence().setNode(node)
+  }
+</script>
+
+{#if !presence().unmounted}
+  <Ark as="div" bind:ref {...mergedProps} {@attach setNode} />
+{/if}

package/dist/components/navigation-menu/navigation-menu-indicator.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface NavigationMenuIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+}
+export interface NavigationMenuIndicatorProps extends Assign<HTMLProps<'div'>, NavigationMenuIndicatorBaseProps> {
+}
+declare const NavigationMenuIndicator: import("svelte").Component<NavigationMenuIndicatorProps, {}, "ref">;
+type NavigationMenuIndicator = ReturnType<typeof NavigationMenuIndicator>;
+export default NavigationMenuIndicator;

package/dist/components/navigation-menu/navigation-menu-item-indicator.svelte

@@ -0,0 +1,25 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface NavigationMenuItemIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface NavigationMenuItemIndicatorProps extends Assign<
+    HTMLProps<'div'>,
+    NavigationMenuItemIndicatorBaseProps
+  > {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useNavigationMenuContext } from './use-navigation-menu-context'
+  import { useNavigationMenuItemPropsContext } from './use-navigation-menu-item-props-context'
+
+  let { ref = $bindable(null), ...props }: NavigationMenuItemIndicatorProps = $props()
+
+  const navigationMenu = useNavigationMenuContext()
+  const itemProps = useNavigationMenuItemPropsContext()
+
+  const mergedProps = $derived(mergeProps(navigationMenu().getItemIndicatorProps(itemProps()), props))
+</script>
+
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/navigation-menu/navigation-menu-item-indicator.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+export interface NavigationMenuItemIndicatorBaseProps extends PolymorphicProps<'div'>, RefAttribute {
+}
+export interface NavigationMenuItemIndicatorProps extends Assign<HTMLProps<'div'>, NavigationMenuItemIndicatorBaseProps> {
+}
+declare const NavigationMenuItemIndicator: import("svelte").Component<NavigationMenuItemIndicatorProps, {}, "ref">;
+type NavigationMenuItemIndicator = ReturnType<typeof NavigationMenuItemIndicator>;
+export default NavigationMenuItemIndicator;

package/dist/components/navigation-menu/navigation-menu-item.svelte

@@ -0,0 +1,26 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { ItemProps } from '@zag-js/navigation-menu'
+
+  export interface NavigationMenuItemBaseProps extends ItemProps, PolymorphicProps<'div'>, RefAttribute {}
+  export interface NavigationMenuItemProps extends Assign<HTMLProps<'div'>, NavigationMenuItemBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useNavigationMenuContext } from './use-navigation-menu-context'
+  import { NavigationMenuItemPropsProvider } from './use-navigation-menu-item-props-context'
+  import { createSplitProps } from '../../utils/create-split-props'
+
+  let { ref = $bindable(null), ...props }: NavigationMenuItemProps = $props()
+  const splitItemProps = createSplitProps<ItemProps>()
+  const [itemProps, localProps] = $derived(splitItemProps(props, ['disabled', 'value']))
+
+  const navigationMenu = useNavigationMenuContext()
+  const mergedProps = $derived(mergeProps(navigationMenu().getItemProps(itemProps), localProps))
+
+  NavigationMenuItemPropsProvider(() => itemProps)
+</script>
+
+<Ark as="div" bind:ref {...mergedProps} />

package/dist/components/navigation-menu/navigation-menu-item.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+import type { ItemProps } from '@zag-js/navigation-menu';
+export interface NavigationMenuItemBaseProps extends ItemProps, PolymorphicProps<'div'>, RefAttribute {
+}
+export interface NavigationMenuItemProps extends Assign<HTMLProps<'div'>, NavigationMenuItemBaseProps> {
+}
+declare const NavigationMenuItem: import("svelte").Component<NavigationMenuItemProps, {}, "ref">;
+type NavigationMenuItem = ReturnType<typeof NavigationMenuItem>;
+export default NavigationMenuItem;