Help Request: Are nested slots supposed to function?

[JeremyLWright]

Thank you for the wonderful library. It's been a delight to componetize elements of my application.

I have a structure in React I am trying to port to view components

<Card>
    <CardHeader>
        <CardTitle>
             My title
        </CardTitle>
    </CardHeader>
</Card>

I am trying to represent this in ViewComponents I and it works nicely, however when I attempt to make a "kind" of card that nests card, I cannot determine how to fill the CardTitle

Card Preview (Works Nicely)

 def card(self, **kwargs):
    template = Template(
      """
    {% component 'ui.Card' extra_css='w-full max-w-md' as card %}
      {% call card.header as ch %}
        {% call ch.title %}Welcome Back{% endcall %}
        {% call ch.description %}Sign in to manage your networks{% endcall %}
      {% endcall %}
      {% call card.body as cc %}
        <span>Form Data</span>
      {% endcall %}
    {% endcomponent %}
      """ 
    )
    
    return template.render(Context({}))

NetworkCard wraps Card (I'm stuck here)

{% component 'ui.Card' as card %} 
    {% call card.header extra_css="flex flex-col sm:flex-row items-start justify-between space-y-2 sm:space-y-0 pb-2" as ch %}
        <div class="space-y-1">
            <div class="flex flex-col sm:flex-row sm:items-center gap-2">
                {% call ch.title extra_css="text-lg sm:text-xl font-bold" as ct %}
                    {% call ct.title as t%}
                    ### WHAT GOES HERE? How do I get the "top level content" <--- this is where I get stuck
                    {% endcall %}
                {% endcall %}
                {% component 'ui.Badge' extra_css='bg-green-100 text-green-800' %}
                    {{ self.status.value }}
                    Badge
                {% endcomponent %}
            </div>
            {% call ch.description %}
                {{card.forwarding_address}}
            {% endcall %}
        </div>
    {% endcall %}

def network_card(self, **kwargs):
    template = Template(
      """
      {% component "NetworkCard" forwarding_address='addr' invited_users='6' destination_address='addr2' as nc %}
        {% call nc.card as card %}
          {% call card.header as ch %}
            {% call ch.title as ct%} Founders {% endcall %} #<---- this text gets lost
            {% call ch.description %} Description {% endcall %}
          {% endcall %} {# header #}
          {% call card.body %}
          {% endcall %} {# body #}
          {% endcall %} {# card #}
        {% call nc.status %}
        In Progress
        {% endcall %}

      {% endcomponent %}
      """ 
    )
    
    return template.render(Context({}))

Am I approaching my component design incorrectly?

[michael-yin]

@JeremyLWright

Could you please create an example project and paste the link here? So I can help check with more details.

Thx