I'm building a customizable and flex menu component for Svelte Kit. It should have the following properties:

• it can hold a variable items count : a title, a form with arbitrary controls, an optional notification area, and a list of Call-To-Action buttons;

• it must wrap all this subsequent items in ...

• it should abstract item components importation

• it should simple to use

Basically, something using slots and fragment like that :

<!-- $lib/GameMenu.svelte -->
<script lang="ts">
    // abstraction of importing calls here...

    import Heading from '$lib/game-menu/Heading.svelte'
    import Norice from '$lib/game-menu/Notice.svelte'
    import Button from '$lib/game-menu/Button.svelte'
    // and so forth...


</script>
            
<div class="game-menu">
    
</div>

To invoke it an another templare, we just do this:

<!-- src/routes/index.svelte -->
<script lang="ts">
    import GameMenu from '$lib/GameMenu.svelte'
</script>

<GameMenu>
    <slot name="title">
        An awesome title...
    </slot>

    <slot name="notice">
        <p> How to add a varialbe numbver of buttons at the bottom of the menu ?</p>
        <p> title, menu and buttons each needs to be wrapped inside their own div.item ? </p>
    </slot>

    <svelte:frgement slot="buttons">
         <!-- each button should be wrapped in a div.item -->
         <button class="buttons">Call To Action 1</button>
         <button class="buttons">Call To Action 2</button>
         <button class="buttons">Call To Action 3</button>
         <button class="buttons">Call To Action 4</button>
    </svelte:fragment>
</GameMenu>

How to make that stuff ?

Regards.

==== EDIT =====

My first thought was to write something like:

<!-- $lib/GameMenu.svelte -->
...
{#each Object.keys($$slots) as key }
    <div class="item">
        {#if key === "title" }
            ....
        {/if}
        ...
    </div>
{/each}

...but it not ensures the ordering of the keys...

Another solution was to define keys a priori with :

let keys = ['title', 'form', 'notice', 'buttons']

in the script tag of GameMenu.... but how about considering multiple buttons ?

My first goals were to automate the flex menu creation aspects, and, removing repetitive calls to import to sub-components, when creating multiple, wizard-like, series of GameMenu pages.

O