Cannot get x-trap to work at all on my page

[tomdtp]

Originally I have a form within a modal for which I want to use x-trap. However it does not work, neither does it focus the first field, nor does it trap focus inside of the modal. The .noscroll modifier however works.
I do not get any errors or anything in the console.

To boil down the issue I am now down to having copied the example for x-trap from the documentation into my page and even this isn't working. Is there anything that can block x-trap? Some global JS or CSS? I have no idea how to debug this further, since there are no error message or whatsoever, it just does not work.

<div x-data="{ open: false }">
  <button @click="open = true">Open Dialog</button>
  <span x-show="open" x-trap="open">
    <p>...</p>
    <input type="text" placeholder="Some input..." />
    <input type="text" placeholder="Some other input..." />
    <button @click="open = false">Close Dialog</button>
  </span>
</div>

with

    <script defer
            src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
    <script defer
            src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

at the end of the page ...

I am thankful for any piece of advice, or any way to debug this further.

[ekwoka]

Are you sure they are both there and being added just like that?

also, no reason to put them at the end of the page...

what about doing

<script type="module">
import Alpine from 'https://esm.sh/alpinejs'
import Focus from 'https://esm.sh/@alpinejs/focus'
Alpine.plugin(Focus)
Alpine.start()
</script>

[ekwoka]

does that work?

[tomdtp]

nvmd somehow my browser was partially crashed apparently. after restarting FF it is working now. sorry ...