Banner does not adjust its height to dynamic content

[pboguslawski]

Describe the bug

Banner does not adjust its height to dynamic content.

To Reproduce 1.Create test page as below:

<script lang="ts">
    import Banner, { Label } from '@smui/banner';
    import TopAppBar, { Row, Section, Title } from '@smui/top-app-bar';
    import Button from '@smui/button';

    let message: string | undefined = undefined;
    $: open = message !== undefined;
</script>

<div class="top-app-bar-container">
    <TopAppBar variant="static">
        <Row>
            <Section>
                <Title>Top App Bar</Title>
            </Section>
        </Row>
    </TopAppBar>
    <Banner bind:open>
        <Label slot="label">{@html message}</Label>
        <svelte:fragment slot="actions">
            <Button>OK</Button>
        </svelte:fragment>
    </Banner>
    <br />
    <Button
        on:click={() => {
            message =
                'This is example multiline message.<br/>This is example multiline message.<br/>This is example multiline message.';
        }}
    >
        <Label>Open Banner</Label>
    </Button>
    <Button
        on:click={() => {
            message = 'This is example single line message.';
        }}
    >
        <Label>Change Banner</Label>
    </Button>
</div>

2. Click on Open Banner - banner is opened with 3 lines but without height adjusted (1 line height so content overflows over page content).
3. Resize browser window - now banner adjusts its height to content (3 lines).
4. Press Change Banner - now content changes to 1 line but banner stays 3 lines tall.
5. Resize browser window - now banner adjusts its height to content (1 line).

Expected behavior Banner should automatically adjust its height to content (as after browser window resize).

Additional context (Ad 2): Workaround that seems to work for opening banner is to render it conditionally like this:

{#if open}
  <Banner bind:open>
  [...]
  </Banner>
{/if}