<script setup lang="ts">
/**
 * A "Ghost" wrapper component designed to group related form fields
 * without adding unnecessary depth to the DOM tree.
 * * Unlike a standard <div> wrapper, this component leverages Vue 3's
 * multi-root feature to render the title and slot content as direct siblings.
 * This ensures the parent Form's grid or flex layout remains intact.
 * * @property {string} [title] for compiler marker.
 *
 * Example Usage:
 *
    <Fragment
      v-slot="{ section }"
      title="Tim Pelaksana Tindakan"
    >
      <p class="text-lg font-semibold">{{ section }}</p>
    </Fragment>
 */
defineProps<{
  title?: string
}>()
</script>

<template>
  <slot :section="title" />
</template>
