Add Modal triggers

src/package/components/Button.svelte

@@ -65,7 +65,6 @@
 <style lang="postcss">
 	.button {
 		display: flex;
-		justify-content: flex-start;
 		align-items: center;
 		justify-content: center;
 		padding: 0.5rem 1rem;
@@ -73,7 +72,6 @@
 		gap: 0.5rem;
 		cursor: pointer;
 		position: relative;
-		white-space: nowrap;
 		line-height: 100%;
 
 		color: var(--color-bg-contrast);

src/package/components/Modal.svelte

@@ -18,8 +18,14 @@
 	function close() {
 		open = false
 	}
+
+	function trigger() {
+		open = !open
+	}
 </script>
 
+<slot name="trigger" {trigger} />
+
 {#if open}
 	<div
 		class="modal-background"
@@ -130,6 +136,7 @@
 			display: flex;
 			justify-content: flex-end;
 			gap: 1rem;
+			flex-wrap: wrap;
 		}
 	}
 </style>

src/package/components/ModalDeletion.svelte

@@ -16,7 +16,9 @@
 	let keyInput = ''
 </script>
 
-<Modal title={$t(`modal.deletion.${type}.title`)} bind:open>
+<Modal title={$t(`modal.deletion.${type}.title`)} bind:open let:trigger>
+	<slot slot="trigger" name="trigger" {trigger} />
+
 	{#if type === 'account' || 'project'}
 		<div class="important-banner">
 			<IconExclamation /><span>{$t('modal.deletion.generic.important')}</span>
@@ -29,6 +31,7 @@
 			bind:value={keyInput}
 			{id} />
 	</Field>
+
 	<Button color="danger" slot="button" disabled={key !== keyInput}>
 		<IconTrash />
 		{$t(`modal.deletion.${type}.action`)}