@ark-ui/svelte 5.14.1 → 5.15.0

package/dist/components/anatomy.d.ts

@@ -21,6 +21,7 @@ export { imageCropperAnatomy } from './image-cropper/image-cropper.anatomy';
 export { listboxAnatomy } from './listbox/listbox.anatomy';
 export { marqueeAnatomy } from './marquee/marquee.anatomy';
 export { menuAnatomy } from './menu/menu.anatomy';
+export { navigationMenuAnatomy } from './navigation-menu/navigation-menu.anatomy';
 export { numberInputAnatomy } from './number-input/number-input.anatomy';
 export { paginationAnatomy } from './pagination/pagination.anatomy';
 export { passwordInputAnatomy } from './password-input/password-input.anatomy';

package/dist/components/anatomy.js

@@ -21,6 +21,7 @@ export { imageCropperAnatomy } from './image-cropper/image-cropper.anatomy';
 export { listboxAnatomy } from './listbox/listbox.anatomy';
 export { marqueeAnatomy } from './marquee/marquee.anatomy';
 export { menuAnatomy } from './menu/menu.anatomy';
+export { navigationMenuAnatomy } from './navigation-menu/navigation-menu.anatomy';
 export { numberInputAnatomy } from './number-input/number-input.anatomy';
 export { paginationAnatomy } from './pagination/pagination.anatomy';
 export { passwordInputAnatomy } from './password-input/password-input.anatomy';

package/dist/components/checkbox/use-checkbox-group.svelte.js

@@ -1,10 +1,14 @@
 import { runIfFn } from '@zag-js/utils';
 import { untrack } from 'svelte';
+import { useFieldsetContext } from '../fieldset';
 export const useCheckboxGroup = (props = {}) => {
+    const fieldset = useFieldsetContext();
     const resolvedProps = $derived(runIfFn(props) || {});
     let valueState = $state(untrack(() => resolvedProps.defaultValue) ?? []);
     const value = $derived(resolvedProps.value !== undefined ? resolvedProps.value : valueState);
-    const interactive = $derived(!(resolvedProps.disabled || resolvedProps.readOnly));
+    const disabled = $derived(resolvedProps.disabled ?? fieldset?.()?.disabled);
+    const invalid = $derived(resolvedProps.invalid ?? fieldset?.()?.invalid);
+    const interactive = $derived(!(disabled || resolvedProps.readOnly));
     const setValue = (newValue) => {
         if (resolvedProps.value === undefined) {
             valueState = newValue;
@@ -38,18 +42,18 @@ export const useCheckboxGroup = (props = {}) => {
                 }
             },
             name: resolvedProps.name,
-            disabled: !!resolvedProps.disabled,
+            disabled: !!disabled,
             readOnly: !!resolvedProps.readOnly,
-            invalid: !!resolvedProps.invalid,
+            invalid: !!invalid,
         };
     };
     const api = $derived({
         isChecked,
         value,
         name: resolvedProps.name,
-        disabled: !!resolvedProps.disabled,
+        disabled: !!disabled,
         readOnly: !!resolvedProps.readOnly,
-        invalid: !!resolvedProps.invalid,
+        invalid: !!invalid,
         setValue,
         addValue,
         toggleValue,

package/dist/components/date-picker/date-picker-root.svelte

@@ -43,6 +43,8 @@
       'format',
       'id',
       'ids',
+      'inline',
+      'invalid',
       'isDateUnavailable',
       'locale',
       'max',
@@ -61,13 +63,13 @@
       'placeholder',
       'positioning',
       'readOnly',
+      'required',
       'selectionMode',
       'startOfWeek',
       'timeZone',
       'translations',
       'value',
       'view',
-      'inline',
     ]),
   )
 

package/dist/components/fieldset/fieldset-error-text.svelte

@@ -15,4 +15,6 @@
   const mergedProps = $derived(mergeProps(fieldset?.().getErrorTextProps(), props))
 </script>
 
