add title and description props and slots for Modal

2026-06-06 19:27:48 +00:00 · 2023-08-09 18:42:56 +01:00
parent 6cb93336a9
commit 360318ec5d
70 changed files with 80 additions and 70 deletions
@@ -246,7 +246,7 @@
 </script>

 <Modal bind:show onSubmit={create} size="big">
-    <svelte:fragment slot="header">Create Event</svelte:fragment>
+    <svelte:fragment slot="title">Create Event</svelte:fragment>
    <slot />
    <div>
        <p class="u-text">Choose a service</p>
@@ -15,6 +15,8 @@
    export let onSubmit: (e: SubmitEvent) => Promise<void> | void = function () {
        return;
    };
+    export let title = '';
+    export let description = '';

    let dialog: HTMLDialogElement;
    let alert: HTMLElement;
@@ -102,8 +104,11 @@
                                <span class={`icon-${icon}`} aria-hidden="true" />
                            </div>
                        {/if}
+
                        <h4 class="modal-title heading-level-5">
-                            <slot name="header" />
+                            <slot name="title">
+                                {title}
+                            </slot>
                        </h4>
                    </div>
                    {#if closable}
@@ -122,6 +127,11 @@
                        </button>
                    {/if}
                </div>
+                <p>
+                    <slot name="description">
+                        {description}
+                    </slot>
+                </p>
            </header>
            <div class="modal-content">
                {#if error}
@@ -26,7 +26,7 @@
 </script>

 <Modal bind:show on:close={reset} onSubmit={create}>
-    <svelte:fragment slot="header">Custom permission</svelte:fragment>
+    <svelte:fragment slot="title">Custom permission</svelte:fragment>
    <p class="text">
        Custom permissions allow you to grant access to specific users or teams using their ID and
        role.
@@ -62,7 +62,7 @@
 </script>

 <Modal bind:show onSubmit={create} on:close={reset} size="big">
-    <svelte:fragment slot="header">Select teams</svelte:fragment>
+    <svelte:fragment slot="title">Select teams</svelte:fragment>
    <p class="text">
        Grant access to any member of a specific team. To grant access to team members with specific
        roles, you will need to set a <button
@@ -62,7 +62,7 @@
 </script>

 <Modal bind:show onSubmit={create} on:close={reset} size="big">
-    <svelte:fragment slot="header">Select users</svelte:fragment>
+    <svelte:fragment slot="title">Select users</svelte:fragment>
    <p class="text">Grant access to any authenticated or anonymous user.</p>
    <InputSearch
        autofocus
@@ -12,7 +12,7 @@
 </script>

 <Modal bind:show onSubmit={handleSubmit} icon="exclamation" state="warning">
-    <svelte:fragment slot="header">Exit Process</svelte:fragment>
+    <svelte:fragment slot="title">Exit Process</svelte:fragment>
    <p>
        Are you sure you want to exit from <slot />? All data will be deleted. This action is
        irreversible.
@@ -35,7 +35,7 @@
    icon="exclamation"
    state="warning"
    headerDivider={false}>
-    <svelte:fragment slot="header">Delete Account</svelte:fragment>
+    <svelte:fragment slot="title">Delete Account</svelte:fragment>
    <p>Are you sure you want to delete your account?</p>
    <svelte:fragment slot="footer">
        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
@@ -43,7 +43,7 @@
 </script>

 <Modal {error} onSubmit={create} size="big" bind:show>
-    <svelte:fragment slot="header">Create New Organization</svelte:fragment>
+    <svelte:fragment slot="title">Create New Organization</svelte:fragment>
    <FormList>
        <InputText
            id="organization-name"
@@ -50,7 +50,7 @@
 </script>

 <Modal {error} size="big" bind:show={showCreate} onSubmit={create}>
-    <svelte:fragment slot="header">Invite Member</svelte:fragment>
+    <svelte:fragment slot="title">Invite Member</svelte:fragment>
    <FormList>
        <InputEmail
            required
@@ -45,7 +45,7 @@
 </script>

 <Modal {error} onSubmit={create} size="big" bind:show>
-    <svelte:fragment slot="header">Create Project</svelte:fragment>
+    <svelte:fragment slot="title">Create Project</svelte:fragment>
    <FormList>
        <InputText id="name" label="Name" bind:value={name} required autofocus={true} />
        {#if !showCustomId}
@@ -49,7 +49,7 @@
    icon="exclamation"
    state="warning"
    headerDivider={false}>
-    <svelte:fragment slot="header">
+    <svelte:fragment slot="title">
        {isUser ? 'Leave Organization' : 'Delete Member'}
    </svelte:fragment>
    <p data-private>
@@ -42,7 +42,7 @@
    icon="exclamation"
    state="warning"
    headerDivider={false}>
-    <svelte:fragment slot="header">Delete Organization</svelte:fragment>
+    <svelte:fragment slot="title">Delete Organization</svelte:fragment>
    <p>
        Are you sure you want to delete <b>{$organization.name}</b>? All projects ({$organization.total})
        and data associated with this organization will be deleted. This action is irreversible.
@@ -38,7 +38,7 @@
 </script>

 <Modal {error} onSubmit={update} size="big" show on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
    <FormList>
        <p>
            To use {provider.name} authentication in your application, first fill in this form. For more
@@ -39,7 +39,7 @@
 </script>

 <Modal {error} size="big" show onSubmit={update} on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
    <FormList>
        <p>
            To use {provider.name} authentication in your application, first fill in this form. For more
@@ -39,7 +39,7 @@
 </script>

 <Modal {error} size="big" show onSubmit={update} on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
    <FormList>
        <p>
            To use {provider.name} authentication in your application, first fill in this form. For more
@@ -42,7 +42,7 @@
 </script>

 <Modal {error} size="big" bind:show={showCreate} onSubmit={create}>
-    <svelte:fragment slot="header">Create Team</svelte:fragment>
+    <svelte:fragment slot="title">Create Team</svelte:fragment>
    <FormList>
        <InputText
            id="name"
@@ -59,7 +59,7 @@
 </script>

 <Modal {error} size="big" bind:show={showCreate} onSubmit={create}>
-    <svelte:fragment slot="header">Create User</svelte:fragment>
+    <svelte:fragment slot="title">Create User</svelte:fragment>
    <FormList>
        <InputText
            id="name"
@@ -37,7 +37,7 @@
 </script>

 <Modal {error} size="big" show onSubmit={update} on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
    <FormList>
        <p>
            To use {provider.name} authentication in your application, first fill in this form. For more
@@ -35,7 +35,7 @@
 </script>

 <Modal {error} size="big" show onSubmit={update} on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
    <FormList>
        <p>
            To use {provider.name} authentication in your application, first fill in this form. For more
@@ -35,7 +35,7 @@
 </script>

 <Modal {error} size="big" show onSubmit={update} on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
    <FormList>
        <p>
            To use {provider.name} authentication in your application, first fill in this form. For more
@@ -38,7 +38,7 @@
 </script>

 <Modal {error} onSubmit={update} size="big" show on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
    <FormList>
        <p>
            To use {provider.name} authentication in your application, first fill in this form. For more
@@ -61,7 +61,7 @@
 </script>

 <Modal {error} onSubmit={update} size="big" show on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
    <FormList>
        <p>
            To use {provider.name} authentication in your application, first fill in this form. For more
@@ -43,7 +43,7 @@
 </script>

 <Modal {error} onSubmit={update} size="big" show on:close>
-    <svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
+    <svelte:fragment slot="title">{provider.name} OAuth2 Settings</svelte:fragment>
    <FormList>
        <p>
            To use {provider.name} authentication in your application, first fill in this form. For more
@@ -45,7 +45,7 @@
 </script>

 <Modal {error} onSubmit={create} size="big" bind:show={showCreate}>
-    <svelte:fragment slot="header">Create Membership</svelte:fragment>
+    <svelte:fragment slot="title">Create Membership</svelte:fragment>
    <FormList>
        <InputEmail
            id="email"
@@ -43,7 +43,7 @@
    icon="exclamation"
    state="warning"
    headerDivider={false}>
-    <svelte:fragment slot="header">Delete Member</svelte:fragment>
+    <svelte:fragment slot="title">Delete Member</svelte:fragment>
    <p data-private>
        Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?
    </p>
@@ -34,7 +34,7 @@
    icon="exclamation"
    state="warning"
    headerDivider={false}>
-    <svelte:fragment slot="header">Delete Team</svelte:fragment>
+    <svelte:fragment slot="title">Delete Team</svelte:fragment>
    <p data-private>
        Are you sure you want to delete <b>{team.name}</b>?
    </p>
@@ -37,7 +37,7 @@
    icon="exclamation"
    state="warning"
    headerDivider={false}>
-    <svelte:fragment slot="header">Delete All Sessions</svelte:fragment>
+    <svelte:fragment slot="title">Delete All Sessions</svelte:fragment>
    <p data-private>
        Are you sure you want to delete <b>all of {$user.name}'s sessions?</b>
    </p>
@@ -45,7 +45,7 @@
    icon="exclamation"
    state="warning"
    headerDivider={false}>
-    <svelte:fragment slot="header">Delete Member</svelte:fragment>
+    <svelte:fragment slot="title">Delete Member</svelte:fragment>
    {#if selectedMembership}
        <p data-private>
            Are you sure you want to delete <b>{selectedMembership.userName}</b> from '{selectedMembership.teamName}'?
@@ -37,7 +37,7 @@
    icon="exclamation"
    state="warning"
    headerDivider={false}>
-    <svelte:fragment slot="header">Delete Sessions</svelte:fragment>
+    <svelte:fragment slot="title">Delete Sessions</svelte:fragment>

    <p>Are you sure you want to delete this session?</p>
    <svelte:fragment slot="footer">
@@ -38,7 +38,7 @@
    icon="exclamation"
    state="warning"
    headerDivider={false}>
-    <svelte:fragment slot="header">Delete User</svelte:fragment>
+    <svelte:fragment slot="title">Delete User</svelte:fragment>
    <p data-private>Are you sure you want to delete <b>{$user.name}</b> from '{$project.name}'?</p>
    <svelte:fragment slot="footer">
        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
@@ -40,7 +40,7 @@
 </script>

 <Modal size="big" onSubmit={create} bind:show={showCreate}>
-    <svelte:fragment slot="header">Create Database</svelte:fragment>
+    <svelte:fragment slot="title">Create Database</svelte:fragment>
    <FormList>
        <InputText
            id="name"
@@ -61,7 +61,7 @@
    </Button>

    <Modal bind:show={showFiltersMobile} size="big">
-        <svelte:fragment slot="header">Filters</svelte:fragment>
+        <svelte:fragment slot="title">Filters</svelte:fragment>
        <Content on:apply={(e) => (applied = e.detail.applied)} on:clear={() => (applied = 0)} />
        <svelte:fragment slot="footer">
            <Button text on:click={clearAll}>Clear all</Button>
@@ -52,7 +52,7 @@
    headerDivider={false}
    bind:show={showDelete}
    onSubmit={handleDelete}>
-    <svelte:fragment slot="header">Delete Attribute</svelte:fragment>
+    <svelte:fragment slot="title">Delete Attribute</svelte:fragment>
    <p class="text" data-private>
        Are you sure you want to delete <b data-private>{selectedAttribute?.key}</b> from
        <b data-private>{$collection?.name}</b>?
@@ -59,7 +59,7 @@

 {#if selectedAttribute}
    <Modal {error} size="big" bind:show={showEdit} onSubmit={submit} icon={option?.icon}>
-        <svelte:fragment slot="header">
+        <svelte:fragment slot="title">
            <div class="u-flex u-cross-center u-gap-8">
                {option?.name}
                {#if option?.type === 'relationship'}
@@ -99,7 +99,7 @@
 </script>

 <Modal {error} size="big" bind:show={showCreate} onSubmit={submit} icon={$option?.icon}>
-    <svelte:fragment slot="header">
+    <svelte:fragment slot="title">
        {#if selectedOption === 'Relationship'}
            <span class="u-flex u-gap-16 u-cross-center">
                {selectedOption}
@@ -66,7 +66,7 @@
    onSubmit={handleDelete}
    bind:show={showDelete}
    headerDivider={false}>
-    <svelte:fragment slot="header">Delete Document</svelte:fragment>
+    <svelte:fragment slot="title">Delete Document</svelte:fragment>

    <p data-private>
        Are you sure you want to delete <b
@@ -100,7 +100,7 @@
 </script>

 <Modal bind:error size="big" onSubmit={create} bind:show={showCreateIndex}>
-    <svelte:fragment slot="header">Create Index</svelte:fragment>
+    <svelte:fragment slot="title">Create Index</svelte:fragment>
    <FormList>
        <InputText id="key" label="Index Key" placeholder="Enter Key" bind:value={key} autofocus />
        <InputSelect options={types} id="type" label="Index type" bind:value={selectedType} />
@@ -45,7 +45,7 @@
    onSubmit={handleDelete}
    bind:show={showDelete}
    headerDivider={false}>
-    <svelte:fragment slot="header">Delete Index</svelte:fragment>
+    <svelte:fragment slot="title">Delete Index</svelte:fragment>

    <p data-private>
        Are you sure you want to delete <b>'{selectedIndex.key}' from {$collection.name}</b>?
@@ -9,7 +9,7 @@
 </script>

 <Modal size="big" bind:show={showOverview}>
-    <svelte:fragment slot="header">Overview</svelte:fragment>
+    <svelte:fragment slot="title">Overview</svelte:fragment>
    <FormList>
        <InputText
            id="key"
@@ -21,7 +21,7 @@
 </script>

 <Modal size="big" bind:show icon="relationship" headerDivider={false}>
-    <svelte:fragment slot="header">
+    <svelte:fragment slot="title">
        <span data-private>
            {selectedRelationship.key}
        </span>
@@ -43,7 +43,7 @@
    bind:show={showDelete}
    onSubmit={handleDelete}
    headerDivider={false}>
-    <svelte:fragment slot="header">Delete Collection</svelte:fragment>
+    <svelte:fragment slot="title">Delete Collection</svelte:fragment>

    <p data-private>
        Are you sure you want to delete <b>{$collection.name}</b>?
@@ -248,7 +248,7 @@
    onSubmit={handleDelete}
    headerDivider={false}
    closable={!deleting}>
-    <svelte:fragment slot="header">Delete Documents</svelte:fragment>
+    <svelte:fragment slot="title">Delete Documents</svelte:fragment>

    <div>
        <p class="text" data-private>
@@ -47,7 +47,7 @@
 </script>

 <Modal size="big" bind:show={showCreate} onSubmit={create}>
-    <svelte:fragment slot="header">Create Collection</svelte:fragment>
+    <svelte:fragment slot="title">Create Collection</svelte:fragment>
    <FormList>
        <InputText
            id="name"
@@ -38,7 +38,7 @@
    bind:show={showDelete}
    onSubmit={handleDelete}
    headerDivider={false}>
-    <svelte:fragment slot="header">Delete Database</svelte:fragment>
+    <svelte:fragment slot="title">Delete Database</svelte:fragment>
    <p class="text" data-private>
        Are you sure you want to delete <b>{$database.name}</b>?
    </p>
@@ -122,7 +122,7 @@
    onSubmit={handleDelete}
    headerDivider={false}
    closable={!deleting}>
-    <svelte:fragment slot="header">Delete Collections</svelte:fragment>
+    <svelte:fragment slot="title">Delete Collections</svelte:fragment>
    <p class="text" data-private>
        Are you sure you want to delete <b>{selected.length}</b>
        {selected.length > 1 ? 'collections' : 'collection'}?
@@ -121,7 +121,7 @@
    onSubmit={handleDelete}
    headerDivider={false}
    closable={!deleting}>
-    <svelte:fragment slot="header">Delete Database</svelte:fragment>
+    <svelte:fragment slot="title">Delete Database</svelte:fragment>
    <p class="text" data-private>
        Are you sure you want to delete <b>{selected.length}</b>
        {selected.length > 1 ? 'databases' : 'database'}?
@@ -32,7 +32,7 @@
 </script>

 <Modal bind:show={showCreate} onSubmit={handleVariable} size="big">
-    <svelte:fragment slot="header">
+    <svelte:fragment slot="title">
        {selectedVar ? 'Update' : 'Create'} Variable
    </svelte:fragment>
    <FormList>
@@ -36,7 +36,7 @@
 </script>

 <Modal bind:show={showActivate} onSubmit={handleSubmit}>
-    <svelte:fragment slot="header">Activate Deployment</svelte:fragment>
+    <svelte:fragment slot="title">Activate Deployment</svelte:fragment>
    <p>Are you sure you want to activate this deployment?</p>
    <svelte:fragment slot="footer">
        <Button text on:click={() => (showActivate = false)}>Cancel</Button>
@@ -134,7 +134,7 @@
 </script>

 <Modal {error} size="big" bind:show={showCreate} onSubmit={create}>
-    <svelte:fragment slot="header">Create Deployment</svelte:fragment>
+    <svelte:fragment slot="title">Create Deployment</svelte:fragment>
    <Tabs>
        <Tab on:click={() => (mode = Mode.CLI)} selected={mode === Mode.CLI} event="deploy_cli">
            CLI
@@ -40,7 +40,7 @@
    icon="exclamation"
    state="warning"
    headerDivider={false}>
-    <svelte:fragment slot="header">Delete Deployment</svelte:fragment>
+    <svelte:fragment slot="title">Delete Deployment</svelte:fragment>
    <p data-private>Are you sure you want to delete this deployment?</p>
    <svelte:fragment slot="footer">
        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
@@ -64,7 +64,7 @@
 </script>

 <Modal bind:show size="big" onSubmit={handleSubmit} on:close={close}>
-    <svelte:fragment slot="header">Execute Function</svelte:fragment>
+    <svelte:fragment slot="title">Execute Function</svelte:fragment>
    <FormList>
        <InputTextarea bind:value={data} id="data" label="Custom data (optional)" />
        <InputChoice type="switchbox" id="json" label="Show example JSON" bind:value={showJson}>
@@ -37,7 +37,7 @@
 </script>

 <Modal bind:show={showRebuild} onSubmit={handleSubmit}>
-    <svelte:fragment slot="header">Retry build</svelte:fragment>
+    <svelte:fragment slot="title">Retry build</svelte:fragment>
    <p>Are you sure you want to retry building this deployment?</p>
    <svelte:fragment slot="footer">
        <Button text on:click={() => (showRebuild = false)}>Cancel</Button>
@@ -37,7 +37,7 @@
    icon="exclamation"
    state="warning"
    headerDivider={false}>
-    <svelte:fragment slot="header">Delete Function</svelte:fragment>
+    <svelte:fragment slot="title">Delete Function</svelte:fragment>
    <p data-private>
        Are you sure you want to delete this function and all associated deployments from your
        project?
@@ -65,7 +65,7 @@
 </script>

 <Modal bind:show onSubmit={handleSubmit} bind:error>
-    <svelte:fragment slot="header">Upload Variables</svelte:fragment>
+    <svelte:fragment slot="title">Upload Variables</svelte:fragment>
    <p>
        Upload multiple variables via a .env file that will be passed to your function at runtime.
    </p>
@@ -39,7 +39,7 @@
    icon="exclamation"
    state="warning"
    headerDivider={false}>
-    <svelte:fragment slot="header">Delete API Key</svelte:fragment>
+    <svelte:fragment slot="title">Delete API Key</svelte:fragment>
    <p>The API Key will be permanently deleted. This action is irreversible.</p>

    <svelte:fragment slot="footer">
@@ -39,7 +39,7 @@
    icon="exclamation"
    state="warning"
    headerDivider={false}>
-    <svelte:fragment slot="header">Delete Platform</svelte:fragment>
+    <svelte:fragment slot="title">Delete Platform</svelte:fragment>
    <p>The Platform will be permanently deleted. This action is irreversible.</p>

    <svelte:fragment slot="footer">
@@ -39,7 +39,7 @@
    icon="exclamation"
    state="warning"
    headerDivider={false}>
-    <svelte:fragment slot="header">Delete Project</svelte:fragment>
+    <svelte:fragment slot="title">Delete Project</svelte:fragment>
    <p>
        <b>This project will be deleted</b>, along with all of its metadata, stats, and other
        resources. <b>This action is irreversible</b>.
@@ -7,7 +7,7 @@
 </script>

 <Modal icon="exclamation" state="warning" bind:show onSubmit={handleDisableAll}>
-    <svelte:fragment slot="header">Disable all services</svelte:fragment>
+    <svelte:fragment slot="title">Disable all services</svelte:fragment>
    <p class="text" data-private>
        Are you sure you want to disable all services? This will disable API requests to your
        project.
@@ -38,7 +38,7 @@
    icon="exclamation"
    state="warning"
    headerDivider={false}>
-    <svelte:fragment slot="header">Delete Domain</svelte:fragment>
+    <svelte:fragment slot="title">Delete Domain</svelte:fragment>
    {#if selectedDomain}
        <p data-private>
            Are you sure you want to delete <b>{selectedDomain.domain}</b> from '{$project.name}'?
@@ -7,7 +7,7 @@
 </script>

 <Modal bind:show onSubmit={handleEnableAll}>
-    <svelte:fragment slot="header">Enable all services</svelte:fragment>
+    <svelte:fragment slot="title">Enable all services</svelte:fragment>
    <p class="text" data-private>All project services will be enabled.</p>
    <svelte:fragment slot="footer">
        <Button text on:click={() => (show = false)}>Cancel</Button>
@@ -44,7 +44,7 @@
 </script>

 <Modal bind:show on:close={() => (migrationId = null)} size="big">
-    <svelte:fragment slot="header">
+    <svelte:fragment slot="title">
        {#if details.status === 'failed'}
            Resolve migration issues
        {:else}
@@ -95,7 +95,7 @@
 </script>

 <Modal bind:show {onSubmit}>
-    <svelte:fragment slot="header">Export to self-hosted instance</svelte:fragment>
+    <svelte:fragment slot="title">Export to self-hosted instance</svelte:fragment>
    <div class="modal-contents">
        <Alert standalone>
            <svelte:fragment slot="title">API key creation</svelte:fragment>
@@ -46,7 +46,7 @@
 </script>

 <Modal bind:show onSubmit={handleTransfer} headerDivider={false}>
-    <svelte:fragment slot="header">Transfer project</svelte:fragment>
+    <svelte:fragment slot="title">Transfer project</svelte:fragment>
    <p>Are you sure you want to transfer <b>{$project.name}</b> to <b>{teamName}</b>?</p>
    <p>
        Members who are not part of the destination organization must be invited to gain access to
@@ -39,7 +39,7 @@
    icon="exclamation"
    state="warning"
    headerDivider={false}>
-    <svelte:fragment slot="header">Delete Webhook</svelte:fragment>
+    <svelte:fragment slot="title">Delete Webhook</svelte:fragment>
    <p data-private>
        Are you sure you want to delete <b>{$webhook.name}</b> from '{$project.name}'?
    </p>
@@ -33,7 +33,7 @@
 </script>

 <Modal bind:show onSubmit={regenerate}>
-    <svelte:fragment slot="header">Regenerate Key</svelte:fragment>
+    <svelte:fragment slot="title">Regenerate Key</svelte:fragment>
    <p class="u-text">
        Are you sure you want to generate a new Signature Key?
        <b>You will not be able to recover your current key.</b>
@@ -49,7 +49,7 @@
 </script>

 <Modal size="big" {error} bind:show={showCreate} onSubmit={create}>
-    <svelte:fragment slot="header">Create File</svelte:fragment>
+    <svelte:fragment slot="title">Create File</svelte:fragment>
    <FormList>
        <div>
            <InputFile
@@ -37,7 +37,7 @@
    icon="exclamation"
    state="warning"
    headerDivider={false}>
-    <svelte:fragment slot="header">Delete Bucket</svelte:fragment>
+    <svelte:fragment slot="title">Delete Bucket</svelte:fragment>
    <p data-private>Are you sure you want to delete <b>{$bucket.name}</b>?</p>
    <svelte:fragment slot="footer">
        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
@@ -38,7 +38,7 @@
    icon="exclamation"
    state="warning"
    headerDivider={false}>
-    <svelte:fragment slot="header">Delete File</svelte:fragment>
+    <svelte:fragment slot="title">Delete File</svelte:fragment>
    <p data-private>Are you sure you want to delete <b>{file.name}</b>?</p>
    <svelte:fragment slot="footer">
        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
@@ -39,7 +39,7 @@
    icon="exclamation"
    state="warning"
    headerDivider={false}>
-    <svelte:fragment slot="header">Delete File</svelte:fragment>
+    <svelte:fragment slot="title">Delete File</svelte:fragment>
    <p data-private>Are you sure you want to delete <b>{$file.name}</b>?</p>
    <svelte:fragment slot="footer">
        <Button text on:click={() => (showDelete = false)}>Cancel</Button>
@@ -46,7 +46,7 @@
 </script>

 <Modal {error} onSubmit={create} size="big" bind:show={showCreate}>
-    <svelte:fragment slot="header">Create Bucket</svelte:fragment>
+    <svelte:fragment slot="title">Create Bucket</svelte:fragment>
    <FormList>
        <InputText
            id="name"