feat: modal component

[ell-ska]

closes #63

• create base modal
• create overlay that closes the modal on click
• create events to open and close the modal
• create two variants of the modal
  • one for the menu variant
  • one for the input variant
  • and you can also choose to just use the base modal (will be needed for add to list/add to movie modals because they look very different)
• keyboard accessible
  • focus trap
  • close on esc

preview

Skarminspelning.2025-02-04.kl.15.43.09.mov

example usage with form

<x-button x-data @click="$dispatch('open-modal', 'example-modal')">
    Open modal
</x-button>

<x-modal.base name="example-modal">
    <x-modal.input>
        <x-slot:title>Example modal</x-slot>
        <form>
          {{-- add your inputs here --}}

          <x-button
              x-data
              @click="$dispatch('close-modal', 'example-modal')"
              type="button"
          >
              Close modal
          </x-button>
        </form>
    </x-modal.input>
</x-modal.base>

example usage with menu items

<x-button x-data @click="$dispatch('open-modal', 'example-modal')">
    Open modal
</x-button>

<x-modal.base name="example-modal">
    <x-modal.menu>
        <x-slot:title>Example modal</x-slot>
          {{-- add your menu items here --}}
    </x-modal.menu>
</x-modal.base>

note:
this is heavily inspired by this modal from the boilerplate breeze code we removed. so i hope the laravel team is setting a good example :)

[beforeAW]

Looks good