1  <script lang="ts">
 2    import { createEventDispatcher } from "svelte";
 3  
 4    import IconButton from "./IconButton.svelte";
 5    import Icon from "./Icon.svelte";
 6  
 7    export let variant: "left-aligned" | "inline" = "left-aligned";
 8    export let expanded: boolean = true;
 9  
10    const dispatch = createEventDispatcher<{
11      toggle: { expanded: boolean };
12    }>();
13  </script>
14  
15  <style>
16    .expand {
17      display: flex;
18      background: none;
19    }
20  </style>
21  
22  <IconButton
23    ariaLabel="expand"
24    on:click={() => {
25      expanded = !expanded;
26      dispatch("toggle", { expanded });
27    }}>
28    <div class="expand">
29      {#if expanded}
30        <Icon name={variant === "inline" ? "ellipsis" : "chevron-down"} />
31      {:else}
32        <Icon name={variant === "inline" ? "ellipsis" : "chevron-right"} />
33      {/if}
34    </div>
35  </IconButton>