{% load ui_classes %}

<c-vars as="div"
        layout="regions"
        gap="0"
        surface="none"
        border="none"
        radius="none"
        shadow="none"
        width="auto"
        height="auto"
        class="" />
{% ui_class "ui.frame" "root" layout=layout gap=gap surface=surface border=border radius=radius shadow=shadow width=width height=height class=class as root_class %}
<{{ as }} data-ui-frame
data-layout="{{ layout }}"
data-gap="{{ gap }}"
data-surface="{{ surface }}"
data-border="{{ border }}"
data-radius="{{ radius }}"
data-shadow="{{ shadow }}"
data-width="{{ width }}"
data-height="{{ height }}"
class="{{ root_class }}"
{{ attrs }}>
{{ slot }}
</{{ as }}>