<template>
  <div class="c-expand">
    <button type="button" :class="buttonClass" class="js-expand" :aria-controls="useId()" aria-expanded="false">
      {{ triggerText }}
    </button>
    <div class="c-expand__content" :id="useId()" aria-hidden="true" role="region" tabindex="-1">
      <slot name="content" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { useId } from 'vue';

withDefaults(defineProps<{
  triggerText: string;
  buttonClass?: string;
  modifiers?: never;
}>(), {
  buttonClass: 'o-button o-button--light-grey mb-3',
});

</script>
