Add "lazy" option to Tab content to improve initial render performance

[MathiasWP]

Describe the bug

When using the Tabs component, the content of a tab that has not been selected will still be mounted. This can cause great performance impact on initial render. There should be a way to set the mounting of the tabs content to "lazy".

Current workaround

Currently we do this to achieve the desired behaviour, but it would be great to have first class support for this in bits-ui <3

<script lang="ts">
	import { Tabs } from 'bits-ui';
	import { getContext, type Snippet } from 'svelte';
	import { type Writable } from 'svelte/store';

	interface Props {
		value: string;
		children?: Snippet;
	}

	const { value, children }: Props = $props();

	/**
	 * Bits-ui renders the tab content even though the current value does not match the tab.
	 * So to increase initial load we check that the current value matches the tab value before rendering the content.
	 */
	const tabsValue = getContext<Writable<string | undefined>>('TabsValue');
</script>

<Tabs.Content class="h-full overflow-y-auto" {value}>
	{#if $tabsValue === value}
		{@render children?.()}
	{/if}
</Tabs.Content>

[Aetherdan]

Would love to see this