[6.x] Unify the API between Modals & Stacks

[duncanmcclean]

This pull request aims to unify the API between Modals & Stacks, effectively making them interchangeable with the only major difference being how they're displayed.

Open State

The open state can be controlled using two-way bindings:

<!-- Using v-model -->
<Stack v-model:open="isOpen">

<!-- Using a prop & event listener -->
<Stack :open="isOpen" @update:open="openUpdated">

Alternatively, you may provide a trigger slot where the stack will maintain the open state internally:

<Stack>
  <template #trigger>
    <Button>Click Me!</Button>
  </template>
</Stack>

Header

You may provide title and icon props which will be used to render the modal/stack header:

<Stack :title="__('How neat is that?')" icon="playground">

If you'd prefer to have full control of the style and content of the header, you may use the ModalTitle / StackTitle components:

<Stack>
    <template #trigger>
        <Button text="How neat is that?" />
    </template>
    <StackTitle class="text-center flex items-center justify-between">
        <span>🍁</span>
        <h2 class="font-serif text-xl">What's why they call it neature!</h2>
        <span>🍁</span>
    </StackTitle>
</Stack>