<svelte:options
  customElement={{
    props: { copy_data: { attribute: "copy-data" } },
    tag: "copy-source",
  }}
/>

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

  let { copy_data }: Props = $props();
</script>

<button
  class="click-target"
  onclick={() => {
    navigator.clipboard.writeText(copy_data);
  }}
  type="button"
>
  <slot></slot>
</button>

<style>
  .click-target {
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
  }
</style>
