basecoat/docs/_includes/components/popover-script.njk

<script>
  if (!window._popoverComponentLoaded) {
    window._popoverComponentLoaded = true;

    const registerPopoverComponent = () => {
      Alpine.data('popover', () => ({
        open: false,

        $trigger: {
          '@click'() { this.open = !this.open },
          '@keydown.escape.prevent'() {
            this.open = false;
            this.$refs.trigger.focus();
          },
          ':aria-expanded'() { return this.open },
          'x-ref': 'trigger'
        },
        $content: {
          '@keydown.escape.prevent'() {
            this.open = false;
            this.$refs.trigger.focus();
          },
          ':aria-hidden'() { return !this.open },
          'x-cloak': ''
        },
      }));
    }

    {% for event in (register_on or ["alpine:init"]) %}
      document.addEventListener('{{ event }}', registerPopoverComponent);
    {% endfor %}
  }
</script>