<svelte:options
  customElement={{
    props: {
      button_aria_label: { attribute: "button-aria-label" },
      button_class: { attribute: "button-class" },
    },
    tag: "basic-dropdown",
  }}
/>

<script lang="ts">
  type Props = {
    button_aria_label?: string;
    button_class?: string;
  };

  let { button_aria_label, button_class = "button--secondary" }: Props =
    $props();
  let popover_element: HTMLElement | undefined = $state();
</script>

<button
  aria-label={button_aria_label}
  class={["basic-dropdown__button", button_class]}
  id="dropdown-button"
  onclick={() => {
    popover_element.showPopover();
  }}
  type="button"
>
  <slot name="button-contents"></slot>
</button>
<div
  aria-labelledby="dropdown-button"
  bind:this={popover_element}
  class="basic-dropdown__popover"
  popover="auto"
>
  <slot name="popover"></slot>
</div>

<style lang="scss">
  @use "../../sass/main";
</style>
