Svelte is dropping the slot='after' when a badge in a <ListItem> is inside a compile conditional {#if} {/if}

[buffrat]

Check that this is really a bug

• I confirm

Reproduction link

none needed

Bug description

When building a with in a svelte iterator, when adding a inside a svelte conditional {#if xx} the slot='after' is dropped and the badge appears on the left below the footer.

works:

<List strongIos outlineIos>
	{#each customers as customer (customer.rec_num)}
		<ListItem
			header={customer.pres}
			title={customer.name}
			footer="Contacts:  {customer.contact_count}"
		>
			<Badge colors={{ bg: 'bg-red-600' }} slot="after">{customer.opportunity_count}</Badge>
		</ListItem>
	{/each}
</List>

not working:

<List strongIos outlineIos>
		{#each customers as customer (customer.rec_num)}
			<ListItem
				header={customer.pres}
				title={customer.name}
				footer="Contacts:  {customer.contact_count}">

				{#if customer.opportunity_count > 0}
					<Badge colors={{ bg: 'bg-red-600' }} slot="after">{customer.opportunity_count}</Badge>
				{/if}
			</ListItem>
		{/each}
</List>

Expected Behavior

The expected behavior is to have a badge on the right side of the list item with a number in it

header
Label						(12)
footer

Actual Behavior

header
Label						
footer
(12)

Konsta UI version

"konsta": "^3.1.1"

Platform/Target and Browser Versions

MacOS Chrome and iPhone Simulator

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Konsta UI issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[buffrat]

Did some research, experiments and it appears that svelte:fragments can be used to prevent this behavior which makes sense in the current design/adaptation of the library for Svelte. I will play with the component to see if there is a way to make the Badge implementation behave more Svelte'ish at the root component level. I'll do a PR if I can come up with something.