New elements dialog, transitions not working

[BorisKamp]

Using the new elements library, we cannot get transitions to work on a dialog as exampled here
We use Nuxt 4.0.3 and element 1.0.7
We have the following Modal components:

// app/components/overlays/Modal.vue
<script setup lang="ts">
interface ModalProps {
  modalId: string
  displayIcon?: boolean
  widthClass?: string
}

withDefaults(defineProps<ModalProps>(), {
  widthClass: 'sm:max-w-lg',
})

const slots = useSlots()
</script>

<template>
  <el-dialog>
    <dialog :id="modalId" class="fixed inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent">
      <el-dialog-backdrop class="fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in" />
      <div class="flex min-h-full items-center justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0">
        <el-dialog-panel :class="widthClass" class="w-full relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-full sm:p-6 data-closed:sm:translate-y-0 data-closed:sm:scale-95">
          <div class="absolute right-0 top-0 pr-4 pt-4">
            <button
              type="button"
              class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-brandgreen focus:ring-offset-2"
              command="close" :commandfor="modalId"
            >
              <span class="sr-only">Close</span>
              <FontAwesomeIcon :icon="['fas', 'xmark']" aria-hidden="true" />
            </button>
          </div>
          <h2 class="text-xl font-semibold leading-6 text-gray-900">
            <slot name="title" />
          </h2>

          <div class="mt-6">
            <slot name="body" />
          </div>

          <div v-if="slots['action-buttons']" class="mt-5 sm:mt-4 flex justify-end">
            <slot name="action-buttons" />
          </div>
        </el-dialog-panel>
      </div>
    </dialog>
  </el-dialog>
</template>

We use this like:

<template>
      <!-- The button to show the modal -->
      <BaseButton :style="UIStyle.info" class="mt-3" command="show-modal" commandfor="modal-edit-agent">
        Show modal
      </BaseButton>

      <!-- The modal itself -->
      <Modal modal-id="modal-edit-agent">
        <template #title>
          Create a new job!
        </template>
        <template #body>
          <p class="text-sm text-gray-500">
            Are you sure you want to create a new job? This action cannot be undone.
          </p>
        </template>
        <template #action-buttons>
          <BaseButton :style="UIStyle.white" class="me-3" @click="useSettingsStore().setModalType(null)">
            Cancel
          </BaseButton>
          <BaseButton :style="UIStyle.info">
            Create new Job
          </BaseButton>
        </template>
      </Modal>
</template>

The dialog just pops in and out, without a transition.

[BorisKamp]

Additional info:

When I copy the example code 1-1 and paste it directly in my component (so no custom Modal component), the transition does not work either:

<template>
<button command="show-modal" commandfor="delete-profile" type="button">
    Delete profile
  </button>

  <el-dialog>
    <dialog id="delete-profile">
      <el-dialog-backdrop class="bg-black/50 transition duration-200 data-closed:opacity-0" />
      <el-dialog-panel class="bg-white transition duration-200 data-closed:scale-95 data-closed:opacity-0">
        <form method="dialog">
          <h3>Delete profile</h3>
          <p>Are you sure? This action is permanent and cannot be undone.</p>
          <div class="flex gap-4">
            <button command="close" commandfor="delete-profile" type="button">
              Cancel
            </button>
            <button type="submit">
              Delete
            </button>
          </div>
        </form>
      </el-dialog-panel>
    </dialog>
  </el-dialog>
</template>