-<Ark as="span" bind:ref {...mergedProps} />
+{#if fieldset?.().invalid}
+  <Ark as="span" bind:ref {...mergedProps} />
+{/if}

package/dist/components/fieldset/use-fieldset.svelte.d.ts

@@ -17,6 +17,11 @@ export interface UseFieldsetProps {
 export type UseFieldsetReturn = ReturnType<typeof useFieldset>;
 export declare const useFieldset: (inProps?: MaybeFunction<UseFieldsetProps>) => () => {
     setRootRef: (el: Element | null) => void;
+    ids: {
+        legend: string;
+        errorText: string;
+        helperText: string;
+    };
     disabled: boolean;
     invalid: boolean;
     getRootProps: () => HTMLProps<"fieldset">;

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/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,63 @@
+<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,22 @@
+<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;

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

@@ -0,0 +1,32 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { LinkProps } from '@zag-js/navigation-menu'
+
+  export interface NavigationMenuLinkBaseProps extends Partial<LinkProps>, PolymorphicProps<'a'>, RefAttribute {}
+  export interface NavigationMenuLinkProps extends Assign<HTMLProps<'a'>, NavigationMenuLinkBaseProps> {}
+</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'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import type { RequiredBy } from '@zag-js/types'
+
+  let { ref = $bindable(null), ...props }: NavigationMenuLinkProps = $props()
+
+  const itemContext = useNavigationMenuItemPropsContext()
+  const value = $derived(props.value ?? itemContext?.()?.value)
+  const combinedProps = $derived(mergeProps(props, { value }) as RequiredBy<NavigationMenuLinkProps, 'value'>)
+
+  const splitLinkProps = createSplitProps<LinkProps>()
+  const [linkProps, localProps] = $derived(
+    splitLinkProps(combinedProps, ['current', 'onSelect', 'value', 'closeOnClick']),
+  )
+
+  const navigationMenu = useNavigationMenuContext()
+  const mergedProps = $derived(mergeProps(navigationMenu().getLinkProps(linkProps), localProps))
+</script>
+
+<Ark as="a" bind:ref {...mergedProps} />

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

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

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

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+
+  export interface NavigationMenuListBaseProps extends PolymorphicProps<'div'>, RefAttribute {}
+  export interface NavigationMenuListProps extends Assign<HTMLProps<'div'>, NavigationMenuListBaseProps> {}
+</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 }: NavigationMenuListProps = $props()
+
+  const navigationMenu = useNavigationMenuContext()
+  const mergedProps = $derived(mergeProps(navigationMenu().getListProps(), props))
+</script>
+
+<Ark as="div" bind:ref {...mergedProps} />

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

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

package/dist/components/navigation-menu/navigation-menu-root-provider.svelte

@@ -0,0 +1,36 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { UsePresenceProps } from '../presence'
+  import type { UseNavigationMenuReturn } from './use-navigation-menu.svelte'
+
+  interface RootProviderProps {
+    value: UseNavigationMenuReturn
+  }
+
+  export interface NavigationMenuRootProviderBaseProps
+    extends RootProviderProps,
+      PolymorphicProps<'nav'>,
+      UsePresenceProps,
+      RefAttribute {}
+
+  export interface NavigationMenuRootProviderProps
+    extends Assign<HTMLProps<'nav'>, NavigationMenuRootProviderBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { NavigationMenuProvider } from './use-navigation-menu-context'
+  import { RenderStrategyPropsProvider, splitRenderStrategyProps } from '../../utils/render-strategy'
+
+  let { ref = $bindable(null), ...props }: NavigationMenuRootProviderProps = $props()
+
+  const [renderStrategyProps, localProps] = $derived(splitRenderStrategyProps(props))
+
+  const mergedProps = $derived(mergeProps(props.value().getRootProps(), localProps))
+
+  NavigationMenuProvider(() => props.value())
+  RenderStrategyPropsProvider(() => renderStrategyProps)
+</script>
+
+<Ark as="nav" bind:ref {...mergedProps} />

package/dist/components/navigation-menu/navigation-menu-root-provider.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+import type { UsePresenceProps } from '../presence';
+import type { UseNavigationMenuReturn } from './use-navigation-menu.svelte';
+interface RootProviderProps {
+    value: UseNavigationMenuReturn;
+}
+export interface NavigationMenuRootProviderBaseProps extends RootProviderProps, PolymorphicProps<'nav'>, UsePresenceProps, RefAttribute {
+}
+export interface NavigationMenuRootProviderProps extends Assign<HTMLProps<'nav'>, NavigationMenuRootProviderBaseProps> {
+}
+declare const NavigationMenuRootProvider: import("svelte").Component<NavigationMenuRootProviderProps, {}, "ref">;
+type NavigationMenuRootProvider = ReturnType<typeof NavigationMenuRootProvider>;
+export default NavigationMenuRootProvider;

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

@@ -0,0 +1,61 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { UsePresenceProps } from '../presence'
+  import type { UseNavigationMenuProps } from './use-navigation-menu.svelte'
+
+  export interface NavigationMenuRootBaseProps
+    extends UseNavigationMenuProps,
+      UsePresenceProps,
+      PolymorphicProps<'nav'>,
+      RefAttribute {}
+  export interface NavigationMenuRootProps extends Assign<HTMLProps<'nav'>, NavigationMenuRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { NavigationMenuProvider } from './use-navigation-menu-context'
+  import { useNavigationMenu } from './use-navigation-menu.svelte'
+  import { RenderStrategyPropsProvider, splitRenderStrategyProps } from '../../utils/render-strategy'
+  import { createSplitProps } from '../../utils/create-split-props'
+
+  let { ref = $bindable(null), value = $bindable(), ...props }: NavigationMenuRootProps = $props()
+
+  const providedId = $props.id()
+  const splitRootProps = createSplitProps<UseNavigationMenuProps>()
+
+  const [renderStrategyProps, navigationMenuProps] = $derived(splitRenderStrategyProps(props))
+  const [useNavigationMenuProps, localProps] = $derived(
+    splitRootProps(navigationMenuProps, [
+      'closeDelay',
+      'defaultValue',
+      'disableClickTrigger',
+      'disableHoverTrigger',
+      'disablePointerLeaveClose',
+      'id',
+      'ids',
+      'onValueChange',
+      'openDelay',
+      'orientation',
+      'value',
+    ]),
+  )
+
+  const machineProps = $derived<UseNavigationMenuProps>({
+    ...useNavigationMenuProps,
+    id: useNavigationMenuProps.id ?? providedId,
+    value,
+    onValueChange(details) {
+      useNavigationMenuProps.onValueChange?.(details)
+      if (value !== undefined) value = details.value
+    },
+  })
+
+  const navigationMenu = useNavigationMenu(() => machineProps)
+  const mergedProps = $derived(mergeProps(navigationMenu().getRootProps(), localProps))
+
+  RenderStrategyPropsProvider(() => renderStrategyProps)
+  NavigationMenuProvider(navigationMenu)
+</script>
+
+<Ark as="nav" bind:ref {...mergedProps} />

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

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types';
+import type { UsePresenceProps } from '../presence';
+import type { UseNavigationMenuProps } from './use-navigation-menu.svelte';
+export interface NavigationMenuRootBaseProps extends UseNavigationMenuProps, UsePresenceProps, PolymorphicProps<'nav'>, RefAttribute {
+}
+export interface NavigationMenuRootProps extends Assign<HTMLProps<'nav'>, NavigationMenuRootBaseProps> {
+}
+declare const NavigationMenuRoot: import("svelte").Component<NavigationMenuRootProps, {}, "ref" | "value">;
+type NavigationMenuRoot = ReturnType<typeof NavigationMenuRoot>;
+export default NavigationMenuRoot;

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

@@ -0,0 +1,36 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from '../../types'
+  import type { ItemProps } from '@zag-js/navigation-menu'
+
+  export interface NavigationMenuTriggerBaseProps
+    extends Omit<ItemProps, 'value'>,
+      PolymorphicProps<'button'>,
+      RefAttribute {}
+  export interface NavigationMenuTriggerProps extends Assign<HTMLProps<'button'>, NavigationMenuTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { mergeProps } from '@zag-js/svelte'
+  import { ensure } from '@zag-js/utils'
+  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 }: NavigationMenuTriggerProps = $props()
+  const splitItemProps = createSplitProps<ItemProps>()
+
+  const itemContext = useNavigationMenuItemPropsContext()
+  ensure(itemContext, () => 'NavigationMenu.Trigger must be used within NavigationMenu.Item')
+
+  const value = $derived(itemContext().value)
+  const disabled = $derived(props.disabled ?? itemContext().disabled)
+
+  const combinedProps = $derived({ ...props, value, disabled })
+  const [triggerProps, localProps] = $derived(splitItemProps(combinedProps, ['value', 'disabled']))
+
+  const navigationMenu = useNavigationMenuContext()
+  const mergedProps = $derived(mergeProps(navigationMenu().getTriggerProps(triggerProps), localProps))
+</script>
+
+<Ark as="button" bind:ref {...mergedProps} />